From b98aeb19760bbc5889d281661556ab1968d30775 Mon Sep 17 00:00:00 2001
From: MTrun <1262327911@qq.com>
Date: Thu, 24 Mar 2022 14:19:07 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=20=E6=96=B0=E5=A2=9E=E9=A2=84=E8=A7=88?=
 =?UTF-8?q?=E6=8E=A5=E5=8F=A3=E6=95=B0=E6=8D=AE=E5=8A=A8=E6=80=81=E8=8E=B7?=
 =?UTF-8?q?=E5=8F=96=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Doc/index.ts                   |  3 --
 src/components/GoDoc/index.ts                 |  3 ++
 src/components/{Doc => GoDoc}/index.vue       |  0
 src/hooks/useChartDataFetch.hook.ts           | 23 ++++++++++----
 src/hooks/useCode.hook.ts                     |  1 +
 src/hooks/usePreviewScale.hook.ts             |  1 +
 src/hooks/useTheme.hook.ts                    |  2 +-
 .../Charts/Bars/BarCommon/index.vue           |  5 ++--
 .../Charts/Bars/BarCrossrange/index.vue       |  5 ++--
 .../Charts/Lines/LineCommon/index.vue         |  8 +++--
 .../Charts/Lines/LineGradientSingle/index.vue |  8 +++--
 .../Charts/Lines/LineGradients/index.vue      |  8 +++--
 .../Charts/Pies/PieCommon/index.vue           |  6 +++-
 src/utils/router.ts                           |  4 +++
 src/utils/utils.ts                            |  8 +++++
 .../components/ChartDataAjax/index.vue        | 30 +++++++++++--------
 16 files changed, 82 insertions(+), 33 deletions(-)
 delete mode 100644 src/components/Doc/index.ts
 create mode 100644 src/components/GoDoc/index.ts
 rename src/components/{Doc => GoDoc}/index.vue (100%)

diff --git a/src/components/Doc/index.ts b/src/components/Doc/index.ts
deleted file mode 100644
index 36008f11..00000000
--- a/src/components/Doc/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import Doc from './index.vue';
-
-export { Doc };
diff --git a/src/components/GoDoc/index.ts b/src/components/GoDoc/index.ts
new file mode 100644
index 00000000..80098f1e
--- /dev/null
+++ b/src/components/GoDoc/index.ts
@@ -0,0 +1,3 @@
+import GoDoc from './index.vue';
+
+export { GoDoc };
diff --git a/src/components/Doc/index.vue b/src/components/GoDoc/index.vue
similarity index 100%
rename from src/components/Doc/index.vue
rename to src/components/GoDoc/index.vue
diff --git a/src/hooks/useChartDataFetch.hook.ts b/src/hooks/useChartDataFetch.hook.ts
index 5584a026..c1846e23 100644
--- a/src/hooks/useChartDataFetch.hook.ts
+++ b/src/hooks/useChartDataFetch.hook.ts
@@ -1,15 +1,18 @@
-import { toRefs, watchEffect } from 'vue'
+import { ref, toRefs, watchEffect, nextTick } from 'vue'
+import type VChart from 'vue-echarts'
 import { http } from '@/api/http'
 import { CreateComponentType } from '@/packages/index.d'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { RequestDataTypeEnum } from '@/enums/httpEnum'
