Merge branch 'perf/05-28' into 'main_dev'

perf(src/views): 优化第三方接口

See merge request yunteng/thingskit-view!270

 <template>
-  <div ref="el" class="go-editor-area" :style="{ width, height }"></div>
-  <EditorWorker></EditorWorker>
+  <div :style="cacheConfigStyle">
+    <div ref="el" class="go-editor-area" :style="{ width, height }"></div>
+    <EditorWorker></EditorWorker>
+    <div style="margin-left:10px;">  
+      <n-gradient-text type="danger">
+       {{ errorText }}
+      </n-gradient-text>
+</div>
+  </div>
 </template>
 
 <script lang="ts" setup>
-import { onMounted, watch, PropType } from 'vue'
+import { onMounted, watch, PropType, ref, computed } from 'vue'
 import { useMonacoEditor } from './index.hook'
 import { EditorWorker } from './index'
 
@@ -32,7 +39,11 @@ const props = defineProps({
   editorOptions: {
     type: Object as PropType<object>,
     default: () => ({})
-  }
+  },
+  config: {
+    type: Boolean as PropType<boolean>,
+    default: false
+  },
 })
 
 const emits = defineEmits(['blur', 'update:modelValue'])
@@ -56,14 +67,28 @@ onMounted(() => {
   updateMonacoVal()
 })
 
