@ibiz-template/vue3-components 0.2.6 → 0.2.8

package/dist/map-chart-yT41jdRg.js

@@ -0,0 +1,2 @@
+System.register(["vue","ramda","@ibiz-template/vue3-util","echarts"],function(O){"use strict";var y,x,k,S,N,z,v,w,I,T,B,R;return{setters:[function(o){y=o.ref,x=o.onMounted,k=o.defineComponent,S=o.computed,N=o.toRefs,z=o.watch,v=o.createVNode,w=o.createTextVNode},function(o){I=o.mergeDeepRight},function(o){T=o.useNamespace},function(o){B=o.init,R=o.registerMap}],execute:function(){const j={strMapCode:!1,visualMap:{text:["\u9AD8","\u4F4E"],min:0,max:100,rangeColor:["#90d1e7","#fff600","#ff5200"]},pointSymbol:"pin",jsonBaseUrl:"/assets/json/map/jiangsu"};async function $(n,u){return(await ibiz.net.axios({url:`${n}/${u}.json`})).data}function A(n,u,h){const d=new Map,r=y(""),f=y([]);let i;const b=y(),D=e=>{const t={cityNames:{},noChild:e.features.length===1};return e.features.forEach(s=>{const{adcode:p,name:C}=s.properties;t.cityNames[p]=C}),t},M=async e=>{if(d.has(e))return;const t=await $(n.value.jsonBaseUrl,e);d.set(e,D(t)),R(e,t)},_=e=>{const t=d.get(r.value);if(t)return t.cityNames[e]},m=()=>{if(r.value){const e=u(r.value);i.setOption(e),i.resize()}},g=async(e,t=!1)=>{t||h("mapChange",{areaCode:n.value.strMapCode?`${e}`:Number(e)}),d.has(e)||await M(e),r.value=e,f.value.push(e),m()},c=()=>{if(f.value.length>1){f.value.pop();const e=f.value.pop();g(e)}};return x(()=>{i=B(b.value),window.addEventListener("resize",()=>{i?.resize()}),i.on("click",e=>{if(e.componentType==="series"){if(e.seriesType==="scatter"){h("pointClick",e.data);return}if(e.seriesType==="map"&&(e.data&&h("areaClick",e.data),e.name!==r.value)){debugger;g(e.name)}}}),i.on("mouseover",function(e){if(e.componentType==="series"&&e.seriesType==="scatter"){const t=e.dataIndex,s=i.getOption(),p=s.series[e.seriesIndex].data,C=s.series[e.seriesIndex].symbolSize;p[t].symbolSize=C+10,i.setOption(s)}}),i.on("mouseout",function(e){if(e.componentType==="series"&&e.seriesType==="scatter"){const t=e.dataIndex,s=i.getOption(),p=s.series[e.seriesIndex].data;delete p[t].symbolSize,i.setOption(s)}})}),{chartRef:b,historyNames:f,currentName:r,changeMap:g,getCityName:_,goBack:c,refresh:m}}const F=k({name:"IBizMapChart",props:{areaData:{type:Array},pointData:{type:Array},options:{type:Object,default:()=>({})},defaultAreaCode:{type:String,required:!0,default:"320000"}},setup(n,{emit:u}){const h=T("map-chart"),d=S(()=>I(j,n.options)),r=(c,e)=>{if(e==="area"&&n.areaData)return n.areaData.find(t=>t._id===c);if(e==="point"&&n.pointData)return n.pointData.find(t=>t._id===c)},{chartRef:f,historyNames:i,changeMap:b,getCityName:D,goBack:M,refresh:_}=A(d,c=>{const{visualMap:e,pointSymbol:t}=d.value,s=n.areaData||[],p=n.pointData||[];return{geo:{map:c},tooltip:{trigger:"item",textStyle:{color:"#fff",fontSize:12},backgroundColor:"rgba(0, 0, 0, 0.47)",borderWidth:0,extraCssText:"backdrop-filter: blur(3px);"},visualMap:{min:e.min,max:e.max,text:e.text,realtime:!1,hoverLink:!1,inRange:{color:e.rangeColor}},series:[{type:"map",map:c,nameProperty:"adcodeStr",itemStyle:{borderColor:"#FFF",borderWidth:2},tooltip:{formatter:a=>{if(!a.data)return;const l=r(a.data._id,"area");if(l)return l._tooltip}},label:{show:!0,color:"#000000",fontSize:14,formatter:a=>D(a.name)},select:{disabled:!0},data:s.map(a=>({name:`${a._areaCode}`,value:a._value,_id:a._id}))},{type:"scatter",coordinateSystem:"geo",symbol:t,symbolSize:20,visualMap:!1,itemStyle:{color:"#FF1D00"},label:{show:!0,color:"#000000",fontSize:14,textShadowBlur:0,formatter:a=>{const l=r(a.data._id,"point");return l?._text},position:"left",offset:[10,-15]},tooltip:{formatter:a=>{const l=r(a.data._id,"point");return l?._tooltip}},data:p.map(a=>({_id:a._id,symbol:a._symbol?`image://${a._symbol}`:void 0,value:[Number(a._longitude),Number(a._latitude)],visualMap:!1}))}]}},(c,e)=>{switch(c){case"mapChange":u("mapChange",e);break;case"pointClick":u("pointClick",{data:r(e._id,"point")});break;case"areaClick":u("areaClick",{data:r(e._id,"area")});break}});x(()=>{b(n.defaultAreaCode,!0)});const{areaData:m,pointData:g}=N(n);return z([m,g],()=>{_()}),{ns:h,chartRef:f,historyNames:i,goBack:M}},render(){return v("div",{class:this.ns.b()},[v("div",{class:this.ns.e("chart"),ref:"chartRef"},null),this.historyNames.length>1&&v("div",{class:this.ns.e("goback"),onClick:()=>{this.goBack()}},[w("\u8FD4\u56DE")])])}});O({IBizMapChart:F,default:F})}}});
+//# sourceMappingURL=map-chart-yT41jdRg.js.map

