diff --git a/src/hooks/index.ts b/src/hooks/index.ts index 5ecfe3dd..b5ab7ef8 100644 --- a/src/hooks/index.ts +++ b/src/hooks/index.ts @@ -2,5 +2,6 @@ export * from '@/hooks/useTheme.hook' export * from '@/hooks/usePreviewScale.hook' export * from '@/hooks/useCode.hook' export * from '@/hooks/useChartDataFetch.hook' +export * from '@/hooks/useChartDataPondFetch.hook' export * from '@/hooks/useLifeHandler.hook' export * from '@/hooks/useLang.hook' \ No newline at end of file diff --git a/src/hooks/useChartDataFetch.hook.ts b/src/hooks/useChartDataFetch.hook.ts index df48ae16..50792971 100644 --- a/src/hooks/useChartDataFetch.hook.ts +++ b/src/hooks/useChartDataFetch.hook.ts @@ -1,6 +1,7 @@ import { ref, toRefs, toRaw } from 'vue' import type VChart from 'vue-echarts' import { customizeHttp } from '@/api/http' +import { useChartDataPondFetch } from '@/hooks/' import { CreateComponentType, ChartFrameEnum } from '@/packages/index.d' import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' import { RequestDataTypeEnum } from '@/enums/httpEnum' @@ -23,6 +24,22 @@ export const useChartDataFetch = ( const vChartRef = ref(null) let fetchInterval: any = 0 + // 数据池 + const { addGlobalDataInterface } = useChartDataPondFetch() + const { requestDataPondId } = toRefs(targetComponent.request) + + // 组件类型 + const { chartFrame } = targetComponent.chartConfig + + // eCharts 组件配合 vChart 库更新方式 + const echartsUpdateHandle = (dataset: any) => { + if (chartFrame === ChartFrameEnum.ECHARTS) { + if (vChartRef.value) { + vChartRef.value.setOption({ dataset: dataset }) + } + } + } + const requestIntervalFn = () => { const chartEditStore = useChartEditStore() @@ -41,9 +58,6 @@ export const useChartDataFetch = ( requestInterval: targetInterval } = toRefs(targetComponent.request) - // 组件类型 - const { chartFrame } = targetComponent.chartConfig - // 非请求类型 if (requestDataType.value !== RequestDataTypeEnum.AJAX) return @@ -58,16 +72,11 @@ export const useChartDataFetch = ( clearInterval(fetchInterval) const fetchFn = async () => { - const res = await customizeHttp(toRaw(targetComponent.request), toRaw(chartEditStore.requestGlobalConfig)) + const res = await customizeHttp(toRaw(targetComponent.request), toRaw(chartEditStore.getRequestGlobalConfig)) if (res) { try { const filter = targetComponent.filter - // eCharts 组件配合 vChart 库更新方式 - if (chartFrame === ChartFrameEnum.ECHARTS) { - if (vChartRef.value) { - vChartRef.value.setOption({ dataset: newFunctionHandle(res?.data, res, filter) }) - } - } + echartsUpdateHandle(newFunctionHandle(res?.data, res, filter)) // 更新回调函数 if (updateCallback) { updateCallback(newFunctionHandle(res?.data, res, filter)) @@ -94,6 +103,11 @@ export const useChartDataFetch = ( } } - isPreview() && requestIntervalFn() + if (isPreview()) { + // 判断是否有数据池对应 id + requestDataPondId + ? addGlobalDataInterface(targetComponent, useChartEditStore, updateCallback || echartsUpdateHandle) + : requestIntervalFn() + } return { vChartRef } } diff --git a/src/hooks/useChartDataPondFetch.hook.ts b/src/hooks/useChartDataPondFetch.hook.ts new file mode 100644 index 00000000..2126384b --- /dev/null +++ b/src/hooks/useChartDataPondFetch.hook.ts @@ -0,0 +1,93 @@ +import { toRaw } from 'vue' +import { customizeHttp } from '@/api/http' +import { CreateComponentType } from '@/packages/index.d' +import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' +import { RequestGlobalConfigType, RequestDataPondItemType } from '@/store/modules/chartEditStore/chartEditStore.d' +import { newFunctionHandle } from '@/utils' + +// 获取类型 +type ChartEditStoreType = typeof useChartEditStore + +// 数据池存储的数据类型 +type DataPondMapType = { + updateCallback: (...args: any) => any + filter?: string | undefined +} + +// 数据池 Map 中请求对应 callback +const mittDataPondMap = new Map() + +// 创建单个数据项轮询接口 +const newPondItemInterval = ( + requestGlobalConfig: RequestGlobalConfigType, + requestDataPondItem: RequestDataPondItemType, + dataPondMapItem?: DataPondMapType[] +) => { + if (!dataPondMapItem) return + + // 请求 + const fetchFn = async () => { + try { + const res = await customizeHttp(toRaw(requestDataPondItem.dataPondRequestConfig), toRaw(requestGlobalConfig)) + + if (res) { + try { + // 遍历更新回调函数 + dataPondMapItem.forEach(item => { + item.updateCallback(newFunctionHandle(res?.data, res, item.filter)) + }) + } catch (error) { + console.error(error) + return error + } + } + } catch (error) { + return error + } + } + + // 立即调用 + fetchFn() +} + +/** + * 数据池接口处理 + */ +export const useChartDataPondFetch = () => { + // 新增全局接口 + const addGlobalDataInterface = ( + targetComponent: CreateComponentType, + useChartEditStore: ChartEditStoreType, + updateCallback: (...args: any) => any + ) => { + const chartEditStore = useChartEditStore() + const { requestDataPond } = chartEditStore.getRequestGlobalConfig + + // 组件对应的数据池 Id + const requestDataPondId = '111' || (targetComponent.request.requestDataPondId as string) + // 新增数据项 + const mittPondIdArr = mittDataPondMap.get(requestDataPondId) || [] + mittPondIdArr.push({ + updateCallback: updateCallback, + filter: targetComponent.filter + }) + mittDataPondMap.set(requestDataPondId, mittPondIdArr) + } + + // 初始化数据池 + const initDataPond = (requestGlobalConfig: RequestGlobalConfigType) => { + const { requestDataPond } = requestGlobalConfig + // 根据 mapId 查找对应的数据池配置 + for (let pondKey of mittDataPondMap.keys()) { + const requestDataPondItem = requestDataPond.find(item => item.dataPondId === pondKey) + if (requestDataPondItem) { + newPondItemInterval(requestGlobalConfig, requestDataPondItem, mittDataPondMap.get(pondKey)) + } + } + } + + return { + addGlobalDataInterface, + initDataPond + } +} diff --git a/src/hooks/useLifeHandler.hook.ts b/src/hooks/useLifeHandler.hook.ts index aa0d557b..fde94eef 100644 --- a/src/hooks/useLifeHandler.hook.ts +++ b/src/hooks/useLifeHandler.hook.ts @@ -1,4 +1,4 @@ -import { CreateComponentType, EventLife } from '@/packages/index.d' +import { CreateComponentType, CreateComponentGroupType, EventLife, BaseEvent } from '@/packages/index.d' import * as echarts from 'echarts' // 所有图表组件集合对象 @@ -7,26 +7,55 @@ const components: { [K in string]?: any } = {} // 项目提供的npm 包变量 export const npmPkgs = { echarts } -export const useLifeHandler = (chartConfig: CreateComponentType) => { - const events = chartConfig.events || {} +// 组件事件处理 hook +export const useLifeHandler = (chartConfig: CreateComponentType | CreateComponentGroupType) => { + // 处理基础事件 + const baseEvent: { [key: string]: any } = {} + for (const key in chartConfig.events.baseEvent) { + const fnStr: string | undefined = (chartConfig.events.baseEvent as any)[key] + // 动态绑定基础事件 + if (fnStr) { + baseEvent[key] = generateBaseFunc(fnStr) + } + } + // 生成生命周期事件 + const events = chartConfig.events.advancedEvents || {} const lifeEvents = { - [EventLife.BEFORE_MOUNT](e: any) { + [EventLife.VNODE_BEFORE_MOUNT](e: any) { // 存储组件 components[chartConfig.id] = e.component - const fnStr = (events[EventLife.BEFORE_MOUNT] || '').trim() + const fnStr = (events[EventLife.VNODE_BEFORE_MOUNT] || '').trim() generateFunc(fnStr, e) }, - [EventLife.MOUNTED](e: any) { - const fnStr = (events[EventLife.MOUNTED] || '').trim() + [EventLife.VNODE_MOUNTED](e: any) { + const fnStr = (events[EventLife.VNODE_MOUNTED] || '').trim() generateFunc(fnStr, e) } } - return lifeEvents + return { ...baseEvent, ...lifeEvents } } /** - * + * 生成基础函数 + * @param fnStr 用户方法体代码 + * @param event 鼠标事件 + */ + export function generateBaseFunc(fnStr: string) { + try { + return new Function(` + return ( + async function(mouseEvent){ + ${fnStr} + } + )`)() + } catch (error) { + console.error(error) + } +} + +/** + * 生成高级函数 * @param fnStr 用户方法体代码 * @param e 执行生命周期的动态组件实例 */ diff --git a/src/packages/components/Charts/Bars/CapsuleChart/index.vue b/src/packages/components/Charts/Bars/CapsuleChart/index.vue index 4a0ed72f..87971d01 100644 --- a/src/packages/components/Charts/Bars/CapsuleChart/index.vue +++ b/src/packages/components/Charts/Bars/CapsuleChart/index.vue @@ -2,7 +2,7 @@
import { onMounted, watch, reactive, PropType } from 'vue' -import merge from 'lodash/merge' -import cloneDeep from 'lodash/cloneDeep' import { useChartDataFetch } from '@/hooks' import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' import config, { option } from './config' +import cloneDeep from 'lodash/cloneDeep' type DataProps = { name: string | number @@ -114,12 +113,11 @@ watch( const calcData = (data: any) => { mergeConfig(props.chartConfig.option) - calcCapsuleLengthAndLabelData() } const mergeConfig = (data: any) => { - state.mergedConfig = merge(cloneDeep(state.defaultConfig), data || {}) + state.mergedConfig = cloneDeep(data || {}) } // 数据解析 diff --git a/src/packages/components/Charts/Lines/LineCommon/config.ts b/src/packages/components/Charts/Lines/LineCommon/config.ts index 5b275ba0..917a5064 100644 --- a/src/packages/components/Charts/Lines/LineCommon/config.ts +++ b/src/packages/components/Charts/Lines/LineCommon/config.ts @@ -2,6 +2,7 @@ import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public' import { LineCommonConfig } from './index' import { CreateComponentType } from '@/packages/index.d' import { defaultTheme, chartColorsSearch } from '@/settings/chartThemes/index' +import cloneDeep from 'lodash/cloneDeep' import dataJson from './data.json' export const includes = ['legend', 'xAxis', 'yAxis', 'grid'] @@ -47,7 +48,7 @@ export const option = { export default class Config extends PublicConfigClass implements CreateComponentType { public key: string = LineCommonConfig.key - public chartConfig = LineCommonConfig + public chartConfig = cloneDeep(LineCommonConfig) // 图表配置项 public option = echartOptionProfixHandle(option, includes) } diff --git a/src/packages/components/Charts/Lines/LineGradientSingle/config.ts b/src/packages/components/Charts/Lines/LineGradientSingle/config.ts index dea1397a..592b704d 100644 --- a/src/packages/components/Charts/Lines/LineGradientSingle/config.ts +++ b/src/packages/components/Charts/Lines/LineGradientSingle/config.ts @@ -3,6 +3,7 @@ import { LineGradientSingleConfig } from './index' import { CreateComponentType } from '@/packages/index.d' import { graphic } from 'echarts/core' import { defaultTheme, chartColorsSearch } from '@/settings/chartThemes/index' +import cloneDeep from 'lodash/cloneDeep' import dataJson from './data.json' export const includes = ['legend', 'xAxis', 'yAxis', 'grid'] @@ -58,7 +59,7 @@ const options = { export default class Config extends PublicConfigClass implements CreateComponentType { public key: string = LineGradientSingleConfig.key - public chartConfig = LineGradientSingleConfig + public chartConfig = cloneDeep(LineGradientSingleConfig) // 图表配置项 public option = echartOptionProfixHandle(options, includes) } diff --git a/src/packages/components/Charts/Lines/LineGradients/config.ts b/src/packages/components/Charts/Lines/LineGradients/config.ts index 2037ce5f..d470bab5 100644 --- a/src/packages/components/Charts/Lines/LineGradients/config.ts +++ b/src/packages/components/Charts/Lines/LineGradients/config.ts @@ -3,6 +3,7 @@ import { LineGradientsConfig } from './index' import { CreateComponentType } from '@/packages/index.d' import { graphic } from 'echarts/core' import { defaultTheme, chartColorsSearch } from '@/settings/chartThemes/index' +import cloneDeep from 'lodash/cloneDeep' import dataJson from './data.json' export const includes = ['legend', 'xAxis', 'yAxis', 'grid'] @@ -85,7 +86,7 @@ const option = { export default class Config extends PublicConfigClass implements CreateComponentType { public key: string = LineGradientsConfig.key - public chartConfig = LineGradientsConfig + public chartConfig = cloneDeep(LineGradientsConfig) // 图表配置项 public option = echartOptionProfixHandle(option, includes) } diff --git a/src/packages/components/Charts/Lines/LineLinearSingle/config.ts b/src/packages/components/Charts/Lines/LineLinearSingle/config.ts index fbeb875f..abcb2a31 100644 --- a/src/packages/components/Charts/Lines/LineLinearSingle/config.ts +++ b/src/packages/components/Charts/Lines/LineLinearSingle/config.ts @@ -2,6 +2,7 @@ import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public' import { LineLinearSingleConfig } from './index' import { CreateComponentType } from '@/packages/index.d' import { defaultTheme, chartColorsSearch } from '@/settings/chartThemes/index' +import cloneDeep from 'lodash/cloneDeep' import dataJson from './data.json' export const includes = ['legend', 'xAxis', 'yAxis', 'grid'] @@ -54,7 +55,7 @@ export const option = { export default class Config extends PublicConfigClass implements CreateComponentType { public key: string = LineLinearSingleConfig.key - public chartConfig = LineLinearSingleConfig + public chartConfig = cloneDeep(LineLinearSingleConfig) // 图表配置项 public option = echartOptionProfixHandle(option, includes) } diff --git a/src/packages/components/Charts/Maps/MapBase/config.ts b/src/packages/components/Charts/Maps/MapBase/config.ts index 36663256..888fe6b7 100644 --- a/src/packages/components/Charts/Maps/MapBase/config.ts +++ b/src/packages/components/Charts/Maps/MapBase/config.ts @@ -2,6 +2,7 @@ import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public' import { MapBaseConfig } from './index' import { chartInitConfig } from '@/settings/designSetting' import { CreateComponentType } from '@/packages/index.d' +import cloneDeep from 'lodash/cloneDeep' import dataJson from './data.json' export const includes = [] @@ -151,6 +152,6 @@ export const MapDefaultConfig = { ...option } export default class Config extends PublicConfigClass implements CreateComponentType { public key: string = MapBaseConfig.key public attr = { ...chartInitConfig, w: 750, h: 800, zIndex: -1 } - public chartConfig = MapBaseConfig + public chartConfig = cloneDeep(MapBaseConfig) public option = echartOptionProfixHandle(option, includes) } diff --git a/src/packages/components/Charts/Pies/PieCircle/config.ts b/src/packages/components/Charts/Pies/PieCircle/config.ts index 15954a3d..cbee4975 100644 --- a/src/packages/components/Charts/Pies/PieCircle/config.ts +++ b/src/packages/components/Charts/Pies/PieCircle/config.ts @@ -1,6 +1,7 @@ import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public' import { PieCircleConfig } from './index' import { CreateComponentType } from '@/packages/index.d' +import cloneDeep from 'lodash/cloneDeep' export const includes = [] @@ -57,7 +58,7 @@ const option = { export default class Config extends PublicConfigClass implements CreateComponentType { public key: string = PieCircleConfig.key - public chartConfig = PieCircleConfig + public chartConfig = cloneDeep(PieCircleConfig) // 图表配置项 public option = echartOptionProfixHandle(option, includes) diff --git a/src/packages/components/Charts/Pies/PieCommon/config.ts b/src/packages/components/Charts/Pies/PieCommon/config.ts index 1af07f40..068450b6 100644 --- a/src/packages/components/Charts/Pies/PieCommon/config.ts +++ b/src/packages/components/Charts/Pies/PieCommon/config.ts @@ -1,6 +1,7 @@ import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public' import { PieCommonConfig } from './index' import { CreateComponentType } from '@/packages/index.d' +import cloneDeep from 'lodash/cloneDeep' import dataJson from './data.json' export const includes = ['legend'] @@ -61,7 +62,7 @@ const option = { export default class Config extends PublicConfigClass implements CreateComponentType { public key: string = PieCommonConfig.key - public chartConfig = PieCommonConfig + public chartConfig = cloneDeep(PieCommonConfig) // 图表配置项 public option = echartOptionProfixHandle(option, includes) diff --git a/src/packages/components/Tables/Tables/TableList/index.vue b/src/packages/components/Tables/Tables/TableList/index.vue index 5fd3e02d..24324ec6 100644 --- a/src/packages/components/Tables/Tables/TableList/index.vue +++ b/src/packages/components/Tables/Tables/TableList/index.vue @@ -62,7 +62,7 @@ const status = reactive({ const calcRowsData = () => { let { dataset, rowNum, sort } = status.mergedConfig // @ts-ignore - sort && dataset.sort(({ value: a }, { value: b }) => { + sort &&dataset.sort(({ value: a }, { value: b } ) => { if (a > b) return -1 if (a < b) return 1 if (a === b) return 0 @@ -94,6 +94,7 @@ const calcHeights = (onresize = false) => { const { rowNum, dataset } = status.mergedConfig const avgHeight = h.value / rowNum status.avgHeight = avgHeight + if (!onresize) status.heights = new Array(dataset.length).fill(avgHeight) } @@ -131,12 +132,17 @@ const stopAnimation = () => { const onRestart = async () => { try { if (!status.mergedConfig) return + let { dataset, rowNum, sort } = status.mergedConfig stopAnimation() calcRowsData() - calcHeights(true) - animation(true) + let flag = true + if (dataset.length <= rowNum) { + flag=false + } + calcHeights(flag) + animation(flag) } catch (error) { - console.log(error) + console.error(error) } } diff --git a/src/packages/index.d.ts b/src/packages/index.d.ts index 94e90c91..fbdfa2f5 100644 --- a/src/packages/index.d.ts +++ b/src/packages/index.d.ts @@ -90,12 +90,24 @@ export const BlendModeEnumList = [ { label: '亮度', value: 'luminosity' } ] +// 基础事件类型(vue不加 on) +export enum BaseEvent { + // 点击 + ON_CLICK = 'click', + // 双击 + ON_DBL_CLICK = 'dblclick', + // 移入 + ON_MOUSE_ENTER = 'mouseenter', + // 移出 + ON_MOUSE_LEAVE = 'mouseleave', +} + // vue3 生命周期事件 -export enum EventLife { +export enum EventLife { // 渲染之后 - MOUNTED = 'vnodeMounted', + VNODE_MOUNTED = 'vnodeMounted', // 渲染之前 - BEFORE_MOUNT = 'vnodeBeforeMount', + VNODE_BEFORE_MOUNT = 'vnodeBeforeMount', } // 组件实例类 @@ -123,8 +135,13 @@ export interface PublicConfigType { } filter?: string status: StatusType - events?: { - [K in EventLife]?: string + events: { + baseEvent: { + [K in BaseEvent]?: string + }, + advancedEvents: { + [K in EventLife]?: string + } } } diff --git a/src/packages/public/publicConfig.ts b/src/packages/public/publicConfig.ts index ca20e464..ab85be64 100644 --- a/src/packages/public/publicConfig.ts +++ b/src/packages/public/publicConfig.ts @@ -1,5 +1,4 @@ import { getUUID } from '@/utils' -import { ChartFrameEnum, PublicConfigType, CreateComponentType, CreateComponentGroupType } from '@/packages/index.d' import { RequestConfigType } from '@/store/modules/chartEditStore/chartEditStore.d' import { groupTitle } from '@/settings/designSetting' import { @@ -9,6 +8,14 @@ import { RequestContentTypeEnum, RequestBodyEnum } from '@/enums/httpEnum' +import { + BaseEvent, + EventLife, + ChartFrameEnum, + PublicConfigType, + CreateComponentType, + CreateComponentGroupType +} from '@/packages/index.d' import { chartInitConfig } from '@/settings/designSetting' import cloneDeep from 'lodash/cloneDeep' @@ -82,7 +89,18 @@ export class PublicConfigClass implements PublicConfigType { // 数据过滤 public filter = undefined // 事件 - public events = undefined + public events = { + baseEvent: { + [BaseEvent.ON_CLICK]: undefined, + [BaseEvent.ON_DBL_CLICK]: undefined, + [BaseEvent.ON_MOUSE_ENTER]: undefined, + [BaseEvent.ON_MOUSE_LEAVE]: undefined + }, + advancedEvents: { + [EventLife.VNODE_MOUNTED]: undefined, + [EventLife.VNODE_BEFORE_MOUNT]: undefined + } + } } // 多选成组类 diff --git a/src/plugins/icon.ts b/src/plugins/icon.ts index 390200de..1f485371 100644 --- a/src/plugins/icon.ts +++ b/src/plugins/icon.ts @@ -63,7 +63,8 @@ import { Images as ImagesIcon, List as ListIcon, EyeOutline as EyeOutlineIcon, - EyeOffOutline as EyeOffOutlineIcon + EyeOffOutline as EyeOffOutlineIcon, + Albums as AlbumsIcon } from '@vicons/ionicons5' import { @@ -95,7 +96,8 @@ import { Carbon3DCursor as Carbon3DCursorIcon, Carbon3DSoftware as Carbon3DSoftwareIcon, Filter as FilterIcon, - FilterEdit as FilterEditIcon + FilterEdit as FilterEditIcon, + Laptop as LaptopIcon } from '@vicons/carbon' const ionicons5 = { @@ -228,7 +230,9 @@ const ionicons5 = { ListIcon, // 眼睛 EyeOutlineIcon, - EyeOffOutlineIcon + EyeOffOutlineIcon, + // 图表列表 + AlbumsIcon } const carbon = { @@ -279,7 +283,9 @@ const carbon = { Carbon3DSoftwareIcon, // 过滤器 FilterIcon, - FilterEditIcon + FilterEditIcon, + // 图层 + LaptopIcon } // https://www.xicons.org/#/ 还有很多 diff --git a/src/store/modules/chartEditStore/chartEditStore.d.ts b/src/store/modules/chartEditStore/chartEditStore.d.ts index 4d0232cb..78927f70 100644 --- a/src/store/modules/chartEditStore/chartEditStore.d.ts +++ b/src/store/modules/chartEditStore/chartEditStore.d.ts @@ -150,16 +150,27 @@ type RequestPublicConfigType = { requestParams: RequestParams } +// 数据池项类型 +export type RequestDataPondItemType = { + dataPondId: string, + dataPondName: string, + dataPondRequestConfig: RequestConfigType +} + // 全局的图表请求配置 export interface RequestGlobalConfigType extends RequestPublicConfigType { // 组件定制轮询时间 requestInterval: number // 请求源地址 requestOriginUrl?: string + // 公共数据池 + requestDataPond: RequestDataPondItemType[] } // 单个图表请求配置 export interface RequestConfigType extends RequestPublicConfigType { + // 所选全局数据池的对应 id + requestDataPondId?: string // 组件定制轮询时间 requestInterval?: number // 获取数据的方式 diff --git a/src/store/modules/chartEditStore/chartEditStore.ts b/src/store/modules/chartEditStore/chartEditStore.ts index ea1759a7..16a4eda4 100644 --- a/src/store/modules/chartEditStore/chartEditStore.ts +++ b/src/store/modules/chartEditStore/chartEditStore.ts @@ -108,11 +108,12 @@ export const useChartEditStore = defineStore({ chartThemeColor: defaultTheme || 'dark', // 全局配置 chartThemeSetting: globalThemeJson, - // 预览方式 + // 适配方式 previewScaleType: previewScaleType }, // 数据请求处理（需存储给后端） requestGlobalConfig: { + requestDataPond: [], requestOriginUrl: '', requestInterval: requestInterval, requestIntervalUnit: requestIntervalUnit, diff --git a/src/store/modules/chartLayoutStore/chartLayoutStore.d.ts b/src/store/modules/chartLayoutStore/chartLayoutStore.d.ts index 135f155a..b1155ea5 100644 --- a/src/store/modules/chartLayoutStore/chartLayoutStore.d.ts +++ b/src/store/modules/chartLayoutStore/chartLayoutStore.d.ts @@ -1,3 +1,8 @@ +export enum ChartModeEnum { + SINGLE= 'single', + DOUBLE = 'double' +} + export enum LayerModeEnum { THUMBNAIL = 'thumbnail', TEXT = 'text' @@ -7,6 +12,7 @@ export enum ChartLayoutStoreEnum { LAYERS = 'layers', CHARTS = 'charts', DETAILS = 'details', + Chart_TYPE = 'chartType', LAYER_TYPE = 'layerType' } @@ -17,6 +23,8 @@ export interface ChartLayoutType { [ChartLayoutStoreEnum.CHARTS]: boolean // 详情设置 [ChartLayoutStoreEnum.DETAILS]: boolean + // 组件展示方式 + [ChartLayoutStoreEnum.Chart_TYPE]: ChartModeEnum // 层级展示方式 [ChartLayoutStoreEnum.LAYER_TYPE]: LayerModeEnum } diff --git a/src/store/modules/chartLayoutStore/chartLayoutStore.ts b/src/store/modules/chartLayoutStore/chartLayoutStore.ts index 6a8bcc1a..c50bd520 100644 --- a/src/store/modules/chartLayoutStore/chartLayoutStore.ts +++ b/src/store/modules/chartLayoutStore/chartLayoutStore.ts @@ -1,5 +1,5 @@ import { defineStore } from 'pinia' -import { ChartLayoutType, LayerModeEnum } from './chartLayoutStore.d' +import { ChartLayoutType, LayerModeEnum, ChartModeEnum } from './chartLayoutStore.d' import { setLocalStorage, getLocalStorage } from '@/utils' import { StorageEnum } from '@/enums/storageEnum' import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' @@ -8,22 +8,25 @@ const chartEditStore = useChartEditStore() const { GO_CHART_LAYOUT_STORE } = StorageEnum -const storageChartLayout: ChartLayoutType = getLocalStorage(GO_CHART_LAYOUT_STORE) +const storageChartLayout: Partial = getLocalStorage(GO_CHART_LAYOUT_STORE) // 编辑区域布局和静态设置 export const useChartLayoutStore = defineStore({ id: 'useChartLayoutStore', - state: (): ChartLayoutType => - storageChartLayout || { - // 图层控制 - layers: true, - // 图表组件 - charts: true, - // 详情设置（收缩为true） - details: false, - // 图层类型（默认图片） - layerType: LayerModeEnum.THUMBNAIL - }, + state: (): ChartLayoutType => ({ + // 图层控制 + layers: true, + // 图表组件 + charts: true, + // 详情设置（收缩为true） + details: false, + // 组件列表展示类型（默认单列） + chartType: ChartModeEnum.SINGLE, + // 图层类型（默认图片） + layerType: LayerModeEnum.THUMBNAIL, + // 防止值不存在 + ...storageChartLayout + }), getters: { getLayers(): boolean { return this.layers @@ -34,6 +37,9 @@ export const useChartLayoutStore = defineStore({ getDetails(): boolean { return this.details }, + getChartType(): ChartModeEnum { + return this.chartType + }, getLayerType(): LayerModeEnum { return this.layerType } @@ -41,8 +47,8 @@ export const useChartLayoutStore = defineStore({ actions: { setItem(key: T, value: K): void { this.$patch(state => { - state[key]= value - }); + state[key] = value + }) setLocalStorage(GO_CHART_LAYOUT_STORE, this.$state) // 重新计算拖拽区域缩放比例 setTimeout(() => { diff --git a/src/utils/router.ts b/src/utils/router.ts index f2bf6142..f2a9c696 100644 --- a/src/utils/router.ts +++ b/src/utils/router.ts @@ -153,6 +153,19 @@ export const fetchRouteParams = () => { } } +/** + * * 通过硬解析获取当前路由下的参数 + * @returns object + */ + export const fetchRouteParamsLocation = () => { + try { + return document.location.hash.split('/').pop() || '' + } catch (error) { + window['$message'].warning('查询路由信息失败，请联系管理员！') + return '' + } +} + /** * * 回到主页面 * @param confirm diff --git a/src/views/chart/ContentCharts/components/ChartsItemBox/index.vue b/src/views/chart/ContentCharts/components/ChartsItemBox/index.vue index efaee756..e87e0bf6 100644 --- a/src/views/chart/ContentCharts/components/ChartsItemBox/index.vue +++ b/src/views/chart/ContentCharts/components/ChartsItemBox/index.vue @@ -1,5 +1,5 @@ \ No newline at end of file + diff --git a/src/views/chart/ContentConfigurations/components/CanvasPage/index.vue b/src/views/chart/ContentConfigurations/components/CanvasPage/index.vue index 5d4bcc23..f024a4c2 100644 --- a/src/views/chart/ContentConfigurations/components/CanvasPage/index.vue +++ b/src/views/chart/ContentConfigurations/components/CanvasPage/index.vue @@ -75,7 +75,7 @@ - 预览方式 + 适配方式 { }) } -// 选择预览方式 +// 选择适配方式 const selectPreviewType = (key: PreviewScaleEnum) => { chartEditStore.setEditCanvasConfig(EditCanvasConfigEnum.PREVIEW_SCALE_TYPE, key) } diff --git a/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataAjax/index.vue b/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataAjax/index.vue index 9d3654ae..9e27f94f 100644 --- a/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataAjax/index.vue +++ b/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataAjax/index.vue @@ -125,7 +125,7 @@ const sendHandle = async () => { if (!targetData.value?.request) return loading.value = true try { - const res = await customizeHttp(toRaw(targetData.value.request), toRaw(chartEditStore.requestGlobalConfig)) + const res = await customizeHttp(toRaw(targetData.value.request), toRaw(chartEditStore.getRequestGlobalConfig)) loading.value = false if (res) { if(!res?.data && !targetData.value.filter) window['$message'].warning('您的数据不符合默认格式，请配置过滤器！') diff --git a/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataMonacoEditor/index.vue b/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataMonacoEditor/index.vue index cea1e1c8..61d94101 100644 --- a/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataMonacoEditor/index.vue +++ b/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataMonacoEditor/index.vue @@ -102,12 +102,11 @@ diff --git a/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventMonacoEditor/importTemplate.ts b/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventAdvancedHandle/importTemplate.ts similarity index 100% rename from src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventMonacoEditor/importTemplate.ts rename to src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventAdvancedHandle/importTemplate.ts diff --git a/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventAdvancedHandle/index.ts b/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventAdvancedHandle/index.ts new file mode 100644 index 00000000..32daaf60 --- /dev/null +++ b/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventAdvancedHandle/index.ts @@ -0,0 +1,3 @@ +import ChartEventAdvancedHandle from './index.vue' + +export { ChartEventAdvancedHandle } diff --git a/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventMonacoEditor/index.vue b/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventAdvancedHandle/index.vue similarity index 82% rename from src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventMonacoEditor/index.vue rename to src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventAdvancedHandle/index.vue index 1865164d..fe89c656 100644 --- a/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventMonacoEditor/index.vue +++ b/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventAdvancedHandle/index.vue @@ -10,13 +10,15 @@ 编辑 - +

+ // {{ EventLifeName[eventName] }} +
async {{ eventName }} (e, components, echarts, node_modules) {

-

+

},

 @@ -30,13 +32,15 @@ 高级事件编辑器（配合源码使用） + + {{ eventName }}(e, components, echarts, node_modules)  {

- +

}

 @@ -136,7 +140,7 @@ - 提示 + 说明 通过提供的参数可为图表增加定制化的tooltip、交互事件等等
@@ -158,29 +162,27 @@ import { useTargetData } from '../../../hooks/useTargetData.hook' import { templateList } from './importTemplate' import { npmPkgs } from '@/hooks' import { icon } from '@/plugins' -import { goDialog, toString } from '@/utils' import { CreateComponentType, EventLife } from '@/packages/index.d' -import { Script } from 'vm' const { targetData, chartEditStore } = useTargetData() const { DocumentTextIcon, ChevronDownIcon, PencilIcon } = icon.ionicons5 const EventLifeName = { - [EventLife.BEFORE_MOUNT]: '渲染之前', - [EventLife.MOUNTED]: '渲染之后' + [EventLife.VNODE_BEFORE_MOUNT]: '渲染之前', + [EventLife.VNODE_MOUNTED]: '渲染之后' } const EventLifeTip = { - [EventLife.BEFORE_MOUNT]: '此时组件 DOM 还未存在', - [EventLife.MOUNTED]: '此时组件 DOM 已经存在' + [EventLife.VNODE_BEFORE_MOUNT]: '此时组件 DOM 还未存在', + [EventLife.VNODE_MOUNTED]: '此时组件 DOM 已经存在' } // 受控弹窗 const showModal = ref(false) // 编辑区域控制 -const editTab = ref(EventLife.MOUNTED) +const editTab = ref(EventLife.VNODE_MOUNTED) // events 函数模板 -let events = ref({ ...targetData.value.events }) +let advancedEvents = ref({ ...targetData.value.events.advancedEvents }) // 事件错误标识 const errorFlag = ref(false) @@ -190,7 +192,7 @@ const validEvents = () => { let message = '' let name = '' - errorFlag.value = Object.entries(events.value).every(([eventName, str]) => { + errorFlag.value = Object.entries(advancedEvents.value).every(([eventName, str]) => { try { // 支持await，验证语法 const AsyncFunction = Object.getPrototypeOf(async function () {}).constructor @@ -221,11 +223,14 @@ const saveEvents = () => { window['$message'].error('事件函数错误，无法进行保存') return } - if (Object.values(events.value).join('').trim() === '') { + if (Object.values(advancedEvents.value).join('').trim() === '') { // 清空事件 - targetData.value.events = undefined + targetData.value.events.advancedEvents = { + vnodeBeforeMount: undefined, + vnodeMounted: undefined, + } } else { - targetData.value.events = { ...events.value } + targetData.value.events.advancedEvents = { ...advancedEvents.value } } closeEvents() } @@ -234,52 +239,12 @@ watch( () => showModal.value, (newData: boolean) => { if (newData) { - events.value = { ...targetData.value.events } + advancedEvents.value = { ...targetData.value.events.advancedEvents } } } ) diff --git a/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventBaseHandle/index.ts b/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventBaseHandle/index.ts new file mode 100644 index 00000000..d45f2f12 --- /dev/null +++ b/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventBaseHandle/index.ts @@ -0,0 +1,3 @@ +import ChartEventBaseHandle from './index.vue' + +export { ChartEventBaseHandle } diff --git a/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventBaseHandle/index.vue b/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventBaseHandle/index.vue new file mode 100644 index 00000000..90151736 --- /dev/null +++ b/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventBaseHandle/index.vue @@ -0,0 +1,215 @@ + + + + + diff --git a/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventMonacoEditor/index.ts b/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventMonacoEditor/index.ts deleted file mode 100644 index b6d23e30..00000000 --- a/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventMonacoEditor/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -import ChartEventMonacoEditor from './index.vue' - -export { ChartEventMonacoEditor } diff --git a/src/views/chart/ContentConfigurations/components/ChartEvent/components/index.scss b/src/views/chart/ContentConfigurations/components/ChartEvent/components/index.scss new file mode 100644 index 00000000..8cd67cf8 --- /dev/null +++ b/src/views/chart/ContentConfigurations/components/ChartEvent/components/index.scss @@ -0,0 +1,51 @@ +/* 外层也要使用 */ +.func-keyword { + color: #b478cf; +} + +.func-annotate { + color: #70c0e8; +} + +@include go('chart-data-monaco-editor') { + .func-keyNameWord { + color: #70c0e8; + } + .tab-tip { + font-size: 12px; + } + &.n-card.n-modal, + .n-card { + @extend .go-background-filter; + } +} +@include deep() { + .n-layout, + .n-layout-sider { + background-color: transparent; + } + .collapse-show-box { + .n-card__content { + padding-left: 20px; + padding-right: 10px; + } + } + .go-editor-area { + max-height: 530px; + } + .checkbox--hidden:checked { + & + label { + .n-icon { + transition: all 0.3s; + transform: rotate(180deg); + } + } + & ~ .go-editor-area { + display: none; + } + } + // 优化代码换行 + .n-code > pre { + white-space: break-spaces; + } +} diff --git a/src/views/chart/ContentConfigurations/components/ChartEvent/index.vue b/src/views/chart/ContentConfigurations/components/ChartEvent/index.vue index a5335f5e..05e5ce4d 100644 --- a/src/views/chart/ContentConfigurations/components/ChartEvent/index.vue +++ b/src/views/chart/ContentConfigurations/components/ChartEvent/index.vue @@ -5,20 +5,15 @@ 组件 id： {{ targetData.id }} - -
- 【单击、双击、移入、移出】在开发中，即将上线！ -
- （备注：高级事件模块可自行实现上述功能） -
- - + +