+const errorText = ref('')
+
+const cacheConfigStyle = computed(() => {
+  const configStyle = {
+    display:'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center'
+  }
+  return props.config ? configStyle : ''
+})
+
 watch(
   () => props.modelValue,
   (val: string) => {
     if(props.language === 'json') {
       try {
-        JSON.parse(val)
+        const res = JSON.parse(val)
+        if(res) {
+          errorText.value = ''
+        }
       } catch (_) {
-        window.$message.error('JSON格式有误，请仔细检查！')
+        errorText.value = 'JSON格式有误，请仔细检查！'
       }
     }
     val !== getEditor()?.getValue() && updateMonacoVal(val)

@@ -25,7 +25,8 @@ export enum RequestContentTypeEnum {
   // 普通请求
   DEFAULT = 0,
   // SQL请求
-  SQL = 1
+  SQL = 1,
+  WEB_SOCKET
 }
 
 /**

@@ -10,7 +10,7 @@ import {useFilterFn} from './useFilterFn'
 import {RequestContentTypeEnum} from '@/enums/external/httpEnum'
 import dayjs from 'dayjs'
 import { RequestDataPondItemType } from '@/store/modules/chartEditStore/chartEditStore.d'
-import { convertToCascadingData, findItemByLabel } from '@/utils/external/utils'
+import { JSONParse, convertToCascadingData, findItemByLabel } from '@/utils/external/utils'
 import { CascaderOption } from 'naive-ui'
 
 
@@ -42,7 +42,8 @@ export const useChartDataFetch = (
             }
         }
     }
-
+    
+    // 单个组件请求
     const requestIntervalFn = () => {
         const chartEditStore = useChartEditStore()
         if ((targetComponent.request.requestContentType as RequestContentTypeEnum) === RequestContentTypeEnum.WEB_SOCKET) return
@@ -54,6 +55,12 @@ export const useChartDataFetch = (
             requestInterval: globalRequestInterval
         } = toRefs(chartEditStore.getRequestGlobalConfig)
 
+        // 公共配置
+        const {
+            pondRequestGlobalInterval,
+            pondRequestGlobalIntervalUnit
+        } = toRefs(targetComponent.request)
+
         // 目标组件
         const {
             requestUrl,
@@ -131,6 +138,17 @@ export const useChartDataFetch = (
                         try {
                             const filter = targetComponent.filter
                             const {value} = useFilterFn(filter, res)
+                            //分组更新下面子组件
+                            if(targetComponent.isGroup) {
+                                const parseHistoryInput = JSONParse(targetComponent.saveHistoryInput!)
+                                parseHistoryInput?.forEach((historyItem:Recordable) => {
+                                    const findCurrentItem =  targetComponent.groupList?.find((groupItem:CreateComponentType | CreateComponentGroupType) => groupItem.id === historyItem.id)
+                                    if(findCurrentItem) {
+                                        findCurrentItem.option.dataset = value[historyItem.inputValue]
+                                    }
+                                })
+                            }
+                            //
                             echartsUpdateHandle(value)
                             // 更新回调函数
                             if (updateCallback) {
@@ -153,13 +171,12 @@ export const useChartDataFetch = (
                         deep: true
                     }
                 )
-
                 // 定时时间
-                const time = targetInterval && targetInterval.value ? targetInterval.value : globalRequestInterval.value
+                const time = targetInterval && targetInterval.value ? targetInterval.value : pondRequestGlobalInterval?.value?pondRequestGlobalInterval?.value: globalRequestInterval.value
                 // 单位
-                const unit = targetInterval && targetInterval.value ? targetUnit.value : globalUnit.value
+                const unit = targetInterval && targetInterval.value ? targetUnit.value :pondRequestGlobalIntervalUnit?.value?pondRequestGlobalIntervalUnit?.value: globalUnit.value
                 // 开启轮询
-                if (time) fetchInterval = setInterval(fetchFn, intervalUnitHandle(time, unit))
+                if (time) fetchInterval = setInterval(fetchFn, intervalUnitHandle(time, (unit as unknown as any)))
 
                 
             }
@@ -176,11 +193,12 @@ export const useChartDataFetch = (
         /**
          * 支持分组也可以接受ws
          * 如果是分组并且绑定了ws
+         * 也支持http轮询
          */
         chartEditStore.getComponentList?.forEach((item: CreateComponentType | CreateComponentGroupType) => {
             if (item.isGroup) {
                 if (item.request.requestUrl?.includes('ws')) {
-                    initial(item, useChartEditStore, updateCallback)
+                    initial(item, useChartEditStore, updateCallback) // ws
                 }
             }
         })

@@ -12,17 +12,18 @@ export const useFetchTargetData = () => {
   const fetchTargetData = async () => {
     const { targetData } = useTargetData()
     if (unref(targetData).request.requestDataType === RequestDataTypeEnum.STATIC) return
+    if (!unref(targetData).request.requestUrl) return
     loading.value = true
     try {
-      const isSocketType = (targetData.value.request.requestContentType as RequestContentTypeEnum) === RequestContentTypeEnum.WEB_SOCKET
-      const res = isSocketType
-        ? await sendMessage(unref(targetData) as CreateComponentType)
-        : await customRequest(toRaw(targetData.value.request))
- 
-      if (res) {
-        return res
-      }
-      window['$message'].warning('没有拿到返回值，请检查接口！')
+        const isSocketType = (targetData.value.request.requestContentType as RequestContentTypeEnum) === RequestContentTypeEnum.WEB_SOCKET
+        const res = isSocketType
+          ? await sendMessage(unref(targetData) as CreateComponentType)
+          : await customRequest(toRaw(targetData.value.request))
+   
+        if (res) {
+          return res
+        }
+        window['$message'].warning('没有拿到返回值，请检查接口！')
     } catch (error) {
       loading.value = false
       console.error(error);

@@ -9,6 +9,7 @@ const getAllConfigFile = async () => {
 
 const getChartConfigFile = async (path: string) => {
   const fileList = await getAllConfigFile()
+  if (path.includes('group')) return // 分组则终止
   return fileList[path]() as any
 } 
 
@@ -41,6 +42,7 @@ export const createComponent = async (configType: ConfigType) => {
   //
   const hasExternalPrefix = matchExternalPrefixReg.test(chartKey)
   const filePath = `../components${hasExternalPrefix ? '/external' : ''}/${packageName}/${category}/${key}/config.ts`
+  if (filePath.includes('group')) return // 分组则终止 
   const chart = await getChartConfigFile(filePath)
   return new chart.default()
 }

@@ -230,8 +230,8 @@ export interface RequestConfigType extends RequestPublicConfigType {
    // 请求头里的Token前缀
    requestTokenSuffix?: string
    pondRequestOriginUrl?: string
-   pondRequestInterval?: number
-   pondRequestIntervalUnit?: string
+   pondRequestGlobalInterval?: number
+   pondRequestGlobalIntervalUnit?: string
    pondRequestGlobalTokenSuffix?: string
    pondRequestGlobalTokenKey?: string
    pondRequestGlobalCascaderOption?: Recordable

@@ -158,7 +158,7 @@ const {
 } = toRefs((props.targetData as RequestDataPondItemType).dataPondRequestConfig)
 
 const tabs = [RequestParamsTypeEnum.HEADER]
-const requestContentTypeObj = {
+const requestContentTypeObj: Recordable = {
   [RequestContentTypeEnum.DEFAULT]: '普通请求',
   [RequestContentTypeEnum.SQL]: 'SQL 请求'
 }

@@ -47,7 +47,7 @@ const emit = defineEmits(['update:modelShow', 'sendHandle'])
 const { chartConfig } = toRefs(props.targetData as CreateComponentType)
 const { requestContentType } = toRefs((props.targetData as CreateComponentType).request)
 const modelShowRef = ref(false)
-const requestContentTypeObj = {
+const requestContentTypeObj: Recordable = {
   [RequestContentTypeEnum.DEFAULT]: '普通请求',
   [RequestContentTypeEnum.SQL]: 'SQL 请求'
 }

@@ -58,9 +58,21 @@
             <NSpace :size="15" vertical>
               <div class="editor-data-show">
                 <NSpace>
-                  <NText depth="3">接口返回数据(res)：</NText>
+                  <NText depth="3">原始数据：</NText>
                     <n-collapse :default-expanded-names="['1']">
-                      <n-collapse-item title="res" name="1">
+                      <n-collapse-item name="1">
+                        <NScrollbar style="max-height: 300px;">
+                          <NCode :code="toString(cacheConfig) || '暂无'" language="json" :word-wrap="true"></NCode>
+                        </NScrollbar>
+                      </n-collapse-item>
+                    </n-collapse>
+                </NSpace>
+              </div>
+              <div class="editor-data-show">
+                <NSpace>
+                  <NText depth="3">接口返回数据(res)：</NText>
+                    <n-collapse>
+                      <n-collapse-item name="2">
                         <NScrollbar style="max-height: 300px;">
                           <NCode :code="toString(isSocketRequest ? targetData.wsOriginalMessage : sourceData) || '暂无'" language="json" :word-wrap="true"></NCode>
                         </NScrollbar>
@@ -72,7 +84,7 @@
                 <NSpace>
                   <NText depth="3">过滤器结果：</NText>
                    <n-collapse>
-                      <n-collapse-item title="结果" name="2">
+                      <n-collapse-item name="3">
                         <NCode :code="filterRes || '暂无'" language="json" :word-wrap="true"></NCode>
                       </n-collapse-item>
                     </n-collapse>
@@ -105,7 +117,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, computed, watch, unref } from 'vue'
+import { ref, computed, watch, unref, onMounted } from 'vue'
 import { MonacoEditor } from '@/components/Pages/MonacoEditor'
 import { icon } from '@/plugins'
 import { goDialog, toString } from '@/utils'
@@ -114,6 +126,7 @@ import { NButton, NCard, NCode, NDivider, NIcon, NModal, NScrollbar, NSpace, NTa
 import { useFilterFn } from '@/hooks/external/useFilterFn'
 import { useFetchTargetData } from '@/hooks/external/useFetchTargetData'
 import { RequestContentTypeEnum } from '@/enums/external/httpEnum'
+import { createComponent } from '@/packages/external/override'
 
 const { DocumentTextIcon } = icon.ionicons5
 const { FilterIcon, FilterEditIcon } = icon.carbon
@@ -208,6 +221,19 @@ watch(
     }
   }
 )
+
+const cacheConfig = ref()
+
+const fetchComponentConfig = async () => {
+  const config = await createComponent(targetData.value.chartConfig)
+  return config
+}
+
+
+onMounted(async ()=> {
+  const config = await fetchComponentConfig()
+  cacheConfig.value = config?.option?.dataset
+})
 </script>
 
 <style lang="scss" scoped>

@@ -12,6 +12,9 @@ import { RequestModal } from '../RequestModal'
 import { useFetchTargetData } from '@/hooks/external/useFetchTargetData'
 import { useFilterFn } from '@/hooks/external/useFilterFn'
 import { RequestDataTypeEnum } from '@/enums/external/httpEnum'
+import { JSONParse } from '@/utils/external/utils'
+import { CreateComponentGroupType, CreateComponentType } from '@/packages/index.d'
+import { isArray } from '@/utils/external/is'
 
 const { HelpOutlineIcon, FlashIcon } = icon.ionicons5
 const { targetData } = useTargetData()
@@ -54,6 +57,19 @@ const sendHandle = async () => {
     const res = await fetchTargetData()
     if (res) {
       const { value } = useFilterFn(targetData.value.filter, res)
+        //分组更新下面子组件
+        if(targetData.value.isGroup) {
+          if (isArray(targetData.value.saveHistoryInput!)) {
+            const parseHistoryInput = JSONParse(targetData.value.saveHistoryInput!)
+            parseHistoryInput?.forEach((historyItem:Recordable) => {
+                const findCurrentItem =  targetData.value.groupList?.find((groupItem:CreateComponentType | CreateComponentGroupType) => groupItem.id === historyItem.id)
+                if(findCurrentItem) {
+                    findCurrentItem.option.dataset = value[historyItem.inputValue]
+                }
+            })
+         }
+      }
+      //
       targetData.value.option.dataset = value
       showMatching.value = true
       return
@@ -86,7 +102,7 @@ watchEffect(() => {
   //ft
   if (lastFilter !== filter && firstFocus) {
     lastFilter = filter
-    sendHandle()
+    // sendHandle()
   }
   firstFocus++
 })

@@ -145,6 +145,10 @@ onMounted(()=>{
   targetData.value.request.pondRequestOriginUrl = findCurrentPond()?.dataPondRequestConfig?.pondRequestOriginUrl
   targetData.value.request.pondRequestGlobalTokenKey = findCurrentPond()?.dataPondRequestConfig?.pondRequestGlobalTokenKey
   targetData.value.request.pondRequestGlobalTokenSuffix = findCurrentPond()?.dataPondRequestConfig?.pondRequestGlobalTokenSuffix
+  targetData.value.request.pondRequestInterval = findCurrentPond()?.dataPondRequestConfig?.pondRequestInterval
+  targetData.value.request.pondRequestIntervalUnit = findCurrentPond()?.dataPondRequestConfig?.pondRequestIntervalUnit
+  targetData.value.request.pondRequestGlobalInterval = findCurrentPond()?.dataPondRequestConfig?.pondRequestGlobalInterval
+  targetData.value.request.pondRequestGlobalIntervalUnit = findCurrentPond()?.dataPondRequestConfig?.pondRequestGlobalIntervalUnit
   handleExecuteRequest()
 })
 </script>

@@ -38,7 +38,7 @@ const pondRequestOriginUrlRef= ref('')
 
 const pondRequestIntervalRef = ref()
 
-const pondRequestIntervalUnitRef = ref('')
+const pondRequestIntervalUnitRef = ref(RequestHttpIntervalEnum.SECOND)
 
 const pondRequestGlobalTokenSuffixRef = ref('')
 
@@ -62,8 +62,8 @@ const handleIsTokenSwitch = (value: boolean) => {
 const getConfigurationData = (): Partial<RequestConfigType> => {
   return {
     pondRequestOriginUrl: unref(pondRequestOriginUrlRef),
-    pondRequestInterval: unref(pondRequestIntervalRef),
-    pondRequestIntervalUnit: unref(pondRequestIntervalUnitRef),
+    pondRequestGlobalInterval: unref(pondRequestIntervalRef),
+    pondRequestGlobalIntervalUnit: unref(pondRequestIntervalUnitRef),
     pondRequestGlobalTokenSuffix: unref(pondRequestGlobalTokenSuffixRef),
     pondRequestGlobalTokenKey: unref(pondRequestGlobalTokenKeyRef),
     pondRequestGlobalIsToken: unref(pondRequestGlobalIsTokenRef),
@@ -71,10 +71,10 @@ const getConfigurationData = (): Partial<RequestConfigType> => {
 }
 
 const setConfigurationData = (request: Partial<RequestConfigType>) => {
-  const { pondRequestOriginUrl, pondRequestInterval, pondRequestIntervalUnit, pondRequestGlobalTokenSuffix, pondRequestGlobalTokenKey, pondRequestGlobalIsToken } = request
+  const { pondRequestOriginUrl, pondRequestGlobalInterval, pondRequestGlobalIntervalUnit, pondRequestGlobalTokenSuffix, pondRequestGlobalTokenKey, pondRequestGlobalIsToken } = request
   pondRequestOriginUrlRef.value = pondRequestOriginUrl!
-  pondRequestIntervalRef.value = pondRequestInterval
-  pondRequestIntervalUnitRef.value = pondRequestIntervalUnit!
+  pondRequestIntervalRef.value = pondRequestGlobalInterval
+  pondRequestIntervalUnitRef.value = pondRequestGlobalIntervalUnit! as RequestHttpIntervalEnum
   pondRequestGlobalTokenSuffixRef.value = pondRequestGlobalTokenSuffix!
   pondRequestGlobalTokenKeyRef.value = pondRequestGlobalTokenKey!
   pondRequestGlobalIsTokenRef.value = pondRequestGlobalIsToken!

@@ -41,7 +41,7 @@ const handleSyncRequestParamsBodyType = (value: RequestBodyEnum) => {
         v-model:value="value.Body[RequestBodyEnum.X_WWW_FORM_URLENCODED]" />
 
       <MonacoEditor v-if="requestParamsBodyType === RequestBodyEnum.JSON"
-        v-model:modelValue="value.Body[RequestBodyEnum.JSON]" width="600px" height="200px" language="json" />
+        v-model:modelValue="value.Body[RequestBodyEnum.JSON]" width="600px" height="200px" language="json" :config="true" />
 
       <MonacoEditor v-if="requestParamsBodyType === RequestBodyEnum.XML"
         v-model:modelValue="value.Body[RequestBodyEnum.XML]" width="600px" height="200px" language="xml" />

@@ -14,6 +14,8 @@ import { createRequestModalContext } from './useRequestModalContext'
 import { useTargetData } from '../../../../hooks/useTargetData.hook'
 import { useFetchTargetData } from '@/hooks/external/useFetchTargetData'
 import { useFilterFn } from '@/hooks/external/useFilterFn'
+import { JSONParse } from '@/utils/external/utils'
+import { isArray } from '@/utils/external/is'
 
 const requestDataType = ref<RequestDataTypeEnum>(RequestDataTypeEnum.AJAX)
 
@@ -79,6 +81,19 @@ const sendHandle = async () => {
   const res = await fetchTargetData()
   if (res) {
     const { value } = useFilterFn(targetData.value.filter, res)
+     //分组更新下面子组件
+     if(targetData.value.isGroup) {
+          if (isArray(targetData.value.saveHistoryInput!)) {
+            const parseHistoryInput = JSONParse(targetData.value.saveHistoryInput!)
+            parseHistoryInput?.forEach((historyItem:Recordable) => {
+                const findCurrentItem =  targetData.value.groupList?.find((groupItem:CreateComponentType | CreateComponentGroupType) => groupItem.id === historyItem.id)
+                if(findCurrentItem) {
+                    findCurrentItem.option.dataset = value[historyItem.inputValue]
+                }
+            })
+         }
+      }
+      //
     targetData.value.option.dataset = value
     return
   }
@@ -98,6 +113,8 @@ const handleSaveAction = async () => {
   value.requestDataType = targetData.value.request.requestDataType
   value.publicInterfaceSelectId = targetData.value.request.publicInterfaceSelectId
   value.pondRequestGlobalIsToken = targetData.value.request.pondRequestGlobalIsToken
+  value.pondRequestGlobalIntervalUnit = targetData.value.request.pondRequestGlobalIntervalUnit
+  value.pondRequestGlobalInterval = targetData.value.request.pondRequestGlobalInterval
   if (unref(selectTarget)) {
     chartEditStore.updateComponentList(chartEditStore.fetchTargetIndex(), {
       ...unref(selectTarget)!,

@@ -44,6 +44,7 @@ import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.
 import { datasetType, saveHistoryInputValueListType, historyInputValue } from './index.d'
 import { uniqBy } from 'lodash'
 import { SelectOption } from 'naive-ui'
+import { isArray } from '@/utils/external/is'
 
 const { targetData } = useTargetData()
 
@@ -107,8 +108,8 @@ watch(
   (newValue: CreateComponentType | CreateComponentGroupType) => {
     try {
       const uniqHistoryInputValueList = uniqBy(saveHistoryInputValueList.value, 'id')
-      if (uniqHistoryInputValueList) {
-        newValue.saveHistoryInput = JSON.stringify(uniqHistoryInputValueList)
+      if (isArray(uniqHistoryInputValueList)) {
+        targetData.value.saveHistoryInput = JSON.stringify(uniqHistoryInputValueList)
         window.localStorage.setItem('CACHE_HISTORY_INPUT_VALUE', JSON.stringify(uniqHistoryInputValueList))
       }
       newValue?.groupList?.forEach((item: CreateComponentType) => {

@@ -37,11 +37,12 @@
 </template>
 
 <script setup lang="ts">
-import { PropType } from 'vue'
+import { PropType, onMounted } from 'vue'
 import { CreateComponentGroupType } from '@/packages/index.d'
 import { animationsClass, getFilterStyle, getTransformStyle, getBlendModeStyle } from '@/utils'
 import { getSizeStyle, getComponentAttrStyle, getStatusStyle, getPreviewConfigStyle } from '../../utils'
-import { useLifeHandler } from '@/hooks'
+import { useChartDataFetch, useLifeHandler } from '@/hooks'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 
 const props = defineProps({
   groupData: {
@@ -61,6 +62,10 @@ const props = defineProps({
     required: true
   }
 })
+
+onMounted(()=>{
+  useChartDataFetch(props.groupData, useChartEditStore)
+})
 </script>
 
 <style lang="scss" scoped>