feat: 新增编辑阶段 mock 接口轮询请求功能

src/enums/httpEnum.ts

@@ -10,6 +10,14 @@ export enum ResultEnum {
   TIMEOUT = 10042,
 }
 
+// 数据相关
+export enum RequestDataTypeEnum {
+  // 静态数据
+  STATIC = 0,
+  // 请求数据
+  AJAX = 1,
+}
+
 /**
  * @description: 请求方法
  */

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)
+    }
+  })
+}

src/packages/components/Charts/Bars/BarCommon/config.ts

@@ -47,8 +47,7 @@ export const option = {
   ]
 }
 
-export default class Config extends publicConfig
+export default class Config extends publicConfig implements CreateComponentType {
-  implements CreateComponentType {
   public key = BarCommonConfig.key
   public chartConfig = cloneDeep(BarCommonConfig)
   // 图表配置项

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>

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>

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">

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">

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">

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">

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 { RequestConfigType } from '@/store/modules/chartEditStore/chartEditStore.d'
-import { RequestHttpEnum } from '@/enums/httpEnum'
+import { RequestHttpEnum, RequestDataTypeEnum } from '@/enums/httpEnum'
 
 const requestConfig: RequestConfigType = {
   requestDataType: RequestDataTypeEnum.STATIC,

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 = {

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'

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
   }
 })

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>

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)
+          targetData.value.option.dataset = JSON.parse(fileData)
-          console.log(option.value.dataset)
         })
       } 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 {

src/views/chart/ContentConfigurations/components/ChartData/index.d.ts

@@ -1,5 +1,4 @@
-import { RequestDataTypeEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
+import { RequestHttpEnum, RequestDataTypeEnum } from '@/enums/httpEnum'
-import { RequestHttpEnum } from '@/enums/httpEnum'
 
 // 匹配结果
 export enum DataResultEnum {

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()
 

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) => {
 

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]
+}

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>

src/views/preview/utils/index.ts

@@ -1,27 +1,2 @@
 export * from './style'
-import { getSessionStorage } from '@/utils'
+export * from './storage'
-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]
-    }
-  }
-}

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]
+    }
+  }
+}