feat: 新增数据请求接口

package.json

@@ -9,7 +9,7 @@
   },
   "dependencies": {
     "animate.css": "^4.1.1",
-    "axios": "^0.23.0",
+    "axios": "0.23.0",
     "crypto-ts": "^1.0.2",
     "highlight.js": "^11.5.0",
     "naive-ui": "^2.25.2",

src/api/http.ts

@@ -1,35 +1,40 @@
 import axiosInstance from './axios'
-import { RequestEnum, ContentTypeEnum } from '@/enums/httpEnum'
+import { RequestHttpEnum, ContentTypeEnum } from '@/enums/httpEnum'
 
 export const get = (url: string, params: object) => {
   return axiosInstance({
     url: url,
-    method: RequestEnum.GET,
-    params,
+    method: RequestHttpEnum.GET,
+    params
   })
 }
 
-export const post = (url: string, params: object, headersType: string) => {
+export const post = (url: string, params: object, headersType?: string) => {
   return axiosInstance({
     url: url,
-    method: RequestEnum.POST,
+    method: RequestHttpEnum.POST,
     data: params,
     headers: {
-      'Content-Type': headersType || ContentTypeEnum.JSON,
-    },
+      'Content-Type': headersType || ContentTypeEnum.JSON
+    }
   })
 }
 
 export const del = (url: string, params: object) => {
   return axiosInstance({
     url: url,
-    method: RequestEnum.DELETE,
-    params,
+    method: RequestHttpEnum.DELETE,
+    params
   })
 }
 
-export default {
-  get,
-  post,
-  del,
+// 获取请求函数，默认get
+export const http = (type?: RequestHttpEnum) => {
+  return type === RequestHttpEnum.GET
+    ? get
+    : type === RequestHttpEnum.POST
+    ? post
+    : type === RequestHttpEnum.DELETE
+    ? del
+    : get
 }

src/api/mock/index.ts

@@ -6,7 +6,7 @@ Mock.setup({
 
 // 单个X数据
 const featchMockData = '/api/mockData'
-Mock.mock(/\/api\/test(|\?\S*)$/, 'get', test.featchMockData)
+Mock.mock(/\/api\/mockData(|\?\S*)$/, 'get', test.featchMockData)
 
 export {
   featchMockData

src/components/ChartItemSetting/SettingItemBox.vue

@@ -1,9 +1,18 @@
 <template>
   <div class="go-config-item-box">
-    <n-text class="item-left" depth="2">{{ name }}</n-text>
-    <div class="item-right" justify="space-between" :style="{
-      gridTemplateColumns: alone? '1fr': '1fr 1fr'
-    }">
+    <n-text class="item-left" depth="2">
+      {{ name }}
+      <n-space :size="5">
+        <slot name="name"></slot>
+      </n-space>
+    </n-text>
+    <div
+      class="item-right"
+      justify="space-between"
+      :style="{
+        gridTemplateColumns: alone ? '1fr' : '1fr 1fr'
+      }"
+    >
       <slot></slot>
     </div>
   </div>
@@ -13,7 +22,7 @@
 defineProps({
   name: {
     type: String,
-    required: true
+    required: false
   },
   alone: {
     type: Boolean,

src/enums/httpEnum.ts

@@ -13,7 +13,7 @@ export enum ResultEnum {
 /**
  * @description: 请求方法
  */
-export enum RequestEnum {
+export enum RequestHttpEnum {
   GET = 'get',
   POST = 'post',
   PATCH = 'patch',

src/packages/index.d.ts

@@ -15,7 +15,9 @@ export type ConfigType = {
 
 // 数据请求
 interface requestConfig {
-  data: RequestConfigType
+  data: RequestConfigType,
+  // 暂时约定为数据存储区域（未使用）
+  requestData: any
 }
 
 // Echarts 数据类型

src/packages/public/publicConfig.ts

@@ -1,9 +1,11 @@
 import { getUUID } from '@/utils'
 import { PublicConfigType } from '@/packages/index.d'
 import { RequestDataTypeEnum, RequestConfigType } from '@/store/modules/chartEditStore/chartEditStore.d'
+import { RequestHttpEnum } from '@/enums/httpEnum'
 
 const requestConfig: RequestConfigType = {
   requestDataType: RequestDataTypeEnum.STATIC,
+  requestHttpType: RequestHttpEnum.GET
 }
 
 export class publicConfig implements PublicConfigType {
@@ -18,11 +20,9 @@ export class publicConfig implements PublicConfigType {
     animations: []
   }
   // 数据
-  public data = {
-    requestDataType: RequestDataTypeEnum.STATIC
-  }
+  public data = { ...requestConfig }
   // 数据获取
-  public requestData = { ...requestConfig }
+  public requestData = []
   // 设置坐标
   public setPosition(x: number, y: number): void {
     this.attr.x = x

src/store/modules/chartEditStore/chartEditStore.d.ts

@@ -1,5 +1,6 @@
 import { CreateComponentType } from '@/packages/index.d'
 import { HistoryActionTypeEnum } from '@/store/modules/chartHistoryStore/chartHistoryStore.d'
+import { RequestHttpEnum } from '@/enums/httpEnum'
 import type {
   ChartColorsNameType,
   GlobalThemeJsonType,
@@ -133,6 +134,8 @@ export enum RequestDataTypeEnum {
 export type RequestConfigType = {
   // 获取数据的方式
   requestDataType: RequestDataTypeEnum
+  // 请求方式 get/post/del/put/patch
+  requestHttpType: RequestHttpEnum
   // 请求源地址
   requestUrl?: string
   requestInterval?: number

src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataAjax/index.vue

@@ -1,11 +1,105 @@
 <template>
-  <div>ajax</div>
+  <div class="go-chart-configurations-data-ajax">
+    <setting-item-box name="类型" :alone="true">
+      <n-select
+        v-model:value="targetData.data.requestHttpType"
+        :options="selectOptions"
+      />
+    </setting-item-box>
+    <setting-item-box :alone="true">
+      <template #name>
+        地址
+        <n-tooltip trigger="hover" v-if="ISDEV">
+          <template #trigger>
+            <n-icon size="21" :depth="3">
+              <help-outline-icon></help-outline-icon>
+            </n-icon>
+          </template>
+          <span>
+            开发环境使用 mock 数据，请输入【
+            <n-text type="info">
+              {{ featchMockData }}
+            </n-text>
+            】
+          </span>
+        </n-tooltip>
+      </template>
+      <n-input
+        v-model:value="targetData.data.requestUrl"
+        :min="1"
+        placeholder="http(s)://..."
+      />
+    </setting-item-box>
+    <setting-item-box name="测试" :alone="true">
+      <n-space>
+        <n-button @click="sendHandle">
+          <template #icon>
+            <n-icon>
+              <flash-icon />
+            </n-icon>
+          </template>
+          发送地址请求
+        </n-button>
+      </n-space>
+    </setting-item-box>
+    <chart-data-matching-and-show
+      v-show="showMatching"
+      :targetData="targetData"
+    ></chart-data-matching-and-show>
+  </div>
 </template>
 
 <script setup lang="ts">
+import { PropType, ref, toRefs } from 'vue'
+import { icon } from '@/plugins'
+import { CreateComponentType } from '@/packages/index.d'
+import { SettingItemBox } from '@/components/ChartItemSetting/index'
+import { RequestHttpEnum } from '@/enums/httpEnum'
+import { SelectHttpType } from '../../index.d'
+import { featchMockData } from '@/api/mock'
+import { http } from '@/api/http'
+import { ChartDataMatchingAndShow } from '../ChartDataMatchingAndShow'
 
+const { HelpOutlineIcon, FlashIcon } = icon.ionicons5
 
+const props = defineProps({
+  targetData: {
+    type: Object as PropType<CreateComponentType>,
+    required: true
+  }
+})
+
+// 是否是开发环境
+const ISDEV = import.meta.env.DEV === true
+// 是否展示数据分析
+const showMatching = ref(false)
+// 请求相关
+const { requestUrl, requestHttpType } = toRefs(props.targetData.data)
+
+// 选项
+const selectOptions: SelectHttpType[] = [
+  {
+    label: RequestHttpEnum.GET,
+    value: RequestHttpEnum.GET
+  },
+  {
+    label: RequestHttpEnum.POST,
+    value: RequestHttpEnum.POST
+  }
+]
+
+// 发送请求
+const sendHandle = async () => {
+  if(!requestUrl || !requestUrl.value) {
+    window['$message'].warn('请求参数不正确，请检查！')
+    return
+  }
+  const res = await http(requestHttpType.value)(requestUrl.value as string, {})
+  console.log(res)
+}
 </script>
 
 <style lang="scss" scoped>
-</style>
+@include go('chart-configurations-data-ajax') {
+}
+</style>

src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataMatchingAndShow/index.vue

@@ -7,9 +7,8 @@
             <th v-for="item in tableTitle" :key="item">{{ item }}</th>
           </tr>
         </thead>
-        <tbody v-show="!tableLoad">
-          <go-skeleton :repeat="3" :load="tableLoad" style="width: 200px;"></go-skeleton>
-          <tr v-for="(item, index) in tableData" :key="index">
+        <tbody>
+          <tr v-for="(item, index) in getDimensionsAndSource" :key="index">
             <td>{{ item.field }}</td>
             <td>{{ item.mapping }}</td>
             <td>
@@ -69,30 +68,20 @@ import { ref, computed, watch, nextTick, PropType } from 'vue'
 import { UploadCustomRequestOptions } from 'naive-ui'
 import { FileTypeEnum } from '@/enums/fileTypeEnum'
 import { readFile, downloadFile } from '@/utils'
+import { CreateComponentType } from '@/packages/index.d'
 import { icon } from '@/plugins'
 import { DataResultEnum, TimelineTitleEnum } from '../../index.d'
 
 const props = defineProps({
-  tableData: {
-    type: Object,
+  targetData: {
+    type: Object as PropType<CreateComponentType>,
     required: true
   }
 })
 
-const tableLoad = ref(true)
-
 // 表格标题
 const tableTitle = ['字段', '映射', '状态']
 
-// 表格数据加载
-watch(() => props.tableData.value, (newData: object[]) => {
-  if (!(newData && newData.length !== 0)) {
-    tableLoad.value = false
-  }
-}, {
-  immediate: true
-})
-
 const { DocumentAddIcon, DocumentDownloadIcon } = icon.carbon
 const uploadFileListRef = ref()
 const source = ref()
@@ -172,7 +161,7 @@ const customRequest = (options: UploadCustomRequestOptions) => {
 // 下载文件
 const download = () => {
   try {
-    window['$message'].success('正在下载文件！')
+    window['$message'].success('下载中，请耐心等待...')
     downloadFile(JSON.stringify(props.targetData?.option?.dataset), undefined, 'json')
   } catch (error) {
     window['$message'].success('下载失败，数据错误！')
@@ -181,7 +170,7 @@ const download = () => {
 </script>
 
 <style lang="scss" scoped>
-@include go("chart-configurations-data-static") {
+@include go("chart-configurations-timeline") {
   @include deep() {
     pre {
       white-space: pre-wrap;

src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataStatic/index.vue

@@ -1,6 +1,8 @@
 <template>
-  <div class="go-chart-configurations-data-static" v-if="targetData">
-    <ChartDataMatchingAndShow :tableData="targetData"></ChartDataMatchingAndShow>
+  <div class="go-chart-configurations-data-static">
+    <chart-data-matching-and-show
+      :targetData="targetData"
+    ></chart-data-matching-and-show>
   </div>
 </template>
 
@@ -15,19 +17,9 @@ const props = defineProps({
     required: true
   }
 })
-
 </script>
 
 <style lang="scss" scoped>
-@include go("chart-configurations-data-static") {
-  @include deep() {
-    pre {
-      white-space: pre-wrap;
-      word-wrap: break-word;
-    }
-  }
-  .source-btn-box {
-    margin-top: 10px !important;
-  }
+@include go('chart-configurations-data-static') {
 }
 </style>

src/views/chart/ContentConfigurations/components/ChartData/index.d.ts

@@ -1,4 +1,5 @@
 import { RequestDataTypeEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
+import { RequestHttpEnum } from '@/enums/httpEnum'
 
 // 匹配结果
 export enum DataResultEnum {
@@ -12,13 +13,20 @@ export enum TimelineTitleEnum {
   CONTENT = '数据内容',
 }
 
-export enum SelcetOptionsLableEnum {
+export enum SelectCreateDataEnum {
   STATIC = '静态数据',
   AJAX = '动态请求',
 }
 
-export interface SelectOptionsType {
-  label: SelcetOptionsLableEnum
+export interface SelectCreateDataType {
+  label: SelectCreateDataEnum
   value: RequestDataTypeEnum
   disabled?: boolean
 }
+
+// ajax 请求
+export interface SelectHttpType {
+  label: RequestHttpEnum
+  value: RequestHttpEnum
+  disabled?: boolean
+}

src/views/chart/ContentConfigurations/components/ChartData/index.vue

@@ -1,15 +1,19 @@
 <template>
   <div class="go-chart-configurations-data" v-if="targetData">
     <setting-item-box name="请求方式" :alone="true">
-      <n-select v-model:value="targetData.data.requestDataType" :options="selectOptions" />
+      <n-select
+        v-model:value="targetData.data.requestDataType"
+        :options="selectOptions"
+      />
     </setting-item-box>
+    <n-divider style="margin: 10px 0;"></n-divider>
     <!-- 静态 -->
     <chart-data-static
       v-if="targetData.data.requestDataType === RequestDataTypeEnum.STATIC"
       :targetData="targetData"
     ></chart-data-static>
     <!-- 动态 -->
-    <chart-data-ajax v-else></chart-data-ajax>
+    <chart-data-ajax v-else :targetData="targetData"></chart-data-ajax>
   </div>
 </template>
 
@@ -19,27 +23,25 @@ import { RequestDataTypeEnum } from '@/store/modules/chartEditStore/chartEditSto
 import { useTargetData } from '../hooks/useTargetData.hook'
 import { ChartDataStatic } from './components/ChartDataStatic/index'
 import { ChartDataAjax } from './components/ChartDataAjax/index'
-import { SelectOptionsType, SelcetOptionsLableEnum } from './index.d'
+import { SelectCreateDataType, SelectCreateDataEnum } from './index.d'
 
 const { targetData } = useTargetData()
 
 // 选项
-const selectOptions: SelectOptionsType[] = [
+const selectOptions: SelectCreateDataType[] = [
   {
-    label: SelcetOptionsLableEnum.STATIC,
+    label: SelectCreateDataEnum.STATIC,
     value: RequestDataTypeEnum.STATIC
   },
   {
-    label: SelcetOptionsLableEnum.AJAX,
-    value: RequestDataTypeEnum.AJAX,
+    label: SelectCreateDataEnum.AJAX,
+    value: RequestDataTypeEnum.AJAX
   }
 ]
-
 </script>
 
-<style>
-</style>
+<style></style>
 <style lang="scss" scoped>
-@include go("chart-configurations-data") {
+@include go('chart-configurations-data') {
 }
 </style>