+import { isPreview } from '@/utils'
 
 /**
- * 数据监听与更改
+ * 图表的 setdata 数据监听与更改
  * @param chartConfig
  */
 export const useChartDataFetch = (chartConfig: CreateComponentType) => {
-  let fetchInterval:any = 0
+  const vChartRef = ref<typeof VChart | null>(null)
+  let fetchInterval: any = 0
 
   watchEffect(() => {
     clearInterval(fetchInterval)
@@ -25,15 +28,23 @@ export const useChartDataFetch = (chartConfig: CreateComponentType) => {
     // 处理地址
     if (requestUrl?.value && requestInterval.value > 0) {
       // requestOriginUrl 允许为空
-      const completePath = requestOriginUrl && requestOriginUrl.value + requestUrl.value
+      const completePath =
+        requestOriginUrl && requestOriginUrl.value + requestUrl.value
       if (!completePath) return
 
       fetchInterval = setInterval(async () => {
         const res = await http(requestHttpType.value)(completePath || '', {})
-        if(res.data) {
-          chartConfig.option.dataset = res.data as any
+        if (res.data) {
+          nextTick(() => {
+            chartConfig.option.dataset = res.data as any
+            if(isPreview() && vChartRef.value) {
+              vChartRef.value.setOption(chartConfig.option)
+            }
+          })
         }
       }, requestInterval.value * 1000)
     }
   })
+
+  return { vChartRef }
 }
diff --git a/src/hooks/useCode.hook.ts b/src/hooks/useCode.hook.ts
index 52dd381c..53cebd04 100644
--- a/src/hooks/useCode.hook.ts
+++ b/src/hooks/useCode.hook.ts
@@ -2,6 +2,7 @@ import hljs from 'highlight.js/lib/core'
 import json from 'highlight.js/lib/languages/json'
 import typescript from 'highlight.js/lib/languages/typescript'
 
+// * code 展示
 export const useCode = () => {
   hljs.registerLanguage('json', json)
   hljs.registerLanguage('typescript', typescript)
diff --git a/src/hooks/usePreviewScale.hook.ts b/src/hooks/usePreviewScale.hook.ts
index 9997bc13..d03e475b 100644
--- a/src/hooks/usePreviewScale.hook.ts
+++ b/src/hooks/usePreviewScale.hook.ts
@@ -1,6 +1,7 @@
 import { ref } from 'vue'
 import throttle from 'lodash/throttle'
 
+// * 屏幕缩放适配
 export const usePreviewScale = (
   width: number,
   height: number,
diff --git a/src/hooks/useTheme.hook.ts b/src/hooks/useTheme.hook.ts
index ae5e846a..1560ffaa 100644
--- a/src/hooks/useTheme.hook.ts
+++ b/src/hooks/useTheme.hook.ts
@@ -5,7 +5,7 @@ import { borderRadius } from '@/settings/designSetting'
 import { toLight } from '@/utils'
 
 /**
- * 设置全局主题
+ * * 设置全局主题
  */
 export const useThemeOverridesHook = () => {
   const designStore = useDesignStore()
diff --git a/src/packages/components/Charts/Bars/BarCommon/index.vue b/src/packages/components/Charts/Bars/BarCommon/index.vue
index 8f2491f0..b191344f 100644
--- a/src/packages/components/Charts/Bars/BarCommon/index.vue
+++ b/src/packages/components/Charts/Bars/BarCommon/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-chart :theme="themeColor" :option="option" autoresize></v-chart>
+  <v-chart ref="vChartRef" :theme="themeColor" :option="option" :manual-update="isPreview()" autoresize></v-chart>
 </template>
 
 <script setup lang="ts">
@@ -12,6 +12,7 @@ import { includes } from './config'
 import { mergeTheme } from '@/packages/public/chart'
 import { useChartDataFetch } from '@/hooks/useChartDataFetch.hook'
 import { CreateComponentType } from '@/packages/index.d'
+import { isPreview } from '@/utils'
 import {
   DatasetComponent,
   GridComponent,
@@ -47,5 +48,5 @@ const option = computed(() => {
   return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
 })
 
-useChartDataFetch(props.chartConfig)
+const { vChartRef } = useChartDataFetch(props.chartConfig)
 </script>
diff --git a/src/packages/components/Charts/Bars/BarCrossrange/index.vue b/src/packages/components/Charts/Bars/BarCrossrange/index.vue
index dc27f366..833d5a61 100644
--- a/src/packages/components/Charts/Bars/BarCrossrange/index.vue
+++ b/src/packages/components/Charts/Bars/BarCrossrange/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-chart :theme="themeColor" :option="option" autoresize></v-chart>
+  <v-chart ref="vChartRef" :theme="themeColor" :option="option" :manual-update="isPreview()" autoresize></v-chart>
 </template>
 
 <script setup lang="ts">
@@ -11,6 +11,7 @@ import { BarChart } from 'echarts/charts'
 import { mergeTheme } from '@/packages/public/chart'
 import config, { includes } from './config'
 import { useChartDataFetch } from '@/hooks/useChartDataFetch.hook'
+import { isPreview } from '@/utils'
 import {
   DatasetComponent,
   GridComponent,
@@ -46,5 +47,5 @@ const option = computed(() => {
   return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
 })
 
-useChartDataFetch(props.chartConfig)
+const { vChartRef } = useChartDataFetch(props.chartConfig)
 </script>
diff --git a/src/packages/components/Charts/Lines/LineCommon/index.vue b/src/packages/components/Charts/Lines/LineCommon/index.vue
index 8915dd7d..1e820adc 100644
--- a/src/packages/components/Charts/Lines/LineCommon/index.vue
+++ b/src/packages/components/Charts/Lines/LineCommon/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-chart :theme="themeColor" :option="option.options" autoresize></v-chart>
+  <v-chart ref="vChartRef" :theme="themeColor" :option="option.options" :manual-update="isPreview()" autoresize></v-chart>
 </template>
 
 <script setup lang="ts">
@@ -13,6 +13,8 @@ import { mergeTheme } from '@/packages/public/chart'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { chartColorsSearch, defaultTheme } from '@/settings/chartThemes/index'
 import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
+import { useChartDataFetch } from '@/hooks/useChartDataFetch.hook'
+import { isPreview } from '@/utils'
 
 const props = defineProps({
   themeSetting: {
@@ -45,7 +47,7 @@ const option = reactive({
 
 // 初始化与渐变色处理
 watch(() => chartEditStore.getEditCanvasConfig.chartThemeColor, (newColor: keyof typeof chartColorsSearch) => {
-  if (!document.location.hash.includes('preview')) {
+  if (!isPreview()) {
     const themeColor = chartColorsSearch[newColor] || chartColorsSearch[defaultTheme]
     props.chartConfig.option.series.forEach((value: any) => {
       value.lineStyle.shadowColor = themeColor[2]
@@ -64,4 +66,6 @@ watch(() => props.chartConfig.option.dataset, () => {
 }, {
   deep: true
 })
+
+const { vChartRef } = useChartDataFetch(props.chartConfig)
 </script>
\ No newline at end of file
diff --git a/src/packages/components/Charts/Lines/LineGradientSingle/index.vue b/src/packages/components/Charts/Lines/LineGradientSingle/index.vue
index f14acf57..32f37d9d 100644
--- a/src/packages/components/Charts/Lines/LineGradientSingle/index.vue
+++ b/src/packages/components/Charts/Lines/LineGradientSingle/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-chart :theme="themeColor" :option="option.options" autoresize></v-chart>
+  <v-chart ref="vChartRef" :theme="themeColor" :option="option.options" :manual-update="isPreview()" autoresize></v-chart>
 </template>
 
 <script setup lang="ts">
@@ -13,6 +13,8 @@ import { mergeTheme } from '@/packages/public/chart'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { chartColorsSearch, defaultTheme } from '@/settings/chartThemes/index'
 import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
+import { useChartDataFetch } from '@/hooks/useChartDataFetch.hook'
+import { isPreview } from '@/utils'
 
 const props = defineProps({
   themeSetting: {
@@ -45,7 +47,7 @@ const option = reactive({
 
 // 渐变色处理
 watch(() => chartEditStore.getEditCanvasConfig.chartThemeColor, (newColor: keyof typeof chartColorsSearch) => {
-  if (!document.location.hash.includes('preview')) {
+  if (!isPreview()) {
     const themeColor = chartColorsSearch[newColor] || chartColorsSearch[defaultTheme]
     props.chartConfig.option.series.forEach((value: any, index: number) => {
       value.areaStyle.color = new graphic.LinearGradient(0, 0, 0, 1, [
@@ -71,4 +73,6 @@ watch(() => props.chartConfig.option.dataset, () => {
 }, {
   deep: true
 })
+
+const { vChartRef } = useChartDataFetch(props.chartConfig)
 </script>
diff --git a/src/packages/components/Charts/Lines/LineGradients/index.vue b/src/packages/components/Charts/Lines/LineGradients/index.vue
index f957f989..28d40a10 100644
--- a/src/packages/components/Charts/Lines/LineGradients/index.vue
+++ b/src/packages/components/Charts/Lines/LineGradients/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-chart :theme="themeColor" :option="option.options" autoresize></v-chart>
+  <v-chart ref="vChartRef" :theme="themeColor" :option="option.options" :manual-update="isPreview()" autoresize></v-chart>
 </template>
 
 <script setup lang="ts">
@@ -13,6 +13,8 @@ import { mergeTheme } from '@/packages/public/chart'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { chartColorsSearch, defaultTheme } from '@/settings/chartThemes/index'
 import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
+import { useChartDataFetch } from '@/hooks/useChartDataFetch.hook'
+import { isPreview } from '@/utils'
 
 const props = defineProps({
   themeSetting: {
@@ -45,7 +47,7 @@ const option = reactive({
 
 // 渐变色处理
 watch(() => chartEditStore.getEditCanvasConfig.chartThemeColor, (newColor: keyof typeof chartColorsSearch) => {
-  if (!document.location.hash.includes('preview')) {
+  if (!isPreview()) {
     const themeColor = chartColorsSearch[newColor] || chartColorsSearch[defaultTheme]
     props.chartConfig.option.series.forEach((value: any, index: number) => {
       value.areaStyle.color = new graphic.LinearGradient(0, 0, 0, 1, [
@@ -70,4 +72,6 @@ watch(() => props.chartConfig.option.dataset, () => {
 }, {
   deep: true
 })
+
+const { vChartRef } = useChartDataFetch(props.chartConfig)
 </script>
diff --git a/src/packages/components/Charts/Pies/PieCommon/index.vue b/src/packages/components/Charts/Pies/PieCommon/index.vue
index f164b7b3..b5f38378 100644
--- a/src/packages/components/Charts/Pies/PieCommon/index.vue
+++ b/src/packages/components/Charts/Pies/PieCommon/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-chart :theme="themeColor" :option="option" autoresize></v-chart>
+  <v-chart ref="vChartRef" :theme="themeColor" :option="option" :manual-update="isPreview()" autoresize></v-chart>
 </template>
 
 <script setup lang="ts">
@@ -10,6 +10,8 @@ import { CanvasRenderer } from 'echarts/renderers'
 import { PieChart } from 'echarts/charts'
 import { mergeTheme } from '@/packages/public/chart'
 import config, { includes } from './config'
+import { useChartDataFetch } from '@/hooks/useChartDataFetch.hook'
+import { isPreview } from '@/utils'
 import {
   DatasetComponent,
   GridComponent,
@@ -45,4 +47,6 @@ use([
 const option = computed(() => {
   return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
 })
+
+const { vChartRef } = useChartDataFetch(props.chartConfig)
 </script>
diff --git a/src/utils/router.ts b/src/utils/router.ts
index 9e46bbea..a790bf7a 100644
--- a/src/utils/router.ts
+++ b/src/utils/router.ts
@@ -128,6 +128,10 @@ export const openGiteeSourceCode = () => {
   openNewWindow(giteeSourceCodePath)
 }
 
+export const isPreview = () => {
+  return document.location.hash.includes('preview')
+}
+
 /**
  * * 获取当前路由下的参数
  * @returns object
diff --git a/src/utils/utils.ts b/src/utils/utils.ts
index b61034c7..8f63d3ef 100644
--- a/src/utils/utils.ts
+++ b/src/utils/utils.ts
@@ -4,6 +4,14 @@ import screenfull from 'screenfull'
 import throttle from 'lodash/throttle'
 import Image_404 from '../assets/images/exception/image-404.png'
 
+/**
+ * * 判断是否是开发环境
+ * @return { Boolean }
+ */
+export const isDev = () => {
+  return import.meta.env.DEV
+}
+
 /**
  * * 生成一个不重复的ID
  * @param { Number } randomLength
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 bf1ad358..4fcc68d2 100644
--- a/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataAjax/index.vue
+++ b/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataAjax/index.vue
@@ -6,13 +6,15 @@
         :options="selectOptions"
       />
     </setting-item-box>
+
     <setting-item-box name="源地址:" :alone="true">
       <n-text type="info">{{ requestOriginUrl || '暂无' }}</n-text>
     </setting-item-box>
+
     <setting-item-box :alone="true">
       <template #name>
         地址
-        <n-tooltip trigger="hover" v-if="ISDEV">
+        <n-tooltip trigger="hover" v-if="isDev()">
           <template #trigger>
             <n-icon size="21" :depth="3">
               <help-outline-icon></help-outline-icon>
@@ -21,7 +23,7 @@
           <span>
             开发环境使用 mock 数据，请输入【
             <n-text type="info">
-              {{mockDataUrl}}
+              {{ mockDataUrl }}
             </n-text>
             】
           </span>
@@ -33,6 +35,7 @@
         placeholder="请输入地址（去除源）"
       />
     </setting-item-box>
+
     <setting-item-box name="测试" :alone="true">
       <n-space>
         <n-button @click="sendHandle">
@@ -45,7 +48,9 @@
         </n-button>
       </n-space>
     </setting-item-box>
+
     <go-skeleton :load="loading" :repeat="3"></go-skeleton>
+
     <chart-data-matching-and-show
       v-show="showMatching && !loading"
       :ajax="true"
@@ -63,13 +68,12 @@ import { http } from '@/api/http'
 import { SelectHttpType } from '../../index.d'
 import { ChartDataMatchingAndShow } from '../ChartDataMatchingAndShow'
 import { useTargetData } from '../../../hooks/useTargetData.hook'
+import { isDev } from '@/utils'
 
 const { HelpOutlineIcon, FlashIcon } = icon.ionicons5
 
 const { targetData, chartEditStore } = useTargetData()
 const { requestOriginUrl } = toRefs(chartEditStore.getRequestGlobalConfig)
-// 是否是开发环境
-const ISDEV = import.meta.env.DEV === true
 // 是否展示数据分析
 const loading = ref(false)
 const showMatching = ref(false)
@@ -96,14 +100,16 @@ const sendHandle = async () => {
   }
   const completePath = requestOriginUrl && requestOriginUrl.value + requestUrl
   const res = await http(requestHttpType)(completePath || '', {})
-  loading.value = false
-  if (res.status === 200) {
-    // @ts-ignore
-    targetData.value.option.dataset = res.data
-    showMatching.value = true
-    return
-  }
-  window['$message'].warning('数据异常，请检查接口数据！')
+  setTimeout(() => {
+    loading.value = false
+    if (res.status === 200) {
+      // @ts-ignore
+      targetData.value.option.dataset = res.data
+      showMatching.value = true
+      return
+    }
+    window['$message'].warning('数据异常，请检查接口数据！')
+  }, 500)
 }
 </script>