diff --git a/README.md b/README.md index 05267c46..9b194765 100644 --- a/README.md +++ b/README.md @@ -4,9 +4,11 @@ GoView 是一个高效的拖拽式低代码数据可视化开发平台，将图表或页面元素封装为基础组件，无需编写代码即可制作数据大屏，减少心智负担。 -### 纯 **😶 前端** 分支： **`master`** +### 😶 纯 **前端** 分支： **`master`** -### 携带 **👻 后端** 请求分支: **`master-fetch`** +### 👻 携带 **后端** 请求分支: **`master-fetch`** + +### 📚 GoView **文档** 地址：[http://www.mtruning.club:81/](http://www.mtruning.club:81/) 项目纯前端-Demo 地址：[https://www.mtruning.club](https://www.mtruning.club) @@ -16,6 +18,12 @@ GoView 是一个高效的拖拽式低代码数据可视化开发平台，将图 文档-源码地址：[https://gitee.com/MTrun/go-view-doc](https://gitee.com/MTrun/go-view-doc) +### 🤯 后端项目 + +后端项目gitee地址：[https://gitee.com/MTrun/go-view-serve](https://gitee.com/MTrun/go-view-serve) + +接口说明地址：[https://docs.apipost.cn/preview/5aa85d10a59d66ce/ddb813732007ad2b?target_id=84dbc5b0-158f-4bcb-8f74-793ac604ada3#3e053622-1e76-43f9-a039-756aee822dbb](https://docs.apipost.cn/preview/5aa85d10a59d66ce/ddb813732007ad2b?target_id=84dbc5b0-158f-4bcb-8f74-793ac604ada3#3e053622-1e76-43f9-a039-756aee822dbb) + 技术点： - 框架：基于 `Vue3` 框架编写，使用 `hooks` 写法抽离部分逻辑，使代码结构更加清晰； diff --git a/package.json b/package.json index 98295f6f..11f3580e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "go-view", - "version": "1.0.4", + "version": "1.0.6", "scripts": { "dev": "vite --host", "build": "vue-tsc --noEmit && vite build", @@ -13,7 +13,7 @@ "@types/crypto-js": "^4.1.1", "@types/keymaster": "^1.6.30", "animate.css": "^4.1.1", - "axios": "0.23.0", + "axios": "^0.27.2", "color": "^4.2.3", "crypto-js": "^4.1.1", "echarts-liquidfill": "^3.1.0", diff --git a/src/api/axios.ts b/src/api/axios.ts index 2e20ebd0..c913ea09 100644 --- a/src/api/axios.ts +++ b/src/api/axios.ts @@ -10,7 +10,6 @@ const axiosInstance = axios.create({ axiosInstance.interceptors.request.use( (config: AxiosRequestConfig) => { - config.headers = {} return config }, (error: AxiosRequestConfig) => { diff --git a/src/api/http.ts b/src/api/http.ts index 724652bc..f6657c65 100644 --- a/src/api/http.ts +++ b/src/api/http.ts @@ -1,5 +1,13 @@ import axiosInstance from './axios' -import { RequestHttpEnum, ContentTypeEnum } from '@/enums/httpEnum' +import { + RequestHttpEnum, + ContentTypeEnum, + RequestBodyEnum, + RequestDataTypeEnum, + RequestContentTypeEnum, + RequestParamsObjType +} from '@/enums/httpEnum' +import type { RequestGlobalConfigType, RequestConfigType } from '@/store/modules/chartEditStore/chartEditStore.d' export const get = (url: string, params?: object) => { return axiosInstance({ @@ -20,6 +28,17 @@ export const post = (url: string, data?: object, headersType?: string) => { }) } +export const patch = (url: string, data?: object, headersType?: string) => { + return axiosInstance({ + url: url, + method: RequestHttpEnum.PATCH, + data: data, + headers: { + 'Content-Type': headersType || ContentTypeEnum.JSON + } + }) +} + export const put = (url: string, data?: object, headersType?: ContentTypeEnum) => { return axiosInstance({ url: url, @@ -48,6 +67,9 @@ export const http = (type?: RequestHttpEnum) => { case RequestHttpEnum.POST: return post + case RequestHttpEnum.PATCH: + return patch + case RequestHttpEnum.PUT: return put @@ -58,3 +80,111 @@ export const http = (type?: RequestHttpEnum) => { return get } } + +/** + * * 自定义请求 + * @param targetParams 当前组件参数 + * @param globalParams 全局参数 + */ +export const customizeHttp = (targetParams: RequestConfigType, globalParams: RequestGlobalConfigType) => { + if(!targetParams || !globalParams) { + return + } + + // 全局 + const { + // 全局请求源地址 + requestOriginUrl, + // 全局请求内容 + requestParams: globalRequestParams + } = globalParams + + // 目标组件（优先级 > 全局组件） + const { + // 请求地址 + requestUrl, + // 普通 / sql + requestContentType, + // 获取数据的方式 + requestDataType, + // 请求方式 get/post/del/put/patch + requestHttpType, + // 请求体类型 none / form-data / x-www-form-urlencoded / json /xml + requestParamsBodyType, + // SQL 请求对象 + requestSQLContent, + // 请求内容 params / cookie / header / body: 同 requestParamsBodyType + requestParams: targetRequestParams + } = targetParams + + // 静态排除 + if (requestDataType === RequestDataTypeEnum.STATIC) return + + if (!requestUrl) { + return + } + + // 处理头部 + const headers: RequestParamsObjType = { + ...globalRequestParams.Header, + ...targetRequestParams.Header, + } + + // data 参数 + let data: RequestParamsObjType | FormData | string = {} + // params 参数 + let params: RequestParamsObjType = targetRequestParams.Params + // form 类型处理 + let formData: FormData = new FormData() + formData.set('default', 'defaultData') + // 类型处理 + + switch (requestParamsBodyType) { + case RequestBodyEnum.NONE: + break + + case RequestBodyEnum.JSON: + headers['Content-Type'] = ContentTypeEnum.JSON + data = JSON.parse(targetRequestParams.Body['json']) + // json 赋值给 data + break + + case RequestBodyEnum.XML: + headers['Content-Type'] = ContentTypeEnum.XML + // xml 字符串赋值给 data + data = targetRequestParams.Body['xml'] + break + + case RequestBodyEnum.X_WWW_FORM_URLENCODED: + headers['Content-Type'] = ContentTypeEnum.FORM_URLENCODED + const bodyFormData = targetRequestParams.Body['x-www-form-urlencoded'] + for (const i in bodyFormData) formData.set(i, bodyFormData[i]) + // FormData 赋值给 data + data = formData + break + + case RequestBodyEnum.FORM_DATA: + headers['Content-Type'] = ContentTypeEnum.FORM_DATA + const bodyFormUrlencoded = targetRequestParams.Body['form-data'] + for (const i in bodyFormUrlencoded) { + formData.set(i, bodyFormUrlencoded[i]) + } + // FormData 赋值给 data + data = formData + break + } + + // sql 处理 + if (requestContentType === RequestContentTypeEnum.SQL) { + headers['Content-Type'] = ContentTypeEnum.JSON + data = requestSQLContent + } + + return axiosInstance({ + url: `${requestOriginUrl}${requestUrl}`, + method: requestHttpType, + data, + params, + headers + }) +} diff --git a/src/components/Pages/ChartItemSetting/SettingItemBox.vue b/src/components/Pages/ChartItemSetting/SettingItemBox.vue index 56b81c40..95893596 100644 --- a/src/components/Pages/ChartItemSetting/SettingItemBox.vue +++ b/src/components/Pages/ChartItemSetting/SettingItemBox.vue @@ -8,9 +8,9 @@
@@ -28,6 +28,11 @@ defineProps({ type: Boolean, default: false, required: false + }, + itemRightStyle: { + type: Object, + default: () => {}, + required: false } }) @@ -48,7 +53,6 @@ $leftWidth: 60px; .item-right { display: grid; grid-column-gap: 10px; - grid-template-columns: 1fr 1fr; width: calc(100% - #{$leftWidth}); } } diff --git a/src/components/Pages/MonacoEditor/EditorWorker.vue b/src/components/Pages/MonacoEditor/EditorWorker.vue index 5e2a6350..a1689e68 100644 --- a/src/components/Pages/MonacoEditor/EditorWorker.vue +++ b/src/components/Pages/MonacoEditor/EditorWorker.vue @@ -5,6 +5,7 @@ import * as monaco from 'monaco-editor' import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker' import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker' import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker' +import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker' self.MonacoEnvironment = { getWorker(workerId, label) { @@ -14,6 +15,9 @@ self.MonacoEnvironment = { if (label === 'typescript' || label === 'javascript') { return new tsWorker() } + if (label === 'html') { + return new htmlWorker() + } return new editorWorker() } } diff --git a/src/enums/httpEnum.ts b/src/enums/httpEnum.ts index 165948f5..ffc98893 100644 --- a/src/enums/httpEnum.ts +++ b/src/enums/httpEnum.ts @@ -7,7 +7,7 @@ export enum ResultEnum { SERVER_ERROR = 500, SERVER_FORBIDDEN = 403, NOT_FOUND = 404, - TIMEOUT = 10042, + TIMEOUT = 10042 } // 数据相关 @@ -15,7 +15,15 @@ export enum RequestDataTypeEnum { // 静态数据 STATIC = 0, // 请求数据 - AJAX = 1, + AJAX = 1 +} + +// 请求主体类型 +export enum RequestContentTypeEnum { + // 普通请求 + DEFAULT = 0, + // SQL请求 + SQL = 1 } /** @@ -26,7 +34,79 @@ export enum RequestHttpEnum { POST = 'post', PATCH = 'patch', PUT = 'put', - DELETE = 'delete', + DELETE = 'delete' +} + +/** + * @description: 请求间隔 + */ +export enum RequestHttpIntervalEnum { + // 秒 + SECOND = 'second', + // 分 + MINUTE = 'minute', + // 时 + HOUR = 'hour', + // 天 + DAY = 'day' +} + +/** + * @description: 请求间隔名称 + */ +export const SelectHttpTimeNameObj = { + [RequestHttpIntervalEnum.SECOND]: '秒', + [RequestHttpIntervalEnum.MINUTE]: '分', + [RequestHttpIntervalEnum.HOUR]: '时', + [RequestHttpIntervalEnum.DAY]: '天' +} + +/** + * @description: 请求头部类型 + */ +export enum RequestBodyEnum { + NONE = 'none', + FORM_DATA = 'form-data', + X_WWW_FORM_URLENCODED = 'x-www-form-urlencoded', + JSON = 'json', + XML = 'xml' +} + +/** + * @description: 请求头部类型数组 + */ +export const RequestBodyEnumList = [ + RequestBodyEnum.NONE, + RequestBodyEnum.FORM_DATA, + RequestBodyEnum.X_WWW_FORM_URLENCODED, + RequestBodyEnum.JSON, + RequestBodyEnum.XML +] + +/** + * @description: 请求参数类型 + */ +export enum RequestParamsTypeEnum { + PARAMS = 'Params', + BODY = 'Body', + HEADER = 'Header', +} + +/** + * @description: 请求参数主体 + */ +export type RequestParamsObjType = { + [T: string]: string +} +export type RequestParams = { + [RequestParamsTypeEnum.PARAMS]: RequestParamsObjType + [RequestParamsTypeEnum.HEADER]: RequestParamsObjType + [RequestParamsTypeEnum.BODY]: { + [RequestBodyEnum.FORM_DATA]: RequestParamsObjType + [RequestBodyEnum.X_WWW_FORM_URLENCODED]: RequestParamsObjType + [RequestBodyEnum.JSON]: string + [RequestBodyEnum.XML]: string + } } /** @@ -35,10 +115,12 @@ export enum RequestHttpEnum { export enum ContentTypeEnum { // json JSON = 'application/json;charset=UTF-8', - // json + // text TEXT = 'text/plain;charset=UTF-8', - // form-data 一般配合qs + // xml + XML = 'application/xml;charset=UTF-8', + // application/x-www-form-urlencoded 一般配合qs FORM_URLENCODED = 'application/x-www-form-urlencoded;charset=UTF-8', // form-data 上传 - FORM_DATA = 'multipart/form-data;charset=UTF-8', + FORM_DATA = 'multipart/form-data;charset=UTF-8' } diff --git a/src/hooks/useChartDataFetch.hook.ts b/src/hooks/useChartDataFetch.hook.ts index 362cbce0..d13c60e7 100644 --- a/src/hooks/useChartDataFetch.hook.ts +++ b/src/hooks/useChartDataFetch.hook.ts @@ -1,10 +1,10 @@ -import { ref, toRefs } from 'vue' +import { ref, toRefs, toRaw } from 'vue' import type VChart from 'vue-echarts' -import { http } from '@/api/http' +import { customizeHttp } from '@/api/http' import { CreateComponentType, ChartFrameEnum } from '@/packages/index.d' import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' import { RequestDataTypeEnum } from '@/enums/httpEnum' -import { isPreview, newFunctionHandle } from '@/utils' +import { isPreview, newFunctionHandle, intervalUnitHandle } from '@/utils' // 获取类型 type ChartEditStoreType = typeof useChartEditStore @@ -25,55 +25,71 @@ export const useChartDataFetch = ( const requestIntervalFn = () => { const chartEditStore = useChartEditStore() - const { requestOriginUrl, requestInterval } = toRefs(chartEditStore.getRequestGlobalConfig) - // 组件类型 - const { chartFrame } = targetComponent.chartConfig - // 请求配置 + + // 全局数据 + const { + requestOriginUrl, + requestIntervalUnit: globalUnit, + requestInterval: globalRequestInterval + } = toRefs(chartEditStore.getRequestGlobalConfig) + + // 目标组件 const { requestDataType, - requestHttpType, requestUrl, + requestIntervalUnit: targetUnit, requestInterval: targetInterval } = toRefs(targetComponent.request) + + // 组件类型 + const { chartFrame } = targetComponent.chartConfig + // 非请求类型 if (requestDataType.value !== RequestDataTypeEnum.AJAX) return - // 处理地址 - if (requestUrl?.value && requestInterval.value > 0) { - // requestOriginUrl 允许为空 - const completePath = requestOriginUrl && requestOriginUrl.value + requestUrl.value - if (!completePath) return - clearInterval(fetchInterval) + try { + // 处理地址 + // @ts-ignore + if (requestUrl?.value) { + // requestOriginUrl 允许为空 + const completePath = requestOriginUrl && requestOriginUrl.value + requestUrl.value + if (!completePath) return - const fetchFn = async () => { - const res: any = await http(requestHttpType.value)(completePath || '', {}) - if (res.data) { - try { - const filter = targetComponent.filter - // 更新回调函数 - if (updateCallback) { - updateCallback(newFunctionHandle(res.data, filter)) - } else { - // eCharts 组件配合 vChart 库更新方式 - if (chartFrame === ChartFrameEnum.ECHARTS) { - if (vChartRef.value) { - vChartRef.value.setOption({ dataset: newFunctionHandle(res.data, filter) }) + clearInterval(fetchInterval) + + const fetchFn = async () => { + const res = await customizeHttp(toRaw(targetComponent.request), toRaw(chartEditStore.requestGlobalConfig)) + if (res && res.data) { + try { + const filter = targetComponent.filter + // 更新回调函数 + if (updateCallback) { + updateCallback(newFunctionHandle(res.data, filter)) + } else { + // eCharts 组件配合 vChart 库更新方式 + if (chartFrame === ChartFrameEnum.ECHARTS) { + if (vChartRef.value) { + vChartRef.value.setOption({ dataset: newFunctionHandle(res.data, filter) }) + } } } + } catch (error) { + console.error(error) } - } catch (error) { - console.error(error) } } + + // 立即调用 + fetchFn() + + // 定时时间 + const time = targetInterval && targetInterval.value ? targetInterval.value : globalRequestInterval.value + // 单位 + const unit = targetInterval && targetInterval.value ? targetUnit.value : globalUnit.value + // 开启轮询 + if (time) fetchInterval = setInterval(fetchFn, intervalUnitHandle(time, unit)) } - - // 立即调用 - fetchFn() - - // 开启定时 - const time = targetInterval && targetInterval.value ? targetInterval.value : requestInterval.value - fetchInterval = setInterval(fetchFn, time * 1000) - } + } catch (error) {} } isPreview() && requestIntervalFn() diff --git a/src/main.ts b/src/main.ts index 30d5c836..cf9b86df 100644 --- a/src/main.ts +++ b/src/main.ts @@ -7,6 +7,8 @@ import { setupNaive, setupDirectives, setupCustomComponents } from '@/plugins' import { GoAppProvider } from '@/components/GoAppProvider/index' import { setHtmlTheme } from '@/utils' +// 引入全局样式 +import '@/styles/pages/index.scss' // 引入动画 import 'animate.css/animate.min.css' // 引入标尺 diff --git a/src/packages/components/Decorates/Mores/Number/config.vue b/src/packages/components/Decorates/Mores/Number/config.vue index 21736689..760fb14f 100644 --- a/src/packages/components/Decorates/Mores/Number/config.vue +++ b/src/packages/components/Decorates/Mores/Number/config.vue @@ -44,7 +44,7 @@ diff --git a/src/packages/public/publicConfig.ts b/src/packages/public/publicConfig.ts index d4fde6be..8a3bd08a 100644 --- a/src/packages/public/publicConfig.ts +++ b/src/packages/public/publicConfig.ts @@ -1,14 +1,36 @@ import { getUUID } from '@/utils' import { PublicConfigType } from '@/packages/index.d' import { RequestConfigType } from '@/store/modules/chartEditStore/chartEditStore.d' -import { RequestHttpEnum, RequestDataTypeEnum } from '@/enums/httpEnum' +import { + RequestHttpEnum, + RequestDataTypeEnum, + RequestHttpIntervalEnum, + RequestContentTypeEnum, + RequestBodyEnum +} from '@/enums/httpEnum' import { chartInitConfig } from '@/settings/designSetting' const requestConfig: RequestConfigType = { requestDataType: RequestDataTypeEnum.STATIC, requestHttpType: RequestHttpEnum.GET, requestUrl: '', - requestInterval: undefined + requestInterval: undefined, + requestIntervalUnit: RequestHttpIntervalEnum.SECOND, + requestContentType: RequestContentTypeEnum.DEFAULT, + requestParamsBodyType: RequestBodyEnum.NONE, + requestSQLContent: { + sql: 'select * from where' + }, + requestParams: { + Body: { + 'form-data': {}, + 'x-www-form-urlencoded': {}, + json: '', + xml: '' + }, + Header: {}, + Params: {} + } } export class publicConfig implements PublicConfigType { @@ -38,7 +60,7 @@ export class publicConfig implements PublicConfigType { // 倾斜 skewX: 0, skewY: 0, - + // 动画 animations: [] } diff --git a/src/plugins/icon.ts b/src/plugins/icon.ts index c3e47189..fd880959 100644 --- a/src/plugins/icon.ts +++ b/src/plugins/icon.ts @@ -53,6 +53,9 @@ import { ArrowForward as ArrowForwardIcon, Planet as PawIcon, Search as SearchIcon, + ChevronUpOutline as ChevronUpOutlineIcon, + ChevronDownOutline as ChevronDownOutlineIcon, + Pulse as PulseIcon } from '@vicons/ionicons5' import { @@ -196,7 +199,13 @@ const ionicons5 = { // 搜索（放大镜） SearchIcon, // 过滤器 - FilterIcon + FilterIcon, + // 向上 + ChevronUpOutlineIcon, + // 向下 + ChevronDownOutlineIcon, + // 脉搏 + PulseIcon } const carbon = { diff --git a/src/plugins/naive.ts b/src/plugins/naive.ts index 8e7e3dd6..a1e03c3a 100644 --- a/src/plugins/naive.ts +++ b/src/plugins/naive.ts @@ -37,6 +37,7 @@ import { NTooltip, NAvatar, NTabs, + NTab, NTabPane, NCard, NRow, @@ -68,6 +69,7 @@ import { NSteps, NStep, NInputGroup, + NInputGroupLabel, NResult, NDescriptions, NDescriptionsItem, @@ -136,6 +138,7 @@ const naive = create({ NTooltip, NAvatar, NTabs, + NTab, NTabPane, NCard, NRow, @@ -167,6 +170,7 @@ const naive = create({ NSteps, NStep, NInputGroup, + NInputGroupLabel, NResult, NDescriptions, NDescriptionsItem, diff --git a/src/settings/designSetting.ts b/src/settings/designSetting.ts index fe10d8ff..dbb86da5 100644 --- a/src/settings/designSetting.ts +++ b/src/settings/designSetting.ts @@ -1,4 +1,5 @@ import { LangEnum, PreviewScaleEnum } from '@/enums/styleEnum' +import { RequestHttpIntervalEnum } from '@/enums/httpEnum' import designColor from './designColor.json' // 默认语言 @@ -51,5 +52,8 @@ export const previewScaleType = PreviewScaleEnum.FIT // 数据请求间隔 export const requestInterval = 30 +// 数据请求间隔单位 +export const requestIntervalUnit = RequestHttpIntervalEnum.SECOND + // 工作区域历史记录存储最大数量 export const editHistoryMax = 100 \ No newline at end of file diff --git a/src/store/modules/chartEditStore/chartEditStore.d.ts b/src/store/modules/chartEditStore/chartEditStore.d.ts index dab3a992..8e8ec864 100644 --- a/src/store/modules/chartEditStore/chartEditStore.d.ts +++ b/src/store/modules/chartEditStore/chartEditStore.d.ts @@ -1,11 +1,16 @@ -import { CreateComponentType, FilterEnum} from '@/packages/index.d' +import { CreateComponentType, FilterEnum } from '@/packages/index.d' import { HistoryActionTypeEnum } from '@/store/modules/chartHistoryStore/chartHistoryStore.d' -import { RequestHttpEnum, RequestDataTypeEnum } from '@/enums/httpEnum' +import { + RequestHttpEnum, + RequestContentTypeEnum, + RequestDataTypeEnum, + RequestHttpIntervalEnum, + RequestParams, + RequestBodyEnum, + RequestParamsObjType +} from '@/enums/httpEnum' import { PreviewScaleEnum } from '@/enums/styleEnum' -import type { - ChartColorsNameType, - GlobalThemeJsonType, -} from '@/settings/chartThemes/index' +import type { ChartColorsNameType, GlobalThemeJsonType } from '@/settings/chartThemes/index' // 编辑画布属性 export enum EditCanvasTypeEnum { @@ -16,7 +21,7 @@ export enum EditCanvasTypeEnum { USER_SCALE = 'userScale', LOCK_SCALE = 'lockScale', IS_CREATE = 'isCreate', - IS_DRAG = 'isDrag', + IS_DRAG = 'isDrag' } // 编辑区域 @@ -47,7 +52,7 @@ export enum EditCanvasConfigEnum { BACKGROUND = 'background', BACKGROUND_IMAGE = 'backgroundImage', SELECT_COLOR = 'selectColor', - PREVIEW_SCALE_TYPE = 'previewScaleType', + PREVIEW_SCALE_TYPE = 'previewScaleType' } export interface EditCanvasConfigType { @@ -89,7 +94,7 @@ export enum EditCanvasTypeEnum { START_X = 'startX', START_Y = 'startY', X = 'x', - Y = 'y', + Y = 'y' } // 鼠标位置 @@ -127,27 +132,43 @@ export enum ChartEditStoreEnum { // 以下需要存储 EDIT_CANVAS_CONFIG = 'editCanvasConfig', REQUEST_GLOBAL_CONFIG = 'requestGlobalConfig', - COMPONENT_LIST = 'componentList', + COMPONENT_LIST = 'componentList' +} + +// 请求公共类型 +type RequestPublicConfigType = { + // 时间单位（时分秒） + requestIntervalUnit: RequestHttpIntervalEnum + // 请求内容 + requestParams: RequestParams } // 全局的图表请求配置 -export type RequestGlobalConfigType = { +export interface RequestGlobalConfigType extends RequestPublicConfigType { + // 组件定制轮询时间 + requestInterval: number // 请求源地址 requestOriginUrl?: string - // 全局默认轮询时间 - requestInterval: number } // 单个图表请求配置 -export type RequestConfigType = { +export interface RequestConfigType extends RequestPublicConfigType { + // 组件定制轮询时间 + requestInterval?: number // 获取数据的方式 requestDataType: RequestDataTypeEnum // 请求方式 get/post/del/put/patch requestHttpType: RequestHttpEnum // 源后续的 url requestUrl?: string - // 组件定制轮询时间 - requestInterval?: number + // 请求内容主体方式 普通/sql + requestContentType: RequestContentTypeEnum + // 请求体类型 + requestParamsBodyType: RequestBodyEnum + // SQL 请求对象 + requestSQLContent: { + sql: string + } } // Store 类型 diff --git a/src/store/modules/chartEditStore/chartEditStore.ts b/src/store/modules/chartEditStore/chartEditStore.ts index de2d2fa2..27cab452 100644 --- a/src/store/modules/chartEditStore/chartEditStore.ts +++ b/src/store/modules/chartEditStore/chartEditStore.ts @@ -3,7 +3,8 @@ import { CreateComponentType } from '@/packages/index.d' import debounce from 'lodash/debounce' import cloneDeep from 'lodash/cloneDeep' import { defaultTheme, globalThemeJson } from '@/settings/chartThemes/index' -import { requestInterval, previewScaleType } from '@/settings/designSetting' +import { requestInterval, previewScaleType, requestIntervalUnit } from '@/settings/designSetting' +import { RequestBodyEnum } from '@/enums/httpEnum' // 记录记录 import { useChartHistoryStore } from '@/store/modules/chartHistoryStore/chartHistoryStore' // 全局设置 @@ -109,7 +110,18 @@ export const useChartEditStore = defineStore({ // 数据请求处理（需存储给后端） requestGlobalConfig: { requestOriginUrl: '', - requestInterval: requestInterval + requestInterval: requestInterval, + requestIntervalUnit: requestIntervalUnit, + requestParams: { + Body: { + "form-data": {}, + "x-www-form-urlencoded": {}, + json: '', + xml: '' + }, + Header: {}, + Params: {} + } }, // 图表数组（需存储给后端） componentList: [] @@ -299,7 +311,7 @@ export const useChartEditStore = defineStore({ // 历史记录 if (isHistory) { - chartHistoryStore.createLaryerHistory( + chartHistoryStore.createLayerHistory( setIndex(targetData, index), isEnd ? HistoryActionTypeEnum.BOTTOM : HistoryActionTypeEnum.TOP ) @@ -347,7 +359,7 @@ export const useChartEditStore = defineStore({ // 历史记录 if (isHistory) { - chartHistoryStore.createLaryerHistory( + chartHistoryStore.createLayerHistory( targetItem, isDown ? HistoryActionTypeEnum.DOWN : HistoryActionTypeEnum.UP ) @@ -380,7 +392,7 @@ export const useChartEditStore = defineStore({ type: isCut ? HistoryActionTypeEnum.CUT : HistoryActionTypeEnum.COPY } this.setRecordChart(copyData) - window['$message'].success(isCut ? '剪切成功' : '复制成功！') + window['$message'].success(isCut ? '剪切图表成功' : '复制图表成功！') loadingFinish() } } catch(value) { diff --git a/src/store/modules/chartHistoryStore/chartHistoryStore.ts b/src/store/modules/chartHistoryStore/chartHistoryStore.ts index 9d29fbbe..31b0425d 100644 --- a/src/store/modules/chartHistoryStore/chartHistoryStore.ts +++ b/src/store/modules/chartHistoryStore/chartHistoryStore.ts @@ -180,7 +180,7 @@ export const useChartHistoryStore = defineStore({ ) }, // * 改变层级组件记录 - createLaryerHistory( + createLayerHistory( item: CreateComponentType, type: | HistoryActionTypeEnum.TOP diff --git a/src/styles/pages/index.scss b/src/styles/pages/index.scss new file mode 100644 index 00000000..3e1b45e5 --- /dev/null +++ b/src/styles/pages/index.scss @@ -0,0 +1 @@ +// 页面全局样式 \ No newline at end of file diff --git a/src/utils/file.ts b/src/utils/file.ts index 0ce0978f..858afbad 100644 --- a/src/utils/file.ts +++ b/src/utils/file.ts @@ -38,7 +38,7 @@ export const downloadByA = (url: string, filename = new Date().getTime(), fileSu } /** - * 下载数据 + * * 下载数据 * @param { string } content 数据内容 * @param { ?string } filename 文件名称（默认随机字符） * @param { ?string } fileSuffix 文件名称（默认随机字符） diff --git a/src/utils/style.ts b/src/utils/style.ts index ee1bec51..c692fdc4 100644 --- a/src/utils/style.ts +++ b/src/utils/style.ts @@ -6,7 +6,7 @@ import { EditCanvasConfigType } from '@/store/modules/chartEditStore/chartEditSt type AttrType = PickCreateComponentType<'attr'> type StylesType = PickCreateComponentType<'styles'> -// 动画 +// * 动画 export const animationsClass = (animations: string[]) => { if (animations.length) { return `animate__animated animate__${animations[0]}` @@ -14,7 +14,7 @@ export const animationsClass = (animations: string[]) => { return '' } -// 滤镜 +// * 滤镜 export const getFilterStyle = (styles: StylesType | EditCanvasConfigType) => { const { opacity, saturate, contrast, hueRotate, brightness } = styles return { @@ -23,7 +23,7 @@ export const getFilterStyle = (styles: StylesType | EditCanvasConfigType) => { } } -// 变换 +// * 变换 export const getTransformStyle = (styles: StylesType) => { const { rotateZ, rotateX, rotateY, skewX, skewY } = styles return { diff --git a/src/utils/utils.ts b/src/utils/utils.ts index f7a161d0..b3ffa42f 100644 --- a/src/utils/utils.ts +++ b/src/utils/utils.ts @@ -6,7 +6,8 @@ import Image_404 from '../assets/images/exception/image-404.png' import html2canvas from 'html2canvas' import { downloadByA } from './file' import { toString } from './type' -import cloneDeep from 'lodash/cloneDeep'; +import cloneDeep from 'lodash/cloneDeep' +import { RequestHttpIntervalEnum, RequestParamsObjType } from '@/enums/httpEnum' /** * * 判断是否是开发环境 @@ -203,7 +204,7 @@ export const newFunctionHandle = ( try { if (!funcStr) return data const fn = new Function('data', funcStr) - const fnRes = fn( cloneDeep(data)) + const fnRes = fn(cloneDeep(data)) const resHandle = isToString ? toString(fnRes) : fnRes // 成功回调 successCallBack && successCallBack(resHandle) @@ -214,3 +215,43 @@ export const newFunctionHandle = ( return '函数执行错误' } } + +/** + * * 处理请求事件单位 + * @param num 时间间隔 + * @param unit RequestHttpIntervalEnum + * @return number 秒数 + */ +export const intervalUnitHandle = (num: number, unit: RequestHttpIntervalEnum) => { + switch (unit) { + // 秒 + case RequestHttpIntervalEnum.SECOND: + return num * 1000 + // 分 + case RequestHttpIntervalEnum.MINUTE: + return num * 1000 * 60 + // 时 + case RequestHttpIntervalEnum.HOUR: + return num * 1000 * 60 * 60 + // 天 + case RequestHttpIntervalEnum.DAY: + return num * 1000 * 60 * 60 * 24 + default: + return num * 1000 + } +} + +/** + * * 对象转换 cookie 格式 + * @param obj + * @returns string + */ +export const objToCookie = (obj: RequestParamsObjType) => { + if(!obj) return '' + + let str = '' + for (const key in obj) { + str += key + '=' + obj[key] + ';' + } + return str.substr(0, str.length - 1) +} diff --git a/src/views/chart/ContentConfigurations/components/CanvasPage/components/ChartDataSetting/index.vue b/src/views/chart/ContentConfigurations/components/CanvasPage/components/ChartDataSetting/index.vue deleted file mode 100644 index 298a14ae..00000000 --- a/src/views/chart/ContentConfigurations/components/CanvasPage/components/ChartDataSetting/index.vue +++ /dev/null @@ -1,30 +0,0 @@ - - - diff --git a/src/views/chart/ContentConfigurations/components/CanvasPage/index.vue b/src/views/chart/ContentConfigurations/components/CanvasPage/index.vue index a3d32866..13287cfc 100644 --- a/src/views/chart/ContentConfigurations/components/CanvasPage/index.vue +++ b/src/views/chart/ContentConfigurations/components/CanvasPage/index.vue @@ -135,7 +135,7 @@ import { PreviewScaleEnum } from '@/enums/styleEnum' import { icon } from '@/plugins' const { ColorPaletteIcon } = icon.ionicons5 -const { ZAxisIcon, ScaleIcon, FitToScreenIcon, FitToHeightIcon, FitToWidthIcon } = icon.carbon +const { ScaleIcon, FitToScreenIcon, FitToHeightIcon, FitToWidthIcon } = icon.carbon const chartEditStore = useChartEditStore() const canvasConfig = chartEditStore.getEditCanvasConfig @@ -147,9 +147,6 @@ const switchSelectColorLoading = ref(false) const ChartThemeColor = loadAsyncComponent(() => import('./components/ChartThemeColor/index.vue') ) -const ChartDataSetting = loadAsyncComponent(() => - import('./components/ChartDataSetting/index.vue') -) // 北京默认展示颜色列表 const swatchesColors = [ @@ -169,12 +166,6 @@ const globalTabList = [ title: '主题颜色', icon: ColorPaletteIcon, render: ChartThemeColor - }, - { - key: 'ChartSysSetting', - title: '数据配置', - icon: ZAxisIcon, - render: ChartDataSetting } ] 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 488eefb0..b5dfdb20 100644 --- a/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataAjax/index.vue +++ b/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataAjax/index.vue @@ -1,44 +1,57 @@ - - - - \ No newline at end of file diff --git a/src/views/chart/ContentEdit/components/EditRange/index.vue b/src/views/chart/ContentEdit/components/EditRange/index.vue index 7cff8e94..72a01672 100644 --- a/src/views/chart/ContentEdit/components/EditRange/index.vue +++ b/src/views/chart/ContentEdit/components/EditRange/index.vue @@ -1,9 +1,5 @@