fix: 修改data模块的数据调用和全局设定

src/settings/designSetting.ts

@@ -32,4 +32,7 @@ export const borderRadius = '6px'
 export const carouselInterval = 4000
 
 // 工作台大屏背景图片大小限制（5M）
-export const backgroundImageSize = 5
+export const backgroundImageSize = 5
+
+// 数据请求间隔
+export const requestInterval = 30

src/store/modules/chartEditStore/chartEditStore.d.ts

@@ -118,7 +118,7 @@ export enum ChartEditStoreEnum {
   RECORD_CHART = 'recordChart',
   // 以下需要存储
   EDIT_CANVAS_CONFIG = 'editCanvasConfig',
-  REQUEST_CONFIG = 'requestConfig',
+  REQUEST_GLOBAL_CONFIG = 'requestGlobalConfig',
   COMPONENT_LIST = 'componentList',
 }
 
@@ -130,15 +130,21 @@ export enum RequestDataTypeEnum {
   AJAX = 1,
 }
 
-// 数据配置
+// 全局的图表请求配置
+export type RequestGlobalConfigType = {
+  // 请求源地址
+  requestOriginUrl?: string
+  // 轮询时间
+  requestInterval?: number
+}
+// 单个图表请求配置
 export type RequestConfigType = {
   // 获取数据的方式
   requestDataType: RequestDataTypeEnum
   // 请求方式 get/post/del/put/patch
   requestHttpType: RequestHttpEnum
-  // 请求源地址
+  // 去除源的 url
   requestUrl?: string
-  requestInterval?: number
 }
 
 // Store 类型
@@ -149,12 +155,12 @@ export interface ChartEditStoreType {
   [ChartEditStoreEnum.MOUSE_POSITION]: MousePositionType
   [ChartEditStoreEnum.TARGET_CHART]: TargetChartType
   [ChartEditStoreEnum.RECORD_CHART]?: RecordChartType
-  [ChartEditStoreEnum.REQUEST_CONFIG]: RequestConfigType
+  [ChartEditStoreEnum.REQUEST_GLOBAL_CONFIG]: RequestGlobalConfigType
   [ChartEditStoreEnum.COMPONENT_LIST]: CreateComponentType[]
 }
 
 export interface ChartEditStorage {
   [ChartEditStoreEnum.EDIT_CANVAS_CONFIG]: EditCanvasConfigType
-  [ChartEditStoreEnum.REQUEST_CONFIG]: RequestConfigType
+  [ChartEditStoreEnum.REQUEST_GLOBAL_CONFIG]: RequestGlobalConfigType
   [ChartEditStoreEnum.COMPONENT_LIST]: CreateComponentType[]
 }

src/store/modules/chartEditStore/chartEditStore.ts

@@ -4,7 +4,7 @@ import { CreateComponentType } from '@/packages/index.d'
 import debounce from 'lodash/debounce'
 import cloneDeep from 'lodash/cloneDeep'
 import { defaultTheme, globalThemeJson } from '@/settings/chartThemes/index'
-import { RequestHttpEnum } from '@/enums/httpEnum'
+import { requestInterval } from '@/settings/designSetting'
 // 记录记录
 import { useChartHistoryStoreStore } from '@/store/modules/chartHistoryStore/chartHistoryStore'
 import { HistoryActionTypeEnum, HistoryItemType, HistoryTargetTypeEnum } from '@/store/modules/chartHistoryStore/chartHistoryStore.d'
@@ -16,8 +16,7 @@ import {
   MousePositionType,
   TargetChartType,
   RecordChartType,
-  RequestConfigType,
+  RequestGlobalConfigType,
-  RequestDataTypeEnum,
   EditCanvasConfigType
 } from './chartEditStore.d'
 
