Merge branch 'ww' into 'main_dev'

feat(request): 新增socket请求方式

See merge request yunteng/thingskit-view!21

@@ -2,6 +2,11 @@ import { RequestBodyEnum } from "@/enums/httpEnum"
 import { RequestConfigType, RequestGlobalConfigType } from "@/store/modules/chartEditStore/chartEditStore.d"
 import { RequestConfigType, RequestGlobalConfigType } from "@/store/modules/chartEditStore/chartEditStore.d"
 import { defHttp } from "@/utils/external/http/axios"
 import { defHttp } from "@/utils/external/http/axios"
 
 
+export enum ParamsType {
+  REQUIRED,
+  OPTIONAL
+}
+
 export const isFullUrl = (url = '') => {
 export const isFullUrl = (url = '') => {
   try {
   try {
     new URL(url)
     new URL(url)
@@ -17,14 +22,67 @@ export const getUrl = (url = '') => {
   return isFullUrlFlag ? new URL(url) : { pathname: url, origin }
   return isFullUrlFlag ? new URL(url) : { pathname: url, origin }
 }
 }
 
 
+const regOptionalParams = /(?={\?)/g
+const regDynamicParams = /(?={).+?(?<=})/g
+
+export const isDynamicUrl = (url: string) => {
+  regDynamicParams.lastIndex = 0
+
+  return regDynamicParams.test(url)
+}
+
+export const decomposeDynamicParams = (url: string) => {
+  regDynamicParams.lastIndex = 0
+  regOptionalParams.lastIndex = 0
+
+  return Array.from((url || '').matchAll(regDynamicParams), ([item]) => {
+    return {
+      type: regOptionalParams.test(item) ? ParamsType.OPTIONAL : ParamsType.REQUIRED,
+      originValue: item,
+      value: item.replaceAll(/[{}?]/g, '').split(',')
+    }
+  })
+}
+
 export const customRequest = async (request: RequestConfigType) => {
 export const customRequest = async (request: RequestConfigType) => {
   const { requestHttpType, requestParams, requestParamsBodyType, requestUrl } = request as RequestGlobalConfigType & RequestConfigType
   const { requestHttpType, requestParams, requestParamsBodyType, requestUrl } = request as RequestGlobalConfigType & RequestConfigType
-  const { Params, Header, Body } = requestParams
+  const { Header, Body } = requestParams
+  let { Params } = requestParams
+  Params = JSON.parse(JSON.stringify(Params))
+
+  const isDynamicUrlFlag = isDynamicUrl(requestUrl || '')
+  const url = getUrl(requestUrl!)
+  const { origin } = url
+  let { pathname } = url
+
+  if (isDynamicUrlFlag) {
+    pathname = decodeURI(pathname || '')
+
+    const paramsList = decomposeDynamicParams(pathname)
+    pathname = paramsList.reduce((prev, next) => {
+      const { type, value, originValue } = next
+      if (type === ParamsType.REQUIRED) {
+        value.forEach(key => {
+          prev = prev.replace(key, Reflect.get(Params, key))
+          Reflect.deleteProperty(Params, key)
+        })
+      }
 
 
-  const { origin, pathname } = getUrl(requestUrl!)
+      if (type === ParamsType.OPTIONAL) {
+        prev = prev.replace(originValue, '')
+      }
+
+      return prev
+    }, pathname)
+
+    pathname = pathname.replaceAll(/[{}?]/g, '')
+  }
 
 
   const body = Body[requestParamsBodyType as Exclude<'NONE', keyof typeof RequestBodyEnum>]
   const body = Body[requestParamsBodyType as Exclude<'NONE', keyof typeof RequestBodyEnum>]
 
 
+  // Object.assign(Params, { startTs: Params.date[0], endTs: Params.date[1] })
+  Reflect.deleteProperty(Params, 'date')
+
   return defHttp.request<any>({
   return defHttp.request<any>({
     url: pathname,
     url: pathname,
     baseURL: origin,
     baseURL: origin,

@@ -34,7 +34,7 @@ import { GoSystemInfo } from '@/components/GoSystemInfo/index'
 import Person from './person.png'
 import Person from './person.png'
 
 
 import { icon } from '@/plugins'
 import { icon } from '@/plugins'
-import { useUserStore } from '@/store/external/module/user'
+import { useUserStore } from '@/store/external/modules/user'
 const { ChatboxEllipsesIcon, PersonIcon, LogOutOutlineIcon, SettingsSharpIcon } = icon.ionicons5
 const { ChatboxEllipsesIcon, PersonIcon, LogOutOutlineIcon, SettingsSharpIcon } = icon.ionicons5
 
 
 const t = window['$t']
 const t = window['$t']

-import { ref, toRefs, toRaw } from 'vue'
+import { ref, toRefs, toRaw, watch } from 'vue'
 import type VChart from 'vue-echarts'
 import type VChart from 'vue-echarts'
 import { customizeHttp } from '@/api/http'
 import { customizeHttp } from '@/api/http'
 import { useChartDataPondFetch } from '@/hooks/'
 import { useChartDataPondFetch } from '@/hooks/'
@@ -63,6 +63,7 @@ export const useChartDataFetch = (
 
 
     try {
     try {
       // 处理地址
       // 处理地址
+      // @ts-ignore
       if (requestUrl?.value) {
       if (requestUrl?.value) {
         // requestOriginUrl 允许为空
         // requestOriginUrl 允许为空
         const completePath = requestOriginUrl && requestOriginUrl.value + requestUrl.value
         const completePath = requestOriginUrl && requestOriginUrl.value + requestUrl.value
@@ -86,8 +87,18 @@ export const useChartDataFetch = (
           }
           }
         }
         }
 
 
-        // 立即调用
-        fetchFn()
+        // 普通初始化与组件交互处理监听
+        watch(
+          () => targetComponent.request,
+          () => {
+            fetchFn()
+          },
+          {
+            immediate: true,
+            deep: true
+          }
+        )
+
         // 定时时间
         // 定时时间
         const time = targetInterval && targetInterval.value ? targetInterval.value : globalRequestInterval.value
         const time = targetInterval && targetInterval.value ? targetInterval.value : globalRequestInterval.value
         // 单位
         // 单位

+import { RequestContentTypeEnum } from "@/enums/external/httpEnum";
+import { CreateComponentType } from "@/packages/index.d";
+import { useSocketStore } from "@/store/external/modules/socketStore";
+import { SocketReceiveMessageType } from "@/store/external/modules/socketStore.d";
+import { useChartEditStore } from "@/store/modules/chartEditStore/chartEditStore";
+import { getJwtToken } from "@/utils/external/auth";
+import { useWebSocket, WebSocketResult } from "@vueuse/core";
+import { onMounted, unref } from "vue";
+import { useFilterFn } from "./useFilterFn";
+
+
+interface SocketConnectionPoolType {
+  ws: WebSocketResult<SocketReceiveMessageType>
+  url: string
+}
+
+const socketConnectionPool: SocketConnectionPoolType[] = []
+
+const parse = (value: string) => {
+  try {
+    return JSON.parse(value)
+  } catch (error) {
+    return {}
+  }
+}
+
+const getSocketInstance = (requestUrl: string, targetComponent: CreateComponentType) => {
+  const index = socketConnectionPool.findIndex(item => item.url === requestUrl)
+  if (~index) {
+    return socketConnectionPool[index].ws
+  }
+  const token = getJwtToken()
+  const socketUrl = `${requestUrl}?token=${token}`
+
+  const instance = useWebSocket(socketUrl.replace('undefined', ''), {
+    onMessage() {
+      const { data } = instance
+      const { filter } = targetComponent
+      const { value, reason, flag } = useFilterFn(filter, parse(unref(data)))
+      targetComponent.option.dataset = flag ? value : reason
+    },
+    onDisconnected(ws, event) {
+      console.log('连接断开')
+    }
+  })
+
+  socketConnectionPool.push({ url: requestUrl, ws: instance })
+
+  return instance
+}
+
+type ChartEditStoreType = typeof useChartEditStore
+
+export const useChartDataSocket = () => {
+
+  const socketStore = useSocketStore()
+
+  const initial = (targetComponent: CreateComponentType, useChartEditStore: ChartEditStoreType, updateCallback?: (...args: any) => any) => {
+    const { request } = targetComponent
+
+    const { requestUrl, requestContentType } = request
+
+    if ((requestContentType as RequestContentTypeEnum) !== RequestContentTypeEnum.WEB_SOCKET) return
+
+    const { send } = getSocketInstance(requestUrl!, targetComponent)
+
+    onMounted(() => {
+      const message = socketStore.subscribe(targetComponent)
+      send(JSON.stringify(message))
+    })
+  }
+
+  const sendMessage = async (targetComponent: CreateComponentType) => {
+    const { request } = unref(targetComponent)
+    const { requestUrl } = request
+    const message = socketStore.subscribe(unref(targetComponent))
+    const { send, data } = getSocketInstance(requestUrl!, unref(targetComponent))
+    message && send(JSON.stringify(message))
+    return JSON.parse(unref(data))
+  }
+
+
+  return {
+    initial,
+    sendMessage
+  }
+}

+import { cloneDeep } from "lodash"
+
+export const useFilterFn = (filter = 'return res', value: any) => {
+  let flag = true
+  let reason = ''
+  let res
+
+  try {
+    const fn = new Function('res', filter)
+    res = fn(cloneDeep(value))
+  } catch (error) {
+    flag = false
+    reason = error as string
+  }
+
+  return {
+    flag,
+    reason,
+    value: res
+  }
+}

@@ -7,6 +7,7 @@ import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore
 import { RequestDataTypeEnum } from '@/enums/httpEnum'
 import { RequestDataTypeEnum } from '@/enums/httpEnum'
 import { isPreview, newFunctionHandle, intervalUnitHandle } from '@/utils'
 import { isPreview, newFunctionHandle, intervalUnitHandle } from '@/utils'
 import { setOption } from '@/packages/public/chart'
 import { setOption } from '@/packages/public/chart'
+import { useChartDataSocket } from './external/useChartDataSocket'
 
 
 // 获取类型
 // 获取类型
 type ChartEditStoreType = typeof useChartEditStore
 type ChartEditStoreType = typeof useChartEditStore
@@ -118,5 +119,9 @@ export const useChartDataFetch = (
       ? addGlobalDataInterface(targetComponent, useChartEditStore, updateCallback || echartsUpdateHandle)
       ? addGlobalDataInterface(targetComponent, useChartEditStore, updateCallback || echartsUpdateHandle)
       : requestIntervalFn()
       : requestIntervalFn()
   }
   }
+
+  // THINGS_KIT 添加socket支持
+  const { initial } = useChartDataSocket()
+  initial(targetComponent, useChartEditStore, updateCallback)
   return { vChartRef }
   return { vChartRef }
 }
 }

 import { ProjectRuntimeEnvEnum } from "@/enums/external/envEnum";
 import { ProjectRuntimeEnvEnum } from "@/enums/external/envEnum";
 import { PageEnum } from "@/enums/external/pageEnum";
 import { PageEnum } from "@/enums/external/pageEnum";
-import { useUserStoreWithOut } from "@/store/external/module/user";
+import { useUserStoreWithOut } from "@/store/external/modules/user";
 import { NavigationGuardNext, NavigationGuardWithThis, RouteLocationNormalized, RouteLocationRaw, Router } from "vue-router";
 import { NavigationGuardNext, NavigationGuardWithThis, RouteLocationNormalized, RouteLocationRaw, Router } from "vue-router";
 
 
 
 

-export enum DynamicRequestStoreEnum {
-  // 组件id
-  ID = 'id',
-  // 请求源地址
-  REQUEST_ORIGIN_URL = 'requestOriginUrl',
-  // 请求间隔时间
-  REQUEST_INTERVAL = 'requestInterval',
-  // 请求单位
-  REQUEST_INTERVAL_UNIT = 'requestIntervalUnit',
-  // 请求头
-  REQUEST_HEADER = 'requestHeader'
-}
-
-export interface DynamicRequestStoreType {
-  
-}

- import { defineStore } from "pinia"; 
-
-export const useDynamicRequest = defineStore({
-  id: 'useDynamicRequest',
-  state: () => ({
-
-  }),
-  getters: {
-
-  },
-  actions: {
-
-  }
-})

+import { ChartEditStoreType } from '../../modules/chartEditStore/chartEditStore.d'
+
+export enum ExtraComponentInfoStoreEnum {
+  COMPONENT_LIST = 'componentList'
+} 
+
+export interface ExtraComponentInfoStoreType {
+  [ExtraComponentInfoStoreEnum.COMPONENT_LIST]: ChartEditStoreType['componentList']
+}

+import { CreateComponentType, CreateComponentGroupType } from "@/packages/index.d";
+import { RequestConfigType } from "@/store/modules/chartEditStore/chartEditStore.d";
+import { useChartEditStore } from "@/store/modules/chartEditStore/chartEditStore";
+import { defineStore } from "pinia";
+
+export interface ExternalRequestType {
+  test: string
+}
+
+export interface ECreateComponentType extends CreateComponentType {
+  request: RequestConfigType & ExternalRequestType
+}
+
+const chartEditStore = useChartEditStore()
+export const useExternalChartEditStore = defineStore({
+  id: 'useExtraComponentInfo',
+  actions: {
+    updateComponentList(index: number, newData: CreateComponentType) {
+      chartEditStore.updateComponentList(index, newData)
+    },
+  }
+})

+
+export enum SocketStoreEnum {
+  CONNECTION_POOL = 'connectionPool',
+  SUBSCRIBE_POOL = 'subscribePool',
+  CACHE_MESSAGE = 'cacheMessage'
+}
+
+export interface KeyBoundComponentList {
+  componentId: string
+}
+
+export interface SocketSendMessageItemType {
+  cmdId: number
+  entityId: string
+  entityType: string
+  keys: string
+  scope: string
+}
+
+export interface SocketSendMessageType {
+  tsSubCmds: SocketSendMessageItemType[]
+}
+
+export interface SocketReceiveMessageType {
+  subscriptionId: number,
+  errorCode: number,
+  errorMsg: Nullable<string>,
+  data: {
+    [key: string]: [number, string]
+  },
+  latestValues: {
+    [key: string]: number
+  }
+}
+
+export interface SocketConnectionPoolType {
+  [key: string]: {
+    [key: string]: KeyBoundComponentList[]
+  }
+}
+
+export interface CacheMessageType {
+  [key: number]: SocketReceiveMessageType[]
+}
+
+export interface SubscribePoolType {
+  subscribeId: number
+  entityId: string
+}
+
+export interface SocketStoreType {
+  [SocketStoreEnum.CONNECTION_POOL]: SocketConnectionPoolType,
+  [SocketStoreEnum.SUBSCRIBE_POOL]: SubscribePoolType[],
+  [SocketStoreEnum.CACHE_MESSAGE]: CacheMessageType
+} 

+import { defineStore } from "pinia";
+import { KeyBoundComponentList, SocketReceiveMessageType, SocketSendMessageType, SocketStoreType } from '@/store/external/modules/socketStore.d'
+import { CreateComponentType } from "@/packages/index.d";
+import { RequestContentTypeEnum } from "@/enums/external/httpEnum";
+
+const KEYS_SEPARATOR = ','
+
+export const useSocketStore = defineStore({
+  id: 'useSocketStore',
+  state: (): SocketStoreType => ({
+    connectionPool: {},
+    subscribePool: [],
+    cacheMessage: {}
+  }),
+  getters: {
+
+  },
+  actions: {
+    /**
+     * @description 更新连接池
+     */
+    updateConnectionPool(entityId: string, keys: string[], componentId: string) {
+
+      const isExist = Reflect.has(this.connectionPool, entityId)
+      if (isExist) {
+        const temp = Reflect.get(this.connectionPool, entityId)
+        keys.forEach(key => {
+          const isExistKey = Reflect.has(temp, key)
+          if (!isExistKey) {
+            const keyBindEntityIdList = Reflect.get(temp, key) || []
+            Reflect.set(temp, key, [...keyBindEntityIdList, { componentId }] as KeyBoundComponentList[])
+          }
+        })
+      } else {
+        const keysRecord: Record<string, KeyBoundComponentList[]> = {}
+
+        keys.forEach(key => {
+          Reflect.set(keysRecord, key, [{ componentId }])
+        })
+
+        Reflect.set(this.connectionPool, entityId, keysRecord)
+
+      }
+      return this.refreshSubscribedMessage(entityId)
+    },
+
+    /**
+     * @description 获取重新刷新的消息
+     * @param entityId 
+     * @returns 
+     */
+    refreshSubscribedMessage(entityId: string) {
+      const isExist = this.subscribePool.findIndex(item => item.entityId === entityId)
+      if (!~isExist) {
+        const subscribeId = this.subscribePool.length ? Math.max(...this.subscribePool.map(item => item.subscribeId)) + 1 : 0
+        this.subscribePool.push({ subscribeId, entityId })
+      }
+      const subscribeId = this.subscribePool.find(item => item.entityId === entityId)!.subscribeId!
+
+      return this.createMessage(subscribeId, entityId)
+    },
+
+    /**
+     * @description 创建消息
+     * @param subscribeId 
+     * @param entityId 
+     * @returns 
+     */
+    createMessage(subscribeId: number, entityId: string): SocketSendMessageType {
+      const keys = Object.keys(Reflect.get(this.connectionPool, entityId)).join(',')
+
+      return {
+        tsSubCmds: [
+          {
+            entityType: 'DEVICE',
+            entityId: entityId,
+            scope: "LATEST_TELEMETRY",
+            cmdId: subscribeId,
+            keys
+          }
+        ]
+      }
+    },
+
+    /**
+     * @description 订阅
+     * @param targetComponent 
+     */
+    subscribe(targetComponent: CreateComponentType) {
+      const { id: componentId, request } = targetComponent
+      const { requestContentType, requestParams } = request
+      if ((requestContentType as RequestContentTypeEnum) === RequestContentTypeEnum.WEB_SOCKET) {
+        const { Params } = requestParams
+        const { entityId = '', keys = '' } = Params
+        return this.updateConnectionPool(entityId, keys.split(KEYS_SEPARATOR), componentId)
+      }
+    },
+
+    /**
+     * @description 缓存消息
+     * @param message 
+     */
+    setCacheMessage(message: SocketReceiveMessageType) {
+      const { subscriptionId } = message
+      const existedIndex = this.subscribePool.findIndex(item => item.subscribeId === subscriptionId)
+
+      if (~existedIndex) {
+        const isExistMessage = Reflect.get(this.cacheMessage, subscriptionId)
+        if (!isExistMessage) Reflect.set(this.cacheMessage, subscriptionId, [])
+        Reflect.set(this.cacheMessage, subscriptionId, [...Reflect.get(this.cacheMessage, subscriptionId), message])
+      }
+    }
+  }
+})

@@ -10,7 +10,7 @@ import { isFunction } from '@/utils/external/is'
 import { ContentTypeEnum, RequestEnum } from '@/enums/external/httpEnum';
 import { ContentTypeEnum, RequestEnum } from '@/enums/external/httpEnum';
 import omit from 'lodash/omit';
 import omit from 'lodash/omit';
 import cloneDeep from 'lodash/cloneDeep';
 import cloneDeep from 'lodash/cloneDeep';
-import { useUserStore } from '@/store/external/module/user';
+import { useUserStore } from '@/store/external/modules/user';
 
 
 export * from './axiosTransform';
 export * from './axiosTransform';
 
 

 import type { ErrorMessageMode } from '/#/external/axios';
 import type { ErrorMessageMode } from '/#/external/axios';
-import { useUserStoreWithOut } from '@/store/external/module/user';
+import { useUserStoreWithOut } from '@/store/external/modules/user';
 
 
 export function checkStatus(
 export function checkStatus(
   status: number,
   status: number,

@@ -56,12 +56,6 @@
           <NDivider vertical style="height: 480px" />
           <NDivider vertical style="height: 480px" />
           <NScrollbar style="max-height: 480px">
           <NScrollbar style="max-height: 480px">
             <NSpace :size="15" vertical>
             <NSpace :size="15" vertical>
-              <!-- <div class="editor-data-show"> -->
-              <!-- <NSpace>
-                  <NText depth="3">默认过滤数据(data)：</NText>
-                  <NCode :code="toString(sourceData?.data) || '暂无'" language="json" :word-wrap="true"></NCode>
-                </NSpace> -->
-              <!-- </div> -->
               <div class="editor-data-show">
               <div class="editor-data-show">
                 <NSpace>
                 <NSpace>
                   <NText depth="3">接口返回数据(res)：</NText>
                   <NText depth="3">接口返回数据(res)：</NText>
@@ -103,7 +97,7 @@
 </template>
 </template>
 
 
 <script lang="ts" setup>
 <script lang="ts" setup>
-import { ref, computed, watch, toRaw } from 'vue'
+import { ref, computed, watch, toRaw, unref } from 'vue'
 import { MonacoEditor } from '@/components/Pages/MonacoEditor'
 import { MonacoEditor } from '@/components/Pages/MonacoEditor'
 import { icon } from '@/plugins'
 import { icon } from '@/plugins'
 import { goDialog, toString } from '@/utils'
 import { goDialog, toString } from '@/utils'
@@ -111,6 +105,9 @@ import cloneDeep from 'lodash/cloneDeep'
 import { useTargetData } from '../../../../hooks/useTargetData.hook'
 import { useTargetData } from '../../../../hooks/useTargetData.hook'
 import { customRequest } from '@/api/external/customRequest'
 import { customRequest } from '@/api/external/customRequest'
 import { NButton, NCard, NCode, NDivider, NIcon, NModal, NScrollbar, NSpace, NTag, NText } from 'naive-ui'
 import { NButton, NCard, NCode, NDivider, NIcon, NModal, NScrollbar, NSpace, NTag, NText } from 'naive-ui'
+import { useChartDataSocket } from '@/hooks/external/useChartDataSocket'
+import { CreateComponentType } from '@/packages/index.d'
+import { RequestContentTypeEnum } from '@/enums/external/httpEnum'
 
 
 const { DocumentTextIcon } = icon.ionicons5
 const { DocumentTextIcon } = icon.ionicons5
 const { FilterIcon, FilterEditIcon } = icon.carbon
 const { FilterIcon, FilterEditIcon } = icon.carbon
@@ -125,10 +122,15 @@ const errorFlag = ref(false)
 // 目标静态/接口数据
 // 目标静态/接口数据
 const sourceData = ref<any>('')
 const sourceData = ref<any>('')
 
 
+const { sendMessage } = useChartDataSocket()
 // 动态获取数据
 // 动态获取数据
 const fetchTargetData = async () => {
 const fetchTargetData = async () => {
   try {
   try {
-    const res = await customRequest(toRaw(targetData.value.request))
+
+    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) {
     if (res) {
       sourceData.value = res
       sourceData.value = res
       return
       return
@@ -143,9 +145,9 @@ const fetchTargetData = async () => {
 // 过滤结果
 // 过滤结果
 const filterRes = computed(() => {
 const filterRes = computed(() => {
   try {
   try {
-    const fn = new Function('data', 'res', filter.value)
+    const fn = new Function('res', filter.value)
     const response = cloneDeep(sourceData.value)
     const response = cloneDeep(sourceData.value)
-    const res = fn(response?.data, response)
+    const res = fn(response)
     // eslint-disable-next-line vue/no-side-effects-in-computed-properties
     // eslint-disable-next-line vue/no-side-effects-in-computed-properties
     errorFlag.value = false
     errorFlag.value = false
     return toString(res)
     return toString(res)

@@ -3,7 +3,7 @@ import { ref, computed, onBeforeUnmount, watchEffect, toRaw, unref } from 'vue'
 import { icon } from '@/plugins'
 import { icon } from '@/plugins'
 import { useDesignStore } from '@/store/modules/designStore/designStore'
 import { useDesignStore } from '@/store/modules/designStore/designStore'
 import { SettingItemBox } from '@/components/Pages/ChartItemSetting'
 import { SettingItemBox } from '@/components/Pages/ChartItemSetting'
-import { RequestDataTypeEnum } from '@/enums/external/httpEnum'
+import { RequestContentTypeEnum, RequestDataTypeEnum } from '@/enums/external/httpEnum'
 import { ChartDataMatchingAndShow } from '../../../external/components/ChartDataMatchingAndShow'
 import { ChartDataMatchingAndShow } from '../../../external/components/ChartDataMatchingAndShow'
 import { newFunctionHandle } from '@/utils'
 import { newFunctionHandle } from '@/utils'
 import { useTargetData } from '../../../../hooks/useTargetData.hook'
 import { useTargetData } from '../../../../hooks/useTargetData.hook'
@@ -11,6 +11,9 @@ import { NButton, NSelect, NTooltip, NIcon, SelectOption } from 'naive-ui'
 import { RequestInfoPanel } from '../RequestInfoPanel'
 import { RequestInfoPanel } from '../RequestInfoPanel'
 import { RequestModal } from '../RequestModal'
 import { RequestModal } from '../RequestModal'
 import { customRequest } from '@/api/external/customRequest'
 import { customRequest } from '@/api/external/customRequest'
+import { useChartDataSocket } from '@/hooks/external/useChartDataSocket'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { CreateComponentType } from '@/packages/index.d'
 
 
 const { HelpOutlineIcon, FlashIcon } = icon.ionicons5
 const { HelpOutlineIcon, FlashIcon } = icon.ionicons5
 const { targetData } = useTargetData()
 const { targetData } = useTargetData()
@@ -39,14 +42,19 @@ const showMatching = ref(false)
 let firstFocus = 0
 let firstFocus = 0
 let lastFilter: any = undefined
 let lastFilter: any = undefined
 
 
+const { sendMessage } = useChartDataSocket()
+
 // 发送请求
 // 发送请求
 const sendHandle = async () => {
 const sendHandle = async () => {
   if (!targetData.value?.request) return
   if (!targetData.value?.request) return
-
   loading.value = true
   loading.value = true
   try {
   try {
-    console.log('enter')
-    const res = await customRequest(toRaw(targetData.value.request))
+
+    const isSocketType = (targetData.value.request.requestContentType as RequestContentTypeEnum) === RequestContentTypeEnum.WEB_SOCKET
+    const res = isSocketType
+      ? await sendMessage(targetData.value as CreateComponentType)
+      : await customRequest(toRaw(targetData.value.request))
+
     loading.value = false
     loading.value = false
     if (res) {
     if (res) {
       targetData.value.option.dataset = newFunctionHandle(res, res, targetData.value.filter)
       targetData.value.option.dataset = newFunctionHandle(res, res, targetData.value.filter)

@@ -6,13 +6,14 @@ import { RequestContentTypeEnum, RequestContentTypeNameEnum } from '@/enums/exte
 import { RequestBodyEnum, RequestHttpEnum, RequestHttpIntervalEnum, RequestParams, RequestParamsTypeEnum } from '@/enums/httpEnum';
 import { RequestBodyEnum, RequestHttpEnum, RequestHttpIntervalEnum, RequestParams, RequestParamsTypeEnum } from '@/enums/httpEnum';
 import { RequestConfigType } from '@/store/modules/chartEditStore/chartEditStore.d';
 import { RequestConfigType } from '@/store/modules/chartEditStore/chartEditStore.d';
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
-import { NForm, NCard, NDatePicker, NEmpty, NFormItem, NInput, NInputGroup, NInputNumber, NScrollbar, NSelect, NSpin, NTabPane, NTabs, NTreeSelect, SelectOption, FormInst, NButton, FormItemInst } from 'naive-ui';
+import { NForm, NCard, NDatePicker, NEmpty, NFormItem, NInput, NInputGroup, NInputNumber, NScrollbar, NSelect, NSpin, NTabPane, NTabs, NTreeSelect, SelectOption, FormInst, NButton, FormItemInst, NText, NSpace, NTag } from 'naive-ui';
 import { ref, reactive, onMounted, computed, unref } from 'vue'
 import { ref, reactive, onMounted, computed, unref } from 'vue'
 import { selectTimeOptions, selectTypeOptions } from '../../../index.d';
 import { selectTimeOptions, selectTypeOptions } from '../../../index.d';
 import ParamsTable from '../RequestModal/ParamsTable.vue';
 import ParamsTable from '../RequestModal/ParamsTable.vue';
 import RequestBody from '../RequestModal/RequestBody.vue';
 import RequestBody from '../RequestModal/RequestBody.vue';
 import { ComponentType, useDynamicPublicForm } from './useDynamicPublicForm';
 import { ComponentType, useDynamicPublicForm } from './useDynamicPublicForm';
 import { transferData } from './utils';
 import { transferData } from './utils';
+import { MonacoEditor } from '@/components/Pages/MonacoEditor';
 
 
 const componentMap: { [key in ComponentType]?: any } = {
 const componentMap: { [key in ComponentType]?: any } = {
   [ComponentType.SELECT_TREE]: NTreeSelect,
   [ComponentType.SELECT_TREE]: NTreeSelect,
@@ -154,15 +155,17 @@ onMounted(() => {
         :name="RequestContentTypeEnum.WEB_SOCKET" :tab="getGetRequestTypeName(RequestContentTypeEnum.WEB_SOCKET)" />
         :name="RequestContentTypeEnum.WEB_SOCKET" :tab="getGetRequestTypeName(RequestContentTypeEnum.WEB_SOCKET)" />
     </NTabs>
     </NTabs>
   </SettingItemBox>
   </SettingItemBox>
-  <SettingItemBox>
+
+  <SettingItemBox v-if="requestContentTypeRef === RequestContentTypeEnum.DEFAULT">
     <NTabs v-model:value="requestParamsTypeRef" :default-value="RequestParamsTypeEnum.PARAMS">
     <NTabs v-model:value="requestParamsTypeRef" :default-value="RequestParamsTypeEnum.PARAMS">
       <NTabPane v-for="item in RequestParamsTypeEnum" :name="item" :key="item"></NTabPane>
       <NTabPane v-for="item in RequestParamsTypeEnum" :name="item" :key="item"></NTabPane>
     </NTabs>
     </NTabs>
   </SettingItemBox>
   </SettingItemBox>
 
 
-  <SettingItemBox :item-right-style="{ gridTemplateColumns: '3fr 2fr' }">
+  <SettingItemBox v-if="requestContentTypeRef === RequestContentTypeEnum.DEFAULT"
+    :item-right-style="{ gridTemplateColumns: '7fr 1fr' }">
     <NCard v-if="requestParamsTypeRef === RequestParamsTypeEnum.PARAMS" class="dynamic-form">
     <NCard v-if="requestParamsTypeRef === RequestParamsTypeEnum.PARAMS" class="dynamic-form">
-      <NScrollbar style="max-height: 400px; padding: 0 10px; box-sizing: border-box;;">
+      <NScrollbar style="max-height: 400px;  box-sizing: border-box;">
         <NForm>
         <NForm>
           <template v-for="item in getDynamicFormSchemas" :key="item.key">
           <template v-for="item in getDynamicFormSchemas" :key="item.key">
             <NFormItem ref="dynamicFormItemEl" :required="item.required" :label="item.name" :rule="item.rules">
             <NFormItem ref="dynamicFormItemEl" :required="item.required" :label="item.name" :rule="item.rules">
@@ -174,6 +177,23 @@ onMounted(() => {
       </NScrollbar>
       </NScrollbar>
     </NCard>
     </NCard>
 
 
+    <!-- <section v-if="requestParamsTypeRef === RequestParamsTypeEnum.PARAMS">
+                <NCard>
+                  <NSpace vertical>
+                    <NTag type="info">
+                      <span class="func-keyword">function</span>&nbsp;&nbsp;filter(res)&nbsp;&nbsp;{
+                    </NTag>
+                    <MonacoEditor v-model:modelValue="filter" width="380px" height="300px" language="javascript" />
+                    <NTag type="info">}</NTag>
+                  </NSpace>
+                </NCard>
+                <NCard style="margin-top: 20px;">
+                  <NText>转换结果:</NText>
+                  <section>
+                    <NText>{{ params }}</NText>
+                  </section>
+                </NCard>
+              </section> -->
 
 
     <RequestBody v-if="requestParamsTypeRef === RequestParamsTypeEnum.BODY"
     <RequestBody v-if="requestParamsTypeRef === RequestParamsTypeEnum.BODY"
       v-model:request-params-body-type="requestParamsBodyTypeRef" v-model:value="requestParams" />
       v-model:request-params-body-type="requestParamsBodyTypeRef" v-model:value="requestParams" />
@@ -181,6 +201,21 @@ onMounted(() => {
     <ParamsTable v-if="requestParamsTypeRef === RequestParamsTypeEnum.HEADER" v-model:value="headerRef" />
     <ParamsTable v-if="requestParamsTypeRef === RequestParamsTypeEnum.HEADER" v-model:value="headerRef" />
 
 
   </SettingItemBox>
   </SettingItemBox>
+
+  <SettingItemBox v-if="requestContentTypeRef === RequestContentTypeEnum.WEB_SOCKET">
+    <NCard v-if="requestParamsTypeRef === RequestParamsTypeEnum.PARAMS" class="dynamic-form">
+      <NScrollbar style="max-height: 400px;  box-sizing: border-box;">
+        <NForm>
+          <template v-for="item in getDynamicFormSchemas" :key="item.key">
+            <NFormItem ref="dynamicFormItemEl" :required="item.required" :label="item.name" :rule="item.rules">
+              <component :is="componentMap[item.component]" v-bind="item.props" clearable />
+            </NFormItem>
+          </template>
+        </NForm>
+        <NEmpty v-if="!selectedPublicInterface || !getDynamicFormSchemas.length" description="请选择公共接口" />
+      </NScrollbar>
+    </NCard>
+  </SettingItemBox>
 </template>
 </template>
 
 
 <style scoped lang="scss">
 <style scoped lang="scss">

@@ -4,7 +4,7 @@ import { getDeviceAttrList, getDeviceList, getDeviceProfileList, getOrgList } fr
 import { PublicInterfaceRecord, RequestParams } from "@/api/external/dynamicRequest/model"
 import { PublicInterfaceRecord, RequestParams } from "@/api/external/dynamicRequest/model"
 import { RequestConfigType } from "@/store/modules/chartEditStore/chartEditStore.d"
 import { RequestConfigType } from "@/store/modules/chartEditStore/chartEditStore.d"
 import { DatePickerProps, FormItemRule, InputProps, SelectProps, TreeSelectProps } from "naive-ui"
 import { DatePickerProps, FormItemRule, InputProps, SelectProps, TreeSelectProps } from "naive-ui"
-import { computed, onMounted, reactive, Ref, ref, unref } from "vue"
+import { computed, onMounted, reactive, Ref, ref, unref, watch } from "vue"
 import { DictEnum } from '@/enums/external/dictEnum'
 import { DictEnum } from '@/enums/external/dictEnum'
 
 
 const GROUP_SEPARATOR = ','
 const GROUP_SEPARATOR = ','
@@ -24,6 +24,7 @@ export enum ComponentType {
   INPUT = 'input'
   INPUT = 'input'
 }
 }
 
 
+
 export interface DynamicFormSchema {
 export interface DynamicFormSchema {
   key: string
   key: string
   name?: string
   name?: string
@@ -35,6 +36,7 @@ export interface DynamicFormSchema {
 
 
 export type BuiltInVariableRecord = { [key in BuiltInVariable]: DictItem }
 export type BuiltInVariableRecord = { [key in BuiltInVariable]: DictItem }
 
 
+
 export const useDynamicPublicForm = (publicInterfaceRef: Ref<PublicInterfaceRecord>) => {
 export const useDynamicPublicForm = (publicInterfaceRef: Ref<PublicInterfaceRecord>) => {
 
 
   const getParams = computed(() => {
   const getParams = computed(() => {
@@ -45,7 +47,7 @@ export const useDynamicPublicForm = (publicInterfaceRef: Ref<PublicInterfaceReco
 
 
   const getUsedBuiltInVariable = computed(() => {
   const getUsedBuiltInVariable = computed(() => {
     const hasUsed = unref(getParams).reduce((prev, next) => {
     const hasUsed = unref(getParams).reduce((prev, next) => {
-      const groupList = next.key.split(GROUP_SEPARATOR)
+      const groupList = (next.key || '').split(GROUP_SEPARATOR)
       return [...prev, ...(groupList.length > 1 ? groupList : [next.key])]
       return [...prev, ...(groupList.length > 1 ? groupList : [next.key])]
     }, [] as string[])
     }, [] as string[])
     return hasUsed
     return hasUsed
@@ -149,7 +151,7 @@ export const useDynamicPublicForm = (publicInterfaceRef: Ref<PublicInterfaceReco
       value: params[BuiltInVariable.ENTITY_ID],
       value: params[BuiltInVariable.ENTITY_ID],
       options: unref(optionsSet[BuiltInVariable.ENTITY_ID]),
       options: unref(optionsSet[BuiltInVariable.ENTITY_ID]),
       labelField: 'name',
       labelField: 'name',
-      valueField: 'id',
+      valueField: 'tbDeviceId',
       onUpdateValue(value) {
       onUpdateValue(value) {
         params[BuiltInVariable.ENTITY_ID] = value
         params[BuiltInVariable.ENTITY_ID] = value
       }
       }
@@ -177,7 +179,10 @@ export const useDynamicPublicForm = (publicInterfaceRef: Ref<PublicInterfaceReco
       clearable: true,
       clearable: true,
       defaultTime: ['00:00:00', '00:00:00'],
       defaultTime: ['00:00:00', '00:00:00'],
       onUpdateValue(value) {
       onUpdateValue(value) {
-        params[BuiltInVariable.DATE] = value
+        // params[BuiltInVariable.DATE] = value
+        params.startTs = value[0]
+        params.endTs = value[1]
+        console.log(params)
       }
       }
     } as DatePickerProps
     } as DatePickerProps
   })
   })
@@ -236,7 +241,7 @@ export const useDynamicPublicForm = (publicInterfaceRef: Ref<PublicInterfaceReco
   }
   }
 
 
   const toFormSchemas = (builtInVariableKey: string, required: boolean, value: any) => {
   const toFormSchemas = (builtInVariableKey: string, required: boolean, value: any) => {
-    const groupList = builtInVariableKey.split(GROUP_SEPARATOR)
+    const groupList = (builtInVariableKey || '').split(GROUP_SEPARATOR)
     return groupList.reduce((prev, next) => {
     return groupList.reduce((prev, next) => {
       const result = builtInVariableConfiguration[next as BuiltInVariable]
       const result = builtInVariableConfiguration[next as BuiltInVariable]
       const props = unref(result?.props)
       const props = unref(result?.props)
@@ -283,9 +288,13 @@ export const useDynamicPublicForm = (publicInterfaceRef: Ref<PublicInterfaceReco
 
 
   const setParams = (Params: Recordable) => {
   const setParams = (Params: Recordable) => {
     unref(getParams).forEach(({ key, value }) => {
     unref(getParams).forEach(({ key, value }) => {
-      if (unref(getUsedBuiltInVariable).includes(key)) {
-        params[key] = Params[key]
-      }
+      const splitKeys = key.split(GROUP_SEPARATOR)
+      splitKeys.forEach(temp => {
+        if (unref(getUsedBuiltInVariable).includes(temp)) {
+          params[temp] = Params[temp]
+        }
+      })
+
       params[value] = Params[value]
       params[value] = Params[value]
     })
     })
   }
   }

@@ -3,9 +3,10 @@ import { toRefs, computed } from 'vue'
 import { icon } from '@/plugins'
 import { icon } from '@/plugins'
 import { useDesignStore } from '@/store/modules/designStore/designStore'
 import { useDesignStore } from '@/store/modules/designStore/designStore'
 import { SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
 import { SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
-import { SelectHttpTimeNameObj, RequestContentTypeEnum } from '@/enums/httpEnum'
+import { SelectHttpTimeNameObj } from '@/enums/httpEnum'
 import { useTargetData } from '@/views/chart/ContentConfigurations/components/hooks/useTargetData.hook'
 import { useTargetData } from '@/views/chart/ContentConfigurations/components/hooks/useTargetData.hook'
 import { NButton, NCard, NTag, NInput, NIcon } from 'naive-ui'
 import { NButton, NCard, NTag, NInput, NIcon } from 'naive-ui'
+import { RequestContentTypeNameEnum, RequestContentTypeEnum } from '@/enums/external/httpEnum'
 
 
 const emit = defineEmits(['clickPanel'])
 const emit = defineEmits(['clickPanel'])
 
 
@@ -25,6 +26,10 @@ const requestModelHandle = () => {
   emit('clickPanel')
   emit('clickPanel')
 }
 }
 
 
+const getContentName = (contentType: RequestContentTypeEnum) => {
+  return RequestContentTypeNameEnum[RequestContentTypeEnum[contentType] as unknown as keyof typeof RequestContentTypeEnum]
+}
+
 // 颜色
 // 颜色
 const themeColor = computed(() => {
 const themeColor = computed(() => {
   return designStore.getAppTheme
   return designStore.getAppTheme
@@ -37,7 +42,7 @@ const themeColor = computed(() => {
     <SettingItemBox name="请求配置">
     <SettingItemBox name="请求配置">
       <SettingItem name="类型">
       <SettingItem name="类型">
         <NTag :bordered="false" type="primary" style="border-radius: 5px">
         <NTag :bordered="false" type="primary" style="border-radius: 5px">
-          {{ targetData.request.requestContentType === RequestContentTypeEnum.DEFAULT ? '普通请求' : 'SQL请求' }}
+          {{ getContentName(targetData.request.requestContentType) }}
         </NTag>
         </NTag>
       </SettingItem>
       </SettingItem>
 
 

@@ -74,8 +74,7 @@ const getResult = () => {
 
 
 const handleSaveAction = async () => {
 const handleSaveAction = async () => {
   if (!(await validate())) return
   if (!(await validate())) return
-  const value = getResult()
-  console.log(value)
+  const value = getResult() 
   if (unref(selectTarget)) {
   if (unref(selectTarget)) {
     chartEditStore.updateComponentList(chartEditStore.fetchTargetIndex(), {
     chartEditStore.updateComponentList(chartEditStore.fetchTargetIndex(), {
       ...unref(selectTarget)!,
       ...unref(selectTarget)!,

 import { fetchRouteParamsLocation, JSONStringify, JSONParse } from '@/utils'
 import { fetchRouteParamsLocation, JSONStringify, JSONParse } from '@/utils'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
-import { ProjectInfoEnum } from '@/store/external/module/projectInfo.d'
+import { ProjectInfoEnum } from '@/store/external/modules/projectInfo.d'
 import { onUnmounted } from 'vue'
 import { onUnmounted } from 'vue'
 import { saveInterval } from '@/settings/designSetting'
 import { saveInterval } from '@/settings/designSetting'
 import throttle from 'lodash/throttle'
 import throttle from 'lodash/throttle'
@@ -8,7 +8,7 @@ import html2canvas from 'html2canvas'
 import { saveDataViewList, contentUpdateApi, getDataView, uploadFile } from '@/api/external/contentSave/content'
 import { saveDataViewList, contentUpdateApi, getDataView, uploadFile } from '@/api/external/contentSave/content'
 // 画布枚举
 // 画布枚举
 import { SyncEnum } from '@/enums/external/editPageEnum'
 import { SyncEnum } from '@/enums/external/editPageEnum'
-import { useProjectInfoStore } from '@/store/external/module/projectInfo'
+import { useProjectInfoStore } from '@/store/external/modules/projectInfo'
 import { useSync } from '../useSync.hook'
 import { useSync } from '../useSync.hook'
 import { BaseUpdateContentParams } from '@/api/external/contentSave/model/contentModel'
 import { BaseUpdateContentParams } from '@/api/external/contentSave/model/contentModel'
 
 

 import { PageEnum } from "@/enums/pageEnum"
 import { PageEnum } from "@/enums/pageEnum"
-import { useUserStore } from "@/store/external/module/user"
+import { useUserStore } from "@/store/external/modules/user"
 import { cryptoEncode, routerTurnByName, setLocalStorage } from "@/utils"
 import { cryptoEncode, routerTurnByName, setLocalStorage } from "@/utils"
 import { to } from "@/utils/external/to"
 import { to } from "@/utils/external/to"
 import { StorageEnum } from '@/enums/storageEnum'
 import { StorageEnum } from '@/enums/storageEnum'