package/dist/map-chart-yT41jdRg.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"map-chart-yT41jdRg.js","sources":["../src/common/map-chart/map-chart.util.ts","../src/common/map-chart/map-json.ts","../src/common/map-chart/map-manager.ts","../src/common/map-chart/map-chart.tsx"],"sourcesContent":["/** 渐变颜色集合 */\nexport const GradientColors = ['#90d1e7', '#fff600', '#ff5200'];\n\nexport const defaultOpts = {\n  /** true地图code标识使用字符串，false使用数字 */\n  strMapCode: false,\n  /** 热力图配置 */\n  visualMap: {\n    /** 两端的文本，如 ['高', '低'] */\n    text: ['高', '低'],\n    /** 底部代表的值 */\n    min: 0,\n    /** 顶部代表的值 */\n    max: 100,\n    /** 热力图渐变颜色数组 */\n    rangeColor: GradientColors,\n  },\n  pointSymbol: 'pin',\n  jsonBaseUrl: '/assets/json/map/jiangsu',\n};\n\nexport type MapOptions = typeof defaultOpts;\n","export async function getJsonUrl(\n  baseUrl: string,\n  code: string | number,\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n): Promise<any> {\n  const res = await ibiz.net.axios({\n    url: `${baseUrl}/${code}.json`,\n  });\n  return res.data;\n}\n","/* eslint-disable no-unused-vars */\nimport { registerMap as register, EChartsType, init } from 'echarts';\nimport { ComputedRef, onMounted, ref } from 'vue';\nimport { MapOptions } from './map-chart.util';\nimport { getJsonUrl } from './map-json';\n\n/**\n * 使用echarts地图\n * @author lxm\n * @date 2023-04-06 12:00:07\n * @export\n * @param {(name: string) => IData} calcEchartsOpts 计算echarts的Options\n * @param {(name: string, e: IData) => void} emit 事件回调\n * @return {*}\n */\n// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types\nexport function useMapManager(\n  opts: ComputedRef<MapOptions>,\n  calcEchartsOpts: (name: string) => IData,\n  emit: (name: string, e: IData) => void,\n) {\n  const mapInfos = new Map<string, IData>();\n\n  const currentName = ref('');\n\n  const historyNames = ref<string[]>([]);\n\n  let chart: EChartsType;\n  const chartRef = ref();\n\n  const parseJson = (json: IData) => {\n    const info: IData = {\n      cityNames: {},\n      noChild: json.features.length === 1,\n    };\n    json.features.forEach((item: IData) => {\n      const { adcode, name } = item.properties;\n      info.cityNames[adcode] = name;\n    });\n    return info;\n  };\n\n  const registerMap = async (name: string) => {\n    if (mapInfos.has(name)) {\n      return;\n    }\n    const json = await getJsonUrl(opts.value.jsonBaseUrl, name);\n    mapInfos.set(name, parseJson(json));\n    register(name, json);\n  };\n\n  const getCityName = (mapName: string | number) => {\n    const info = mapInfos.get(currentName.value);\n    if (info) {\n      return info.cityNames[mapName];\n    }\n  };\n\n  const refresh = () => {\n    if (currentName.value) {\n      const options = calcEchartsOpts(currentName.value);\n      chart.setOption(options);\n      chart.resize();\n    }\n  };\n\n  const changeMap = async (name: string, isInit: boolean = false) => {\n    if (!isInit) {\n      emit('mapChange', {\n        areaCode: opts.value.strMapCode ? `${name}` : Number(name),\n      });\n    }\n\n    if (!mapInfos.has(name)) {\n      await registerMap(name);\n    }\n    currentName.value = name;\n    historyNames.value.push(name);\n    refresh();\n  };\n\n  const goBack = () => {\n    // 一个时只有当前的name，不能后退。\n    if (historyNames.value.length > 1) {\n      historyNames.value.pop(); // 先删除当前地图的name\n      const name = historyNames.value.pop(); // 获取上一个地图的name\n      changeMap(name!);\n    }\n  };\n\n  onMounted(() => {\n    chart = init(chartRef.value);\n\n    window.addEventListener('resize', () => {\n      chart?.resize();\n    });\n\n    chart.on('click', params => {\n      // 散点点击事件\n      if (params.componentType === 'series') {\n        if (params.seriesType === 'scatter') {\n          emit('pointClick', params.data as IData);\n          return;\n        }\n        if (params.seriesType === 'map') {\n          if (params.data) {\n            emit('areaClick', params.data as IData);\n          }\n          // 禁止切换同一个地图，到最下级的时候会出现这种情况\n          if (params.name !== currentName.value) {\n            debugger;\n            changeMap(params.name);\n          }\n        }\n      }\n    });\n\n    // 散点悬浮size变大\n    chart.on('mouseover', function (params) {\n      if (params.componentType === 'series') {\n        if (params.seriesType === 'scatter') {\n          const dataIndex = params.dataIndex;\n          const option: IData = chart.getOption();\n          const seriesData = option.series[params.seriesIndex!].data;\n          const originSize = option.series[params.seriesIndex!].symbolSize;\n          // 修改悬浮的数据点大小\n          seriesData[dataIndex].symbolSize = originSize + 10;\n\n          // 刷新图表\n          chart.setOption(option);\n        }\n      }\n    });\n    chart.on('mouseout', function (params) {\n      if (params.componentType === 'series') {\n        if (params.seriesType === 'scatter') {\n          const dataIndex = params.dataIndex;\n          const option: IData = chart.getOption();\n          const seriesData = option.series[params.seriesIndex!].data;\n\n          // 恢复原始的数据点大小\n          delete seriesData[dataIndex].symbolSize;\n\n          // 刷新图表\n          chart.setOption(option);\n        }\n      }\n    });\n  });\n\n  return {\n    chartRef,\n    historyNames,\n    currentName,\n    changeMap,\n    getCityName,\n    goBack,\n    refresh,\n  };\n}\n","/* eslint-disable eqeqeq */\nimport {\n  defineComponent,\n  onMounted,\n  PropType,\n  computed,\n  toRefs,\n  watch,\n} from 'vue';\nimport { mergeDeepRight } from 'ramda';\nimport { useNamespace } from '@ibiz-template/vue3-util';\nimport { IMapData } from '@ibiz-template/runtime';\nimport { defaultOpts, MapOptions } from './map-chart.util';\nimport { useMapManager } from './map-manager';\nimport './map-chart.scss';\n\nexport const IBizMapChart = defineComponent({\n  name: 'IBizMapChart',\n  props: {\n    areaData: {\n      type: Array<IMapData>,\n    },\n    pointData: {\n      type: Array<IMapData>,\n    },\n    options: {\n      type: Object as PropType<Partial<MapOptions>>,\n      default: () => ({}),\n    },\n    defaultAreaCode: { type: String, required: true, default: '320000' },\n  },\n  setup(props, { emit }) {\n    const ns = useNamespace('map-chart');\n    const options = computed(() => mergeDeepRight(defaultOpts, props.options));\n\n    const findData = (id: string, type: 'area' | 'point') => {\n      if (type === 'area' && props.areaData) {\n        return props.areaData.find(item => item._id === id);\n      }\n      if (type === 'point' && props.pointData) {\n        return props.pointData.find(item => item._id === id);\n      }\n    };\n\n    const { chartRef, historyNames, changeMap, getCityName, goBack, refresh } =\n      useMapManager(\n        options,\n        mapName => {\n          const { visualMap, pointSymbol } = options.value;\n          const areaData = props.areaData || [];\n          const pointData = props.pointData || [];\n\n          const result: IData = {\n            geo: {\n              map: mapName,\n            },\n            tooltip: {\n              trigger: 'item',\n              // 全局的tooltip样式\n              textStyle: {\n                color: '#fff',\n                fontSize: 12,\n              },\n              backgroundColor: 'rgba(0, 0, 0, 0.47)',\n              borderWidth: 0,\n              extraCssText: 'backdrop-filter: blur(3px);',\n            },\n            visualMap: {\n              min: visualMap.min,\n              max: visualMap.max,\n              text: visualMap.text,\n              realtime: false,\n              hoverLink: false,\n              inRange: {\n                color: visualMap.rangeColor,\n              },\n            },\n            series: [\n              // 地图区块序列\n              {\n                type: 'map',\n                map: mapName,\n                // 地图JSON里和name匹配的属性名称\n                nameProperty: 'adcodeStr',\n                itemStyle: {\n                  borderColor: '#FFF',\n                  borderWidth: 2,\n                },\n                tooltip: {\n                  formatter: (params: IData) => {\n                    if (!params.data) {\n                      // 没有数据的时候不显示tooltip\n                      return;\n                    }\n                    const find = findData(params.data._id, 'area')!;\n                    if (!find) {\n                      return;\n                    }\n                    return find._tooltip;\n                  },\n                },\n                label: {\n                  // 区块文字固定显示\n                  show: true,\n                  // 字体样式\n                  color: '#000000',\n                  fontSize: 14,\n                  formatter: (params: IData) => {\n                    return getCityName(params.name);\n                  },\n                },\n                select: {\n                  disabled: true,\n                },\n                data: areaData.map(item => ({\n                  name: `${item._areaCode}`,\n                  value: item._value,\n                  _id: item._id,\n                })),\n              },\n              // 地图散点序列\n              {\n                type: 'scatter',\n                coordinateSystem: 'geo',\n                symbol: pointSymbol,\n                symbolSize: 20,\n                visualMap: false,\n                itemStyle: {\n                  color: '#FF1D00',\n                },\n                label: {\n                  show: true,\n                  // 字体样式\n                  color: '#000000',\n                  fontSize: 14,\n                  textShadowBlur: 0,\n                  formatter: (params: IData) => {\n                    const find = findData(params.data._id, 'point')!;\n                    return find?._text;\n                  },\n                  // 偏移\n                  position: 'left',\n                  offset: [10, -15],\n                },\n                tooltip: {\n                  formatter: (params: IData) => {\n                    const find = findData(params.data._id, 'point')!;\n                    return find?._tooltip;\n                  },\n                },\n                data: pointData.map(item => {\n                  return {\n                    _id: item._id,\n                    symbol: item._symbol\n                      ? `image://${item._symbol}`\n                      : undefined,\n                    value: [Number(item._longitude), Number(item._latitude)],\n                    // 每个点逃离visualMap\n                    visualMap: false,\n                  };\n                }),\n              },\n            ],\n          };\n          return result;\n        },\n        (name, e) => {\n          switch (name) {\n            case 'mapChange':\n              emit('mapChange', e);\n              break;\n            case 'pointClick':\n              emit('pointClick', { data: findData(e._id, 'point') });\n              break;\n            case 'areaClick':\n              emit('areaClick', { data: findData(e._id, 'area') });\n              break;\n            default:\n              break;\n          }\n        },\n      );\n\n    onMounted(() => {\n      changeMap(props.defaultAreaCode, true);\n    });\n\n    const { areaData, pointData } = toRefs(props);\n    watch([areaData, pointData], () => {\n      refresh();\n    });\n\n    return { ns, chartRef, historyNames, goBack };\n  },\n  render() {\n    return (\n      <div class={this.ns.b()}>\n        <div class={this.ns.e('chart')} ref='chartRef'></div>\n        {this.historyNames.length > 1 && (\n          <div\n            class={this.ns.e('goback')}\n            onClick={() => {\n              this.goBack();\n            }}\n          >\n            返回\n          </div>\n        )}\n      </div>\n    );\n  },\n});\n\nexport default IBizMapChart;\n"],"names":["defaultOpts","getJsonUrl","baseUrl","code","useMapManager","opts","calcEchartsOpts","emit","mapInfos","currentName","ref","historyNames","chart","chartRef","parseJson","json","info","item","adcode","name","registerMap","register","getCityName","mapName","refresh","options","changeMap","isInit","goBack","onMounted","init","params","dataIndex","option","seriesData","originSize","IBizMapChart","defineComponent","props","areaData","type","Array","pointData","Object","default","defaultAreaCode","String","required","setup","ns","useNamespace","computed","mergeDeepRight","findData","id","find","visualMap","pointSymbol","value","geo","map","tooltip","trigger","textStyle","color","fontSize","backgroundColor","borderWidth","extraCssText","min","max","text","realtime","hoverLink","inRange","rangeColor","series","nameProperty","itemStyle","borderColor","data","select","disabled","areaData2","_areaCode","_value","coordinateSystem","symbol","symbolSize","label","textShadowBlur","position","offset","pointData2","_id","_symbol","e","toRefs","watch","render","_createVNode","b","length","onClick","_createTextVNode","exports"],"mappings":"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"}

