From 46f80ea9079437999dcce625810261d0605eda7e 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: Mon, 11 Jul 2022 09:01:19 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E7=BC=96=E5=86=99=E8=AF=B7=E6=B1=82?=
 =?UTF-8?q?=E9=85=8D=E7=BD=AE=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Pages/ChartItemSetting/SettingItemBox.vue | 10 ++-
 src/enums/httpEnum.ts                         | 75 +++++++++++++++++-
 src/packages/public/publicConfig.ts           |  6 +-
 src/plugins/naive.ts                          |  4 +
 src/settings/designSetting.ts                 |  4 +
 .../chartEditStore/chartEditStore.d.ts        | 45 ++++++-----
 .../modules/chartEditStore/chartEditStore.ts  | 16 +++-
 .../components/ChartDataAjax/index.vue        | 13 ++++
 .../ChartDataMonacoEditor/index.vue           |  2 +-
 .../components/RequestGlobalConfig/index.ts   |  3 +
 .../components/RequestGlobalConfig/index.vue  | 67 ++++++++++++++++
 .../components/RequestHeader/index.ts         |  3 +
 .../components/RequestHeader/index.vue        | 47 ++++++++++++
 .../components/RequestHeaderTable/index.ts    |  3 +
 .../components/RequestHeaderTable/index.vue   | 11 +++
 .../components/RequestTargetConfig/index.ts   |  3 +
 .../components/RequestTargetConfig/index.vue  | 75 ++++++++++++++++++
 .../components/ChartDataRequest/index.ts      |  3 +
 .../components/ChartDataRequest/index.vue     | 62 +++++++++++++++
 .../components/ChartData/index.d.ts           | 76 ++++++++++++++++++-
 20 files changed, 497 insertions(+), 31 deletions(-)
 create mode 100644 src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataRequest/components/RequestGlobalConfig/index.ts
 create mode 100644 src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataRequest/components/RequestGlobalConfig/index.vue
 create mode 100644 src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataRequest/components/RequestHeader/index.ts
 create mode 100644 src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataRequest/components/RequestHeader/index.vue
 create mode 100644 src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataRequest/components/RequestHeaderTable/index.ts
 create mode 100644 src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataRequest/components/RequestHeaderTable/index.vue
 create mode 100644 src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataRequest/components/RequestTargetConfig/index.ts
 create mode 100644 src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataRequest/components/RequestTargetConfig/index.vue
 create mode 100644 src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataRequest/index.ts
 create mode 100644 src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataRequest/index.vue

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 @@
     </n-text>
     <div
       class="item-right"
-      justify="space-between"
       :style="{
-        gridTemplateColumns: alone ? '1fr' : '1fr 1fr'
+        gridTemplateColumns: alone ? '1fr' : '1fr 1fr',
+        ...itemRightStyle
       }"
     >
       <slot></slot>
@@ -28,6 +28,11 @@ defineProps({
     type: Boolean,
     default: false,
     required: false
+  },
+  itemRightStyle: {
+    type: Object,
+    default: () => {},
+    required: false
   }
 })
 </script>
