feat: 新增数据请求接口

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>