From e4aac1597ffaf067563ffa8fd87574741d33f89c 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: Thu, 15 Dec 2022 20:22:05 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A4=84=E7=90=86=E5=85=A8=E5=B1=80?=
 =?UTF-8?q?=E6=8E=A5=E5=8F=A3=E7=BC=96=E8=BE=91=E8=AF=B7=E6=B1=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/ChartDataAjax/index.vue        |  4 +-
 .../ChartDataMatchingAndShow/index.vue        |  2 +-
 .../components/ChartDataDisplay/index.vue     |  2 -
 .../components/ChartDataPondControl/index.vue | 13 ++-
 .../components/ChartDataPond/index.vue        | 80 ++++++++++++++++++-
 5 files changed, 92 insertions(+), 9 deletions(-)

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 ac9d935c..736130c6 100644
--- a/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataAjax/index.vue
+++ b/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataAjax/index.vue
@@ -72,8 +72,10 @@
 
     <!-- 底部数据展示 -->
     <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"
@@ -95,7 +97,7 @@ import { http, customizeHttp } from '@/api/http'
 import { SelectHttpType } from '../../index.d'
 import { ChartDataMatchingAndShow } from '../ChartDataMatchingAndShow'
 import { useTargetData } from '../../../hooks/useTargetData.hook'
