From a7b2d5a24bd06972b13db7fc15b777067b3b2c75 Mon Sep 17 00:00:00 2001
From: MTrun <1262327911@qq.com>
Date: Wed, 23 Mar 2022 20:41:50 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E7=BC=96=E8=BE=91?=
 =?UTF-8?q?=E9=98=B6=E6=AE=B5=20mock=20=E6=8E=A5=E5=8F=A3=E8=BD=AE?=
 =?UTF-8?q?=E8=AF=A2=E8=AF=B7=E6=B1=82=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/enums/httpEnum.ts                         |  8 ++++
 src/hooks/useChartDataFetch.hook.ts           | 39 +++++++++++++++++++
 .../Charts/Bars/BarCommon/config.ts           |  3 +-
 .../Charts/Bars/BarCommon/index.vue           | 11 ++++--
 .../Charts/Bars/BarCrossrange/index.vue       |  5 ++-
 .../Charts/Lines/LineCommon/index.vue         |  2 +-
 .../Charts/Lines/LineGradientSingle/index.vue |  2 +-
 .../Charts/Lines/LineGradients/index.vue      |  2 +-
 .../Charts/Pies/PieCommon/index.vue           |  2 +-
 src/packages/public/publicConfig.ts           |  4 +-
 .../chartEditStore/chartEditStore.d.ts        | 12 +-----
 .../components/ChartDataAjax/index.vue        |  3 +-
 .../ChartDataMatchingAndShow/index.vue        |  1 -
 .../components/ChartDataStatic/index.vue      |  9 +----
 .../ChartData/hooks/useFile.hooks.ts          |  8 ++--
 .../components/ChartData/index.d.ts           |  3 +-
 .../components/ChartData/index.vue            |  7 +++-
 src/views/preview/hooks/useScale.hook.ts      |  2 +-
 src/views/preview/hooks/useStore.hook.ts      |  9 +++++
 src/views/preview/index.vue                   |  2 +
 src/views/preview/utils/index.ts              | 27 +------------
 src/views/preview/utils/storage.ts            | 26 +++++++++++++
 22 files changed, 117 insertions(+), 70 deletions(-)
 create mode 100644 src/hooks/useChartDataFetch.hook.ts
 create mode 100644 src/views/preview/hooks/useStore.hook.ts
 create mode 100644 src/views/preview/utils/storage.ts

diff --git a/src/enums/httpEnum.ts b/src/enums/httpEnum.ts
index b8ead3f5..165948f5 100644
--- a/src/enums/httpEnum.ts
+++ b/src/enums/httpEnum.ts
@@ -10,6 +10,14 @@ export enum ResultEnum {
   TIMEOUT = 10042,
 }
 
+// 数据相关
+export enum RequestDataTypeEnum {
+  // 静态数据
+  STATIC = 0,
+  // 请求数据
+  AJAX = 1,
+}
+
 /**
  * @description: 请求方法
  */
diff --git a/src/hooks/useChartDataFetch.hook.ts b/src/hooks/useChartDataFetch.hook.ts
new file mode 100644
index 00000000..4d4b1db4
--- /dev/null
+++ b/src/hooks/useChartDataFetch.hook.ts
@@ -0,0 +1,39 @@
+import { toRefs, watchEffect } from 'vue'
+import { http } from '@/api/http'
+import { CreateComponentType } from '@/packages/index.d'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { RequestDataTypeEnum } from '@/enums/httpEnum'
+
+/**
+ * 数据监听与更改
+ * @param chartConfig
+ */
+export const useChartDataFetch = (chartConfig: CreateComponentType) => {
+  let fetchInterval = 0
+
+  watchEffect(() => {
+    clearInterval(fetchInterval)
+
+    const chartEditStore = useChartEditStore()
+    const { requestOriginUrl, requestInterval } = toRefs(
+      chartEditStore.getRequestGlobalConfig
+    )
+    const { requestDataType, requestHttpType, requestUrl } = toRefs(
+      chartConfig.data
+    )
+    if (requestDataType.value !== RequestDataTypeEnum.AJAX) return
+    // 处理地址
+    if (requestUrl?.value && requestInterval.value > 0) {
+      // requestOriginUrl 允许为空
+      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
+        }
+      }, requestInterval.value * 1000)
+    }
+  })
+}
diff --git a/src/packages/components/Charts/Bars/BarCommon/config.ts b/src/packages/components/Charts/Bars/BarCommon/config.ts
index ac6272dd..187ff852 100644
--- a/src/packages/components/Charts/Bars/BarCommon/config.ts
+++ b/src/packages/components/Charts/Bars/BarCommon/config.ts
@@ -47,8 +47,7 @@ export const option = {
   ]
 }
 
