From d9ee41c8920e7aff5dbd82ea6b27a35531a1ae51 Mon Sep 17 00:00:00 2001
From: MTrun <1262327911@qq.com>
Date: Mon, 21 Mar 2022 20:56:42 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=E8=AF=B7=E6=B1=82=E6=8E=A5=E5=8F=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |  2 +-
 src/api/http.ts                               | 31 +++---
 src/api/mock/{index.js => index.ts}           |  2 +-
 src/api/mock/{test.mock.js => test.mock.ts}   |  0
 .../ChartItemSetting/SettingItemBox.vue       | 19 +++-
 src/enums/httpEnum.ts                         |  2 +-
 src/packages/index.d.ts                       |  4 +-
 src/packages/public/publicConfig.ts           |  8 +-
 .../chartEditStore/chartEditStore.d.ts        |  3 +
 .../components/ChartDataAjax/index.vue        | 98 ++++++++++++++++++-
 .../ChartDataMatchingAndShow/index.vue        | 25 ++---
 .../components/ChartDataStatic/index.vue      | 18 +---
 .../components/ChartData/index.d.ts           | 14 ++-
 .../components/ChartData/index.vue            | 24 ++---
 14 files changed, 177 insertions(+), 73 deletions(-)
 rename src/api/mock/{index.js => index.ts} (73%)
 rename src/api/mock/{test.mock.js => test.mock.ts} (100%)

diff --git a/package.json b/package.json
index 5587098e..4ac9f680 100644
--- a/package.json
+++ b/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",
diff --git a/src/api/http.ts b/src/api/http.ts
index 2738217f..8cd91192 100644
--- a/src/api/http.ts
+++ b/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
 }
diff --git a/src/api/mock/index.js b/src/api/mock/index.ts
similarity index 73%
rename from src/api/mock/index.js
rename to src/api/mock/index.ts
index 084afc54..d9d4e23b 100644
--- a/src/api/mock/index.js
+++ b/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
diff --git a/src/api/mock/test.mock.js b/src/api/mock/test.mock.ts
similarity index 100%
rename from src/api/mock/test.mock.js
rename to src/api/mock/test.mock.ts
diff --git a/src/components/ChartItemSetting/SettingItemBox.vue b/src/components/ChartItemSetting/SettingItemBox.vue
index fcdfaed8..56b81c40 100644
--- a/src/components/ChartItemSetting/SettingItemBox.vue
+++ b/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,
diff --git a/src/enums/httpEnum.ts b/src/enums/httpEnum.ts
index 4bba825d..b8ead3f5 100644
--- a/src/enums/httpEnum.ts
+++ b/src/enums/httpEnum.ts
@@ -13,7 +13,7 @@ export enum ResultEnum {
 /**
  * @description: 请求方法
  */
-export enum RequestEnum {
+export enum RequestHttpEnum {
   GET = 'get',
   POST = 'post',
   PATCH = 'patch',
diff --git a/src/packages/index.d.ts b/src/packages/index.d.ts
index 415a7f32..543fde95 100644
--- a/src/packages/index.d.ts
+++ b/src/packages/index.d.ts
@@ -15,7 +15,9 @@ export type ConfigType = {
 
 // 数据请求
 interface requestConfig {
-  data: RequestConfigType
+  data: RequestConfigType,
+  // 暂时约定为数据存储区域（未使用）
+  requestData: any
 }
 
 // Echarts 数据类型
diff --git a/src/packages/public/publicConfig.ts b/src/packages/public/publicConfig.ts
index 5ce24dab..2edb4a94 100644
--- a/src/packages/public/publicConfig.ts
+++ b/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
diff --git a/src/store/modules/chartEditStore/chartEditStore.d.ts b/src/store/modules/chartEditStore/chartEditStore.d.ts
index 50fbc8e8..78353276 100644
--- a/src/store/modules/chartEditStore/chartEditStore.d.ts
+++ b/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
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 c1549717..c031aa65 100644
--- a/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataAjax/index.vue
+++ b/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>
\ No newline at end of file
+@include go('chart-configurations-data-ajax') {
+}
+</style>
diff --git a/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataMatchingAndShow/index.vue b/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataMatchingAndShow/index.vue
index 9a1da35b..89b80547 100644
--- a/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataMatchingAndShow/index.vue
+++ b/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;
diff --git a/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataStatic/index.vue b/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataStatic/index.vue
index 8813fee7..b78e9171 100644
--- a/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataStatic/index.vue
+++ b/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>
diff --git a/src/views/chart/ContentConfigurations/components/ChartData/index.d.ts b/src/views/chart/ContentConfigurations/components/ChartData/index.d.ts
index e302d667..f73fedde 100644
--- a/src/views/chart/ContentConfigurations/components/ChartData/index.d.ts
+++ b/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
+}
diff --git a/src/views/chart/ContentConfigurations/components/ChartData/index.vue b/src/views/chart/ContentConfigurations/components/ChartData/index.vue
index c4970f56..37b1946d 100644
--- a/src/views/chart/ContentConfigurations/components/ChartData/index.vue
+++ b/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>