@ibiz-template/vue3-components 0.7.41-alpha.2 → 0.7.41-alpha.21

package/es/common/kanben-setting/kanben-setting.d.ts

@@ -0,0 +1,42 @@
+import { PropType } from 'vue';
+import { KanbanController } from '@ibiz-template/runtime';
+import './kanben-setting.scss';
+export declare const IBizKanbanSetting: import("vue").DefineComponent<{
+    controller: {
+        type: PropType<KanbanController>;
+        required: true;
+    };
+    buttonStyle: {
+        type: PropType<{
+            circle: boolean;
+            type: string;
+        }>;
+        default: () => {
+            circle: boolean;
+            type: string;
+        };
+    };
+}, {
+    ns: import("@ibiz-template/core").Namespace;
+    groups: import("vue").ComputedRef<import("@ibiz-template/runtime").IKanbanGroupState[]>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    controller: {
+        type: PropType<KanbanController>;
+        required: true;
+    };
+    buttonStyle: {
+        type: PropType<{
+            circle: boolean;
+            type: string;
+        }>;
+        default: () => {
+            circle: boolean;
+            type: string;
+        };
+    };
+}>>, {
+    buttonStyle: {
+        circle: boolean;
+        type: string;
+    };
+}, {}>;

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

@@ -0,0 +1,65 @@
+import { computed, resolveComponent, createVNode, defineComponent } from 'vue';
+import { useNamespace } from '@ibiz-template/vue3-util';
+import './kanben-setting.css';
+
+"use strict";
+const IBizKanbanSetting = /* @__PURE__ */ defineComponent({
+  name: "IBizKanbanSetting",
+  props: {
+    controller: {
+      type: Object,
+      required: true
+    },
+    buttonStyle: {
+      type: Object,
+      default: () => ({
+        circle: false,
+        type: "info"
+      })
+    }
+  },
+  setup(props) {
+    const ns = useNamespace("kanban-setting");
+    const groups = computed(() => {
+      return props.controller.state.groups;
+    });
+    return {
+      ns,
+      groups
+    };
+  },
+  render() {
+    return createVNode("div", {
+      "class": this.ns.b()
+    }, [createVNode(resolveComponent("el-popover"), {
+      "trigger": "click",
+      "placement": "bottom",
+      "popper-class": this.ns.e("popover")
+    }, {
+      reference: () => {
+        return createVNode(resolveComponent("el-button"), this.buttonStyle, {
+          default: () => [createVNode("ion-icon", {
+            "name": "options-outline",
+            "title": ibiz.i18n.t("component.kanbanSetting.hideGroup")
+          }, null)]
+        });
+      },
+      default: () => {
+        return createVNode("div", {
+          "class": this.ns.em("popover", "content")
+        }, [this.groups.map((group) => {
+          return createVNode(resolveComponent("el-checkbox"), {
+            "size": "small",
+            "label": group.caption,
+            "model-value": !group.hidden,
+            "onChange": (val) => {
+              group.hidden = !val;
+            }
+          }, null);
+        })]);
+      }
+    })]);
+  }
+});
+
+export { IBizKanbanSetting };

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

@@ -1,5 +1,5 @@
 import { PropType } from 'vue';
-import { IMapData } from '@ibiz-template/runtime';
+import { IMapData, MapController } from '@ibiz-template/runtime';
 import './map-chart.scss';
 export declare const IBizMapChart: import("vue").DefineComponent<{
     areaData: {
@@ -52,6 +52,10 @@ export declare const IBizMapChart: import("vue").DefineComponent<{
         }>>;
         default: () => {};
     };
+    controller: {
+        type: typeof MapController;
+        required: true;
+    };
 }, {
     ns: import("@ibiz-template/core").Namespace;
     chartRef: import("vue").Ref<any>;
@@ -108,6 +112,10 @@ export declare const IBizMapChart: import("vue").DefineComponent<{
         }>>;
         default: () => {};
     };