@@ -86,11 +85,9 @@ export const useChartEditStore = defineStore({
       chartThemeSetting: globalThemeJson
     },
     // 数据请求处理（需存储给后端）
-    requestConfig: {
+    requestGlobalConfig: {
-      requestDataType: RequestDataTypeEnum.STATIC,
+      requestOriginUrl: '',
-      requestHttpType: RequestHttpEnum.GET,
+      requestInterval: requestInterval 
-      requestUrl: undefined,
-      requestInterval: 10 
     },
     // 图表数组（需存储给后端）
     componentList: []
@@ -114,8 +111,8 @@ export const useChartEditStore = defineStore({
     getRecordChart(): RecordChartType | undefined {
       return this.recordChart
     },
-    getRequestConfig(): RequestConfigType {
+    getRequestGlobalConfig(): RequestGlobalConfigType {
-      return this.requestConfig
+      return this.requestGlobalConfig
     },
     getComponentList(): CreateComponentType[] {
       return this.componentList
@@ -125,7 +122,7 @@ export const useChartEditStore = defineStore({
       return {
         [ChartEditStoreEnum.EDIT_CANVAS_CONFIG]: this.getEditCanvasConfig,
         [ChartEditStoreEnum.COMPONENT_LIST]: this.getComponentList,
-        [ChartEditStoreEnum.REQUEST_CONFIG]: this.getRequestConfig
+        [ChartEditStoreEnum.REQUEST_GLOBAL_CONFIG]: this.getRequestGlobalConfig
       }
     }
   },

src/views/chart/ContentConfigurations/components/CanvasPage/components/ChartDataSetting/index.vue

@@ -2,14 +2,14 @@
   <div class="go-chart-data-setting">
     <setting-item-box name="源地址" :alone="true">
       <n-input
-        v-model:value="requestConfig.requestUrl"
+        v-model:value.trim="chartEditStore.getRequestGlobalConfig.requestOriginUrl"
         placeholder="源地址如: http://127.0.0.1"
       ></n-input>
     </setting-item-box>
     <setting-item-box name="更新间隔">
       <n-input-number
-        v-model:value="requestConfig.requestInterval"
+        v-model:value.trim="chartEditStore.getRequestGlobalConfig.requestInterval"
-        min="0"
+        min="5"
         :show-button="false"
         placeholder="为 0 不更新"
       >
@@ -22,14 +22,9 @@
 </template>
 
 <script setup lang="ts">
-import { computed, Ref } from 'vue'
 import { SettingItemBox } from '@/components/ChartItemSetting/index'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
-import { RequestConfigType } from '@/store/modules/chartEditStore/chartEditStore.d'
 
 const chartEditStore = useChartEditStore()
 
-const requestConfig: Ref<RequestConfigType> = computed(() => {
-  return chartEditStore.getRequestConfig
-})
 </script>

src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataAjax/index.vue

@@ -6,6 +6,9 @@
         :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>
         地址
@@ -25,9 +28,9 @@
         </n-tooltip>
       </template>
       <n-input
-        v-model:value="targetData.data.requestUrl"
+        v-model:value.trim="targetData.data.requestUrl"
         :min="1"
-        placeholder="http(s)://..."
+        placeholder="请输入地址（去除源）"
       />
     </setting-item-box>
     <setting-item-box name="测试" :alone="true">
@@ -38,39 +41,34 @@
               <flash-icon />
             </n-icon>
           </template>
-          发送地址请求
+          发送请求
         </n-button>
       </n-space>
     </setting-item-box>
     <go-skeleton :load="loading" :repeat="3"></go-skeleton>
     <chart-data-matching-and-show
       v-show="showMatching && !loading"
-      :targetData="targetData"
       :ajax="true"
     ></chart-data-matching-and-show>
   </div>
 </template>
 
 <script setup lang="ts">
-import { PropType, ref } from 'vue'
+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 { SelectHttpType } from '../../index.d'
 import { featchMockData } from '@/api/mock'
 import { http } from '@/api/http'
+import { SelectHttpType } from '../../index.d'
 import { ChartDataMatchingAndShow } from '../ChartDataMatchingAndShow'
+import { useTargetData } from '../../../hooks/useTargetData.hook'
 
 const { HelpOutlineIcon, FlashIcon } = icon.ionicons5
 
-const props = defineProps({
+const { targetData, chartEditStore } = useTargetData()
-  targetData: {
+const { requestOriginUrl } = toRefs(chartEditStore.getRequestGlobalConfig)
-    type: Object as PropType<CreateComponentType>,
-    required: true
-  }
-})
-
 // 是否是开发环境
 const ISDEV = import.meta.env.DEV === true
 // 是否展示数据分析
@@ -92,16 +90,17 @@ const selectOptions: SelectHttpType[] = [
 // 发送请求
 const sendHandle = async () => {
   loading.value = true
-  const { requestUrl, requestHttpType } = props.targetData.data
+  const { requestUrl, requestHttpType } = targetData.value.data
-  if(!requestUrl) {
+  if (!requestUrl) {
     window['$message'].warning('请求参数不正确，请检查！')
     return
   }
-  const res = await http(requestHttpType)((requestUrl as string).trim(), {})
+  const completePath = requestOriginUrl && requestOriginUrl.value + requestUrl
+  const res = await http(requestHttpType)(completePath || '', {})
   loading.value = false
-  if(res.status === 200) {
+  if (res.status === 200) {
     // @ts-ignore
-    props.targetData.option.dataset = res.data
+    targetData.value.option.dataset = res.data
     showMatching.value = true
     return
   }
@@ -110,5 +109,6 @@ const sendHandle = async () => {
 </script>
 
 <style lang="scss" scoped>
-@include go('chart-configurations-data-ajax') {}
+@include go('chart-configurations-data-ajax') {
+}
 </style>

src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataMatchingAndShow/index.vue

@@ -64,17 +64,15 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, watch, PropType } from 'vue'
+import { ref, computed, watch } from 'vue'
 import { CreateComponentType } from '@/packages/index.d'
 import { icon } from '@/plugins'
 import { DataResultEnum, TimelineTitleEnum } from '../../index.d'
 import { useFile } from '../../hooks/useFile.hooks'
+import { useTargetData } from '../../../hooks/useTargetData.hook'
+const { targetData } = useTargetData()
 
 const props = defineProps({
-  targetData: {
-    type: Object as PropType<CreateComponentType>,
-    required: true
-  },
   ajax: {
     type: Boolean,
     default: false,
@@ -90,7 +88,7 @@ const source = ref()
 const dimensions = ref()
 const dimensionsAndSource = ref()
 
-const { uploadFileListRef, customRequest, beforeUpload, download} = useFile(props.targetData)
+const { uploadFileListRef, customRequest, beforeUpload, download} = useFile(targetData)
 
 // 获取数据
 const getSource = computed(() => {
@@ -129,7 +127,7 @@ const dimensionsAndSourceHandle = () => {
   })
 }
 
-watch(() => props.targetData?.option?.dataset, (newData) => {
+watch(() => targetData.value?.option?.dataset, (newData) => {
   if (newData) {
     source.value = newData.source
     dimensions.value = newData.dimensions

src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataStatic/index.vue

@@ -1,8 +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>
-      :targetData="targetData"
-    ></chart-data-matching-and-show>
   </div>
 </template>
 

src/views/chart/ContentConfigurations/components/ChartData/hooks/useFile.hooks.ts

@@ -6,7 +6,7 @@ import { readFile, downloadFile } from '@/utils'
 export const useFile = (targetData: any) => {
   const uploadFileListRef = ref()
   const option = toRef(targetData, 'option')
-  console.log(option)
+
   //@ts-ignore
   const beforeUpload = ({ file }) => {
     uploadFileListRef.value = []

src/views/chart/ContentConfigurations/components/ChartData/index.vue

@@ -10,10 +10,9 @@
     <!-- 静态 -->
     <chart-data-static
       v-if="targetData.data.requestDataType === RequestDataTypeEnum.STATIC"
-      :targetData="targetData"
     ></chart-data-static>
     <!-- 动态 -->
-    <chart-data-ajax v-else :targetData="targetData"></chart-data-ajax>
+    <chart-data-ajax></chart-data-ajax>
   </div>
 </template>