package/es/common/index.mjs

@@ -1,3 +1,4 @@
+import { defineAsyncComponent } from 'vue';
 import { IBizActionToolbar } from './action-toolbar/action-toolbar.mjs';
 import { IBizCol } from './col/col.mjs';
 import { IBizIcon } from './icon/icon.mjs';
@@ -37,6 +38,12 @@ const IBizCommonComponents = {
     v.component(ViewMessage.name, ViewMessage);
     v.component(IBizPagination.name, IBizPagination);
     v.component(IBizSortBar.name, IBizSortBar);
+    v.component(
+      "IBizMapChart",
+      defineAsyncComponent({
+        loader: () => import('./map-chart/map-chart.mjs')
+      })
+    );
   }
 };
 

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

@@ -0,0 +1 @@
+.ibiz-map-chart{position:relative;min-width:300px;min-height:300px}.ibiz-map-chart__chart{width:100%;height:100%}.ibiz-map-chart__goback{position:absolute;top:60px;right:0;width:100px;height:100px;font-size:20px;color:#002a5f;text-decoration:underline;letter-spacing:6px;cursor:pointer}

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

@@ -0,0 +1,127 @@
+import { PropType } from 'vue';
+import { IMapData } from '@ibiz-template/runtime';
+import './map-chart.scss';
+export declare const IBizMapChart: 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<{
+            strMapCode: boolean;
+            visualMap: {
+                text: string[];
+                min: number;
+                max: number;
+                rangeColor: string[];
+            };
+            pointSymbol: string;
+            jsonBaseUrl: string;
+        }>>;
+        default: () => {};
+    };
+    defaultAreaCode: {
+        type: StringConstructor;
+        required: true;
+        default: string;
+    };
+}, {
+    ns: import("@ibiz-template/core").Namespace;
+    chartRef: import("vue").Ref<any>;
+    historyNames: import("vue").Ref<string[]>;
+    goBack: () => 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<{
+            strMapCode: boolean;
+            visualMap: {
+                text: string[];
+                min: number;
+                max: number;
+                rangeColor: string[];
+            };
+            pointSymbol: string;
+            jsonBaseUrl: string;
+        }>>;
+        default: () => {};
+    };
+    defaultAreaCode: {
+        type: StringConstructor;
+        required: true;
+        default: string;
+    };
+}>>, {
+    options: Partial<{
+        strMapCode: boolean;
+        visualMap: {
+            text: string[];
+            min: number;
+            max: number;
+            rangeColor: string[];
+        };
+        pointSymbol: string;
+        jsonBaseUrl: string;
+    }>;
+    defaultAreaCode: string;
+}, {}>;
+export default IBizMapChart;

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