-export default class Config extends publicConfig
-  implements CreateComponentType {
+export default class Config extends publicConfig implements CreateComponentType {
   public key = BarCommonConfig.key
   public chartConfig = cloneDeep(BarCommonConfig)
   // 图表配置项
diff --git a/src/packages/components/Charts/Bars/BarCommon/index.vue b/src/packages/components/Charts/Bars/BarCommon/index.vue
index b3a61dc3..8f2491f0 100644
--- a/src/packages/components/Charts/Bars/BarCommon/index.vue
+++ b/src/packages/components/Charts/Bars/BarCommon/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <VChart :theme="themeColor" :option="option" autoresize></VChart>
+  <v-chart :theme="themeColor" :option="option" autoresize></v-chart>
 </template>
 
 <script setup lang="ts">
@@ -8,8 +8,10 @@ import VChart from 'vue-echarts'
 import { use } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
 import { BarChart } from 'echarts/charts'
-import config, { includes } from './config'
+import { includes } from './config'
 import { mergeTheme } from '@/packages/public/chart'
+import { useChartDataFetch } from '@/hooks/useChartDataFetch.hook'
+import { CreateComponentType } from '@/packages/index.d'
 import {
   DatasetComponent,
   GridComponent,
@@ -27,7 +29,7 @@ const props = defineProps({
     required: true
   },
   chartConfig: {
-    type: Object as PropType<config>,
+    type: Object as PropType<CreateComponentType>,
     required: true
   }
 })
@@ -42,7 +44,8 @@ use([
 ])
 
 const option = computed(() => {
-  // TODO dataset的数据要设计一下，不能这样把数据进行监听，太耗性能
   return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
 })
+
+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 7fd87b19..dc27f366 100644
--- a/src/packages/components/Charts/Bars/BarCrossrange/index.vue
+++ b/src/packages/components/Charts/Bars/BarCrossrange/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <VChart :theme="themeColor" :option="option" autoresize></VChart>
+  <v-chart :theme="themeColor" :option="option" autoresize></v-chart>
 </template>
 
 <script setup lang="ts">
@@ -10,6 +10,7 @@ import { CanvasRenderer } from 'echarts/renderers'
 import { BarChart } from 'echarts/charts'
 import { mergeTheme } from '@/packages/public/chart'
 import config, { includes } from './config'
+import { useChartDataFetch } from '@/hooks/useChartDataFetch.hook'
 import {
   DatasetComponent,
   GridComponent,
@@ -44,4 +45,6 @@ use([
 const option = computed(() => {
   return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
 })
+
+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 98f97c1e..8915dd7d 100644
--- a/src/packages/components/Charts/Lines/LineCommon/index.vue
+++ b/src/packages/components/Charts/Lines/LineCommon/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <VChart :theme="themeColor" :option="option.options" autoresize></VChart>
+  <v-chart :theme="themeColor" :option="option.options" autoresize></v-chart>
 </template>
 
 <script setup lang="ts">
diff --git a/src/packages/components/Charts/Lines/LineGradientSingle/index.vue b/src/packages/components/Charts/Lines/LineGradientSingle/index.vue
index f70fcc29..f14acf57 100644
--- a/src/packages/components/Charts/Lines/LineGradientSingle/index.vue
+++ b/src/packages/components/Charts/Lines/LineGradientSingle/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <VChart :theme="themeColor" :option="option.options" autoresize></VChart>
+  <v-chart :theme="themeColor" :option="option.options" autoresize></v-chart>
 </template>
 
 <script setup lang="ts">
diff --git a/src/packages/components/Charts/Lines/LineGradients/index.vue b/src/packages/components/Charts/Lines/LineGradients/index.vue
index 541e50df..f957f989 100644
--- a/src/packages/components/Charts/Lines/LineGradients/index.vue
+++ b/src/packages/components/Charts/Lines/LineGradients/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <VChart :theme="themeColor" :option="option.options" autoresize></VChart>
+  <v-chart :theme="themeColor" :option="option.options" autoresize></v-chart>
 </template>
 
 <script setup lang="ts">
diff --git a/src/packages/components/Charts/Pies/PieCommon/index.vue b/src/packages/components/Charts/Pies/PieCommon/index.vue
index 04f59435..f164b7b3 100644
--- a/src/packages/components/Charts/Pies/PieCommon/index.vue
+++ b/src/packages/components/Charts/Pies/PieCommon/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <VChart :theme="themeColor" :option="option" autoresize></VChart>
+  <v-chart :theme="themeColor" :option="option" autoresize></v-chart>
 </template>
 
 <script setup lang="ts">
diff --git a/src/packages/public/publicConfig.ts b/src/packages/public/publicConfig.ts
index 98acdd90..508da632 100644
--- a/src/packages/public/publicConfig.ts
+++ b/src/packages/public/publicConfig.ts
@@ -1,7 +1,7 @@
 import { getUUID } from '@/utils'
 import { PublicConfigType } from '@/packages/index.d'
-import { RequestDataTypeEnum, RequestConfigType } from '@/store/modules/chartEditStore/chartEditStore.d'
-import { RequestHttpEnum } from '@/enums/httpEnum'
+import { RequestConfigType } from '@/store/modules/chartEditStore/chartEditStore.d'
+import { RequestHttpEnum, RequestDataTypeEnum } from '@/enums/httpEnum'
 
 const requestConfig: RequestConfigType = {
   requestDataType: RequestDataTypeEnum.STATIC,
diff --git a/src/store/modules/chartEditStore/chartEditStore.d.ts b/src/store/modules/chartEditStore/chartEditStore.d.ts
index 7bbc2155..6de3b5c7 100644
--- a/src/store/modules/chartEditStore/chartEditStore.d.ts
+++ b/src/store/modules/chartEditStore/chartEditStore.d.ts
@@ -1,6 +1,6 @@
 import { CreateComponentType } from '@/packages/index.d'
 import { HistoryActionTypeEnum } from '@/store/modules/chartHistoryStore/chartHistoryStore.d'
-import { RequestHttpEnum } from '@/enums/httpEnum'
+import { RequestHttpEnum, RequestDataTypeEnum } from '@/enums/httpEnum'
 import type {
   ChartColorsNameType,
   GlobalThemeJsonType,
@@ -122,20 +122,12 @@ export enum ChartEditStoreEnum {
   COMPONENT_LIST = 'componentList',
 }
 
-// 数据相关
-export enum RequestDataTypeEnum {
-  // 静态数据
-  STATIC = 0,
-  // 请求数据
-  AJAX = 1,
-}
-
 // 全局的图表请求配置
 export type RequestGlobalConfigType = {
   // 请求源地址
   requestOriginUrl?: string
   // 轮询时间
-  requestInterval?: number
+  requestInterval: number
 }
 // 单个图表请求配置
 export type RequestConfigType = {
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 98e1312b..f0d8aa5d 100644
--- a/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataAjax/index.vue
+++ b/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataAjax/index.vue
@@ -21,7 +21,7 @@
           <span>
             开发环境使用 mock 数据，请输入【
             <n-text type="info">
-              {{ featchMockData }}
+              {{featchMockData}}
             </n-text>
             】
           </span>
@@ -56,7 +56,6 @@
 <script setup lang="ts">
 import { 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 { featchMockData } from '@/api/mock'
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 5cc42a10..19ae5cd9 100644
--- a/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataMatchingAndShow/index.vue
+++ b/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataMatchingAndShow/index.vue
@@ -75,7 +75,6 @@ const { targetData } = useTargetData()
 const props = defineProps({
   ajax: {
     type: Boolean,
-    default: false,
     required: true
   }
 })
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 fffcf563..78f91e6e 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,6 @@
 <template>
   <div class="go-chart-configurations-data-static">
-    <chart-data-matching-and-show></chart-data-matching-and-show>
+    <chart-data-matching-and-show :ajax="false"></chart-data-matching-and-show>
   </div>
 </template>
 
@@ -8,13 +8,6 @@
 import { PropType } from 'vue'
 import { CreateComponentType } from '@/packages/index.d'
 import { ChartDataMatchingAndShow } from '../ChartDataMatchingAndShow'
-
-const props = defineProps({
-  targetData: {
-    type: Object as PropType<CreateComponentType>,
-    required: true
-  }
-})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/chart/ContentConfigurations/components/ChartData/hooks/useFile.hooks.ts b/src/views/chart/ContentConfigurations/components/ChartData/hooks/useFile.hooks.ts
index b0a63b6e..1172aef1 100644
--- a/src/views/chart/ContentConfigurations/components/ChartData/hooks/useFile.hooks.ts
+++ b/src/views/chart/ContentConfigurations/components/ChartData/hooks/useFile.hooks.ts
@@ -5,7 +5,6 @@ import { readFile, downloadFile } from '@/utils'
 
 export const useFile = (targetData: any) => {
   const uploadFileListRef = ref()
-  const option = toRef(targetData, 'option')
 
   //@ts-ignore
   const beforeUpload = ({ file }) => {
@@ -24,8 +23,7 @@ export const useFile = (targetData: any) => {
     nextTick(() => {
       if (file.file) {
         readFile(file.file).then((fileData: any) => {
-          option.value.dataset = JSON.parse(fileData)
-          console.log(option.value.dataset)
+          targetData.value.option.dataset = JSON.parse(fileData)
         })
       } else {
         window['$message'].error('导入数据失败，请稍后重试或联系管理员！')
@@ -37,9 +35,9 @@ export const useFile = (targetData: any) => {
   const download = () => {
     try {
       window['$message'].success('下载中，请耐心等待...')
-      downloadFile(JSON.stringify(option.value.dataset), undefined, 'json')
+      downloadFile(JSON.stringify(targetData.value.option.dataset), undefined, 'json')
     } catch (error) {
-      window['$message'].success('下载失败，数据错误！')
+      window['$message'].error('下载失败，数据错误！')
     }
   }
   return {
diff --git a/src/views/chart/ContentConfigurations/components/ChartData/index.d.ts b/src/views/chart/ContentConfigurations/components/ChartData/index.d.ts
index f73fedde..d12766ad 100644
--- a/src/views/chart/ContentConfigurations/components/ChartData/index.d.ts
+++ b/src/views/chart/ContentConfigurations/components/ChartData/index.d.ts
@@ -1,5 +1,4 @@
-import { RequestDataTypeEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
-import { RequestHttpEnum } from '@/enums/httpEnum'
+import { RequestHttpEnum, RequestDataTypeEnum } from '@/enums/httpEnum'
 
 // 匹配结果
 export enum DataResultEnum {
diff --git a/src/views/chart/ContentConfigurations/components/ChartData/index.vue b/src/views/chart/ContentConfigurations/components/ChartData/index.vue
index 100d4d2e..48e64ee3 100644
--- a/src/views/chart/ContentConfigurations/components/ChartData/index.vue
+++ b/src/views/chart/ContentConfigurations/components/ChartData/index.vue
@@ -6,23 +6,26 @@
         :options="selectOptions"
       />
     </setting-item-box>
+
     <n-divider style="margin: 10px 0;"></n-divider>
+
     <!-- 静态 -->
     <chart-data-static
       v-if="targetData.data.requestDataType === RequestDataTypeEnum.STATIC"
     ></chart-data-static>
+
     <!-- 动态 -->
-    <chart-data-ajax></chart-data-ajax>
+    <chart-data-ajax v-else></chart-data-ajax>
   </div>
 </template>
 
 <script setup lang="ts">
 import { SettingItemBox } from '@/components/ChartItemSetting/index'
-import { RequestDataTypeEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
 import { useTargetData } from '../hooks/useTargetData.hook'
 import { ChartDataStatic } from './components/ChartDataStatic/index'
 import { ChartDataAjax } from './components/ChartDataAjax/index'
 import { SelectCreateDataType, SelectCreateDataEnum } from './index.d'
+import { RequestDataTypeEnum } from '@/enums/httpEnum'
 
 const { targetData } = useTargetData()
 
diff --git a/src/views/preview/hooks/useScale.hook.ts b/src/views/preview/hooks/useScale.hook.ts
index bdf4ed3d..65e94a87 100644
--- a/src/views/preview/hooks/useScale.hook.ts
+++ b/src/views/preview/hooks/useScale.hook.ts
@@ -1,6 +1,6 @@
 import { onUnmounted, ref, nextTick, computed } from 'vue'
 import { usePreviewScale } from '@/hooks/index'
-import type { ChartEditStorageType } from '..'
+import type { ChartEditStorageType } from '../index.d'
 
 export const useScale = (localStorageInfo: ChartEditStorageType) => {
 
diff --git a/src/views/preview/hooks/useStore.hook.ts b/src/views/preview/hooks/useStore.hook.ts
new file mode 100644
index 00000000..06bed69f
--- /dev/null
+++ b/src/views/preview/hooks/useStore.hook.ts
@@ -0,0 +1,9 @@
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { ChartEditStoreEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
+import type { ChartEditStorageType } from '../index.d'
+
+// store 相关
+export const useStore = (localStorageInfo: ChartEditStorageType) => {
+  const chartEditStore = useChartEditStore()
+  chartEditStore.requestGlobalConfig = localStorageInfo[ChartEditStoreEnum.REQUEST_GLOBAL_CONFIG]
+}
diff --git a/src/views/preview/index.vue b/src/views/preview/index.vue
index c82cfc1c..136eccbe 100644
--- a/src/views/preview/index.vue
+++ b/src/views/preview/index.vue
@@ -19,6 +19,7 @@ import { PreviewRenderList } from './components/PreviewRenderList'
 import { getEditCanvasConfigStyle, getSessionStorageInfo } from './utils'
 import { useComInstall } from './hooks/useComInstall.hook'
 import { useScale } from './hooks/useScale.hook'
+import { useStore } from './hooks/useStore.hook'
 import type { ChartEditStorageType } from './index.d'
 
 const localStorageInfo: ChartEditStorageType = getSessionStorageInfo() as ChartEditStorageType
@@ -27,6 +28,7 @@ const previewRefStyle: any = computed(() => {
   return getEditCanvasConfigStyle(localStorageInfo.editCanvasConfig)
 })
 
+useStore(localStorageInfo)
 const { previewRef } = useScale(localStorageInfo)
 const { show } = useComInstall(localStorageInfo)
 </script>
diff --git a/src/views/preview/utils/index.ts b/src/views/preview/utils/index.ts
index 5226ae3c..f0f79cfa 100644
--- a/src/views/preview/utils/index.ts
+++ b/src/views/preview/utils/index.ts
@@ -1,27 +1,2 @@
 export * from './style'
-import { getSessionStorage } from '@/utils'
-import { StorageEnum } from '@/enums/storageEnum'
-import { ChartEditStorage } from '@/store/modules/chartEditStore/chartEditStore.d'
-
-export interface ChartEditStorageType extends ChartEditStorage {
-  id: string
-}
-
-// 根据路由 id 获取存储数据的信息
-export const getSessionStorageInfo = () => {
-  const urlHash = document.location.hash
-  const toPathArray = urlHash.split('/')
-  const id = toPathArray && toPathArray[toPathArray.length - 1]
-
-  const storageList: ChartEditStorageType[] = getSessionStorage(
-    StorageEnum.GO_CHART_STORAGE_LIST
-  )
-
-  if(!storageList) return
-
-  for (let i = 0; i < storageList.length; i++) {
-    if (id.toString() === storageList[i]['id']) {
-      return storageList[i]
-    }
-  }
-}
\ No newline at end of file
+export * from './storage'
\ No newline at end of file
diff --git a/src/views/preview/utils/storage.ts b/src/views/preview/utils/storage.ts
new file mode 100644
index 00000000..1a97af29
--- /dev/null
+++ b/src/views/preview/utils/storage.ts
@@ -0,0 +1,26 @@
+import { getSessionStorage } from '@/utils'
+import { StorageEnum } from '@/enums/storageEnum'
+import { ChartEditStorage } from '@/store/modules/chartEditStore/chartEditStore.d'
+
+export interface ChartEditStorageType extends ChartEditStorage {
+  id: string
+}
+
+// 根据路由 id 获取存储数据的信息
+export const getSessionStorageInfo = () => {
+  const urlHash = document.location.hash
+  const toPathArray = urlHash.split('/')
+  const id = toPathArray && toPathArray[toPathArray.length - 1]
+
+  const storageList: ChartEditStorageType[] = getSessionStorage(
+    StorageEnum.GO_CHART_STORAGE_LIST
+  )
+
+  if(!storageList) return
+
+  for (let i = 0; i < storageList.length; i++) {
+    if (id.toString() === storageList[i]['id']) {
+      return storageList[i]
+    }
+  }
+}
\ No newline at end of file