perf: 调整数据看板socket逻辑, 新增自定义推送socket消息及接受消息逻辑

 <script lang="ts" setup>
-  import { ComponentPropsConfigType, DataFetchUpdateFn } from '/@/views/visual/packages/index.type';
+  import { ComponentPropsConfigType } from '/@/views/visual/packages/index.type';
   import { option } from './config';
-  import { useDataFetch } from '/@/views/visual/packages/hook/useSocket';
   import { Spin } from 'ant-design-vue';
   import { computed, ref } from 'vue';
   import { useComponentScale } from '../../../hook/useComponentScale';
   import { useSendCommand } from '../../../hook/useSendCommand';
   import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
+  import { DataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
+  import { useDataFetch } from '../../../hook/socket/useSocket';
 
   const props = defineProps<{
     config: ComponentPropsConfigType<typeof option>;

 <script lang="ts" setup>
-  import { ComponentPropsConfigType, DataFetchUpdateFn } from '/@/views/visual/packages/index.type';
+  import { ComponentPropsConfigType } from '/@/views/visual/packages/index.type';
   import { option } from './config';
-  import { useDataFetch } from '/@/views/visual/packages/hook/useSocket';
   import { SvgIcon } from '/@/components/Icon';
   import { Switch } from 'ant-design-vue';
   import { computed, ref } from 'vue';
@@ -9,6 +8,8 @@
   import { useSendCommand } from '../../../hook/useSendCommand';
   import { unref } from 'vue';
   import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
+  import { DataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
+  import { useDataFetch } from '../../../hook/socket/useSocket';
 
   const props = defineProps<{
     config: ComponentPropsConfigType<typeof option>;

 <script lang="ts" setup>
-  import { ComponentPropsConfigType, DataFetchUpdateFn } from '/@/views/visual/packages/index.type';
+  import { ComponentPropsConfigType } from '/@/views/visual/packages/index.type';
   import { option } from './config';
-  import { useDataFetch } from '/@/views/visual/packages/hook/useSocket';
   import { Spin } from 'ant-design-vue';
   import { computed, ref } from 'vue';
   import { useComponentScale } from '../../../hook/useComponentScale';
   import { useSendCommand } from '../../../hook/useSendCommand';
   import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
+  import { DataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
+  import { useDataFetch } from '../../../hook/socket/useSocket';
 
   const props = defineProps<{
     config: ComponentPropsConfigType<typeof option>;

 <script lang="ts" setup>
-  import { ComponentPropsConfigType, DataFetchUpdateFn } from '/@/views/visual/packages/index.type';
+  import { ComponentPropsConfigType } from '/@/views/visual/packages/index.type';
   import { option } from './config';
-  import { useDataFetch } from '/@/views/visual/packages/hook/useSocket';
   import { Slider, Spin } from 'ant-design-vue';
   import { computed, ref, unref } from 'vue';
   import { useComponentScale } from '../../../hook/useComponentScale';
   import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
   import { useSendCommand } from '../../../hook/useSendCommand';
   import { useReceiveValue } from '../../../hook/useReceiveValue';
+  import { DataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
+  import { useDataFetch } from '../../../hook/socket/useSocket';
 
   const props = defineProps<{
     config: ComponentPropsConfigType<typeof option>;

 <script lang="ts" setup>
-  import {
-    ComponentPropsConfigType,
-    MultipleDataFetchUpdateFn,
-  } from '/@/views/visual/packages/index.type';
+  import { ComponentPropsConfigType } from '/@/views/visual/packages/index.type';
   import { option } from './config';
-  import { useMultipleDataFetch } from '/@/views/visual/packages/hook/useSocket';
   import { SvgIcon } from '/@/components/Icon';
   import { Switch } from 'ant-design-vue';
   import { computed, ref } from 'vue';
@@ -12,6 +8,8 @@
   import { useSendCommand } from '../../../hook/useSendCommand';
   import { unref } from 'vue';
   import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
+  import { MultipleDataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
+  import { useMultipleDataFetch } from '../../../hook/socket/useSocket';
 
   const props = defineProps<{
     config: ComponentPropsConfigType<typeof option>;

 <script lang="ts" setup>
-  import { ComponentPropsConfigType, DataFetchUpdateFn } from '/@/views/visual/packages/index.type';
+  import { ComponentPropsConfigType } from '/@/views/visual/packages/index.type';
   import { option } from './config';
-  import { useDataFetch } from '/@/views/visual/packages/hook/useSocket';
   import { computed } from 'vue';
   import { ref } from 'vue';
   import { unref } from 'vue';
   import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
   import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
+  import { useDataFetch } from '../../../hook/socket/useSocket';
+  import { DataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
 
   const props = defineProps<{
     config: ComponentPropsConfigType<typeof option>;

 <script lang="ts" setup>
-  import { ComponentPropsConfigType, DataFetchUpdateFn } from '/@/views/visual/packages/index.type';
+  import { ComponentPropsConfigType } from '/@/views/visual/packages/index.type';
   import { option } from './config';
-  import { useDataFetch } from '/@/views/visual/packages/hook/useSocket';
   import { computed } from 'vue';
   import { ref } from 'vue';
   import { unref } from 'vue';
   import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
   import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
+  import { useDataFetch } from '../../../hook/socket/useSocket';
+  import { DataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
 
   const props = defineProps<{
     config: ComponentPropsConfigType<typeof option>;

 <script lang="ts" setup>
-  import { ComponentPropsConfigType, DataFetchUpdateFn } from '/@/views/visual/packages/index.type';
+  import { ComponentPropsConfigType } from '/@/views/visual/packages/index.type';
   import { option } from './config';
-  import { useDataFetch } from '/@/views/visual/packages/hook/useSocket';
   import { ref } from 'vue';
   import { computed } from 'vue';
   import { unref } from 'vue';
   import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
   import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
+  import { useDataFetch } from '../../../hook/socket/useSocket';
+  import { DataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
 
   const props = defineProps<{
     config: ComponentPropsConfigType<typeof option>;

 <script lang="ts" setup>
-  import { ComponentPropsConfigType, DataFetchUpdateFn } from '/@/views/visual/packages/index.type';
+  import { ComponentPropsConfigType } from '/@/views/visual/packages/index.type';
   import { option } from './config';
-  import { useDataFetch } from '/@/views/visual/packages/hook/useSocket';
   import { ref, computed, unref } from 'vue';
   import { Space } from 'ant-design-vue';
   import { useComponentScale } from '/@/views/visual/packages/hook/useComponentScale';
   import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
   import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
+  import { useDataFetch } from '../../../hook/socket/useSocket';
+  import { DataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
 
   const props = defineProps<{
     config: ComponentPropsConfigType<typeof option>;

 <script lang="ts" setup>
   import { EChartsOption, ECharts, init } from 'echarts';
   import { unref, ref, onMounted, computed, nextTick } from 'vue';
-  import { useDataFetch } from '../../../hook/useSocket';
-  import { ComponentPropsConfigType, DataFetchUpdateFn } from '../../../index.type';
+  import { ComponentPropsConfigType } from '../../../index.type';
   import { option } from './config';
   import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
   import { useIntervalFn } from '@vueuse/core';
   import { useComponentScale } from '../../../hook/useComponentScale';
   import { isArray } from '/@/utils/is';
   import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
+  import { useDataFetch } from '../../../hook/socket/useSocket';
+  import { DataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
 
   const props = defineProps<{
     config: ComponentPropsConfigType<typeof option>;

 <script lang="ts" setup>
   import { EChartsOption, ECharts, init } from 'echarts';
   import { unref, ref, onMounted, computed, nextTick } from 'vue';
-  import { useDataFetch } from '../../../hook/useSocket';
-  import { ComponentPropsConfigType, DataFetchUpdateFn } from '../../../index.type';
+  import { ComponentPropsConfigType } from '../../../index.type';
   import { option } from './config';
   import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
   import { useIntervalFn } from '@vueuse/core';
   import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
   import { isArray } from '/@/utils/is';
   import { useComponentScale } from '/@/views/visual/packages/hook/useComponentScale';
+  import { useDataFetch } from '../../../hook/socket/useSocket';
+  import { DataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
 
   const props = defineProps<{
     config: ComponentPropsConfigType<typeof option>;

 <script lang="ts" setup>
   import { EChartsOption, ECharts, init } from 'echarts';
   import { unref, ref, onMounted, computed, nextTick } from 'vue';
-  import { useMultipleDataFetch } from '../../../hook/useSocket';
-  import { ComponentPropsConfigType, MultipleDataFetchUpdateFn } from '../../../index.type';
+  import { ComponentPropsConfigType } from '../../../index.type';
   import { option } from './config';
   import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
   // import { useIntervalFn } from '@vueuse/core';
@@ -10,6 +9,7 @@
   import { useComponentScale } from '/@/views/visual/packages/hook/useComponentScale';
   import { useReceiveMessage } from '../../../hook/useReceiveMessage';
   import { useReceiveValue } from '../../../hook/useReceiveValue';
+  import { MultipleDataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
 
   const props = defineProps<{
     config: ComponentPropsConfigType<typeof option>;

 <script lang="ts" setup>
   import { EChartsOption, ECharts, init } from 'echarts';
   import { unref, ref, onMounted, computed, nextTick } from 'vue';
-  import { useDataFetch } from '../../../hook/useSocket';
-  import { ComponentPropsConfigType, DataFetchUpdateFn } from '../../../index.type';
+  import { ComponentPropsConfigType } from '../../../index.type';
   import { option } from './config';
   import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
   import { useIntervalFn } from '@vueuse/core';
   import { useComponentScale } from '../../../hook/useComponentScale';
   import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
+  import { useDataFetch } from '../../../hook/socket/useSocket';
+  import { DataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
 
   const props = defineProps<{
     config: ComponentPropsConfigType<typeof option>;

@@ -3,8 +3,7 @@
   import { onMounted } from 'vue';
   import { unref } from 'vue';
   import { ref } from 'vue';
-  import { useDataFetch } from '../../../hook/useSocket';
-  import { ComponentPropsConfigType, DataFetchUpdateFn } from '../../../index.type';
+  import { ComponentPropsConfigType } from '../../../index.type';
   import { option } from './config';
   import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
   import { useIntervalFn } from '@vueuse/core';
@@ -12,6 +11,8 @@
   import { useComponentScale } from '../../../hook/useComponentScale';
   import { nextTick } from 'vue';
   import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
+  import { useDataFetch } from '../../../hook/socket/useSocket';
+  import { DataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
 
   const props = defineProps<{
     config: ComponentPropsConfigType<typeof option>;

 <script lang="ts" setup>
-  import { ComponentPropsConfigType, DataFetchUpdateFn } from '/@/views/visual/packages/index.type';
+  import { ComponentPropsConfigType } from '/@/views/visual/packages/index.type';
   import { Gradient, GradientColor, option } from './config';
-  import { useDataFetch } from '/@/views/visual/packages/hook/useSocket';
   import { ECharts, EChartsOption, init } from 'echarts';
   import { ref, unref, onMounted, computed } from 'vue';
   import { isArray } from '/@/utils/is';
@@ -11,6 +10,8 @@
   import { useIntervalFn } from '@vueuse/core';
   import { nextTick } from 'vue';
   import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
+  import { useDataFetch } from '../../../hook/socket/useSocket';
+  import { DataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
 
   const props = defineProps<{
     config: ComponentPropsConfigType<typeof option>;

 <script lang="ts" setup>
-  import {
-    ComponentPropsConfigType,
-    MultipleDataFetchUpdateFn,
-  } from '/@/views/visual/packages/index.type';
+  import { ComponentPropsConfigType } from '/@/views/visual/packages/index.type';
   import { option } from './config';
-  import { useMultipleDataFetch } from '/@/views/visual/packages/hook/useSocket';
   import { useBaiduMapSDK } from '../../../hook/useBaiduMapSDK';
   import { ref, unref } from 'vue';
   import { buildUUID } from '/@/utils/uuid';
   import { Spin } from 'ant-design-vue';
   import { computed } from 'vue';
   import { useMapTrackPlayBack } from './useMapTrackPlayback';
+  import { useMultipleDataFetch } from '../../../hook/socket/useSocket';
+  import { MultipleDataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
 
   const props = defineProps<{
     config: ComponentPropsConfigType<typeof option>;

@@ -2,8 +2,9 @@
   import { ref } from 'vue';
   import { Image as AntImage } from 'ant-design-vue';
   import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
-  import { useDataFetch } from '../../../hook/useSocket';
-  import { ComponentPropsConfigType, DataFetchUpdateFn } from '../../../index.type';
+  import { ComponentPropsConfigType } from '../../../index.type';
+  import { useDataFetch } from '../../../hook/socket/useSocket';
+  import { DataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
 
   const props = defineProps<{
     config: ComponentPropsConfigType;

 <script lang="ts" setup>
-  import { ComponentPropsConfigType, DataFetchUpdateFn } from '/@/views/visual/packages/index.type';
+  import { ComponentPropsConfigType } from '/@/views/visual/packages/index.type';
   import { option } from './config';
   import { useComponentScale } from '/@/views/visual/packages/hook/useComponentScale';
-  import { useDataFetch } from '/@/views/visual/packages/hook/useSocket';
   import { computed } from 'vue';
   import { ref, onMounted, unref } from 'vue';
   import { useIntervalFn } from '@vueuse/core';
   import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
   import { useReceiveValue } from '../../../hook/useReceiveValue';
   import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
+  import { DataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
+  import { useDataFetch } from '../../../hook/socket/useSocket';
 
   const props = defineProps<{
     config: ComponentPropsConfigType<typeof option>;

@@ -2,8 +2,9 @@
   import { ref } from 'vue';
   import { Image as AntImage } from 'ant-design-vue';
   import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
-  import { useDataFetch } from '../../../hook/useSocket';
-  import { ComponentPropsConfigType, DataFetchUpdateFn } from '../../../index.type';
+  import { ComponentPropsConfigType } from '../../../index.type';
+  import { useDataFetch } from '../../../hook/socket/useSocket';
+  import { DataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
 
   const props = defineProps<{
     config: ComponentPropsConfigType;
@@ -16,27 +17,6 @@
 
   const url = ref<string>(fallback);
 
-  // const getImagBase64 = ref(fallback);
-
-  // const getBase64Image = (url: string) => {
-  //   let canvas: Nullable<HTMLCanvasElement> = document.createElement('canvas');
-  //   const ctx = canvas.getContext('2d');
-  //   let image: Nullable<HTMLImageElement> = new Image();
-
-  //   image.onload = function () {
-  //     canvas!.height = image!.height;
-  //     canvas!.width = image!.width;
-  //     ctx?.drawImage(image!, 0, 0);
-  //     const dataUrl = canvas!.toDataURL('image/png');
-  //     getImagBase64.value = dataUrl;
-  //     console.log(dataUrl);
-  //     image = null;
-  //     canvas = null;
-  //   };
-  //   image.setAttribute('crossOrigin', 'Anonymous');
-  //   image.src = url;
-  // };
-
   const updateFn: DataFetchUpdateFn = (message, attribute) => {
     const { data = {} } = message;
     const [latest] = data[attribute] || [];

 <script lang="ts" setup>
   import { EChartsOption, SeriesOption, ECharts, init } from 'echarts';
   import { unref, ref, onMounted, computed, nextTick } from 'vue';
-  import { useMultipleDataFetch } from '../../../hook/useSocket';
-  import { ComponentPropsConfigType, MultipleDataFetchUpdateFn } from '../../../index.type';
+  import { ComponentPropsConfigType } from '../../../index.type';
   import { option } from './config';
   import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
   import { useComponentScale } from '../../../hook/useComponentScale';
   import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
   import { useReceiveMessage } from '../../../hook/useReceiveMessage';
   import { useReceiveValue } from '../../../hook/useReceiveValue';
+  import { useMultipleDataFetch } from '../../../hook/socket/useSocket';
+  import { MultipleDataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
 
   const props = defineProps<{
     config: ComponentPropsConfigType<typeof option>;

 <script lang="ts" setup>
   import { EChartsOption, SeriesOption, ECharts, init } from 'echarts';
   import { unref, ref, onMounted, computed, nextTick } from 'vue';
-  import { useMultipleDataFetch } from '../../../hook/useSocket';
-  import { ComponentPropsConfigType, MultipleDataFetchUpdateFn } from '../../../index.type';
+  import { ComponentPropsConfigType } from '../../../index.type';
   import { option } from './config';
   import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
   import { useComponentScale } from '../../../hook/useComponentScale';
@@ -10,6 +9,8 @@
   import { useReceiveMessage } from '../../../hook/useReceiveMessage';
   import { useReceiveValue } from '../../../hook/useReceiveValue';
   import { toRaw } from 'vue';
+  import { useMultipleDataFetch } from '../../../hook/socket/useSocket';
+  import { MultipleDataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
 
   const props = defineProps<{
     config: ComponentPropsConfigType<typeof option>;

 <script lang="ts" setup>
   import { EChartsOption, SeriesOption, ECharts, init } from 'echarts';
   import { unref, ref, onMounted, computed, nextTick, toRaw } from 'vue';
-  import { useMultipleDataFetch } from '../../../hook/useSocket';
-  import { ComponentPropsConfigType, MultipleDataFetchUpdateFn } from '../../../index.type';
+  import { ComponentPropsConfigType } from '../../../index.type';
   import { option } from './config';
   import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
   import { useComponentScale } from '../../../hook/useComponentScale';
   import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
+  import { useMultipleDataFetch } from '../../../hook/socket/useSocket';
+  import { MultipleDataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
 
   const props = defineProps<{
     config: ComponentPropsConfigType<typeof option>;

 <script lang="ts" setup>
   import { EChartsOption, SeriesOption, ECharts, init } from 'echarts';
   import { unref, ref, onMounted, computed, nextTick, toRaw } from 'vue';
-  import { useMultipleDataFetch } from '../../../hook/useSocket';
-  import { ComponentPropsConfigType, MultipleDataFetchUpdateFn } from '../../../index.type';
+  import { ComponentPropsConfigType } from '../../../index.type';
   import { option } from './config';
   import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
   import { useComponentScale } from '../../../hook/useComponentScale';
   import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
+  import { useMultipleDataFetch } from '../../../hook/socket/useSocket';
+  import { MultipleDataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
 
   const props = defineProps<{
     config: ComponentPropsConfigType<typeof option>;

 <script lang="ts" setup>
   import { reactive, ref } from 'vue';
-  import { useMultipleDataFetch } from '../../../hook/useSocket';
-  import { ComponentPropsConfigType, MultipleDataFetchUpdateFn } from '../../../index.type';
+  import { ComponentPropsConfigType } from '../../../index.type';
   import { option } from './config';
   import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
   import { BasicTable, useTable, BasicColumn } from '/@/components/Table';
+  import { MultipleDataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
+  import { useMultipleDataFetch } from '../../../hook/socket/useSocket';
 
   const props = defineProps<{
     config: ComponentPropsConfigType<typeof option>;
@@ -28,30 +29,12 @@
     canResize: true,
     maxHeight: 144,
     size: 'small',
-    // columns: [{ title: '属性', dataIndex: 'attribute', width: 80 }],
     columns: realTimeColumn as any,
   });
 
-  // const getDesign = computed(() => {
-  //   const { persetOption, option } = props.config;
-  //   clearInterval;
-  //   return {};
-  // });
-
-  // const randomFn = () => {
-  //   useIntervalFn(() => {
-  //     const value = (Math.random() * 100).toFixed(0);
-  //     unref(chartInstance)?.setOption({
-  //       series: [{ data: [{ value }] }, { data: [{ value }] }],
-  //     } as EChartsOption);
-  //   }, 3000);
-  // };
-
   const updateFn: MultipleDataFetchUpdateFn = () => {};
 
   useMultipleDataFetch(props, updateFn);
-
-  // const { getRatio } = useComponentScale(props);
 </script>
 
 <template>

 <script lang="ts" setup>
   import { EChartsOption, ECharts, init } from 'echarts';
   import { unref, ref, onMounted, nextTick, toRaw } from 'vue';
-  import { useMultipleDataFetch } from '../../../hook/useSocket';
-  import { ComponentPropsConfigType, MultipleDataFetchUpdateFn } from '../../../index.type';
+  import { ComponentPropsConfigType } from '../../../index.type';
   import { option } from './config';
   import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
   import { useComponentScale } from '../../../hook/useComponentScale';
   import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
   import { dateFormat } from '/@/utils/common/compUtils';
+  import { useMultipleDataFetch } from '../../../hook/socket/useSocket';
+  import { MultipleDataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
 
   const props = defineProps<{
     config: ComponentPropsConfigType<typeof option>;

 <script lang="ts" setup>
-  import { ComponentPropsConfigType, DataFetchUpdateFn } from '/@/views/visual/packages/index.type';
+  import { ComponentPropsConfigType } from '/@/views/visual/packages/index.type';
   import { option } from './config';
   import { useComponentScale } from '/@/views/visual/packages/hook/useComponentScale';
-  import { useDataFetch } from '/@/views/visual/packages/hook/useSocket';
   import { ref, onMounted, unref } from 'vue';
   import { useIntervalFn } from '@vueuse/core';
   import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
   import { useReceiveValue } from '../../../hook/useReceiveValue';
+  import { useDataFetch } from '../../../hook/socket/useSocket';
+  import { DataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
 
   const props = defineProps<{
     config: ComponentPropsConfigType<typeof option>;

 <script lang="ts" setup>
-  import { useDataFetch } from '/@/views/visual/packages/hook/useSocket';
-  import { ComponentPropsConfigType, DataFetchUpdateFn } from '/@/views/visual/packages/index.type';
-
+  import { ComponentPropsConfigType } from '/@/views/visual/packages/index.type';
   import { option } from './config';
   import { SvgIcon } from '/@/components/Icon';
   import { computed } from 'vue';
   import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
+  import { useDataFetch } from '../../../hook/socket/useSocket';
+  import { DataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
 
   const props = defineProps<{
     config: ComponentPropsConfigType<typeof option>;
@@ -33,25 +33,6 @@
     };
   });
 
-  // const svgList = ref<any>([
-  //   {
-  //     value: 26.2,
-  //     name: 'wendu',
-  //     icon: 'zongfushe',
-  //     unit: 'kw',
-  //     iconColor: '#367BFF',
-  //     fontColor: '#357CFB',
-  //   },
-  //   {
-  //     value: 53.7,
-  //     name: 'shidu',
-  //     icon: 'guangzhaoqiangdu',
-  //     unit: '℃',
-  //     iconColor: '#FFA000',
-  //     fontColor: '#FFA000',
-  //   },
-  // ]);
-
   const updateFn: DataFetchUpdateFn = () => {};
 
   useDataFetch(props, updateFn);

 <script lang="ts" setup>
-  import { ComponentPropsConfigType, DataFetchUpdateFn } from '/@/views/visual/packages/index.type';
+  import { ComponentPropsConfigType } from '/@/views/visual/packages/index.type';
   import { option } from './config';
   import { useComponentScale } from '/@/views/visual/packages/hook/useComponentScale';
-  import { useDataFetch } from '/@/views/visual/packages/hook/useSocket';
   import { computed } from 'vue';
   import { ref } from 'vue';
   import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
+  import { useDataFetch } from '../../../hook/socket/useSocket';
+  import { DataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
 
   const props = defineProps<{
     config: ComponentPropsConfigType<typeof option>;

 <script lang="ts" setup>
-  import { ComponentPropsConfigType, DataFetchUpdateFn } from '/@/views/visual/packages/index.type';
+  import { ComponentPropsConfigType } from '/@/views/visual/packages/index.type';
   import { option } from './config';
   import { useComponentScale } from '/@/views/visual/packages/hook/useComponentScale';
-  import { useDataFetch } from '/@/views/visual/packages/hook/useSocket';
   import { computed } from 'vue';
   import { ref } from 'vue';
   import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
   import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
+  import { useDataFetch } from '../../../hook/socket/useSocket';
+  import { DataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
 
   const props = defineProps<{
     config: ComponentPropsConfigType<typeof option>;

 <script lang="ts" setup>
-  import { ComponentPropsConfigType, DataFetchUpdateFn } from '/@/views/visual/packages/index.type';
+  import { ComponentPropsConfigType } from '/@/views/visual/packages/index.type';
   import { option } from './config';
   import { useComponentScale } from '/@/views/visual/packages/hook/useComponentScale';
-  import { useDataFetch } from '/@/views/visual/packages/hook/useSocket';
   import { ref } from 'vue';
   import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
   import { SvgIcon } from '/@/components/Icon';
   import { computed } from 'vue';
   import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
+  import { useDataFetch } from '../../../hook/socket/useSocket';
+  import { DataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
 
   const props = defineProps<{
     config: ComponentPropsConfigType<typeof option>;

 <script lang="ts" setup>
-  import { ComponentPropsConfigType, DataFetchUpdateFn } from '/@/views/visual/packages/index.type';
+  import { ComponentPropsConfigType } from '/@/views/visual/packages/index.type';
   import { option } from './config';
   import { useComponentScale } from '/@/views/visual/packages/hook/useComponentScale';
-  import { useDataFetch } from '/@/views/visual/packages/hook/useSocket';
   import { computed } from 'vue';
   import { ref } from 'vue';
   import { SvgIcon } from '/@/components/Icon';
   import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
+  import { useDataFetch } from '../../../hook/socket/useSocket';
+  import { DataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
 
   const props = defineProps<{
     config: ComponentPropsConfigType<typeof option>;

 <script lang="ts" setup>
   import { option } from './config';
-  // import { useComponentScale } from '/@/views/visual/packages/hook/useComponentScale';
-  import { ComponentPropsConfigType, MultipleDataFetchUpdateFn } from '../../../index.type';
-  import { useMultipleDataFetch } from '/@/views/visual/packages/hook/useSocket';
-  import { computed } from 'vue';
-  import { ref } from 'vue';
+  import { ComponentPropsConfigType } from '../../../index.type';
   import { Progress } from 'ant-design-vue';
   import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
-  import { unref } from 'vue';
-  import { onMounted } from 'vue';
   import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
   import { useReceiveMessage } from '../../../hook/useReceiveMessage';
   import { buildUUID } from '/@/utils/uuid';
   import { useReceiveValue } from '../../../hook/useReceiveValue';
+  import { ref, computed, unref, onMounted } from 'vue';
+  import { useMultipleDataFetch } from '../../../hook/socket/useSocket';
+  import { MultipleDataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
 
   const props = defineProps<{
     config: ComponentPropsConfigType<typeof option>;

 <script lang="ts" setup>
-  import { ComponentPropsConfigType, MultipleDataFetchUpdateFn } from '../../../index.type';
-
+  import { ComponentPropsConfigType } from '../../../index.type';
   import { option } from './config';
-  import { useMultipleDataFetch } from '/@/views/visual/packages/hook/useSocket';
   import { ref, unref } from 'vue';
   import { SvgIcon } from '/@/components/Icon';
   import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
@@ -10,6 +8,8 @@
   import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
   import { useReceiveMessage } from '../../../hook/useReceiveMessage';
   import { useReceiveValue } from '../../../hook/useReceiveValue';
+  import { useMultipleDataFetch } from '../../../hook/socket/useSocket';
+  import { MultipleDataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
 
   const props = defineProps<{
     config: ComponentPropsConfigType<typeof option>;
@@ -42,14 +42,6 @@
           deviceRename,
           id: deviceId,
         };
-        // return {
-        //   unit: unit ?? persetUnit,
-        //   fontColor: fontColor ?? persetFontColor,
-        //   icon: icon ?? persetIcon,
-        //   iconColor: iconColor ?? persetIconColor,
-        //   attribute: attribute || attributeRename,
-        //   attributeRename,
-        // };
       }),
     };
   });
@@ -88,25 +80,7 @@
           time.value = timespan;
         }
       });
-      // });
     });
-    // console.log(unref(svgList), 'svglist');
-    // const { data = {} } = message;
-    // const { dataSource } = unref(getDesign);
-    // svgList.value.length = 0;
-    // svgList.value = dataSource.map((item) => {
-    //   const { icon, iconColor, unit, fontColor, attribute } = item || {};
-    //   const [latest] = data[attribute] || [];
-    //   const [_timespan, value] = latest || [];
-    //   return {
-    //     value: Number(value),
-    //     name: attribute,
-    //     icon,
-    //     unit,
-    //     iconColor,
-    //     fontColor,
-    //   };
-    // });
   };
 
   useMultipleDataFetch(props, updateFn);

 import { Ref, computed, onUnmounted, unref, watch } from 'vue';
-import { WidgetDataType } from '../../palette/hooks/useDataSource';
+import { WidgetDataType } from '../../../palette/hooks/useDataSource';
 import { useWebSocket } from '@vueuse/core';
 import { useGlobSetting } from '/@/hooks/setting';
 import { isShareMode } from '/@/views/sys/share/hook';
 import { getJwtToken, getShareJwtToken } from '/@/utils/auth';
-import { isNullAndUnDef } from '/@/utils/is';
+import { DataSource } from '../../../palette/types';
+import { CUSTOM_SUBSCRIBE_MESSAGE_COMPONENT_KEY_LIST } from '../../package';
 import {
-  ComponentPropsConfigType,
+  CmdUpdateMsg,
+  CmdUpdateTypeEnum,
   DataFetchUpdateFn,
   EntityTypeEnum,
   MultipleDataFetchUpdateFn,
-  ReceiveGroupMessageType,
+  ReceiveAlarmDataCmdsMessageType,
+  ReceiveEntityCountMessageType,
+  ReceiveEntityDataMessageType,
   ReceiveMessageType,
+  ReceiveTsSubCmdsGroupMessageType,
+  ReceiveTsSubCmdsMessageType,
   ScopeTypeEnum,
-  SubscribeMessageItemType,
   SubscribeMessageType,
-} from '../index.type';
-import { DataSource } from '../../palette/types';
+  TsSubCmdsItemType,
+} from './useSocket.type';
+import { ComponentPropsConfigType } from '../../index.type';
 
 interface DeviceGroupMapType {
   subscriptionId: number;
@@ -29,11 +35,18 @@ interface ComponentUpdateFnMapValueType {
   attributes: string[];
 }
 
-const parseMessage = (text: string): ReceiveMessageType => {
+interface CustomSubscribeMapValueType {
+  uuid: string;
+  updateFn?: Fn;
+}
+
+export type CustomSubscribeSendMessageFnType = (cmdId: number) => void;
+
+const parseMessage = (text: string): ReceiveTsSubCmdsMessageType => {
   try {
     return JSON.parse(text);
   } catch (error) {
-    return {} as ReceiveMessageType;
+    return {} as ReceiveTsSubCmdsMessageType;
   }
 };
 
@@ -48,6 +61,8 @@ class Subscriber {
 
   componentGroupUpdateFnMap = new Map<string, ComponentUpdateFnMapValueType[]>();
 
+  customSubscribeMap = new Map<number, CustomSubscribeMapValueType>();
+
   getNextSubscribeId() {
     return this.subscribeId++;
   }
@@ -56,6 +71,8 @@ class Subscriber {
     this.deviceGroupMap.clear();
     this.subscriptionMap.clear();
     this.componentUpdateFnMap.clear();
+    this.componentGroupUpdateFnMap.clear();
+    this.customSubscribeMap.clear();
   };
 
   addSubscriber = (info: Record<'deviceId' | 'slaveDeviceId' | 'attribute' | 'uuid', string>) => {
@@ -85,7 +102,7 @@ class Subscriber {
         entityType: EntityTypeEnum.DEVICE,
         scope: ScopeTypeEnum.LATEST_TELEMERY,
         ...(unsubscribe ? { unsubscribe } : {}),
-      } as SubscribeMessageItemType;
+      } as TsSubCmdsItemType;
     });
     return { tsSubCmds: message } as SubscribeMessageType;
   }
@@ -98,14 +115,14 @@ class Subscriber {
     return this.genBasicMessage();
   }
 
-  getScopeMessage(message: ReceiveMessageType, attribute: string[]) {
+  getScopeMessage(message: ReceiveTsSubCmdsMessageType, attribute: string[]) {
     const data = attribute.reduce((prev, next) => {
       return { ...prev, [next]: (message.data || {})[next] || [[]] };
-    }, {} as ReceiveMessageType['data']);
+    }, {} as ReceiveTsSubCmdsMessageType['data']);
 
     const latestValues = attribute.reduce((prev, next) => {
       return { ...prev, [next]: (message.latestValues || {})[next] || [[]] };
-    }, {} as ReceiveMessageType['data']);
+    }, {} as ReceiveTsSubCmdsMessageType['data']);
 
     return {
       subscriptionId: message.subscriptionId,
@@ -113,10 +130,14 @@ class Subscriber {
       errorMsg: message.errorMsg,
       data,
       latestValues,
-    } as ReceiveMessageType;
+    } as ReceiveTsSubCmdsMessageType;
   }
 
-  getGroupScopeMessage(message: ReceiveMessageType, attribute: string[], deviceId: string) {
+  getGroupScopeMessage(
+    message: ReceiveTsSubCmdsMessageType,
+    attribute: string[],
+    deviceId: string
+  ) {
     const result = this.getScopeMessage(message, attribute);
 
     return {
@@ -127,7 +148,13 @@ class Subscriber {
       latestValues: {
         [deviceId]: result.latestValues,
       },
-    } as ReceiveGroupMessageType;
+    } as ReceiveTsSubCmdsGroupMessageType;
+  }
+
+  customSubscribe(uuid: string, sendMessageFn: CustomSubscribeSendMessageFnType, updateFn: Fn) {
+    const cmdId = this.getNextSubscribeId();
+    this.customSubscribeMap.set(cmdId, { uuid, updateFn });
+    sendMessageFn(cmdId);
   }
 
   trackUpdate(uuid: string, fn: Fn) {
@@ -144,8 +171,30 @@ class Subscriber {
   }
 
   triggerUpdate(message: ReceiveMessageType) {
+    if (message.errorCode) {
+      return;
+    }
+
+    if (isEntityDataUpdateMsg(message)) {
+      return;
+    }
+
+    if (isAlarmDataUpdateMsg(message)) {
+      this.triggerAlarmDataMesssage(message);
+      return;
+    }
+
+    if (isEntityCountUpdateMsg(message)) {
+      return;
+    }
+
+    if (message.subscriptionId) {
+      this.triggerTsSubCmdsMessage(message);
+    }
+  }
+
+  triggerTsSubCmdsMessage(message: ReceiveTsSubCmdsMessageType) {
     const { subscriptionId } = message;
-    if (isNullAndUnDef(subscriptionId)) return;
     const deviceId = this.subscriptionMap.get(subscriptionId);
     if (!deviceId) return;
     const deviceGroup = this.deviceGroupMap.get(deviceId);
@@ -179,6 +228,21 @@ class Subscriber {
       }
     });
   }
+
+  triggerAlarmDataMesssage(message: ReceiveAlarmDataCmdsMessageType) {
+    const { cmdId } = message;
+    const isCustomSubscribeMessage = this.customSubscribeMap.get(cmdId);
+    if (isCustomSubscribeMessage) {
+      const updateFn = isCustomSubscribeMessage.updateFn;
+      try {
+        updateFn?.(message);
+      } catch (error) {
+        console.error(`Custom subscribe message invoke update function failed`);
+        throw error;
+      }
+      return;
+    }
+  }
 }
 
 const subscriber = new Subscriber();
@@ -206,12 +270,14 @@ export const useSocket = (dataSourceRef: Ref<WidgetDataType[]>) => {
 
   const initSubscribe = () => {
     subscriber.clearSubscriber();
-    unref(dataSourceRef).forEach((item) => {
-      item.dataSource.forEach((temp) => {
+
+    for (const item of unref(dataSourceRef)) {
+      if (CUSTOM_SUBSCRIBE_MESSAGE_COMPONENT_KEY_LIST.includes(item.frontId)) continue;
+      for (const temp of item.dataSource) {
         const { deviceId, slaveDeviceId, attribute, uuid } = temp;
         subscriber.addSubscriber({ deviceId, slaveDeviceId, attribute, uuid });
-      });
-    });
+      }
+    }
   };
 
   watch(
@@ -234,8 +300,34 @@ export const useSocket = (dataSourceRef: Ref<WidgetDataType[]>) => {
   onUnmounted(() => {
     close();
   });
+
+  return {
+    send,
+    close,
+  };
 };
 
+export function isEntityDataUpdateMsg(
+  message: ReceiveMessageType
+): message is ReceiveEntityDataMessageType {
+  const updateMsg = message as CmdUpdateMsg;
+  return updateMsg.cmdId !== undefined && updateMsg.cmdUpdateType === CmdUpdateTypeEnum.ENTITY_DATA;
+}
+
+export function isAlarmDataUpdateMsg(
+  message: ReceiveMessageType
+): message is ReceiveAlarmDataCmdsMessageType {
+  const updateMsg = message as CmdUpdateMsg;
+  return updateMsg.cmdId !== undefined && updateMsg.cmdUpdateType === CmdUpdateTypeEnum.ALARM_DATA;
+}
+
+export function isEntityCountUpdateMsg(
+  message: ReceiveMessageType
+): message is ReceiveEntityCountMessageType {
+  const updateMsg = message as CmdUpdateMsg;
+  return updateMsg.cmdId !== undefined && updateMsg.cmdUpdateType === CmdUpdateTypeEnum.COUNT_DATA;
+}
+
 export const useDataFetch = (
   props: { config: ComponentPropsConfigType },
   updateFn: DataFetchUpdateFn
@@ -288,16 +380,6 @@ export const useMultipleDataFetch = (
   });
 
   if (!Object.keys(unref(getDataSourceGroup)).length) return;
-  // const getBindAttributes = computed(() => {
-  //   const attributes = props.config.option.dataSource?.map((item) => item.attribute);
-  //   return [...new Set(attributes)];
-  // });
-
-  // if (!unref(getBindAttributes).length) return;
-
-  // const getDeviceId = computed(() => {
-  //   return props.config.option.dataSource?.at(0)?.deviceId;
-  // });
 
   watch(
     () => getDataSourceGroup,
@@ -318,3 +400,23 @@ export const useMultipleDataFetch = (
 
   return {};
 };
+
+export const useCustomDataFetch = (
+  props: { config: ComponentPropsConfigType },
+  transformMessage: Fn,
+  updateFn: Fn
+) => {
+  const getUUID = computed(() => {
+    return props.config.option.uuid;
+  });
+
+  watch(
+    () => getUUID,
+    () => {
+      subscriber.customSubscribe(props.config.option.uuid, transformMessage, updateFn);
+    },
+    {
+      immediate: true,
+    }
+  );
+};

+export interface SubscribeMessageType {
+  tsSubCmds?: TsSubCmdsItemType[];
+  alarmDataCmds?: AlarmDataCmdsItemType[];
+  alarmDataUnsubscribeCmds?: UnsubscribeCmdsItemType[];
+  attrSubCmds?: [];
+  entityCountCmds?: [];
+  entityCountUnsubscribeCmds?: UnsubscribeCmdsItemType[];
+  entityDataCmds?: [];
+  entityDataUnsubscribeCmds?: UnsubscribeCmdsItemType[];
+  historyCmds?: [];
+}
+
+export interface UnsubscribeCmdsItemType {
+  cmdId: number;
+}
+
+export enum CmdUpdateTypeEnum {
+  ENTITY_DATA = 'ENTITY_DATA',
+  ALARM_DATA = 'ALARM_DATA',
+  COUNT_DATA = 'COUNT_DATA',
+}
+
+export interface AlarmDataCmdsItemType {
+  cmdId: number;
+}
+
+export interface TsSubCmdsItemType {
+  cmdId: number;
+  entityId: string;
+  entityType: string;
+  keys?: string;
+  scope?: string;
+  unsubscribe?: boolean;
+}
+
+export interface ReceiveTsSubCmdsMessageType {
+  subscriptionId: number;
+  errorCode: number;
+  errorMsg: Nullable<string>;
+  data: Record<string, [number, string][]>;
+  latestValues: Record<string, number>;
+}
+
+export interface ReceiveTsSubCmdsGroupMessageType {
+  subscriptionId: number;
+  errorCode: number;
+  errorMsg: Nullable<string>;
+  data: {
+    string: Record<string, [number, string][]>;
+  };
+  latestValues: {
+    string: Record<string, number>;
+  };
+}
+
+export interface PageData<T> {
+  data: T[];
+  totalPages: number;
+  totalElements: number;
+  hasNext: boolean;
+}
+
+export interface CmdUpdateMsg {
+  cmdId: number;
+  errorCode: number;
+  errorMsg: string;
+  cmdUpdateType: CmdUpdateTypeEnum;
+}
+
+export interface DataUpdateMsg<T> extends CmdUpdateMsg {
+  data?: PageData<T>;
+  update?: T[];
+}
+
+export enum EntityType {
+  TENANT = 'TENANT',
+  TENANT_PROFILE = 'TENANT_PROFILE',
+  CUSTOMER = 'CUSTOMER',
+  USER = 'USER',
+  DASHBOARD = 'DASHBOARD',
+  ASSET = 'ASSET',
+  DEVICE = 'DEVICE',
+  DEVICE_PROFILE = 'DEVICE_PROFILE',
+  ASSET_PROFILE = 'ASSET_PROFILE',
+  ALARM = 'ALARM',
+  RULE_CHAIN = 'RULE_CHAIN',
+  RULE_NODE = 'RULE_NODE',
+  EDGE = 'EDGE',
+  ENTITY_VIEW = 'ENTITY_VIEW',
+  WIDGETS_BUNDLE = 'WIDGETS_BUNDLE',
+  WIDGET_TYPE = 'WIDGET_TYPE',
+  API_USAGE_STATE = 'API_USAGE_STATE',
+  TB_RESOURCE = 'TB_RESOURCE',
+  OTA_PACKAGE = 'OTA_PACKAGE',
+  RPC = 'RPC',
+  QUEUE = 'QUEUE',
+}
+
+export enum AliasEntityType {
+  CURRENT_CUSTOMER = 'CURRENT_CUSTOMER',
+  CURRENT_TENANT = 'CURRENT_TENANT',
+  CURRENT_USER = 'CURRENT_USER',
+  CURRENT_USER_OWNER = 'CURRENT_USER_OWNER',
+}
+
+export interface HasUUID {
+  id: string;
+}
+
+export interface TsValue {
+  ts: number;
+  value: string;
+  count?: number;
+}
+
+export interface EntityId extends HasUUID {
+  entityType: EntityType | AliasEntityType;
+}
+
+export interface ComparisonTsValue {
+  current?: TsValue;
+  previous?: TsValue;
+}
+
+export interface EntityData {
+  entityId: EntityId;
+  latest: { [entityKeyType: string]: { [key: string]: TsValue } };
+  timeseries: { [key: string]: TsValue[] };
+  aggLatest?: { [id: number]: ComparisonTsValue };
+}
+
+/**
+ * @description entity data receive message
+ */
+export interface ReceiveEntityDataMessageType extends DataUpdateMsg<EntityData> {
+  cmdUpdateType: CmdUpdateTypeEnum.ENTITY_DATA;
+}
+
+/**
+ * @description 告警
+ */
+export interface ReceiveAlarmDataCmdsMessageType extends DataUpdateMsg<Recordable> {
+  cmdUpdateType: CmdUpdateTypeEnum.ALARM_DATA;
+  allowedEntities: number;
+  totalEntities: number;
+}
+
+/**
+ * @description entity count receive message
+ */
+export interface ReceiveEntityCountMessageType extends CmdUpdateMsg {
+  cmdUpdateType: CmdUpdateTypeEnum.COUNT_DATA;
+  count: number;
+}
+
+/**
+ * @description 接受消息
+ */
+export type ReceiveMessageType =
+  | ReceiveTsSubCmdsMessageType
+  | ReceiveAlarmDataCmdsMessageType
+  | ReceiveEntityDataMessageType
+  | ReceiveEntityCountMessageType;
+
+export enum EntityTypeEnum {
+  DEVICE = 'DEVICE',
+}
+
+export enum ScopeTypeEnum {
+  LATEST_TELEMERY = 'LATEST_TELEMERY',
+}
+
+export enum AttributeScopeEnum {
+  CLIENT_SCOPE = 'CLIENT_SCOPE',
+  SERVER_SCOPE = 'SERVER_SCOPE',
+  SHARED_SCOPE = 'SHARED_SCOPE',
+}
+
+export type DataFetchUpdateFn = (message: ReceiveTsSubCmdsMessageType, attr: string) => void;
+
+export type MultipleDataFetchUpdateFn = (
+  message: ReceiveTsSubCmdsGroupMessageType,
+  deviceId: string,
+  attr: string[]
+) => void;

-import { ReceiveGroupMessageType } from '../index.type';
+import { ReceiveTsSubCmdsGroupMessageType } from '../index.type';
 
 export const useReceiveMessage = () => {
   const forEachGroupMessage = (
-    message: ReceiveGroupMessageType,
+    message: ReceiveTsSubCmdsGroupMessageType,
     deviceId: string,
     attributes: string[],
     Fn: (attribute: string, value: any, timespan: number) => void

@@ -140,68 +140,3 @@ export interface PackagesType {
   // [PackagesCategoryEnum.STATISTICS]: ConfigType[];
   [PackagesCategoryEnum.OTHER]: ConfigType[];
 }
-
-export interface SubscribeMessageType {
-  tsSubCmds: SubscribeMessageItemType[];
-}
-
-export interface SubscribeMessageItemType {
-  cmdId: number;
-  entityId: string;
-  entityType: string;
-  keys?: string;
-  scope?: string;
-  unsubscribe?: boolean;
-}
-
-export interface ReceiveMessageType {
-  subscriptionId: number;
-  errorCode: number;
-  errorMsg: Nullable<string>;
-  data: Record<string, [number, string][]>;
-  latestValues: Record<string, number>;
-}
-
-export interface ReceiveGroupMessageType {
-  subscriptionId: number;
-  errorCode: number;
-  errorMsg: Nullable<string>;
-  data: {
-    string: Record<string, [number, string][]>;
-  };
-  latestValues: {
-    string: Record<string, number>;
-  };
-}
-
-export enum EntityTypeEnum {
-  DEVICE = 'DEVICE',
-}
-
-export enum ScopeTypeEnum {
-  LATEST_TELEMERY = 'LATEST_TELEMERY',
-}
-
-export type DataFetchUpdateFn = (message: ReceiveMessageType, attr: string) => void;
-
-export type MultipleDataFetchUpdateFn = (
-  message: ReceiveGroupMessageType,
-  deviceId: string,
-  attr: string[]
-) => void;
-
-// 旧 组件key
-// TEXT_COMPONENT_1 = 'text-component-1',
-// TEXT_COMPONENT_2 = 'text-component-2',
-// TEXT_COMPONENT_3 = 'text-component-3',
-// TEXT_COMPONENT_4 = 'text-component-4',
-// TEXT_COMPONENT_5 = 'text-component-5',
-// INSTRUMENT_COMPONENT_1 = 'instrument-component-1',
-// INSTRUMENT_COMPONENT_2 = 'instrument-component-2',
-// DIGITAL_DASHBOARD_COMPONENT = 'digital-dashboard-component',
-// PICTURE_COMPONENT_1 = 'picture-component-1',
-// CONTROL_COMPONENT_TOGGLE_SWITCH = 'control-component-toggle-switch',
-// CONTROL_COMPONENT_SWITCH_WITH_ICON = 'control-component-switch-with-icon',
-// CONTROL_COMPONENT_SLIDING_SWITCH = 'control-component-sliding-switch',
-// MAP_COMPONENT_TRACK_REAL = 'map-component-track-real',
-// MAP_COMPONENT_TRACK_HISTORY = 'map-component-track-history',

@@ -18,3 +18,8 @@ export const packageList: PackagesType = {
   // [PackagesCategoryEnum.STATISTICS]: STATISTICSList,
   [PackagesCategoryEnum.OTHER]: OtherList,
 };
+
+/**
+ * @description
+ */
+export const CUSTOM_SUBSCRIBE_MESSAGE_COMPONENT_KEY_LIST: string[] = [];

+import { inject, provide } from 'vue';
+
+const SymbolKey = Symbol('data-board');
+
+export interface ContextOptionsType {
+  send: (data: string | ArrayBuffer | Blob, useBuffer?: boolean | undefined) => boolean;
+  close: (code?: number | undefined, reason?: string | undefined) => void;
+}
+
+export const createDataBoardContext = (options: ContextOptionsType) => {
+  provide(SymbolKey, options);
+};
+
+export const useDataBoardContext = () => {
+  return inject<ContextOptionsType>(SymbolKey) || ({} as Partial<ContextOptionsType>);
+};

@@ -25,10 +25,11 @@
   import { ModalParamsType } from '/#/utils';
   import { DataActionModeEnum } from '/@/enums/toolEnum';
   import { HistoryTrendModal } from './components/HistoryTrendModal';
-  import { useSocket } from '../packages/hook/useSocket';
   import { watch } from 'vue';
   import { useRootSetting } from '/@/hooks/setting/useRootSetting';
   import { ThemeEnum } from '/@/enums/appEnum';
+  import { createDataBoardContext } from './hooks/useDataBoardContext';
+  import { useSocket } from '/@/views/visual/packages/hook/socket/useSocket';
 
   const props = defineProps<{
     value?: Recordable;
@@ -72,7 +73,9 @@
     openTrendModal(true, { mode: DataActionModeEnum.READ, record: data } as ModalParamsType);
   };
 
-  useSocket(dataSource);
+  const { send, close } = useSocket(dataSource);
+
+  createDataBoardContext({ send, close });
 
   const { getDarkMode } = useRootSetting();
   watch(
@@ -164,3 +167,4 @@
 </template>
 
 <style lang="less" scoped></style>
+../packages/hook/socket/useSocket