@@ -0,0 +1,216 @@
+import { computed, onMounted, toRefs, watch, createVNode, createTextVNode, defineComponent } from 'vue';
+import { mergeDeepRight } from 'ramda';
+import { useNamespace } from '@ibiz-template/vue3-util';
+import { defaultOpts } from './map-chart.util.mjs';
+import { useMapManager } from './map-manager.mjs';
+import './map-chart.css';
+
+"use strict";
+const IBizMapChart = /* @__PURE__ */ defineComponent({
+  name: "IBizMapChart",
+  props: {
+    areaData: {
+      type: Array
+    },
+    pointData: {
+      type: Array
+    },
+    options: {
+      type: Object,
+      default: () => ({})
+    },
+    defaultAreaCode: {
+      type: String,
+      required: true,
+      default: "320000"
+    }
+  },
+  setup(props, {
+    emit
+  }) {
+    const ns = useNamespace("map-chart");
+    const options = computed(() => mergeDeepRight(defaultOpts, props.options));
+    const findData = (id, type) => {
+      if (type === "area" && props.areaData) {
+        return props.areaData.find((item) => item._id === id);
+      }
+      if (type === "point" && props.pointData) {
+        return props.pointData.find((item) => item._id === id);
+      }
+    };
+    const {
+      chartRef,
+      historyNames,
+      changeMap,
+      getCityName,
+      goBack,
+      refresh
+    } = useMapManager(options, (mapName) => {
+      const {
+        visualMap,
+        pointSymbol
+      } = options.value;
+      const areaData2 = props.areaData || [];
+      const pointData2 = props.pointData || [];
+      const result = {
+        geo: {
+          map: mapName
+        },
+        tooltip: {
+          trigger: "item",
+          // 全局的tooltip样式
+          textStyle: {
+            color: "#fff",
+            fontSize: 12
+          },
+          backgroundColor: "rgba(0, 0, 0, 0.47)",
+          borderWidth: 0,
+          extraCssText: "backdrop-filter: blur(3px);"
+        },
+        visualMap: {
+          min: visualMap.min,
+          max: visualMap.max,
+          text: visualMap.text,
+          realtime: false,
+          hoverLink: false,
+          inRange: {
+            color: visualMap.rangeColor
+          }
+        },
+        series: [
+          // 地图区块序列
+          {
+            type: "map",
+            map: mapName,
+            // 地图JSON里和name匹配的属性名称
+            nameProperty: "adcodeStr",
+            itemStyle: {
+              borderColor: "#FFF",
+              borderWidth: 2
+            },
+            tooltip: {
+              formatter: (params) => {
+                if (!params.data) {
+                  return;
+                }
+                const find = findData(params.data._id, "area");
+                if (!find) {
+                  return;
+                }
+                return find._tooltip;
+              }
+            },
+            label: {
+              // 区块文字固定显示
+              show: true,
+              // 字体样式
+              color: "#000000",
+              fontSize: 14,
+              formatter: (params) => {
+                return getCityName(params.name);
+              }
+            },
+            select: {
+              disabled: true
+            },
+            data: areaData2.map((item) => ({
+              name: `${item._areaCode}`,
+              value: item._value,
+              _id: item._id
+            }))
+          },
+          // 地图散点序列
+          {
+            type: "scatter",
+            coordinateSystem: "geo",
+            symbol: pointSymbol,
+            symbolSize: 20,
+            visualMap: false,
+            itemStyle: {
+              color: "#FF1D00"
+            },
+            label: {
+              show: true,
+              // 字体样式
+              color: "#000000",
+              fontSize: 14,
+              textShadowBlur: 0,
+              formatter: (params) => {
+                const find = findData(params.data._id, "point");
+                return find == null ? void 0 : find._text;
+              },
+              // 偏移
+              position: "left",
+              offset: [10, -15]
+            },
+            tooltip: {
+              formatter: (params) => {
+                const find = findData(params.data._id, "point");
+                return find == null ? void 0 : find._tooltip;
+              }
+            },
+            data: pointData2.map((item) => {
+              return {
+                _id: item._id,
+                symbol: item._symbol ? `image://${item._symbol}` : void 0,
+                value: [Number(item._longitude), Number(item._latitude)],
+                // 每个点逃离visualMap
+                visualMap: false
+              };
+            })
+          }
+        ]
+      };
+      return result;
+    }, (name, e) => {
+      switch (name) {
+        case "mapChange":
+          emit("mapChange", e);
+          break;
+        case "pointClick":
+          emit("pointClick", {
+            data: findData(e._id, "point")
+          });
+          break;
+        case "areaClick":
+          emit("areaClick", {
+            data: findData(e._id, "area")
+          });
+          break;
+        default:
+          break;
+      }
+    });
+    onMounted(() => {
+      changeMap(props.defaultAreaCode, true);
+    });
+    const {
+      areaData,
+      pointData
+    } = toRefs(props);
+    watch([areaData, pointData], () => {
+      refresh();
+    });
+    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();
+      }
+    }, [createTextVNode("\u8FD4\u56DE")])]);
+  }
+});
+
+export { IBizMapChart, IBizMapChart as default };

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

