From 47f6fc87c75da9d29570f62c737648d5291462d4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=A5=94=E8=B7=91=E7=9A=84=E9=9D=A2=E6=9D=A1?= <1262327911@qq.com> Date: Tue, 5 Jul 2022 21:44:16 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E5=8A=A8=E6=80=81?= =?UTF-8?q?=E6=8E=A5=E5=8F=A3=E8=BF=87=E6=BB=A4=E5=99=A8=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 1 + pnpm-lock.yaml | 6 + .../Pages/MonacoEditor/index.hook.ts | 49 +++++ src/components/Pages/MonacoEditor/index.ts | 3 + src/components/Pages/MonacoEditor/index.vue | 84 ++++++++ .../Pages/ThemeColorSelect/index.vue | 2 +- src/hooks/useChartDataFetch.hook.ts | 28 ++- .../Charts/Mores/WaterPolo/index.vue | 1 - src/packages/index.d.ts | 10 +- src/packages/public/publicConfig.ts | 2 + src/plugins/icon.ts | 7 +- src/settings/designSetting.ts | 2 +- .../modules/chartEditStore/chartEditStore.ts | 3 + src/utils/utils.ts | 44 +++- .../components/ChartDataAjax/index.vue | 91 ++++---- .../ChartDataMatchingAndShow/index.vue | 114 ++++++---- .../components/ChartDataMonacoEditor/index.ts | 3 + .../ChartDataMonacoEditor/index.vue | 195 ++++++++++++++++++ .../components/ChartDataStatic/index.vue | 2 +- .../components/ChartData/index.d.ts | 1 + 20 files changed, 541 insertions(+), 107 deletions(-) create mode 100644 src/components/Pages/MonacoEditor/index.hook.ts create mode 100644 src/components/Pages/MonacoEditor/index.ts create mode 100644 src/components/Pages/MonacoEditor/index.vue create mode 100644 src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataMonacoEditor/index.ts create mode 100644 src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataMonacoEditor/index.vue diff --git a/package.json b/package.json index 7dd7c9ae..5b01c51f 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,7 @@ "highlight.js": "^11.5.0", "html2canvas": "^1.4.1", "keymaster": "^1.6.2", + "monaco-editor": "^0.33.0", "naive-ui": "2.30.3", "pinia": "^2.0.13", "screenfull": "^6.0.1", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index fa91d99d..4a73acf9 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -34,6 +34,7 @@ specifiers: keymaster: ^1.6.2 lodash: ~4.17.21 mockjs: ^1.1.0 + monaco-editor: ^0.33.0 naive-ui: 2.30.3 pinia: ^2.0.13 plop: ^3.0.5 @@ -68,6 +69,7 @@ dependencies: highlight.js: 11.5.1 html2canvas: 1.4.1 keymaster: 1.6.2 + monaco-editor: 0.33.0 naive-ui: 2.30.3_vue@3.2.37 pinia: 2.0.14_vcmyupim4cga7k7f5hngmth5py screenfull: 6.0.1 @@ -3756,6 +3758,10 @@ packages: commander: 9.3.0 dev: true + /monaco-editor/0.33.0: + resolution: {integrity: sha512-VcRWPSLIUEgQJQIE0pVT8FcGBIgFoxz7jtqctE+IiCxWugD0DwgyQBcZBhdSrdMC84eumoqMZsGl2GTreOzwqw==} + dev: false + /ms/2.0.0: resolution: {integrity: sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==} dev: true diff --git a/src/components/Pages/MonacoEditor/index.hook.ts b/src/components/Pages/MonacoEditor/index.hook.ts new file mode 100644 index 00000000..d68ef4de --- /dev/null +++ b/src/components/Pages/MonacoEditor/index.hook.ts @@ -0,0 +1,49 @@ +import * as monaco from 'monaco-editor/esm/vs/editor/editor.api.js' + +export const useMonacoEditor = (language = 'json') => { + let monacoEditor: monaco.editor.IStandaloneCodeEditor | null = null + let initReadOnly = false + const updateVal = async (val: string) => { + monacoEditor?.setValue(val) + setTimeout(async () => { + initReadOnly && monacoEditor?.updateOptions({ readOnly: false }) + // await monacoEditor?.getAction('editor.action.formatDocument')?.run() + initReadOnly && monacoEditor?.updateOptions({ readOnly: true }) + }, 100) + } + + const createEditor = ( + el: HTMLElement | null, + editorOption: monaco.editor.IStandaloneEditorConstructionOptions = {} + ) => { + if (monacoEditor) { + return + } + initReadOnly = !!editorOption.readOnly + monacoEditor = + el && + monaco.editor.create(el, { + language, + minimap: { enabled: false }, + theme: 'vs-dark', + multiCursorModifier: 'ctrlCmd', + scrollbar: { + verticalScrollbarSize: 8, + horizontalScrollbarSize: 8 + }, + tabSize: 2, + automaticLayout: true, // 自适应宽高 + ...editorOption + }) + return monacoEditor + } + const onFormatDoc = () => { + monacoEditor?.getAction('editor.action.formatDocument').run() + } + return { + updateVal, + getEditor: () => monacoEditor, + createEditor, + onFormatDoc + } +} diff --git a/src/components/Pages/MonacoEditor/index.ts b/src/components/Pages/MonacoEditor/index.ts new file mode 100644 index 00000000..12bc7e53 --- /dev/null +++ b/src/components/Pages/MonacoEditor/index.ts @@ -0,0 +1,3 @@ +import MonacoEditor from './index.vue'; + +export { MonacoEditor }; diff --git a/src/components/Pages/MonacoEditor/index.vue b/src/components/Pages/MonacoEditor/index.vue new file mode 100644 index 00000000..9c2dc43f --- /dev/null +++ b/src/components/Pages/MonacoEditor/index.vue @@ -0,0 +1,84 @@ + + + + + \ No newline at end of file diff --git a/src/components/Pages/ThemeColorSelect/index.vue b/src/components/Pages/ThemeColorSelect/index.vue index 96ce958c..38c9d819 100644 --- a/src/components/Pages/ThemeColorSelect/index.vue +++ b/src/components/Pages/ThemeColorSelect/index.vue @@ -20,7 +20,7 @@
{{ appThemeDetail.name }} - 中国色 + 中国色 (null) let fetchInterval: any = 0 - const requestInterval = () => { + const requestIntervalFn = () => { const chartEditStore = useChartEditStore() - const { requestOriginUrl, requestInterval } = toRefs( - chartEditStore.getRequestGlobalConfig - ) + const { requestOriginUrl, requestInterval } = toRefs(chartEditStore.getRequestGlobalConfig) // 组件类型 const { chartFrame } = targetComponent.chartConfig // 请求配置 - const { requestDataType, requestHttpType, requestUrl } = toRefs( - targetComponent.data - ) + const { requestDataType, requestHttpType, requestUrl } = toRefs(targetComponent.data) // 非请求类型 if (requestDataType.value !== RequestDataTypeEnum.AJAX) return // 处理地址 if (requestUrl?.value && requestInterval.value > 0) { // requestOriginUrl 允许为空 - const completePath = - requestOriginUrl && requestOriginUrl.value + requestUrl.value + const completePath = requestOriginUrl && requestOriginUrl.value + requestUrl.value if (!completePath) return + clearInterval(fetchInterval) + const fetchFn = async () => { const res: any = await http(requestHttpType.value)(completePath || '', {}) if (res.data) { @@ -54,7 +52,8 @@ export const useChartDataFetch = ( // eCharts 组件配合 vChart 库更新方式 if (chartFrame === ChartFrameEnum.ECHARTS) { if (vChartRef.value) { - vChartRef.value.setOption({ dataset: res.data }) + const filter = targetComponent.filter + vChartRef.value.setOption({ dataset: newFunctionHandle(res.data, filter) }) } } } @@ -63,16 +62,15 @@ export const useChartDataFetch = ( } } } - + // 立即调用 fetchFn() // 开启定时 - setInterval(fetchFn, requestInterval.value * 1000) + fetchInterval = setInterval(fetchFn, requestInterval.value * 1000) } } - isPreview() && requestInterval() - + isPreview() && requestIntervalFn() return { vChartRef } } diff --git a/src/packages/components/Charts/Mores/WaterPolo/index.vue b/src/packages/components/Charts/Mores/WaterPolo/index.vue index 36af753b..06ee9099 100644 --- a/src/packages/components/Charts/Mores/WaterPolo/index.vue +++ b/src/packages/components/Charts/Mores/WaterPolo/index.vue @@ -74,7 +74,6 @@ const dataHandle = (newData: number) => { watch( () => props.chartConfig.option.dataset, newData => { - console.log(dataHandle(newData)) props.chartConfig.option.series[0].data = [dataHandle(newData)] option.value = props.chartConfig.option }, diff --git a/src/packages/index.d.ts b/src/packages/index.d.ts index 02c50e9b..8d27862e 100644 --- a/src/packages/index.d.ts +++ b/src/packages/index.d.ts @@ -2,9 +2,14 @@ import type { GlobalThemeJsonType } from '@/settings/chartThemes/index' import type { RequestConfigType } from '@/store/modules/chartEditStore/chartEditStore.d' export enum ChartFrameEnum { - COMMON = 'common', + // echarts 框架 ECHARTS = 'echarts', - NAIVE_UI = 'naiveUI' + // UI 组件框架 + NAIVE_UI = 'naiveUI', + // 自定义带数据组件 + COMMON = 'common', + // 无数据变更 + STATIC = 'static' } // 组件配置 @@ -77,6 +82,7 @@ export interface PublicConfigType extends requestConfig { // 动画 animations: string[] } + filter?: string setPosition: Function } diff --git a/src/packages/public/publicConfig.ts b/src/packages/public/publicConfig.ts index 25d75d7f..05df5e28 100644 --- a/src/packages/public/publicConfig.ts +++ b/src/packages/public/publicConfig.ts @@ -45,6 +45,8 @@ export class publicConfig implements PublicConfigType { public data = { ...requestConfig } // 数据获取 public requestData = [] + // 数据过滤 + public filter = undefined // 设置坐标 public setPosition(x: number, y: number): void { diff --git a/src/plugins/icon.ts b/src/plugins/icon.ts index 7a9b3adf..cb016fce 100644 --- a/src/plugins/icon.ts +++ b/src/plugins/icon.ts @@ -52,7 +52,8 @@ import { ArrowBack as ArrowBackIcon, ArrowForward as ArrowForwardIcon, Planet as PawIcon, - Search as SearchIcon + Search as SearchIcon, + Filter as FilterIcon } from '@vicons/ionicons5' import { @@ -190,7 +191,9 @@ const ionicons5 = { // 狗爪 PawIcon, // 搜索（放大镜） - SearchIcon + SearchIcon, + // 过滤器 + FilterIcon } const carbon = { diff --git a/src/settings/designSetting.ts b/src/settings/designSetting.ts index fe10d8ff..dfbd5d52 100644 --- a/src/settings/designSetting.ts +++ b/src/settings/designSetting.ts @@ -49,7 +49,7 @@ export const backgroundImageSize = 5 export const previewScaleType = PreviewScaleEnum.FIT // 数据请求间隔 -export const requestInterval = 30 +export const requestInterval = 5 // 工作区域历史记录存储最大数量 export const editHistoryMax = 100 \ No newline at end of file diff --git a/src/store/modules/chartEditStore/chartEditStore.ts b/src/store/modules/chartEditStore/chartEditStore.ts index a0b63abe..3803960d 100644 --- a/src/store/modules/chartEditStore/chartEditStore.ts +++ b/src/store/modules/chartEditStore/chartEditStore.ts @@ -167,6 +167,9 @@ export const useChartEditStore = defineStore({ }, // * 设置目标数据 select setTargetSelectChart(selectId?: string | string[], push: boolean = false) { + // 重复选中 + if(this.targetChart.selectId.find((e: string) => e === selectId)) return + // 无 id 清空 if(!selectId) { this.targetChart.selectId = [] diff --git a/src/utils/utils.ts b/src/utils/utils.ts index 51042dcc..ece61c43 100644 --- a/src/utils/utils.ts +++ b/src/utils/utils.ts @@ -5,6 +5,8 @@ import throttle from 'lodash/throttle' import Image_404 from '../assets/images/exception/image-404.png' import html2canvas from 'html2canvas' import { downloadByA } from './file' +import { isString } from './type' +import cloneDeep from 'lodash/cloneDeep'; /** * * 判断是否是开发环境 @@ -19,9 +21,7 @@ export const isDev = () => { * @param { Number } randomLength */ export const getUUID = (randomLength = 10) => { - return Number( - Math.random().toString().substr(2, randomLength) + Date.now() - ).toString(36) + return Number(Math.random().toString().substr(2, randomLength) + Date.now()).toString(36) } /** @@ -90,10 +90,7 @@ export const screenfullFn = (isFullscreen?: boolean, isEnabled?: boolean) => { * @param key 键名 * @param value 键值 */ -export const setDomAttribute = < - K extends keyof CSSStyleDeclaration, - V extends CSSStyleDeclaration[K] ->( +export const setDomAttribute = ( HTMLElement: HTMLElement, key: K, value: V @@ -149,7 +146,7 @@ export const addEventListener = ( type, throttle(listener, delay || 300, { leading: true, - trailing: false, + trailing: false }), options ) @@ -186,3 +183,34 @@ export const canvasCut = (html: HTMLElement | null, callback?: Function) => { if (callback) callback() }) } + +/** + * * 函数过滤器 + * @param data 数据值 + * @param funcStr 函数字符串 + * @param toString 转为字符串 + * @param errorCallBack 错误回调函数 + * @param successCallBack 成功回调函数 + * @returns + */ +export const newFunctionHandle = ( + data: any, + funcStr?: string, + toString?: boolean, + errorCallBack?: Function, + successCallBack?: Function +) => { + try { + if (!funcStr) return data + const fn = new Function('data', funcStr) + const fnRes = fn( cloneDeep(data)) + const resHandle = toString && isString(fnRes) ? JSON.stringify(fnRes) : fnRes + // 成功回调 + successCallBack && successCallBack(resHandle) + return resHandle + } catch (error) { + // 失败回调 + errorCallBack && errorCallBack(error) + return '函数执行错误' + } +} 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 3098f6f1..c9e32045 100644 --- a/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataAjax/index.vue +++ b/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataAjax/index.vue @@ -1,10 +1,7 @@ - + - + + diff --git a/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataStatic/index.vue b/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataStatic/index.vue index 78f91e6e..d2867918 100644 --- a/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataStatic/index.vue +++ b/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataStatic/index.vue @@ -1,6 +1,6 @@ diff --git a/src/views/chart/ContentConfigurations/components/ChartData/index.d.ts b/src/views/chart/ContentConfigurations/components/ChartData/index.d.ts index d12766ad..c6707bcb 100644 --- a/src/views/chart/ContentConfigurations/components/ChartData/index.d.ts +++ b/src/views/chart/ContentConfigurations/components/ChartData/index.d.ts @@ -8,6 +8,7 @@ export enum DataResultEnum { } export enum TimelineTitleEnum { + FILTER = '数据过滤', MAPPING = '数据映射', CONTENT = '数据内容', }