-import { isDev, newFunctionHandle } from '@/utils'
+import { newFunctionHandle } from '@/utils'
 
 const { HelpOutlineIcon, FlashIcon, PulseIcon } = icon.ionicons5
 const { targetData, chartEditStore } = useTargetData()
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 7f5534dd..0774a111 100644
--- a/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataMatchingAndShow/index.vue
+++ b/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataMatchingAndShow/index.vue
@@ -117,7 +117,7 @@ const { uploadFileListRef, customRequest, beforeUpload, download } = useFile(tar
 
 // 是否展示过滤器
 const filterShow = computed(() => {
-  return targetData.value.request.requestDataType === RequestDataTypeEnum.AJAX
+  return targetData.value.request.requestDataType !== RequestDataTypeEnum.STATIC
 })
 
 // 是支持 dataset 的图表类型
diff --git a/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataPond/components/ChartDataDisplay/index.vue b/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataPond/components/ChartDataDisplay/index.vue
index fdc4b840..f2f6e6af 100644
--- a/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataPond/components/ChartDataDisplay/index.vue
+++ b/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataPond/components/ChartDataDisplay/index.vue
@@ -157,8 +157,6 @@ const {
   requestIntervalUnit
 } = toRefs((props.targetData as RequestDataPondItemType).dataPondRequestConfig)
 
-console.log((props.targetData as RequestDataPondItemType).dataPondRequestConfig)
-
 const tabs = [RequestParamsTypeEnum.HEADER]
 const requestContentTypeObj = {
   [RequestContentTypeEnum.DEFAULT]: '普通请求',
diff --git a/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataPond/components/ChartDataPondControl/index.vue b/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataPond/components/ChartDataPondControl/index.vue
index 1a6390a2..e738f1fb 100644
--- a/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataPond/components/ChartDataPondControl/index.vue
+++ b/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataPond/components/ChartDataPondControl/index.vue
@@ -46,7 +46,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, toRefs, computed, nextTick, watch } from 'vue'
+import { ref, toRefs, computed, nextTick, watch, toRaw } from 'vue'
 import noData from '@/assets/images/canvas/noData.png'
 import { ChartDataPondList } from '../ChartDataPondList'
 import { PondDataRequest } from '../../../ChartDataRequest'
@@ -54,6 +54,7 @@ import { ChartDataDisplay } from '../ChartDataDisplay'
 import { requestConfig } from '@/packages/public/publicConfig'
 import { useTargetData } from '@/views/chart/ContentConfigurations/components/hooks/useTargetData.hook'
 import { RequestDataPondItemType } from '@/store/modules/chartEditStore/chartEditStore.d'
+import { RequestDataTypeEnum } from '@/enums/httpEnum'
 import { icon } from '@/plugins'
 import { getUUID, goDialog } from '@/utils'
 import { cloneDeep } from 'lodash'
@@ -107,7 +108,7 @@ const createPond = () => {
   editData.value = {
     dataPondId: id,
     dataPondName: id,
-    dataPondRequestConfig: cloneDeep(requestConfig)
+    dataPondRequestConfig: cloneDeep({ ...requestConfig, requestDataType: RequestDataTypeEnum.Pond })
   }
   openPond()
 }
@@ -118,7 +119,6 @@ const saveHandle = (newData: RequestDataPondItemType) => {
   if (isEdit.value) {
     editSaveHandle(newData)
   } else {
-    console.log(editData.value)
     createSaveHandle(newData)
   }
   isEdit.value = false
@@ -173,6 +173,13 @@ const deletePond = (targetData: RequestDataPondItemType) => {
 
 // 关闭
 const closeHandle = () => {
+  // 将所选内容赋值给对象
+  if (pondData.value) {
+    targetData.value.request = {
+      ...toRaw(pondData.value.dataPondRequestConfig),
+      requestDataPondId: pondData.value.dataPondId
+    }
+  }
   emit('update:modelShow', false)
   emit('sendHandle')
 }
diff --git a/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataPond/index.vue b/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataPond/index.vue
index 0d7fe660..ed9bc272 100644
--- a/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataPond/index.vue
+++ b/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataPond/index.vue
@@ -26,17 +26,48 @@
     </n-card>
   </div>
 
+  <setting-item-box :alone="true">
+    <template #name>
+      测试
+      <n-tooltip trigger="hover">
+        <template #trigger>
+          <n-icon size="21" :depth="3">
+            <help-outline-icon></help-outline-icon>
+          </n-icon>
+        </template>
+        默认赋值给 dataset 字段
+      </n-tooltip>
+    </template>
+    <n-button type="primary" ghost @click="sendHandle">
+      <template #icon>
+        <n-icon>
+          <flash-icon />
+        </n-icon>
+      </template>
+      发送请求
+    </n-button>
+  </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>
+
   <!-- 编辑 / 新增弹窗 -->
-  <chart-data-pond-control v-model:modelShow="controlModel"></chart-data-pond-control>
+  <chart-data-pond-control v-model:modelShow="controlModel" @sendHandle="sendHandle"></chart-data-pond-control>
 </template>
 
 <script setup lang="ts">
-import { ref, toRefs, computed } from 'vue'
+import { ref, toRefs, toRaw, onBeforeUnmount, computed, watchEffect } from 'vue'
 import { icon } from '@/plugins'
+import { http, customizeHttp } from '@/api/http'
 import { SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
 import { ChartDataPondControl } from './components/ChartDataPondControl'
 import { useDesignStore } from '@/store/modules/designStore/designStore'
 import { useTargetData } from '../../../hooks/useTargetData.hook'
+import { ChartDataMatchingAndShow } from '../ChartDataMatchingAndShow'
+import { newFunctionHandle } from '@/utils'
 
 const designStore = useDesignStore()
 const { HelpOutlineIcon, FlashIcon, PulseIcon, FishIcon } = icon.ionicons5
@@ -48,7 +79,12 @@ const {
   requestIntervalUnit: GlobalRequestIntervalUnit
 } = toRefs(chartEditStore.getRequestGlobalConfig)
 
+const loading = ref(false)
 const controlModel = ref(false)
+const showMatching = ref(false)
+
+let firstFocus = 0
+let lastFilter: any = undefined
 
 // 所选数据池
 const pondData = computed(() => {
@@ -69,6 +105,46 @@ const themeColor = computed(() => {
 const controlModelHandle = () => {
   controlModel.value = true
 }
+
+// 发送请求
+const sendHandle = async () => {
+  if (!targetData.value?.request) {
+    window.$message.warning('请选择一个公共接口！')
+    return
+  }
+  loading.value = true
+  try {
+    // const res = await customizeHttp(
+    //   toRaw(pondData.value?.dataPondRequestConfig),
+    //   toRaw(chartEditStore.getRequestGlobalConfig)
+    // )
+    const res = await customizeHttp(toRaw(targetData.value.request), toRaw(chartEditStore.getRequestGlobalConfig))
+    loading.value = false
+    if (res) {
+      if (!res?.data && !targetData.value.filter) window['$message'].warning('您的数据不符合默认格式，请配置过滤器！')
+      targetData.value.option.dataset = newFunctionHandle(res?.data, res, targetData.value.filter)
+      showMatching.value = true
+      return
+    }
+    window['$message'].warning('数据异常，请检查参数！')
+  } catch (error) {
+    loading.value = false
+    window['$message'].warning('数据异常，请检查参数！')
+  }
+}
+
+watchEffect(() => {
+  const filter = targetData.value?.filter
+  if (lastFilter !== filter && firstFocus) {
+    lastFilter = filter
+    sendHandle()
+  }
+  firstFocus++
+})
+
+onBeforeUnmount(() => {
+  lastFilter = null
+})
 </script>
 
 <style scoped lang="scss">