@@ -0,0 +1,20 @@
+/** 渐变颜色集合 */
+export declare const GradientColors: string[];
+export declare const defaultOpts: {
+    /** true地图code标识使用字符串，false使用数字 */
+    strMapCode: boolean;
+    /** 热力图配置 */
+    visualMap: {
+        /** 两端的文本，如 ['高', '低'] */
+        text: string[];
+        /** 底部代表的值 */
+        min: number;
+        /** 顶部代表的值 */
+        max: number;
+        /** 热力图渐变颜色数组 */
+        rangeColor: string[];
+    };
+    pointSymbol: string;
+    jsonBaseUrl: string;
+};
+export type MapOptions = typeof defaultOpts;

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

@@ -0,0 +1,21 @@
+"use strict";
+const GradientColors = ["#90d1e7", "#fff600", "#ff5200"];
+const defaultOpts = {
+  /** true地图code标识使用字符串，false使用数字 */
+  strMapCode: false,
+  /** 热力图配置 */
+  visualMap: {
+    /** 两端的文本，如 ['高', '低'] */
+    text: ["\u9AD8", "\u4F4E"],
+    /** 底部代表的值 */
+    min: 0,
+    /** 顶部代表的值 */
+    max: 100,
+    /** 热力图渐变颜色数组 */
+    rangeColor: GradientColors
+  },
+  pointSymbol: "pin",
+  jsonBaseUrl: "/assets/json/map/jiangsu"
+};
+
+export { GradientColors, defaultOpts };

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

