diff --git a/README.md b/README.md index 76642206..c409f245 100644 --- a/README.md +++ b/README.md @@ -14,6 +14,12 @@ 接口地址修改：`.env` +### 🤯 后端项目 + +后端项目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) + ```shell # port VITE_DEV_PORT = '8080' diff --git a/package.json b/package.json index 2904606a..54fa48a6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "go-view", - "version": "2.0.2", + "version": "2.0.3", "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 8557403e..2b9f1aec 100644 --- a/src/api/axios.ts +++ b/src/api/axios.ts @@ -25,6 +25,7 @@ axiosInstance.interceptors.request.use( return config } config.headers = { + ...config.headers, [RequestHttpHeaderEnum.TOKEN]: info[SystemStoreEnum.USER_INFO][SystemStoreUserInfoEnum.USER_TOKEN] || '' } return config diff --git a/src/api/http.ts b/src/api/http.ts index 6f3b2eff..73701e34 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 f6dee6bb..12211e15 100644 --- a/src/enums/httpEnum.ts +++ b/src/enums/httpEnum.ts @@ -20,7 +20,15 @@ export enum RequestDataTypeEnum { // 静态数据 STATIC = 0, // 请求数据 - AJAX = 1, + AJAX = 1 +} + +// 请求主体类型 +export enum RequestContentTypeEnum { + // 普通请求 + DEFAULT = 0, + // SQL请求 + SQL = 1 } // 头部 @@ -35,17 +43,91 @@ 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 + } } // 常用的contentTyp类型 export enum ContentTypeEnum { // json - JSON = 'application/json; charset=UTF-8', + JSON = 'application/json;charset=UTF-8', // text - TEXT = 'text/plain; charset=UTF-8', - // form-data 一般配合qs - FORM_URLENCODED = 'application/x-www-form-urlencoded; charset=UTF-8', + TEXT = 'text/plain;charset=UTF-8', + // 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 23788161..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 = await http(requestHttpType.value)(completePath || '', {}) as unknown as MyResponseType - 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 3b39f6bb..6475cd05 100644 --- a/src/plugins/icon.ts +++ b/src/plugins/icon.ts @@ -53,7 +53,10 @@ import { ArrowForward as ArrowForwardIcon, Planet as PawIcon, Search as SearchIcon, - Reload as ReloadIcon + Reload as ReloadIcon, + ChevronUpOutline as ChevronUpOutlineIcon, + ChevronDownOutline as ChevronDownOutlineIcon, + Pulse as PulseIcon } from '@vicons/ionicons5' import { @@ -196,7 +199,15 @@ const ionicons5 = { // 搜索（放大镜） SearchIcon, // 加载 - ReloadIcon + ReloadIcon, + // 过滤器 + 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 7a124806..c2146b52 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' // 默认语言 @@ -54,5 +55,8 @@ export const requestInterval = 30 // 工作台自动保存间隔（s） export const saveInterval = 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 a64e241c..e937afb2 100644 --- a/src/store/modules/chartEditStore/chartEditStore.d.ts +++ b/src/store/modules/chartEditStore/chartEditStore.d.ts @@ -1,12 +1,17 @@ -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 { SyncEnum } from '@/enums/editPageEnum' +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 ProjectInfoEnum { @@ -71,7 +76,7 @@ export enum EditCanvasConfigEnum { BACKGROUND = 'background', BACKGROUND_IMAGE = 'backgroundImage', SELECT_COLOR = 'selectColor', - PREVIEW_SCALE_TYPE = 'previewScaleType', + PREVIEW_SCALE_TYPE = 'previewScaleType' } // 画布属性（需保存） @@ -118,7 +123,7 @@ export enum EditCanvasTypeEnum { START_X = 'startX', START_Y = 'startY', X = 'x', - Y = 'y', + Y = 'y' } // 鼠标位置 @@ -157,27 +162,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 b1052b87..5fa3f56d 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' // 全局设置 @@ -123,7 +124,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: [] @@ -401,7 +413,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/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/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 92b625b2..43a3746c 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' /** * * 判断是否是开发环境 @@ -180,7 +181,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) @@ -191,3 +192,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 b71f019f..e92a2755 100644 --- a/src/views/chart/ContentConfigurations/components/CanvasPage/index.vue +++ b/src/views/chart/ContentConfigurations/components/CanvasPage/index.vue @@ -138,7 +138,7 @@ import { icon } from '@/plugins' import { uploadFile} from '@/api/path' const { ColorPaletteIcon } = icon.ionicons5 -const { ZAxisIcon, ScaleIcon, FitToScreenIcon, FitToHeightIcon, FitToWidthIcon } = icon.carbon +const { ScaleIcon, FitToScreenIcon, FitToHeightIcon, FitToWidthIcon } = icon.carbon const chartEditStore = useChartEditStore() const systemStore = useSystemStore() @@ -151,9 +151,6 @@ const switchSelectColorLoading = ref(false) const ChartThemeColor = loadAsyncComponent(() => import('./components/ChartThemeColor/index.vue') ) -const ChartDataSetting = loadAsyncComponent(() => - import('./components/ChartDataSetting/index.vue') -) // 北京默认展示颜色列表 const swatchesColors = [ @@ -173,12 +170,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/vite.config.ts b/vite.config.ts index 9807faed..dd7ea828 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -54,7 +54,7 @@ export default ({ mode }) => defineConfig({ plugins: [ vue(), monacoEditorPlugin({ - languageWorkers: ['editorWorkerService', 'typescript', 'json'] + languageWorkers: ['editorWorkerService', 'typescript', 'json', 'html'] }), viteMockServe({ mockPath: '/src/api/mock',