From f178b0e0ca3d61c744e1eeb96e88e1c0a1ed28a9 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: Sat, 16 Jul 2022 19:01:05 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E5=85=A8=E5=B1=80?= =?UTF-8?q?=E8=AF=B7=E6=B1=82=E6=95=B0=E6=8D=AE=E5=A4=84=E7=90=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/useChartDataFetch.hook.ts | 71 ++++++------ src/plugins/icon.ts | 8 +- .../chartEditStore/chartEditStore.d.ts | 10 +- .../modules/chartEditStore/chartEditStore.ts | 1 - src/utils/utils.ts | 30 +++++- .../ChartDataMonacoEditor/index.vue | 1 - .../components/RequestGlobalConfig/index.vue | 52 +++++++-- .../RequestGlobalHeaderTable/index.ts | 3 + .../RequestGlobalHeaderTable/index.vue | 32 ++++++ .../components/RequestHeader/index.vue | 4 +- .../components/RequestHeaderTable/index.vue | 101 +++++++++--------- .../components/RequestTargetConfig/index.vue | 2 +- .../components/ChartDataRequest/index.vue | 25 +++-- 13 files changed, 231 insertions(+), 109 deletions(-) create mode 100644 src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataRequest/components/RequestGlobalHeaderTable/index.ts create mode 100644 src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataRequest/components/RequestGlobalHeaderTable/index.vue diff --git a/src/hooks/useChartDataFetch.hook.ts b/src/hooks/useChartDataFetch.hook.ts index 362cbce0..3155ac74 100644 --- a/src/hooks/useChartDataFetch.hook.ts +++ b/src/hooks/useChartDataFetch.hook.ts @@ -4,7 +4,7 @@ import { http } 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,7 +25,7 @@ export const useChartDataFetch = ( const requestIntervalFn = () => { const chartEditStore = useChartEditStore() - const { requestOriginUrl, requestInterval } = toRefs(chartEditStore.getRequestGlobalConfig) + const { requestOriginUrl, requestInterval, requestIntervalUnit } = toRefs(chartEditStore.getRequestGlobalConfig) // 组件类型 const { chartFrame } = targetComponent.chartConfig // 请求配置 @@ -35,45 +35,52 @@ export const useChartDataFetch = ( requestUrl, requestInterval: targetInterval } = toRefs(targetComponent.request) + // 非请求类型 - if (requestDataType.value !== RequestDataTypeEnum.AJAX) return - // 处理地址 - if (requestUrl?.value && requestInterval.value > 0) { - // requestOriginUrl 允许为空 - const completePath = requestOriginUrl && requestOriginUrl.value + requestUrl.value - if (!completePath) return + if (requestDataType.value !== RequestDataTypeEnum.AJAX || !requestInterval) return + + try { + // 处理地址 + // @ts-ignore + if (requestUrl?.value && requestInterval && requestInterval.value > 0) { + // requestOriginUrl 允许为空 + const completePath = requestOriginUrl && requestOriginUrl.value + requestUrl.value + if (!completePath) return - clearInterval(fetchInterval) + clearInterval(fetchInterval) - 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) }) + 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) }) + } } } + } catch (error) { + console.error(error) } - } catch (error) { - console.error(error) } } + + // 立即调用 + fetchFn() + + // 开启定时 + const time = targetInterval && targetInterval.value ? targetInterval.value : requestInterval.value + + // 处理单位时间 + fetchInterval = setInterval(fetchFn, intervalUnitHandle(time, requestIntervalUnit.value)) } - - // 立即调用 - fetchFn() - - // 开启定时 - const time = targetInterval && targetInterval.value ? targetInterval.value : requestInterval.value - fetchInterval = setInterval(fetchFn, time * 1000) - } + } catch (error) {} } isPreview() && requestIntervalFn() diff --git a/src/plugins/icon.ts b/src/plugins/icon.ts index c00bc7fb..43583f0c 100644 --- a/src/plugins/icon.ts +++ b/src/plugins/icon.ts @@ -53,6 +53,8 @@ import { ArrowForward as ArrowForwardIcon, Planet as PawIcon, Search as SearchIcon, + ChevronUpOutline as ChevronUpOutlineIcon, + ChevronDownOutline as ChevronDownOutlineIcon } from '@vicons/ionicons5' import { @@ -194,7 +196,11 @@ const ionicons5 = { // 搜索(放大镜) SearchIcon, // 过滤器 - FilterIcon + FilterIcon, + // 向上 + ChevronUpOutlineIcon, + // 向下 + ChevronDownOutlineIcon } const carbon = { diff --git a/src/store/modules/chartEditStore/chartEditStore.d.ts b/src/store/modules/chartEditStore/chartEditStore.d.ts index b544a64f..8e8ec864 100644 --- a/src/store/modules/chartEditStore/chartEditStore.d.ts +++ b/src/store/modules/chartEditStore/chartEditStore.d.ts @@ -137,24 +137,24 @@ export enum ChartEditStoreEnum { // 请求公共类型 type RequestPublicConfigType = { - // 组件定制轮询时间 - requestInterval?: number // 时间单位(时分秒) requestIntervalUnit: RequestHttpIntervalEnum // 请求内容 requestParams: RequestParams - // 请求体类型 - requestParamsBodyType: RequestBodyEnum } // 全局的图表请求配置 export interface RequestGlobalConfigType extends RequestPublicConfigType { + // 组件定制轮询时间 + requestInterval: number // 请求源地址 requestOriginUrl?: string } // 单个图表请求配置 export interface RequestConfigType extends RequestPublicConfigType { + // 组件定制轮询时间 + requestInterval?: number // 获取数据的方式 requestDataType: RequestDataTypeEnum // 请求方式 get/post/del/put/patch @@ -163,6 +163,8 @@ export interface RequestConfigType extends RequestPublicConfigType { requestUrl?: string // 请求内容主体方式 普通/sql requestContentType: RequestContentTypeEnum + // 请求体类型 + requestParamsBodyType: RequestBodyEnum // SQL 请求对象 requestSQLContent: { sql: string diff --git a/src/store/modules/chartEditStore/chartEditStore.ts b/src/store/modules/chartEditStore/chartEditStore.ts index 2dd4026d..ebb7a014 100644 --- a/src/store/modules/chartEditStore/chartEditStore.ts +++ b/src/store/modules/chartEditStore/chartEditStore.ts @@ -112,7 +112,6 @@ export const useChartEditStore = defineStore({ requestOriginUrl: '', requestInterval: requestInterval, requestIntervalUnit: requestIntervalUnit, - requestParamsBodyType: RequestBodyEnum.NONE, requestParams: { Body: { "form-data": {}, diff --git a/src/utils/utils.ts b/src/utils/utils.ts index f7a161d0..7253ee9d 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 } 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,28 @@ 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 + } +} 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 d9435fe3..4dfa6b92 100644 --- a/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataMonacoEditor/index.vue +++ b/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataMonacoEditor/index.vue @@ -126,7 +126,6 @@ const fetchTargetData = async () => { try { const { requestUrl, requestHttpType } = targetData.value.request if (!requestUrl) { - window['$message'].warning('请求参数不正确,请检查!') sourceData.value = '请求参数不正确,请检查!' return } diff --git a/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataRequest/components/RequestGlobalConfig/index.vue b/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataRequest/components/RequestGlobalConfig/index.vue index c8e5d7bb..72ff85b2 100644 --- a/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataRequest/components/RequestGlobalConfig/index.vue +++ b/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataRequest/components/RequestGlobalConfig/index.vue @@ -10,7 +10,7 @@ > - + @@ -19,7 +19,7 @@ v-model:value.trim="requestInterval" min="0" :show-button="false" - :disabled="disabled" + :disabled="editDisabled" placeholder="请输入数字" > @@ -28,11 +28,11 @@ class="select-time-options" v-model:value="requestIntervalUnit" :options="selectTimeOptions" - :disabled="disabled" + :disabled="editDisabled" /> - + diff --git a/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataRequest/components/RequestHeader/index.vue b/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataRequest/components/RequestHeader/index.vue index c3b66bc5..9bc90beb 100644 --- a/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataRequest/components/RequestHeader/index.vue +++ b/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataRequest/components/RequestHeader/index.vue @@ -12,7 +12,7 @@ -
+
@@ -80,7 +80,7 @@