@@ -0,0 +1 @@
+export declare function getJsonUrl(baseUrl: string, code: string | number): Promise<any>;

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

@@ -0,0 +1,9 @@
+"use strict";
+async function getJsonUrl(baseUrl, code) {
+  const res = await ibiz.net.axios({
+    url: `${baseUrl}/${code}.json`
+  });
+  return res.data;
+}
+
+export { getJsonUrl };

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

@@ -0,0 +1,20 @@
+import { ComputedRef } from 'vue';
+import { MapOptions } from './map-chart.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(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>;
+    changeMap: (name: string, isInit?: boolean) => Promise<void>;
+    getCityName: (mapName: string | number) => any;
+    goBack: () => void;
+    refresh: () => void;
+};

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

@@ -0,0 +1,121 @@
+import { registerMap, init } from 'echarts';
+import { ref, onMounted } from 'vue';
+import { getJsonUrl } from './map-json.mjs';
+
+"use strict";
+function useMapManager(opts, calcEchartsOpts, emit) {
+  const mapInfos = /* @__PURE__ */ new Map();
+  const currentName = ref("");
+  const historyNames = ref([]);
+  let chart;
+  const chartRef = ref();
+  const parseJson = (json) => {
+    const info = {
+      cityNames: {},
+      noChild: json.features.length === 1
+    };
+    json.features.forEach((item) => {
+      const { adcode, name } = item.properties;
+      info.cityNames[adcode] = name;
+    });
+    return info;
+  };
+  const registerMap$1 = async (name) => {
+    if (mapInfos.has(name)) {
+      return;
+    }
+    const json = await getJsonUrl(opts.value.jsonBaseUrl, name);
+    mapInfos.set(name, parseJson(json));
+    registerMap(name, json);
+  };
+  const getCityName = (mapName) => {
+    const info = mapInfos.get(currentName.value);
+    if (info) {
+      return info.cityNames[mapName];
+    }
+  };
+  const refresh = () => {
+    if (currentName.value) {
+      const options = calcEchartsOpts(currentName.value);
+      chart.setOption(options);
+      chart.resize();
+    }
+  };
+  const changeMap = async (name, isInit = false) => {
+    if (!isInit) {
+      emit("mapChange", {
+        areaCode: opts.value.strMapCode ? `${name}` : Number(name)
+      });
+    }
+    if (!mapInfos.has(name)) {
+      await registerMap$1(name);
+    }
+    currentName.value = name;
+    historyNames.value.push(name);
+    refresh();
+  };
+  const goBack = () => {
+    if (historyNames.value.length > 1) {
+      historyNames.value.pop();
+      const name = historyNames.value.pop();
+      changeMap(name);
+    }
+  };
+  onMounted(() => {
+    chart = init(chartRef.value);
+    window.addEventListener("resize", () => {
+      chart == null ? void 0 : chart.resize();
+    });
+    chart.on("click", (params) => {
+      if (params.componentType === "series") {
+        if (params.seriesType === "scatter") {
+          emit("pointClick", params.data);
+          return;
+        }
+        if (params.seriesType === "map") {
+          if (params.data) {
+            emit("areaClick", params.data);
+          }
+          if (params.name !== currentName.value) {
+            debugger;
+            changeMap(params.name);
+          }
+        }
+      }
+    });
+    chart.on("mouseover", function(params) {
+      if (params.componentType === "series") {
+        if (params.seriesType === "scatter") {
+          const dataIndex = params.dataIndex;
+          const option = chart.getOption();
+          const seriesData = option.series[params.seriesIndex].data;
+          const originSize = option.series[params.seriesIndex].symbolSize;
+          seriesData[dataIndex].symbolSize = originSize + 10;
+          chart.setOption(option);
+        }
+      }
+    });
+    chart.on("mouseout", function(params) {
+      if (params.componentType === "series") {
+        if (params.seriesType === "scatter") {
+          const dataIndex = params.dataIndex;
+          const option = chart.getOption();
+          const seriesData = option.series[params.seriesIndex].data;
+          delete seriesData[dataIndex].symbolSize;
+          chart.setOption(option);
+        }
+      }
+    });
+  });
+  return {
+    chartRef,
+    historyNames,
+    currentName,
+    changeMap,
+    getCityName,
+    goBack,
+    refresh
+  };
+}
+
+export { useMapManager };

