From 2ee2783a9cf4bf7b3972183e6d2d68d7a44dcb54 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: Wed, 29 Jun 2022 09:55:44 +0800 Subject: [PATCH 1/9] =?UTF-8?q?style:=20=E4=BF=AE=E6=94=B9=E5=8D=95?= =?UTF-8?q?=E8=AF=8D=E6=8B=BC=E5=86=99=E9=94=99=E8=AF=AF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/utils/style.ts | 2 +- src/views/chart/ContentEdit/index.vue | 4 ++-- src/views/preview/components/PreviewRenderList/index.vue | 4 ++-- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/utils/style.ts b/src/utils/style.ts index 1d7a4a84..ee1bec51 100644 --- a/src/utils/style.ts +++ b/src/utils/style.ts @@ -24,7 +24,7 @@ export const getFilterStyle = (styles: StylesType | EditCanvasConfigType) => { } // 变换 -export const getTranstormStyle = (styles: StylesType) => { +export const getTransformStyle = (styles: StylesType) => { const { rotateZ, rotateX, rotateY, skewX, skewY } = styles return { transform: `rotateZ(${rotateZ || 0}deg) rotateX(${rotateX || 0}deg) rotateY(${rotateY || 0}deg) skewX(${skewX || 0}deg) skewY(${skewY || 0}deg)`, diff --git a/src/views/chart/ContentEdit/index.vue b/src/views/chart/ContentEdit/index.vue index 27a017c2..c35b2785 100644 --- a/src/views/chart/ContentEdit/index.vue +++ b/src/views/chart/ContentEdit/index.vue @@ -42,7 +42,7 @@ :style="{ ...useSizeStyle(item.attr), ...getFilterStyle(item.styles), - ...getTranstormStyle(item.styles), + ...getTransformStyle(item.styles), }" > @@ -65,7 +65,7 @@ + + \ 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 = '数据内容', } From 9e6873e1da2d16bdceb547ea9ccc6a3b31fb9979 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: Wed, 6 Jul 2022 14:13:27 +0800 Subject: [PATCH 3/9] =?UTF-8?q?fix:=20=E8=A7=A3=E5=86=B3=E7=BC=96=E8=BE=91?= =?UTF-8?q?=E5=99=A8=E7=9A=84=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- build/constant.ts | 16 ++- package.json | 1 + pnpm-lock.yaml | 10 ++ .../Pages/MonacoEditor/index.hook.ts | 103 +++++++++++----- src/components/Pages/MonacoEditor/index.vue | 114 ++++++++---------- .../ChartDataMonacoEditor/index.vue | 11 +- vite.config.ts | 14 ++- 7 files changed, 160 insertions(+), 109 deletions(-) diff --git a/build/constant.ts b/build/constant.ts index dfa2f491..38ff0454 100644 --- a/build/constant.ts +++ b/build/constant.ts @@ -1,4 +1,7 @@ -export const OUTPUT_DIR = 'dist'; +export const OUTPUT_DIR = 'dist' + +// monaco-editor 路径 +export const prefix = `monaco-editor/esm/vs` // chunk 警告大小 export const chunkSizeWarningLimit = 2000 @@ -11,7 +14,14 @@ export const rollupOptions = { output: { chunkFileNames: 'static/js/[name]-[hash].js', entryFileNames: 'static/js/[name]-[hash].js', - assetFileNames: 'static/[ext]/[name]-[hash].[ext]' + assetFileNames: 'static/[ext]/[name]-[hash].[ext]', + manualChunks: { + jsonWorker: [`${prefix}/language/json/json.worker`], + cssWorker: [`${prefix}/language/css/css.worker`], + htmlWorker: [`${prefix}/language/html/html.worker`], + tsWorker: [`${prefix}/language/typescript/ts.worker`], + editorWorker: [`${prefix}/editor/editor.worker`] + } } } @@ -22,4 +32,4 @@ export const terserOptions = { drop_console: true, drop_debugger: true } -} \ No newline at end of file +} diff --git a/package.json b/package.json index 5b01c51f..98295f6f 100644 --- a/package.json +++ b/package.json @@ -64,6 +64,7 @@ "vite-plugin-compression": "^0.5.1", "vite-plugin-importer": "^0.2.5", "vite-plugin-mock": "^2.9.6", + "vite-plugin-monaco-editor": "^1.1.0", "vue-echarts": "^6.0.2", "vue-tsc": "^0.28.10" } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 4a73acf9..eb4b2211 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -47,6 +47,7 @@ specifiers: vite-plugin-compression: ^0.5.1 vite-plugin-importer: ^0.2.5 vite-plugin-mock: ^2.9.6 + vite-plugin-monaco-editor: ^1.1.0 vue: ^3.2.31 vue-demi: ^0.13.1 vue-echarts: ^6.0.2 @@ -113,6 +114,7 @@ devDependencies: vite-plugin-compression: 0.5.1_vite@2.9.5 vite-plugin-importer: 0.2.5 vite-plugin-mock: 2.9.6_mockjs@1.1.0+vite@2.9.5 + vite-plugin-monaco-editor: 1.1.0_monaco-editor@0.33.0 vue-echarts: 6.0.3_echarts@5.3.3+vue@3.2.37 vue-tsc: 0.28.10_typescript@4.7.3 @@ -5111,6 +5113,14 @@ packages: - supports-color dev: true + /vite-plugin-monaco-editor/1.1.0_monaco-editor@0.33.0: + resolution: {integrity: sha512-IvtUqZotrRoVqwT0PBBDIZPNraya3BxN/bfcNfnxZ5rkJiGcNtO5eAOWWSgT7zullIAEqQwxMU83yL9J5k7gww==} + peerDependencies: + monaco-editor: '>=0.33.0' + dependencies: + monaco-editor: 0.33.0 + dev: true + /vite/2.9.5_sass@1.52.3: resolution: {integrity: sha512-dvMN64X2YEQgSXF1lYabKXw3BbN6e+BL67+P3Vy4MacnY+UzT1AfkHiioFSi9+uiDUiaDy7Ax/LQqivk6orilg==} engines: {node: '>=12.2.0'} diff --git a/src/components/Pages/MonacoEditor/index.hook.ts b/src/components/Pages/MonacoEditor/index.hook.ts index d68ef4de..e6f808e3 100644 --- a/src/components/Pages/MonacoEditor/index.hook.ts +++ b/src/components/Pages/MonacoEditor/index.hook.ts @@ -1,46 +1,83 @@ +import { ref, onBeforeUnmount, nextTick } from 'vue' import * as monaco from 'monaco-editor/esm/vs/editor/editor.api.js' +import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker' +import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker' +// import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker' +// import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker' +import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker' -export const useMonacoEditor = (language = 'json') => { +export const useMonacoEditor = (language = 'javascript') => { 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 el = ref(null) + + // @ts-ignore + self.MonacoEnvironment = { + getWorker(_: any, label: string) { + if (label === 'json') { + return new jsonWorker() + } + // if (label === 'css' || label === 'scss' || label === 'less') { + // return new cssWorker() + // } + // if (label === 'html' || label === 'handlebars' || label === 'razor') { + // return new htmlWorker() + // } + if (label === 'typescript' || label === 'javascript') { + return new tsWorker() + } + return new editorWorker() + } } - const createEditor = ( - el: HTMLElement | null, - editorOption: monaco.editor.IStandaloneEditorConstructionOptions = {} - ) => { - if (monacoEditor) { - return - } + // 格式化 + const onFormatDoc = async () => { + await monacoEditor?.getAction('monacoEditor.action.formatDocument')?.run() + } + + // 更新 + const updateVal = (val: string) => { + nextTick(async () => { + monacoEditor?.setValue(val) + initReadOnly && monacoEditor?.updateOptions({ readOnly: false }) + await onFormatDoc() + initReadOnly && monacoEditor?.updateOptions({ readOnly: true }) + }) + } + + // 创建实例 + const createEditor = (editorOption: monaco.editor.IStandaloneEditorConstructionOptions = {}) => { + if (!el.value) return + const javascriptModel = monaco.editor.createModel('', language) 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 - }) + // 创建 + monacoEditor = monaco.editor.create(el.value, { + model: javascriptModel, + minimap: { enabled: true }, + roundedSelection: false, + theme: 'vs-dark', + multiCursorModifier: 'ctrlCmd', + scrollbar: { + verticalScrollbarSize: 8, + horizontalScrollbarSize: 8 + }, + tabSize: 2, + fontSize: 16, //字体大小 + autoIndent: 'advanced', //自动布局 + automaticLayout: true, // 自适应宽高 + ...editorOption + }) + return monacoEditor } - const onFormatDoc = () => { - monacoEditor?.getAction('editor.action.formatDocument').run() - } + + // 卸载 + onBeforeUnmount(() => { + if (monacoEditor) monacoEditor.dispose() + }) + return { + el, updateVal, getEditor: () => monacoEditor, createEditor, diff --git a/src/components/Pages/MonacoEditor/index.vue b/src/components/Pages/MonacoEditor/index.vue index 9c2dc43f..c13190ca 100644 --- a/src/components/Pages/MonacoEditor/index.vue +++ b/src/components/Pages/MonacoEditor/index.vue @@ -1,75 +1,65 @@ - \ No newline at end of file + 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 50722eaf..9f361c32 100644 --- a/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataMonacoEditor/index.vue +++ b/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataMonacoEditor/index.vue @@ -56,9 +56,11 @@
// 数据参数 => data -

function  filter(data)  {

- -

}

+ + function  filter(data)  { + + + }
@@ -171,9 +173,6 @@ const saveFilter = () => { targetData.value.filter = filter.value closeFilter() } - -// 执行过滤处理 -const filterData = (data: any) => {} 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 80fe5c97..dd07e151 100644 --- a/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataMonacoEditor/index.vue +++ b/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataMonacoEditor/index.vue @@ -90,7 +90,7 @@ 规则 - 过滤器将对接口返回值的「data」字段进行处理 + 过滤器将对接口返回值的「data」字段进行处理
From 417821b72d9100347bfe0995fc3b309183d6eb8d 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: Wed, 6 Jul 2022 21:48:41 +0800 Subject: [PATCH 9/9] =?UTF-8?q?style:=20=E8=BF=98=E5=8E=9F=E8=AF=B7?= =?UTF-8?q?=E6=B1=82=E9=97=B4=E9=9A=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/settings/designSetting.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/settings/designSetting.ts b/src/settings/designSetting.ts index dfbd5d52..fe10d8ff 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 = 5 +export const requestInterval = 30 // 工作区域历史记录存储最大数量 export const editHistoryMax = 100 \ No newline at end of file