@@ -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/enums/httpEnum.ts b/src/enums/httpEnum.ts
index 165948f5..50dcbf7c 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,66 @@ 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 {
+  FORM_DATA = 'form-data',
+  X_WWW_FORM_URLENCODED = 'x-www-form-urlencoded',
+  JSON = 'json',
+  XML = 'xml'
+}
+
+/**
+ * @description: 请求参数类型
+ */
+export enum RequestParamsTypeEnum {
+  PARAMS = 'Params',
+  BODY = 'Body',
+  HEADER = 'Header',
+  COOKIE = 'Cookie'
+}
+
+/**
+ * @description: 请求参数主体
+ */
+export type RequestParams = {
+  [RequestParamsTypeEnum.PARAMS]: object,
+  [RequestParamsTypeEnum.COOKIE]: object,
+  [RequestParamsTypeEnum.HEADER]: object,
+  [RequestParamsTypeEnum.BODY]: {
+    [RequestBodyEnum.FORM_DATA]: object,
+    [RequestBodyEnum.X_WWW_FORM_URLENCODED]: object,
+    [RequestBodyEnum.JSON]: object,
+    [RequestBodyEnum.XML]: string,
+  }
 }
 
 /**
@@ -40,5 +107,5 @@ export enum ContentTypeEnum {
   // form-data 一般配合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/packages/public/publicConfig.ts b/src/packages/public/publicConfig.ts
index d4fde6be..cc7be730 100644
--- a/src/packages/public/publicConfig.ts
+++ b/src/packages/public/publicConfig.ts
@@ -1,14 +1,16 @@
 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 } 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
 }
 
 export class publicConfig implements PublicConfigType {
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..767ae4b7 100644
--- a/src/store/modules/chartEditStore/chartEditStore.d.ts
+++ b/src/store/modules/chartEditStore/chartEditStore.d.ts
@@ -1,11 +1,14 @@
-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 { PreviewScaleEnum } from '@/enums/styleEnum'
-import type {
-  ChartColorsNameType,
-  GlobalThemeJsonType,
-} from '@/settings/chartThemes/index'
+import {
+  RequestHttpEnum,
+  RequestContentTypeEnum,
+  RequestDataTypeEnum,
+  RequestHttpIntervalEnum,
+  RequestParams
+} from '@/enums/httpEnum'
+import { PreviewScaleEnum, RequestBodyEnum } from '@/enums/styleEnum'
+import type { ChartColorsNameType, GlobalThemeJsonType } from '@/settings/chartThemes/index'
 
 // 编辑画布属性
 export enum EditCanvasTypeEnum {
@@ -16,7 +19,7 @@ export enum EditCanvasTypeEnum {
   USER_SCALE = 'userScale',
   LOCK_SCALE = 'lockScale',
   IS_CREATE = 'isCreate',
-  IS_DRAG = 'isDrag',
+  IS_DRAG = 'isDrag'
 }
 
 // 编辑区域
@@ -47,7 +50,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 +92,7 @@ export enum EditCanvasTypeEnum {
   START_X = 'startX',
   START_Y = 'startY',
   X = 'x',
-  Y = 'y',
+  Y = 'y'
 }
 
 // 鼠标位置
@@ -127,27 +130,35 @@ export enum ChartEditStoreEnum {
   // 以下需要存储
   EDIT_CANVAS_CONFIG = 'editCanvasConfig',
   REQUEST_GLOBAL_CONFIG = 'requestGlobalConfig',
-  COMPONENT_LIST = 'componentList',
+  COMPONENT_LIST = 'componentList'
+}
+
+// 请求公共类型
+type RequestPublicConfigType = {
+  // 组件定制轮询时间
+  requestInterval?: number
+  // 时间单位（时分秒）
+  requestIntervalUnit: RequestHttpIntervalEnum
+  // 请求内容
+  requestParams: RequestParams
 }
 
 // 全局的图表请求配置
-export type RequestGlobalConfigType = {
+export interface RequestGlobalConfigType extends RequestPublicConfigType {
   // 请求源地址
   requestOriginUrl?: string
-  // 全局默认轮询时间
-  requestInterval: number
 }
 
 // 单个图表请求配置
-export type RequestConfigType = {
+export interface RequestConfigType extends RequestPublicConfigType {
   // 获取数据的方式
   requestDataType: RequestDataTypeEnum
   // 请求方式 get/post/del/put/patch
   requestHttpType: RequestHttpEnum
   // 源后续的 url
   requestUrl?: string
-  // 组件定制轮询时间
-  requestInterval?: number
+  // 请求内容主体方式 普通/sql
+  requestContentType: RequestContentTypeEnum
 }
 
 // Store 类型
diff --git a/src/store/modules/chartEditStore/chartEditStore.ts b/src/store/modules/chartEditStore/chartEditStore.ts
index 3803960d..0bfb310b 100644
--- a/src/store/modules/chartEditStore/chartEditStore.ts
+++ b/src/store/modules/chartEditStore/chartEditStore.ts
@@ -3,7 +3,7 @@ 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 { useChartHistoryStore } from '@/store/modules/chartHistoryStore/chartHistoryStore'
 // 全局设置
@@ -109,7 +109,19 @@ export const useChartEditStore = defineStore({
     // 数据请求处理（需存储给后端）
     requestGlobalConfig: {
       requestOriginUrl: '',
-      requestInterval: requestInterval 
+      requestInterval: requestInterval,
+      requestIntervalUnit: requestIntervalUnit,
+      requestParams: {
+        Body: {
+          "form-data": {},
+          "x-www-form-urlencoded": {},
+          json: {},
+          xml: ''
+        },
+        Cookie: {},
+        Header: {},
+        Params: {}
+      }
     },
     // 图表数组（需存储给后端）
     componentList: []
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..d672891a 100644
--- a/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataAjax/index.vue
+++ b/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataAjax/index.vue
@@ -1,5 +1,6 @@
 <template>
   <div class="go-chart-configurations-data-ajax">
+    <n-button type="primary" @click="requestModelHandle">配置请求</n-button>
     <setting-item-box name="配置">
       <setting-item name="类型">
         <n-select v-model:value="targetData.request.requestHttpType" :options="selectOptions" />
@@ -39,6 +40,7 @@
       </template>
       <n-input v-model:value.trim="targetData.request.requestUrl" :min="1" placeholder="请输入地址（去除源）" />
     </setting-item-box>
+
     <setting-item-box :alone="true">
       <template #name>
         测试
@@ -63,8 +65,12 @@
       </n-space>
     </setting-item-box>
 
+    <!-- 底部数据展示 -->
     <chart-data-matching-and-show :show="showMatching && !loading" :ajax="true"></chart-data-matching-and-show>
+    <!-- 骨架图 -->
     <go-skeleton :load="loading" :repeat="3"></go-skeleton>
+    <!-- 请求配置model -->
+    <chart-data-request v-model:modelShow="requestShow"></chart-data-request>
   </div>
 </template>
 
@@ -72,6 +78,7 @@
 import { ref, toRefs, onBeforeUnmount, watchEffect } from 'vue'
 import { icon } from '@/plugins'
 import { SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+import { ChartDataRequest } from '../ChartDataRequest/index'
 import { RequestHttpEnum, ResultEnum } from '@/enums/httpEnum'
 import { chartDataUrl, rankListUrl, scrollBoardUrl, numberFloatUrl, numberIntUrl, textUrl, imageUrl } from '@/api/mock'
 import { http } from '@/api/http'
@@ -85,6 +92,7 @@ const { targetData, chartEditStore } = useTargetData()
 const { requestOriginUrl } = toRefs(chartEditStore.getRequestGlobalConfig)
 // 是否展示数据分析
 const loading = ref(false)
+const requestShow = ref(false)
 const showMatching = ref(false)
 let lastFilter: any = undefined
 
@@ -124,6 +132,11 @@ const selectOptions: SelectHttpType[] = [
   }
 ]
 
+// 请求配置 model
+const requestModelHandle = () => {
+  requestShow.value = true
+}
+
 // 发送请求
 const sendHandle = async () => {
   loading.value = true
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 00eef16e..d9435fe3 100644
--- a/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataMonacoEditor/index.vue
+++ b/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataMonacoEditor/index.vue
@@ -88,7 +88,7 @@
 
           <n-space>
             <n-button size="medium" @click="closeFilter">取消</n-button>
-            <n-button size="medium" type="primary" @click="saveFilter">保存</n-button>
+            <n-button size="medium" type="primary" ghost @click="saveFilter">保存</n-button>
           </n-space>
         </n-space>
       </template>
diff --git a/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataRequest/components/RequestGlobalConfig/index.ts b/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataRequest/components/RequestGlobalConfig/index.ts
new file mode 100644
index 00000000..a6efbcc2
--- /dev/null
+++ b/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataRequest/components/RequestGlobalConfig/index.ts
@@ -0,0 +1,3 @@
+import RequestGlobalConfig from './index.vue'
+
+export { RequestGlobalConfig }
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
new file mode 100644
index 00000000..c8e5d7bb
--- /dev/null
+++ b/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataRequest/components/RequestGlobalConfig/index.vue
@@ -0,0 +1,67 @@
+<template>
+  <!-- 全局配置 -->
+  <n-card class="n-card-shallow">
+    <n-tag type="info" :bordered="false"> 全局配置 </n-tag>
+    <setting-item-box
+      name="服务"
+      :itemRightStyle="{
+        gridTemplateColumns: '5fr 2fr 1fr'
+      }"
+    >
+      <!-- 源地址 -->
+      <setting-item name="前置 URL">
+        <n-input v-model:value.trim="requestOriginUrl" :disabled="disabled" placeholder="http://127.0.0.1/"></n-input>
+      </setting-item>
+      <setting-item name="更新间隔（为 0 表示不更新）">
+        <n-input-group>
+          <n-input-number
+            class="select-time-number"
+            v-model:value.trim="requestInterval"
+            min="0"
+            :show-button="false"
+            :disabled="disabled"
+            placeholder="请输入数字"
+          >
+          </n-input-number>
+          <!-- 单位 -->
+          <n-select
+            class="select-time-options"
+            v-model:value="requestIntervalUnit"
+            :options="selectTimeOptions"
+            :disabled="disabled"
+          />
+        </n-input-group>
+      </setting-item>
+      <n-button v-show="disabled" type="primary" secondary @click="disabled = false">
+        <template #icon>
+          <n-icon>
+            <pencil-icon />
+          </n-icon>
+        </template>
+        编辑配置
+      </n-button>
+    </setting-item-box>
+  </n-card>
+</template>
+
+<script setup lang="ts">
+import { ref, toRefs } from 'vue'
+import { SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+import { useTargetData } from '@/views/chart/ContentConfigurations/components/hooks/useTargetData.hook'
+import { selectTypeOptions, selectTimeOptions } from '@/views/chart/ContentConfigurations/components/ChartData/index.d'
+import { icon } from '@/plugins'
+
+const { PencilIcon } = icon.ionicons5
+const { targetData, chartEditStore } = useTargetData()
+const { requestOriginUrl, requestInterval, requestIntervalUnit } = toRefs(chartEditStore.getRequestGlobalConfig)
+const disabled = ref(true)
+</script>
+
+<style lang="scss" scoped>
+.select-time-number {
+  width: 100%;
+}
+.select-time-options {
+  width: 100px;
+}
+</style>
diff --git a/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataRequest/components/RequestHeader/index.ts b/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataRequest/components/RequestHeader/index.ts
new file mode 100644
index 00000000..71865c65
--- /dev/null
+++ b/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataRequest/components/RequestHeader/index.ts
@@ -0,0 +1,3 @@
+import RequestHeader from './index.vue'
+
+export { RequestHeader }
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
new file mode 100644
index 00000000..849d6512
--- /dev/null
+++ b/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataRequest/components/RequestHeader/index.vue
@@ -0,0 +1,47 @@
+<template>
+  <n-space vertical>
+    <div style="width: 600px">
+      <n-tabs v-model:value="requestContentType" type="segment" size="small">
+        <n-tab :name="RequestContentTypeEnum.DEFAULT" tab="普通请求"> </n-tab>
+        <n-tab :name="RequestContentTypeEnum.SQL" tab="SQL 请求"> </n-tab>
+      </n-tabs>
+    </div>
+    <div v-show="requestContentType === RequestContentTypeEnum.DEFAULT">
+      <n-tabs type="line" animated>
+        <n-tab v-for="item in RequestParamsTypeEnum" :key="item" :name="item" :tab="item"> {{ item }} </n-tab>
+      </n-tabs>
+    </div>
+    <div v-show="requestContentType === RequestContentTypeEnum.SQL">
+      <setting-item-box name="键名">
+        <n-input v-model:value.trim="sqlObject.key" :min="1" placeholder="请输入内容" />
+      </setting-item-box>
+      <setting-item-box name="键值">
+        <monaco-editor v-model:modelValue="sqlObject.value" width="600px" height="200px" language="sql" />
+      </setting-item-box>
+    </div>
+  </n-space>
+</template>
+
+<script setup lang="ts">
+import { reactive, ref, toRefs } from 'vue'
+import { RequestParamsTypeEnum, RequestContentTypeEnum ,RequestBodyEnum } from '@/enums/httpEnum'
+import { MonacoEditor } from '@/components/Pages/MonacoEditor'
+import { SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+import { useTargetData } from '@/views/chart/ContentConfigurations/components/hooks/useTargetData.hook'
+
+const { targetData, chartEditStore } = useTargetData()
+
+const { requestContentType } = toRefs(targetData.value.request)
+
+const tabValue = ref(RequestParamsTypeEnum.NONE)
+const sqlObject = reactive({
+  key: 'sql',
+  value: 'select * from  where'
+})
+</script>
+
+<style lang="scss" scoped>
+.select-type {
+  width: 300px;
+}
+</style>
diff --git a/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataRequest/components/RequestHeaderTable/index.ts b/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataRequest/components/RequestHeaderTable/index.ts
new file mode 100644
index 00000000..b016ea61
--- /dev/null
+++ b/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataRequest/components/RequestHeaderTable/index.ts
@@ -0,0 +1,3 @@
+import RequestHeaderTable from './index.vue'
+
+export { RequestHeaderTable }
diff --git a/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataRequest/components/RequestHeaderTable/index.vue b/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataRequest/components/RequestHeaderTable/index.vue
new file mode 100644
index 00000000..e34ecb6e
--- /dev/null
+++ b/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataRequest/components/RequestHeaderTable/index.vue
@@ -0,0 +1,11 @@
+<template>
+  <n-scrollbar style="max-height: 250px"> 
+    <n-h1>2321</n-h1>
+  </n-scrollbar>
+</template>
+
+<script setup lang="ts">
+import { RequestBodyEnum, RequestParamsTypeEnum } from '@/enums/httpEnum'
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataRequest/components/RequestTargetConfig/index.ts b/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataRequest/components/RequestTargetConfig/index.ts
new file mode 100644
index 00000000..d3242c60
--- /dev/null
+++ b/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataRequest/components/RequestTargetConfig/index.ts
@@ -0,0 +1,3 @@
+import RequestTargetConfig from './index.vue'
+
+export { RequestTargetConfig }
diff --git a/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataRequest/components/RequestTargetConfig/index.vue b/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataRequest/components/RequestTargetConfig/index.vue
new file mode 100644
index 00000000..0c906b82
--- /dev/null
+++ b/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataRequest/components/RequestTargetConfig/index.vue
@@ -0,0 +1,75 @@
+<template>
+  <!-- 组件配置 -->
+  <n-divider class="go-my-3" title-placement="left"></n-divider>
+  <setting-item-box
+    name="组件"
+    :itemRightStyle="{
+      gridTemplateColumns: '5fr 2fr 1fr'
+    }"
+  >
+    <setting-item name="请求 URL">
+      <n-input-group>
+        <n-select class="select-type-options" v-model:value="requestHttpType" :options="selectTypeOptions" />
+        <n-input v-model:value.trim="requestUrl" :min="1" placeholder="请输入地址（去除源）">
+          <template #prefix>
+            <n-text>{{ requestOriginUrl }}</n-text>
+            <n-divider vertical />
+          </template>
+        </n-input>
+      </n-input-group>
+      <!-- 组件url -->
+    </setting-item>
+    <setting-item name="默认使用全局间隔">
+      <n-input-group>
+        <n-input-number
+          v-model:value.trim="requestInterval"
+          class="select-time-number"
+          min="5"
+          :show-button="false"
+          placeholder="可以为空"
+        >
+        </n-input-number>
+        <!-- 单位 -->
+        <n-select class="select-time-options" v-model:value="requestIntervalUnit" :options="selectTimeOptions" />
+      </n-input-group>
+    </setting-item>
+    <n-button secondary type="primary">
+      <template #icon>
+        <n-icon>
+          <flash-icon />
+        </n-icon>
+      </template>
+      发送请求
+    </n-button>
+  </setting-item-box>
+  <setting-item-box name="选择方式" class="go-mt-0">
+    <request-header></request-header>
+  </setting-item-box>
+</template>
+
+<script setup lang="ts">
+import { ref, toRefs } from 'vue'
+import { SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+import { useTargetData } from '@/views/chart/ContentConfigurations/components/hooks/useTargetData.hook'
+import { selectTypeOptions, selectTimeOptions } from '@/views/chart/ContentConfigurations/components/ChartData/index.d'
+import { RequestHeader } from '../RequestHeader'
+import { icon } from '@/plugins'
+
+const { PencilIcon, FlashIcon } = icon.ionicons5
+const { targetData, chartEditStore } = useTargetData()
+const { requestOriginUrl } = toRefs(chartEditStore.getRequestGlobalConfig)
+const { requestInterval, requestIntervalUnit, requestHttpType, requestUrl } = toRefs(targetData.value.request)
+const disabled = ref(true)
+</script>
+
+<style lang="scss" scoped>
+.select-time-number {
+  width: 100%;
+}
+.select-time-options {
+  width: 100px;
+}
+.select-type-options {
+  width: 120px;
+}
+</style>
diff --git a/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataRequest/index.ts b/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataRequest/index.ts
new file mode 100644
index 00000000..d0c33687
--- /dev/null
+++ b/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataRequest/index.ts
@@ -0,0 +1,3 @@
+import ChartDataRequest from './index.vue'
+
+export { ChartDataRequest }
diff --git a/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataRequest/index.vue b/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataRequest/index.vue
new file mode 100644
index 00000000..6097292a
--- /dev/null
+++ b/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataRequest/index.vue
@@ -0,0 +1,62 @@
+<template>
+  <n-modal class="go-chart-data-request" v-model:show="modelShow" :mask-closable="false" @afterLeave="closeHandle">
+    <n-card :bordered="false" role="dialog" size="small" aria-modal="true" style="width: 1000px; height: 800px">
+      <template #header></template>
+      <template #header-extra> </template>
+      <n-space vertical>
+        <request-global-config></request-global-config>
+        <request-target-config></request-target-config>
+      </n-space>
+      <!-- 底部 -->
+      <template #action>
+        <n-space justify="space-between">
+          <div>
+            <n-text>「 柱状图 」</n-text>
+            <n-text>—— </n-text>
+            <n-tag type="primary" :bordered="false"> {{requestContentTypeObj[requestContentType]}} </n-tag>
+          </div>
+          <n-button type="primary" ghost @click="closeHandle">关闭</n-button>
+        </n-space>
+      </template>
+    </n-card>
+  </n-modal>
+</template>
+
+<script script lang="ts" setup>
+import { toRefs } from 'vue'
+import { RequestContentTypeEnum } from '@/enums/httpEnum'
+import { useTargetData } from '../../../hooks/useTargetData.hook'
+import { RequestGlobalConfig } from './components/RequestGlobalConfig'
+import { RequestTargetConfig } from './components/RequestTargetConfig'
+
+const emit = defineEmits(['update:modelShow'])
+
+const { targetData, chartEditStore } = useTargetData()
+// 解构基础配置
+const { requestContentType } = toRefs(targetData.value.request)
+
+const requestContentTypeObj = {
+  [RequestContentTypeEnum.DEFAULT]: '普通请求',
+  [RequestContentTypeEnum.SQL]: 'SQL 请求',
+}
+
+defineProps({
+  modelShow: Boolean
+})
+
+const closeHandle = () => {
+  emit('update:modelShow', false)
+}
+</script>
+
+<style lang="scss" scoped>
+@include go('chart-data-request') {
+  &.n-card.n-modal,
+  .n-card {
+    @extend .go-background-filter;
+  }
+  .n-card-shallow {
+    background-color: rgba(0, 0, 0, 0) !important;
+  }
+}
+</style>
diff --git a/src/views/chart/ContentConfigurations/components/ChartData/index.d.ts b/src/views/chart/ContentConfigurations/components/ChartData/index.d.ts
index c6707bcb..fb70fe6d 100644
--- a/src/views/chart/ContentConfigurations/components/ChartData/index.d.ts
+++ b/src/views/chart/ContentConfigurations/components/ChartData/index.d.ts
@@ -1,4 +1,4 @@
-import { RequestHttpEnum, RequestDataTypeEnum } from '@/enums/httpEnum'
+import { RequestHttpEnum, RequestHttpIntervalEnum, RequestDataTypeEnum, SelectHttpTimeNameObj } from '@/enums/httpEnum'
 
 // 匹配结果
 export enum DataResultEnum {
@@ -24,9 +24,81 @@ export interface SelectCreateDataType {
   disabled?: boolean
 }
 
-// ajax 请求
+// ajax 请求类型
 export interface SelectHttpType {
   label: RequestHttpEnum
   value: RequestHttpEnum
   disabled?: boolean
+  style?: object
 }
+
+// 类型选项
+export const selectTypeOptions: SelectHttpType[] = [
+  {
+    label: RequestHttpEnum.GET,
+    value: RequestHttpEnum.GET,
+    style: {
+      color: 'greenyellow',
+      fontWeight: 'bold'
+    }
+  },
+  {
+    label: RequestHttpEnum.POST,
+    value: RequestHttpEnum.POST,
+    style: {
+      color: 'skyblue',
+      fontWeight: 'bold'
+    }
+  },
+  {
+    label: RequestHttpEnum.PUT,
+    value: RequestHttpEnum.PUT,
+    style: {
+      color: 'goldenrod',
+      fontWeight: 'bold'
+    }
+  },
+  {
+    label: RequestHttpEnum.PATCH,
+    value: RequestHttpEnum.PATCH,
+    style: {
+      color: 'violet',
+      fontWeight: 'bold'
+    }
+  },
+  {
+    label: RequestHttpEnum.DELETE,
+    value: RequestHttpEnum.DELETE,
+    disabled: true,
+    style: {
+      fontWeight: 'bold'
+    }
+  },
+]
+
+// ajax 请求间隔
+export interface SelectHttpTimeType {
+  label: string
+  value: RequestHttpIntervalEnum
+  disabled?: boolean
+}
+
+// 时间选项
+export const selectTimeOptions: SelectHttpTimeType[] = [
+  {
+    label: SelectHttpTimeNameObj[RequestHttpIntervalEnum.SECOND],
+    value: RequestHttpIntervalEnum.SECOND
+  },
+  {
+    label: SelectHttpTimeNameObj[RequestHttpIntervalEnum.MINUTE],
+    value: RequestHttpIntervalEnum.MINUTE
+  },
+  {
+    label: SelectHttpTimeNameObj[RequestHttpIntervalEnum.HOUR],
+    value: RequestHttpIntervalEnum.HOUR
+  },
+  {
+    label: SelectHttpTimeNameObj[RequestHttpIntervalEnum.DAY],
+    value: RequestHttpIntervalEnum.DAY
+  },
+]
\ No newline at end of file