package/es/common/rawitem/rawitem.mjs

@@ -81,7 +81,7 @@ const IBizRawItem = /* @__PURE__ */ defineComponent({
           }
         }
       }
-      if (["TEXT", "HEADING1", "HEADING2", "HEADING3", "HEADING4", "HEADING5", "HEADING6", "PARAGRAPH", "HTML"].includes(rawItemType.value)) {
+      if (["TEXT", "HEADING1", "HEADING2", "HEADING3", "HEADING4", "HEADING5", "HEADING6", "PARAGRAPH", "HTML", "RAW"].includes(rawItemType.value)) {
         rawItemText.value = rawItemContent.value;
         if (typeof rawItemText.value === "string") {
           rawItemText.value = rawItemText.value.replaceAll("&lt;", "<");
@@ -147,7 +147,7 @@ const IBizRawItem = /* @__PURE__ */ defineComponent({
           "icon": this.rawItemContent
         }, null);
       }
-      if (this.rawItemType === "TEXT") {
+      if (this.rawItemType === "TEXT" || this.rawItemType === "RAW") {
         return createVNode("span", {
           "class": this.ns.e("text")
         }, [this.rawItemText]);

package/es/control/form/form-detail/form-mdctrl/form-mdctrl-container/form-mdctrl-container.css

@@ -1 +1 @@
-.ibiz-form-mdctrl{--ibiz-form-mdctrl-gap:var(--ibiz-spacing-tight);--ibiz-form-mdctrl-btn-width:60px}.ibiz-form-mdctrl .ibiz-form-mdctrl-main .ibiz-form-mdctrl-form-content{display:flex;margin-top:var(--ibiz-spacing-tight)}.ibiz-form-mdctrl .ibiz-form-mdctrl-main .ibiz-form-mdctrl-form-content-container{width:100%}.ibiz-form-mdctrl .ibiz-form-mdctrl-main .ibiz-form-mdctrl-form-content-control{width:calc(100% - var(--ibiz-form-mdctrl-btn-width) - var(--ibiz-form-mdctrl-gap))}.ibiz-form-mdctrl .ibiz-form-mdctrl-main .ibiz-form-mdctrl-btn{width:var(--ibiz-form-mdctrl-btn-width);margin-left:var(--ibiz-form-mdctrl-gap);cursor:pointer;display:flex;flex-flow:column nowrap;align-items:center;justify-content:flex-start}.ibiz-form-mdctrl .ibiz-form-mdctrl-main .ibiz-form-mdctrl-title{display:flex;align-items:center;justify-content:space-between}.ibiz-form-mdctrl.is-no-caption .ibiz-form-mdctrl-main{position:relative}.ibiz-form-mdctrl.is-no-caption .ibiz-form-mdctrl-main>.ibiz-form-mdctrl-form-content:nth-child(2) .ibiz-form-mdctrl-btn{position:relative;top:40px;height:-moz-fit-content;height:fit-content}.ibiz-form-mdctrl.is-no-caption .ibiz-form-mdctrl-main .ibiz-form-mdctrl-title{position:absolute;top:0;right:0;z-index:2}
+.ibiz-form-mdctrl{min-height:var(--ibiz-form-mdctrl-min-height);--ibiz-form-mdctrl-gap:var(--ibiz-spacing-tight);--ibiz-form-mdctrl-btn-width:60px;--ibiz-form-mdctrl-min-height:32px;--ibiz-form-mdctrl-content-min-height:72px}.ibiz-form-mdctrl .ibiz-form-mdctrl-main .ibiz-form-mdctrl-form-content{display:flex;min-height:var(--ibiz-form-mdctrl-content-min-height);margin-top:var(--ibiz-spacing-tight)}.ibiz-form-mdctrl .ibiz-form-mdctrl-main .ibiz-form-mdctrl-form-content-container{width:100%}.ibiz-form-mdctrl .ibiz-form-mdctrl-main .ibiz-form-mdctrl-form-content-control{width:calc(100% - var(--ibiz-form-mdctrl-btn-width) - var(--ibiz-form-mdctrl-gap))}.ibiz-form-mdctrl .ibiz-form-mdctrl-main .ibiz-form-mdctrl-btn{width:var(--ibiz-form-mdctrl-btn-width);margin-left:var(--ibiz-form-mdctrl-gap);cursor:pointer;display:flex;flex-flow:column nowrap;align-items:center;justify-content:flex-start}.ibiz-form-mdctrl .ibiz-form-mdctrl-main .ibiz-form-mdctrl-title{display:flex;align-items:center;justify-content:space-between}.ibiz-form-mdctrl.is-no-caption .ibiz-form-mdctrl-main{position:relative}.ibiz-form-mdctrl.is-no-caption .ibiz-form-mdctrl-main>.ibiz-form-mdctrl-form-content:nth-child(2) .ibiz-form-mdctrl-btn{position:relative;top:40px;height:-moz-fit-content;height:fit-content}.ibiz-form-mdctrl.is-no-caption .ibiz-form-mdctrl-main .ibiz-form-mdctrl-title{position:absolute;top:0;right:0;z-index:2}

package/es/control/form/form-detail/form-mdctrl/form-mdctrl-container/form-mdctrl-container.d.ts

@@ -16,7 +16,7 @@ export declare const FormMDCtrlContainer: import("vue").DefineComponent<{
     c: FormMDCtrlController;
     handleRemove: () => void;
     insertButtonClick: () => void;
-    hasCaption: boolean;
+    hasCaption: boolean | undefined;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "insertButtonClick"[], "insertButtonClick", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     controller: {
         type: PropType<FormMDCtrlController>;