+    controller: {
+        type: typeof MapController;
+        required: true;
+    };
 }>>, {
     options: Partial<{
         strAreaCode: boolean;

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

@@ -1,6 +1,7 @@
-import { computed, onMounted, toRefs, watch, createVNode, defineComponent } from 'vue';
+import { computed, onMounted, createVNode, defineComponent } from 'vue';
 import { isNil, mergeDeepWithKey } from 'ramda';
 import { useNamespace } from '@ibiz-template/vue3-util';
+import { MapController } from '@ibiz-template/runtime';
 import { defaultOpts } from './map-chart.util.mjs';
 import { useMapManager } from './map-manager.mjs';
 import './map-chart.css';
@@ -18,6 +19,10 @@ const IBizMapChart = /* @__PURE__ */ defineComponent({
     options: {
       type: Object,
       default: () => ({})
+    },
+    controller: {
+      type: MapController,
+      required: true
     }
   },
   setup(props, {
@@ -42,9 +47,8 @@ const IBizMapChart = /* @__PURE__ */ defineComponent({
       historyNames,
       changeMap,
       getCityName,
-      goBack,
-      refresh
-    } = useMapManager(options, (mapName) => {
+      goBack
+    } = useMapManager(props.controller, options, (mapName) => {
       const {
         visualMap,
         pointSymbol,
@@ -52,8 +56,8 @@ const IBizMapChart = /* @__PURE__ */ defineComponent({
         hoverAreaColor,
         areaBorderColor
       } = options.value;
-      const areaData2 = props.areaData || [];
-      const pointData2 = props.pointData || [];
+      const areaData = props.areaData || [];
+      const pointData = props.pointData || [];
       const result = {
         geo: {
           map: mapName
@@ -123,7 +127,7 @@ const IBizMapChart = /* @__PURE__ */ defineComponent({
             select: {
               disabled: true
             },
-            data: areaData2.map((item) => ({
+            data: areaData.map((item) => ({
               name: "".concat(item._areaCode),
               value: item._value,
               _id: item._id
@@ -159,7 +163,7 @@ const IBizMapChart = /* @__PURE__ */ defineComponent({
                 return find == null ? void 0 : find._tooltip;
               }
             },
-            data: pointData2.map((item) => {
+            data: pointData.map((item) => {
               return {
                 _id: item._id,
                 symbol: item._symbol ? "image://".concat(item._symbol) : void 0,
@@ -174,9 +178,6 @@ const IBizMapChart = /* @__PURE__ */ defineComponent({
       return result;
     }, (name, e) => {
       switch (name) {
-        case "mapChange":
-          emit("mapChange", e);
-          break;
         case "pointClick":
           emit("pointClick", findData(e._id, "point"));
           break;
@@ -190,13 +191,6 @@ const IBizMapChart = /* @__PURE__ */ defineComponent({
     onMounted(() => {
       changeMap(options.value.defaultAreaCode, true);
     });
-    const {
-      areaData,
-      pointData
-    } = toRefs(props);
-    watch([areaData, pointData], () => {
-      refresh();
-    });
     return {
       ns,
       chartRef,

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

@@ -1,4 +1,5 @@
 import { ComputedRef } from 'vue';
+import { MapController } from '@ibiz-template/runtime';
 import { MapOptions } from './map-chart.util';
 /**
  * 使用echarts地图
@@ -9,7 +10,7 @@ import { MapOptions } from './map-chart.util';
  * @param {(name: string, e: IData) => void} emit 事件回调
  * @return {*}
  */
-export declare function useMapManager(opts: ComputedRef<MapOptions>, calcEchartsOpts: (name: string) => IData, emit: (name: string, e: IData) => void): {
+export declare function useMapManager(controller: MapController, opts: ComputedRef<MapOptions>, calcEchartsOpts: (name: string) => IData, emit: (name: string, e: IData) => void): {
     chartRef: import("vue").Ref<any>;
     historyNames: import("vue").Ref<string[]>;
     currentName: import("vue").Ref<string>;

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

@@ -3,7 +3,7 @@ import { ref, onMounted, onUnmounted } from 'vue';
 import { getJsonUrl } from './map-json.mjs';
 
 "use strict";
-function useMapManager(opts, calcEchartsOpts, emit) {
+function useMapManager(controller, opts, calcEchartsOpts, emit) {
   const mapInfos = /* @__PURE__ */ new Map();
   const currentName = ref("");
   const historyNames = ref([]);
@@ -44,9 +44,8 @@ function useMapManager(opts, calcEchartsOpts, emit) {
   };
   const changeMap = async (name, isInit = false) => {
     if (!isInit) {
-      emit("mapChange", {
-        areaCode: opts.value.strAreaCode ? "".concat(name) : Number(name)
-      });
+      const areaCode = opts.value.strAreaCode ? "".concat(name) : Number(name);
+      await controller.onMapChange(areaCode);
     }
     const strName = "".concat(name);
     if (!mapInfos.has(strName)) {

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

@@ -1 +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)}
+.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__fullscreen{position:absolute;top:var(--ibiz-spacing-tight);right:var(--ibiz-spacing-tight);z-index:9}.ibiz-map-chart-user__popper{padding:var(--ibiz-spacing-tight);white-space:pre}

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

@@ -49,6 +49,8 @@ export declare const IBizMapChartUser: import("vue").DefineComponent<{
             pointSymbol: string;
             jsonBaseUrl: string;
             defaultAreaCode: string | number;
+            bottom: number;
+            top: number;
         }>>;
         default: () => {};
     };
@@ -58,9 +60,13 @@ export declare const IBizMapChartUser: import("vue").DefineComponent<{
     };
 }, {
     ns: import("@ibiz-template/core").Namespace;
+    c: MapController;
+    mapRef: import("vue").Ref<any>;
     chartRef: import("vue").Ref<any>;
     historyNames: import("vue").Ref<string[]>;
-    goBack: () => Promise<void>;
+    isFull: import("vue").Ref<boolean>;
+    onBack: () => Promise<void>;
+    toggleFullScreen: () => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     areaData: {
         type: {
@@ -109,6 +115,8 @@ export declare const IBizMapChartUser: import("vue").DefineComponent<{
             pointSymbol: string;
             jsonBaseUrl: string;
             defaultAreaCode: string | number;
+            bottom: number;
+            top: number;
         }>>;
         default: () => {};
     };
@@ -131,6 +139,8 @@ export declare const IBizMapChartUser: import("vue").DefineComponent<{
         pointSymbol: string;
         jsonBaseUrl: string;
         defaultAreaCode: string | number;
+        bottom: number;
+        top: number;
     }>;
 }, {}>;
 export default IBizMapChartUser;

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

@@ -1,7 +1,9 @@
-import { computed, onMounted, createVNode, defineComponent } from 'vue';
+import { ref, computed, onMounted, onBeforeUnmount, resolveComponent, createVNode, defineComponent } from 'vue';
 import { mergeDeepLeft, isNil, mergeDeepWithKey } from 'ramda';
 import { useNamespace } from '@ibiz-template/vue3-util';
-import { MapController } from '@ibiz-template/runtime';
+import { MapController, getAreaLevelByCode } from '@ibiz-template/runtime';
+import { NOOP, listenJSEvent } from '@ibiz-template/core';
+import { toNumber } from 'lodash-es';
 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';
@@ -29,6 +31,8 @@ const IBizMapChartUser = /* @__PURE__ */ defineComponent({
     const ns = useNamespace("map-chart-user");
     const c = props.controller;
     let option = defaultOpts;
+    const mapRef = ref();
+    const isFull = ref(false);
     if (c.controlParams.defaultopts) {
       const data = JSON.parse(c.controlParams.defaultopts);
       option = mergeDeepLeft(data, option);
@@ -38,9 +42,12 @@ const IBizMapChartUser = /* @__PURE__ */ defineComponent({
         return isNil(z) ? x : z;
       }, option, props.options);
     });
+    let cleanup = NOOP;
     const {
       chartRef,
       historyNames,
+      processing,
+      areaLevelMap,
       changeMap,
       getCityInfo,
       goBack
@@ -54,13 +61,21 @@ const IBizMapChartUser = /* @__PURE__ */ defineComponent({
         ...getPointStaticOption(options.value),
         ...getPointOption(pointData, areaData)
       };
+      const {
+        top,
+        bottom
+      } = options.value;
       const areaOption = {
+        top,
+        bottom,
         ...getAreaStaticOption(options.value),
         ...getAreaOption(mapName, pointData, areaData, cityInfo)
       };
       const result = {
         geo: {
-          map: mapName
+          map: mapName,
+          top,
+          bottom
         },
         tooltip,
         visualMap,
@@ -77,25 +92,87 @@ const IBizMapChartUser = /* @__PURE__ */ defineComponent({
       const name = options.value.defaultAreaCode;
       const areaCode = c.state.strAreaCode ? "".concat(name) : Number(name);
       c.state.areaCode = areaCode;
+      c.state.areaLevel = getAreaLevelByCode(areaCode.toString());
       changeMap(name, areaCode, true);
+      c.evt.on("onDrillDown", async (args) => {
+        if (!processing.value) {
+          const {
+            data
+          } = args;
+          const code = data.areaCode;
+          const curAreaCode = c.state.strAreaCode ? "".concat(code) : Number(code);
+          const areaLevel = areaLevelMap.get(toNumber(curAreaCode)) || "";
+          c.state.areaCode = curAreaCode;
+          c.state.areaLevel = areaLevel;
+          await changeMap(code, code);
+        }
+      });
+      c.evt.on("onBackClick", () => {
+        if (!processing.value) {
+          goBack();
+        }
+      });
+      cleanup = listenJSEvent(window, "resize", () => {
+        if (isFull.value) {
+          isFull.value = ibiz.fullscreenUtil.isFullScreen;
+        }
+      });
     });
+    onBeforeUnmount(() => {
+      if (cleanup !== NOOP) {
+        cleanup();
+      }
+    });
+    const onBack = async () => {
+      processing.value = true;
+      await c.evt.emit("onBackClick", void 0);
+      goBack();
+      processing.value = false;
+    };
+    const toggleFullScreen = () => {
+      if (mapRef.value) {
+        if (isFull.value) {
+          ibiz.fullscreenUtil.closeElementFullscreen();
+        } else {
+          ibiz.fullscreenUtil.openElementFullscreen(mapRef.value);
+        }
+        isFull.value = !isFull.value;
+      }
+    };
     return {
       ns,
+      c,
+      mapRef,
       chartRef,
       historyNames,
-      goBack
+      isFull,
+      onBack,
+      toggleFullScreen
     };
   },
   render() {
+    const {
+      enabledFullScreen
+    } = this.c.state;
     return createVNode("div", {
-      "class": this.ns.b()
-    }, [createVNode("div", {
+      "class": this.ns.b(),
+      "ref": "mapRef"
+    }, [enabledFullScreen ? createVNode(resolveComponent("el-button"), {
+      "type": "info",
+      "class": this.ns.e("fullscreen"),
+      "onClick": this.toggleFullScreen,
+      "title": this.isFull ? ibiz.i18n.t("app.cancelFullscreen") : ibiz.i18n.t("app.fullscreen")
+    }, {
+      default: () => [createVNode("ion-icon", {
+        "name": this.isFull ? "contract-outline" : "expand-outline"
+      }, null)]
+    }) : null, createVNode("div", {
       "class": this.ns.e("chart"),
       "ref": "chartRef"
     }, null), this.historyNames.length > 1 && createVNode("div", {
       "class": this.ns.e("goback"),
       "onClick": () => {
-        this.goBack();
+        this.onBack();
       }
     }, [ibiz.i18n.t("app.return")])]);
   }

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

@@ -27,6 +27,8 @@ export declare const defaultOpts: {
     jsonBaseUrl: string;
     /** 默认打开的区域编码 */
     defaultAreaCode: string | number;
+    bottom: number;
+    top: number;
 };
 export type MapOptions = typeof defaultOpts;
 export declare const findData: (id: string, type: 'area' | 'point', pointData?: IData[], areaData?: IData[]) => IData | undefined;

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

@@ -36,7 +36,30 @@ const defaultOpts = {
   /** 地图json数据基础路径 */
   jsonBaseUrl: "".concat(ibiz.env.assetsUrl, "/json/map"),
   /** 默认打开的区域编码 */
-  defaultAreaCode: 1e5
+  defaultAreaCode: 1e5,
+  // 距离底部距离
+  bottom: 20,
+  // 距离顶部距离
+  top: 20
+};
+const getItemStyle = (item) => {
+  const itemStyle = [];
+  if (item._color) {
+    itemStyle.push("color:".concat(item._color));
+  }
+  if (item._bgcolor) {
+    itemStyle.push("background:".concat(item._bgcolor));
+  }
+  if (item._borderColor) {
+    itemStyle.push("border-color:".concat(item._borderColor));
+  }
+  if (item._borderWidth) {
+    itemStyle.push("border-width:".concat(item._borderWidth, "px"));
+  }
+  if (item._borderWidth && item._borderColor) {
+    itemStyle.push("border-style:solid");
+  }
+  return itemStyle.join(";");
 };
 const findData = (id, type, pointData = [], areaData = []) => {
   if (type === "area") {
@@ -98,7 +121,21 @@ const getPointOption = (pointData, areaData) => {
         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>");
+      if (!find) {
+        return;
+      }
+      const { _deData: data } = find;
+      let text = data.srfmajortext;
+      if (find._value) {
+        text = "".concat(data.srfmajortext, ": ").concat(find._value);
+      }
+      if (find._tooltip) {
+        text = find._tooltip;
+      }
+      const style = getItemStyle(find);
+      return '<div style="'.concat(style, '" class="').concat(find._className, " ").concat(ns.e(
+        "popper"
+      ), '">').concat(text, "</div>");
     },
     padding: 0
   };
@@ -157,7 +194,21 @@ const getAreaOption = (mapName, pointData, areaData, cityInfo = []) => {
         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>");
+      if (!find || !find._tooltip && !find._value) {
+        return;
+      }
+      const { _deData: data } = find;
+      let text = data.srfmajortext;
+      if (find._value) {
+        text = "".concat(data.srfmajortext, ": ").concat(find._value);
+      }
+      if (find._tooltip) {
+        text = find._tooltip;
+      }
+      const style = getItemStyle(find);
+      return '<div style="'.concat(style, '" class="').concat(find._className, " ").concat(ns.e(
+        "popper"
+      ), '">').concat(text, "</div>");
     },
     padding: 0
   };

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

@@ -14,6 +14,8 @@ export declare function useMapManager(controller: MapController, opts: ComputedR
     chartRef: import("vue").Ref<any>;
     historyNames: import("vue").Ref<string[]>;
     currentName: import("vue").Ref<string>;
+    processing: import("vue").Ref<boolean>;
+    areaLevelMap: Map<number, string>;
     changeMap: (name: string | number, areaCode: string | number, isInit?: boolean) => Promise<void>;
     getCityInfo: () => import("@ibiz-template/core").IApiData | undefined;
     goBack: () => Promise<void>;

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

@@ -1,6 +1,7 @@
 import { registerMap, init } from 'echarts';
 import { ref, onMounted, onUnmounted } from 'vue';
 import { listenJSEvent } from '@ibiz-template/core';
+import { toNumber } from 'lodash-es';
 import { getJsonUrl, findData } from './map-chart-user.util.mjs';
 
 "use strict";
@@ -8,6 +9,8 @@ function useMapManager(controller, opts, calcEchartsOpts) {
   const mapInfos = /* @__PURE__ */ new Map();
   const currentName = ref("");
   const historyNames = ref([]);
+  const areaLevelMap = /* @__PURE__ */ new Map();
+  const processing = ref(false);
   let chart;
   const chartRef = ref();
   let resizeObserver;
@@ -17,8 +20,9 @@ function useMapManager(controller, opts, calcEchartsOpts) {
       noChild: json.features.length === 1
     };
     json.features.forEach((item) => {
-      const { adcode, name } = item.properties;
+      const { adcode, name, level } = item.properties;
       info.cityNames[adcode] = name;
+      areaLevelMap.set(adcode, level);
     });
     return info;
   };
@@ -46,15 +50,18 @@ function useMapManager(controller, opts, calcEchartsOpts) {
     }
   };
   const changeMap = async (name, areaCode, isInit = false) => {
-    if (!isInit) {
-      controller.onMapChange(areaCode);
-    }
     const strName = "".concat(name);
     if (!mapInfos.has(strName)) {
       await registerMap$1(strName);
     }
-    controller.state.mapInfo = getCityInfo();
+    if (!isInit) {
+      await controller.onMapChange(areaCode);
+    } else {
+      const areaLevel = areaLevelMap.get(toNumber(areaCode)) || "";
+      controller.state.areaLevel = areaLevel;
+    }
     currentName.value = strName;
+    controller.state.mapInfo = getCityInfo();
     historyNames.value.push(strName);
     refresh();
   };
@@ -63,8 +70,9 @@ function useMapManager(controller, opts, calcEchartsOpts) {
       historyNames.value.pop();
       const name = historyNames.value.pop();
       const areaCode = opts.value.strAreaCode ? "".concat(name) : Number(name);
+      const areaLevel = areaLevelMap.get(toNumber(areaCode)) || "";
       controller.state.areaCode = areaCode;
-      await controller.evt.emit("onBackClick", void 0);
+      controller.state.areaLevel = areaLevel;
       changeMap(name, areaCode);
     }
   };
@@ -88,27 +96,53 @@ function useMapManager(controller, opts, calcEchartsOpts) {
           if (!params.data) {
             return;
           }
+          processing.value = true;
           const { pointData, areaData } = controller.state;
           const data = findData(params.data._id, "point", pointData, areaData);
           if (data) {
             controller.onPointClick(data);
           }
+          processing.value = false;
           return;
         }
         if (params.seriesType === "map") {
+          processing.value = true;
           const areaCode = opts.value.strAreaCode ? "".concat(params.name) : Number(params.name);
-          controller.state.areaCode = areaCode;
-          const { pointData, areaData, enabledDrillDown } = controller.state;
+          const areaLevel = areaLevelMap.get(toNumber(areaCode)) || "";
+          const { pointData, areaData, enabledDrillDown, mdctrlActiveMode } = controller.state;
           if (params.data) {
             const data = findData(params.data._id, "area", pointData, areaData);
             if (data) {
-              controller.onAreaClick(data);
+              controller.onAreaClick(data, areaCode, areaLevel);
             }
           }
-          if (params.name !== currentName.value && enabledDrillDown) {
+          if (params.name !== currentName.value && enabledDrillDown && mdctrlActiveMode !== 2) {
+            if (toNumber(areaCode) > toNumber(controller.state.areaCode)) {
+              controller.evt.emit("onDrillDown", { data: { areaCode } });
+            }
+            controller.state.areaCode = areaCode;
+            controller.state.areaLevel = areaLevel || "";
             changeMap(params.name, areaCode);
           }
+          processing.value = false;
+        }
+      }
+    });
+    chart.on("dblclick", (params) => {
+      const { enabledDrillDown, mdctrlActiveMode } = controller.state;
+      if (params.componentType === "series" && params.seriesType === "map" && mdctrlActiveMode === 2 && enabledDrillDown) {
+        processing.value = true;
+        const areaCode = opts.value.strAreaCode ? "".concat(params.name) : Number(params.name);
+        const areaLevel = areaLevelMap.get(toNumber(areaCode)) || "";
+        if (toNumber(areaCode) > toNumber(controller.state.areaCode)) {
+          controller.evt.emit("onDrillDown", { data: { areaCode } });
+        }
+        controller.state.areaCode = areaCode;
+        controller.state.areaLevel = areaLevel;
+        if (params.name !== currentName.value) {
+          changeMap(params.name, areaCode);
         }
+        processing.value = false;
       }
     });
     chart.on("mouseover", function(data) {
@@ -145,6 +179,8 @@ function useMapManager(controller, opts, calcEchartsOpts) {
     chartRef,
     historyNames,
     currentName,
+    processing,
+    areaLevelMap,
     changeMap,
     getCityInfo,
     goBack,