简柏林 / thingskit-front · Commits

Commit 92b3279bbe49dfa0a3236f121036fcf28d96a767

Authored by ww
1 parent 40c29078

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

Inline Side-by-side
Showing 40 changed files with 446 additions and 263 deletions
1 <script lang="ts" setup> 1 <script lang="ts" setup>
2 - import { ComponentPropsConfigType, DataFetchUpdateFn } from '/@/views/visual/packages/index.type'; 2 + import { ComponentPropsConfigType } from '/@/views/visual/packages/index.type';
3 import { option } from './config'; 3 import { option } from './config';
4 - import { useDataFetch } from '/@/views/visual/packages/hook/useSocket';  
5 import { Spin } from 'ant-design-vue'; 4 import { Spin } from 'ant-design-vue';
6 import { computed, ref } from 'vue'; 5 import { computed, ref } from 'vue';
7 import { useComponentScale } from '../../../hook/useComponentScale'; 6 import { useComponentScale } from '../../../hook/useComponentScale';
8 import { useSendCommand } from '../../../hook/useSendCommand'; 7 import { useSendCommand } from '../../../hook/useSendCommand';
9 import { DeviceName } from '/@/views/visual/commonComponents/DeviceName'; 8 import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
  9 + import { DataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
  10 + import { useDataFetch } from '../../../hook/socket/useSocket';
10 11
11 const props = defineProps<{ 12 const props = defineProps<{
12 config: ComponentPropsConfigType<typeof option>; 13 config: ComponentPropsConfigType<typeof option>;
1 <script lang="ts" setup> 1 <script lang="ts" setup>
2 - import { ComponentPropsConfigType, DataFetchUpdateFn } from '/@/views/visual/packages/index.type'; 2 + import { ComponentPropsConfigType } from '/@/views/visual/packages/index.type';
3 import { option } from './config'; 3 import { option } from './config';
4 - import { useDataFetch } from '/@/views/visual/packages/hook/useSocket';  
5 import { SvgIcon } from '/@/components/Icon'; 4 import { SvgIcon } from '/@/components/Icon';
6 import { Switch } from 'ant-design-vue'; 5 import { Switch } from 'ant-design-vue';
7 import { computed, ref } from 'vue'; 6 import { computed, ref } from 'vue';
@@ -9,6 +8,8 @@ @@ -9,6 +8,8 @@
9 import { useSendCommand } from '../../../hook/useSendCommand'; 8 import { useSendCommand } from '../../../hook/useSendCommand';
10 import { unref } from 'vue'; 9 import { unref } from 'vue';
11 import { DeviceName } from '/@/views/visual/commonComponents/DeviceName'; 10 import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
  11 + import { DataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
  12 + import { useDataFetch } from '../../../hook/socket/useSocket';
12 13
13 const props = defineProps<{ 14 const props = defineProps<{
14 config: ComponentPropsConfigType<typeof option>; 15 config: ComponentPropsConfigType<typeof option>;
1 <script lang="ts" setup> 1 <script lang="ts" setup>
2 - import { ComponentPropsConfigType, DataFetchUpdateFn } from '/@/views/visual/packages/index.type'; 2 + import { ComponentPropsConfigType } from '/@/views/visual/packages/index.type';
3 import { option } from './config'; 3 import { option } from './config';
4 - import { useDataFetch } from '/@/views/visual/packages/hook/useSocket';  
5 import { Spin } from 'ant-design-vue'; 4 import { Spin } from 'ant-design-vue';
6 import { computed, ref } from 'vue'; 5 import { computed, ref } from 'vue';
7 import { useComponentScale } from '../../../hook/useComponentScale'; 6 import { useComponentScale } from '../../../hook/useComponentScale';
8 import { useSendCommand } from '../../../hook/useSendCommand'; 7 import { useSendCommand } from '../../../hook/useSendCommand';
9 import { DeviceName } from '/@/views/visual/commonComponents/DeviceName'; 8 import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
  9 + import { DataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
  10 + import { useDataFetch } from '../../../hook/socket/useSocket';
10 11
11 const props = defineProps<{ 12 const props = defineProps<{
12 config: ComponentPropsConfigType<typeof option>; 13 config: ComponentPropsConfigType<typeof option>;
1 <script lang="ts" setup> 1 <script lang="ts" setup>
2 - import { ComponentPropsConfigType, DataFetchUpdateFn } from '/@/views/visual/packages/index.type'; 2 + import { ComponentPropsConfigType } from '/@/views/visual/packages/index.type';
3 import { option } from './config'; 3 import { option } from './config';
4 - import { useDataFetch } from '/@/views/visual/packages/hook/useSocket';  
5 import { Slider, Spin } from 'ant-design-vue'; 4 import { Slider, Spin } from 'ant-design-vue';
6 import { computed, ref, unref } from 'vue'; 5 import { computed, ref, unref } from 'vue';
7 import { useComponentScale } from '../../../hook/useComponentScale'; 6 import { useComponentScale } from '../../../hook/useComponentScale';
8 import { DeviceName } from '/@/views/visual/commonComponents/DeviceName'; 7 import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
9 import { useSendCommand } from '../../../hook/useSendCommand'; 8 import { useSendCommand } from '../../../hook/useSendCommand';
10 import { useReceiveValue } from '../../../hook/useReceiveValue'; 9 import { useReceiveValue } from '../../../hook/useReceiveValue';
  10 + import { DataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
  11 + import { useDataFetch } from '../../../hook/socket/useSocket';
11 12
12 const props = defineProps<{ 13 const props = defineProps<{
13 config: ComponentPropsConfigType<typeof option>; 14 config: ComponentPropsConfigType<typeof option>;
1 <script lang="ts" setup> 1 <script lang="ts" setup>
2 - import {  
3 - ComponentPropsConfigType,  
4 - MultipleDataFetchUpdateFn,  
5 - } from '/@/views/visual/packages/index.type'; 2 + import { ComponentPropsConfigType } from '/@/views/visual/packages/index.type';
6 import { option } from './config'; 3 import { option } from './config';
7 - import { useMultipleDataFetch } from '/@/views/visual/packages/hook/useSocket';  
8 import { SvgIcon } from '/@/components/Icon'; 4 import { SvgIcon } from '/@/components/Icon';
9 import { Switch } from 'ant-design-vue'; 5 import { Switch } from 'ant-design-vue';
10 import { computed, ref } from 'vue'; 6 import { computed, ref } from 'vue';
@@ -12,6 +8,8 @@ @@ -12,6 +8,8 @@
12 import { useSendCommand } from '../../../hook/useSendCommand'; 8 import { useSendCommand } from '../../../hook/useSendCommand';
13 import { unref } from 'vue'; 9 import { unref } from 'vue';
14 import { DeviceName } from '/@/views/visual/commonComponents/DeviceName'; 10 import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
  11 + import { MultipleDataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
  12 + import { useMultipleDataFetch } from '../../../hook/socket/useSocket';
15 13
16 const props = defineProps<{ 14 const props = defineProps<{
17 config: ComponentPropsConfigType<typeof option>; 15 config: ComponentPropsConfigType<typeof option>;
1 <script lang="ts" setup> 1 <script lang="ts" setup>
2 - import { ComponentPropsConfigType, DataFetchUpdateFn } from '/@/views/visual/packages/index.type'; 2 + import { ComponentPropsConfigType } from '/@/views/visual/packages/index.type';
3 import { option } from './config'; 3 import { option } from './config';
4 - import { useDataFetch } from '/@/views/visual/packages/hook/useSocket';  
5 import { computed } from 'vue'; 4 import { computed } from 'vue';
6 import { ref } from 'vue'; 5 import { ref } from 'vue';
7 import { unref } from 'vue'; 6 import { unref } from 'vue';
8 import { DeviceName } from '/@/views/visual/commonComponents/DeviceName'; 7 import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
9 import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime'; 8 import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
  9 + import { useDataFetch } from '../../../hook/socket/useSocket';
  10 + import { DataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
10 11
11 const props = defineProps<{ 12 const props = defineProps<{
12 config: ComponentPropsConfigType<typeof option>; 13 config: ComponentPropsConfigType<typeof option>;
1 <script lang="ts" setup> 1 <script lang="ts" setup>
2 - import { ComponentPropsConfigType, DataFetchUpdateFn } from '/@/views/visual/packages/index.type'; 2 + import { ComponentPropsConfigType } from '/@/views/visual/packages/index.type';
3 import { option } from './config'; 3 import { option } from './config';
4 - import { useDataFetch } from '/@/views/visual/packages/hook/useSocket';  
5 import { computed } from 'vue'; 4 import { computed } from 'vue';
6 import { ref } from 'vue'; 5 import { ref } from 'vue';
7 import { unref } from 'vue'; 6 import { unref } from 'vue';
8 import { DeviceName } from '/@/views/visual/commonComponents/DeviceName'; 7 import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
9 import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime'; 8 import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
  9 + import { useDataFetch } from '../../../hook/socket/useSocket';
  10 + import { DataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
10 11
11 const props = defineProps<{ 12 const props = defineProps<{
12 config: ComponentPropsConfigType<typeof option>; 13 config: ComponentPropsConfigType<typeof option>;
1 <script lang="ts" setup> 1 <script lang="ts" setup>
2 - import { ComponentPropsConfigType, DataFetchUpdateFn } from '/@/views/visual/packages/index.type'; 2 + import { ComponentPropsConfigType } from '/@/views/visual/packages/index.type';
3 import { option } from './config'; 3 import { option } from './config';
4 - import { useDataFetch } from '/@/views/visual/packages/hook/useSocket';  
5 import { ref } from 'vue'; 4 import { ref } from 'vue';
6 import { computed } from 'vue'; 5 import { computed } from 'vue';
7 import { unref } from 'vue'; 6 import { unref } from 'vue';
8 import { DeviceName } from '/@/views/visual/commonComponents/DeviceName'; 7 import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
9 import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime'; 8 import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
  9 + import { useDataFetch } from '../../../hook/socket/useSocket';
  10 + import { DataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
10 11
11 const props = defineProps<{ 12 const props = defineProps<{
12 config: ComponentPropsConfigType<typeof option>; 13 config: ComponentPropsConfigType<typeof option>;
1 <script lang="ts" setup> 1 <script lang="ts" setup>
2 - import { ComponentPropsConfigType, DataFetchUpdateFn } from '/@/views/visual/packages/index.type'; 2 + import { ComponentPropsConfigType } from '/@/views/visual/packages/index.type';
3 import { option } from './config'; 3 import { option } from './config';
4 - import { useDataFetch } from '/@/views/visual/packages/hook/useSocket';  
5 import { ref, computed, unref } from 'vue'; 4 import { ref, computed, unref } from 'vue';
6 import { Space } from 'ant-design-vue'; 5 import { Space } from 'ant-design-vue';
7 import { useComponentScale } from '/@/views/visual/packages/hook/useComponentScale'; 6 import { useComponentScale } from '/@/views/visual/packages/hook/useComponentScale';
8 import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime'; 7 import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
9 import { DeviceName } from '/@/views/visual/commonComponents/DeviceName'; 8 import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
  9 + import { useDataFetch } from '../../../hook/socket/useSocket';
  10 + import { DataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
10 11
11 const props = defineProps<{ 12 const props = defineProps<{
12 config: ComponentPropsConfigType<typeof option>; 13 config: ComponentPropsConfigType<typeof option>;
1 <script lang="ts" setup> 1 <script lang="ts" setup>
2 import { EChartsOption, ECharts, init } from 'echarts'; 2 import { EChartsOption, ECharts, init } from 'echarts';
3 import { unref, ref, onMounted, computed, nextTick } from 'vue'; 3 import { unref, ref, onMounted, computed, nextTick } from 'vue';
4 - import { useDataFetch } from '../../../hook/useSocket';  
5 - import { ComponentPropsConfigType, DataFetchUpdateFn } from '../../../index.type'; 4 + import { ComponentPropsConfigType } from '../../../index.type';
6 import { option } from './config'; 5 import { option } from './config';
7 import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime'; 6 import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
8 import { useIntervalFn } from '@vueuse/core'; 7 import { useIntervalFn } from '@vueuse/core';
9 import { useComponentScale } from '../../../hook/useComponentScale'; 8 import { useComponentScale } from '../../../hook/useComponentScale';
10 import { isArray } from '/@/utils/is'; 9 import { isArray } from '/@/utils/is';
11 import { DeviceName } from '/@/views/visual/commonComponents/DeviceName'; 10 import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
  11 + import { useDataFetch } from '../../../hook/socket/useSocket';
  12 + import { DataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
12 13
13 const props = defineProps<{ 14 const props = defineProps<{
14 config: ComponentPropsConfigType<typeof option>; 15 config: ComponentPropsConfigType<typeof option>;
1 <script lang="ts" setup> 1 <script lang="ts" setup>
2 import { EChartsOption, ECharts, init } from 'echarts'; 2 import { EChartsOption, ECharts, init } from 'echarts';
3 import { unref, ref, onMounted, computed, nextTick } from 'vue'; 3 import { unref, ref, onMounted, computed, nextTick } from 'vue';
4 - import { useDataFetch } from '../../../hook/useSocket';  
5 - import { ComponentPropsConfigType, DataFetchUpdateFn } from '../../../index.type'; 4 + import { ComponentPropsConfigType } from '../../../index.type';
6 import { option } from './config'; 5 import { option } from './config';
7 import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime'; 6 import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
8 import { useIntervalFn } from '@vueuse/core'; 7 import { useIntervalFn } from '@vueuse/core';
9 import { DeviceName } from '/@/views/visual/commonComponents/DeviceName'; 8 import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
10 import { isArray } from '/@/utils/is'; 9 import { isArray } from '/@/utils/is';
11 import { useComponentScale } from '/@/views/visual/packages/hook/useComponentScale'; 10 import { useComponentScale } from '/@/views/visual/packages/hook/useComponentScale';
  11 + import { useDataFetch } from '../../../hook/socket/useSocket';
  12 + import { DataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
12 13
13 const props = defineProps<{ 14 const props = defineProps<{
14 config: ComponentPropsConfigType<typeof option>; 15 config: ComponentPropsConfigType<typeof option>;
1 <script lang="ts" setup> 1 <script lang="ts" setup>
2 import { EChartsOption, ECharts, init } from 'echarts'; 2 import { EChartsOption, ECharts, init } from 'echarts';
3 import { unref, ref, onMounted, computed, nextTick } from 'vue'; 3 import { unref, ref, onMounted, computed, nextTick } from 'vue';
4 - import { useMultipleDataFetch } from '../../../hook/useSocket';  
5 - import { ComponentPropsConfigType, MultipleDataFetchUpdateFn } from '../../../index.type'; 4 + import { ComponentPropsConfigType } from '../../../index.type';
6 import { option } from './config'; 5 import { option } from './config';
7 import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime'; 6 import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
8 // import { useIntervalFn } from '@vueuse/core'; 7 // import { useIntervalFn } from '@vueuse/core';
@@ -10,6 +9,7 @@ @@ -10,6 +9,7 @@
10 import { useComponentScale } from '/@/views/visual/packages/hook/useComponentScale'; 9 import { useComponentScale } from '/@/views/visual/packages/hook/useComponentScale';
11 import { useReceiveMessage } from '../../../hook/useReceiveMessage'; 10 import { useReceiveMessage } from '../../../hook/useReceiveMessage';
12 import { useReceiveValue } from '../../../hook/useReceiveValue'; 11 import { useReceiveValue } from '../../../hook/useReceiveValue';
  12 + import { MultipleDataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
13 13
14 const props = defineProps<{ 14 const props = defineProps<{
15 config: ComponentPropsConfigType<typeof option>; 15 config: ComponentPropsConfigType<typeof option>;
1 <script lang="ts" setup> 1 <script lang="ts" setup>
2 import { EChartsOption, ECharts, init } from 'echarts'; 2 import { EChartsOption, ECharts, init } from 'echarts';
3 import { unref, ref, onMounted, computed, nextTick } from 'vue'; 3 import { unref, ref, onMounted, computed, nextTick } from 'vue';
4 - import { useDataFetch } from '../../../hook/useSocket';  
5 - import { ComponentPropsConfigType, DataFetchUpdateFn } from '../../../index.type'; 4 + import { ComponentPropsConfigType } from '../../../index.type';
6 import { option } from './config'; 5 import { option } from './config';
7 import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime'; 6 import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
8 import { useIntervalFn } from '@vueuse/core'; 7 import { useIntervalFn } from '@vueuse/core';
9 import { useComponentScale } from '../../../hook/useComponentScale'; 8 import { useComponentScale } from '../../../hook/useComponentScale';
10 import { DeviceName } from '/@/views/visual/commonComponents/DeviceName'; 9 import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
  10 + import { useDataFetch } from '../../../hook/socket/useSocket';
  11 + import { DataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
11 12
12 const props = defineProps<{ 13 const props = defineProps<{
13 config: ComponentPropsConfigType<typeof option>; 14 config: ComponentPropsConfigType<typeof option>;
@@ -3,8 +3,7 @@ @@ -3,8 +3,7 @@
3 import { onMounted } from 'vue'; 3 import { onMounted } from 'vue';
4 import { unref } from 'vue'; 4 import { unref } from 'vue';
5 import { ref } from 'vue'; 5 import { ref } from 'vue';
6 - import { useDataFetch } from '../../../hook/useSocket';  
7 - import { ComponentPropsConfigType, DataFetchUpdateFn } from '../../../index.type'; 6 + import { ComponentPropsConfigType } from '../../../index.type';
8 import { option } from './config'; 7 import { option } from './config';
9 import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime'; 8 import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
10 import { useIntervalFn } from '@vueuse/core'; 9 import { useIntervalFn } from '@vueuse/core';
@@ -12,6 +11,8 @@ @@ -12,6 +11,8 @@
12 import { useComponentScale } from '../../../hook/useComponentScale'; 11 import { useComponentScale } from '../../../hook/useComponentScale';
13 import { nextTick } from 'vue'; 12 import { nextTick } from 'vue';
14 import { DeviceName } from '/@/views/visual/commonComponents/DeviceName'; 13 import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
  14 + import { useDataFetch } from '../../../hook/socket/useSocket';
  15 + import { DataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
15 16
16 const props = defineProps<{ 17 const props = defineProps<{
17 config: ComponentPropsConfigType<typeof option>; 18 config: ComponentPropsConfigType<typeof option>;
1 <script lang="ts" setup> 1 <script lang="ts" setup>
2 - import { ComponentPropsConfigType, DataFetchUpdateFn } from '/@/views/visual/packages/index.type'; 2 + import { ComponentPropsConfigType } from '/@/views/visual/packages/index.type';
3 import { Gradient, GradientColor, option } from './config'; 3 import { Gradient, GradientColor, option } from './config';
4 - import { useDataFetch } from '/@/views/visual/packages/hook/useSocket';  
5 import { ECharts, EChartsOption, init } from 'echarts'; 4 import { ECharts, EChartsOption, init } from 'echarts';
6 import { ref, unref, onMounted, computed } from 'vue'; 5 import { ref, unref, onMounted, computed } from 'vue';
7 import { isArray } from '/@/utils/is'; 6 import { isArray } from '/@/utils/is';
@@ -11,6 +10,8 @@ @@ -11,6 +10,8 @@
11 import { useIntervalFn } from '@vueuse/core'; 10 import { useIntervalFn } from '@vueuse/core';
12 import { nextTick } from 'vue'; 11 import { nextTick } from 'vue';
13 import { DeviceName } from '/@/views/visual/commonComponents/DeviceName'; 12 import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
  13 + import { useDataFetch } from '../../../hook/socket/useSocket';
  14 + import { DataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
14 15
15 const props = defineProps<{ 16 const props = defineProps<{
16 config: ComponentPropsConfigType<typeof option>; 17 config: ComponentPropsConfigType<typeof option>;
1 <script lang="ts" setup> 1 <script lang="ts" setup>
2 - import {  
3 - ComponentPropsConfigType,  
4 - MultipleDataFetchUpdateFn,  
5 - } from '/@/views/visual/packages/index.type'; 2 + import { ComponentPropsConfigType } from '/@/views/visual/packages/index.type';
6 import { option } from './config'; 3 import { option } from './config';
7 - import { useMultipleDataFetch } from '/@/views/visual/packages/hook/useSocket';  
8 import { useBaiduMapSDK } from '../../../hook/useBaiduMapSDK'; 4 import { useBaiduMapSDK } from '../../../hook/useBaiduMapSDK';
9 import { ref, unref } from 'vue'; 5 import { ref, unref } from 'vue';
10 import { buildUUID } from '/@/utils/uuid'; 6 import { buildUUID } from '/@/utils/uuid';
11 import { Spin } from 'ant-design-vue'; 7 import { Spin } from 'ant-design-vue';
12 import { computed } from 'vue'; 8 import { computed } from 'vue';
13 import { useMapTrackPlayBack } from './useMapTrackPlayback'; 9 import { useMapTrackPlayBack } from './useMapTrackPlayback';
  10 + import { useMultipleDataFetch } from '../../../hook/socket/useSocket';
  11 + import { MultipleDataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
14 12
15 const props = defineProps<{ 13 const props = defineProps<{
16 config: ComponentPropsConfigType<typeof option>; 14 config: ComponentPropsConfigType<typeof option>;
@@ -2,8 +2,9 @@ @@ -2,8 +2,9 @@
2 import { ref } from 'vue'; 2 import { ref } from 'vue';
3 import { Image as AntImage } from 'ant-design-vue'; 3 import { Image as AntImage } from 'ant-design-vue';
4 import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime'; 4 import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
5 - import { useDataFetch } from '../../../hook/useSocket';  
6 - import { ComponentPropsConfigType, DataFetchUpdateFn } from '../../../index.type'; 5 + import { ComponentPropsConfigType } from '../../../index.type';
  6 + import { useDataFetch } from '../../../hook/socket/useSocket';
  7 + import { DataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
7 8
8 const props = defineProps<{ 9 const props = defineProps<{
9 config: ComponentPropsConfigType; 10 config: ComponentPropsConfigType;
1 <script lang="ts" setup> 1 <script lang="ts" setup>
2 - import { ComponentPropsConfigType, DataFetchUpdateFn } from '/@/views/visual/packages/index.type'; 2 + import { ComponentPropsConfigType } from '/@/views/visual/packages/index.type';
3 import { option } from './config'; 3 import { option } from './config';
4 import { useComponentScale } from '/@/views/visual/packages/hook/useComponentScale'; 4 import { useComponentScale } from '/@/views/visual/packages/hook/useComponentScale';
5 - import { useDataFetch } from '/@/views/visual/packages/hook/useSocket';  
6 import { computed } from 'vue'; 5 import { computed } from 'vue';
7 import { ref, onMounted, unref } from 'vue'; 6 import { ref, onMounted, unref } from 'vue';
8 import { useIntervalFn } from '@vueuse/core'; 7 import { useIntervalFn } from '@vueuse/core';
9 import { DeviceName } from '/@/views/visual/commonComponents/DeviceName'; 8 import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
10 import { useReceiveValue } from '../../../hook/useReceiveValue'; 9 import { useReceiveValue } from '../../../hook/useReceiveValue';
11 import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime'; 10 import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
  11 + import { DataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
  12 + import { useDataFetch } from '../../../hook/socket/useSocket';
12 13
13 const props = defineProps<{ 14 const props = defineProps<{
14 config: ComponentPropsConfigType<typeof option>; 15 config: ComponentPropsConfigType<typeof option>;
@@ -2,8 +2,9 @@ @@ -2,8 +2,9 @@
2 import { ref } from 'vue'; 2 import { ref } from 'vue';
3 import { Image as AntImage } from 'ant-design-vue'; 3 import { Image as AntImage } from 'ant-design-vue';
4 import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime'; 4 import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
5 - import { useDataFetch } from '../../../hook/useSocket';  
6 - import { ComponentPropsConfigType, DataFetchUpdateFn } from '../../../index.type'; 5 + import { ComponentPropsConfigType } from '../../../index.type';
  6 + import { useDataFetch } from '../../../hook/socket/useSocket';
  7 + import { DataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
7 8
8 const props = defineProps<{ 9 const props = defineProps<{
9 config: ComponentPropsConfigType; 10 config: ComponentPropsConfigType;
@@ -16,27 +17,6 @@ @@ -16,27 +17,6 @@
16 17
17 const url = ref<string>(fallback); 18 const url = ref<string>(fallback);
18 19
19 - // const getImagBase64 = ref(fallback);  
20 -  
21 - // const getBase64Image = (url: string) => {  
22 - // let canvas: Nullable<HTMLCanvasElement> = document.createElement('canvas');  
23 - // const ctx = canvas.getContext('2d');  
24 - // let image: Nullable<HTMLImageElement> = new Image();  
25 -  
26 - // image.onload = function () {  
27 - // canvas!.height = image!.height;  
28 - // canvas!.width = image!.width;  
29 - // ctx?.drawImage(image!, 0, 0);  
30 - // const dataUrl = canvas!.toDataURL('image/png');  
31 - // getImagBase64.value = dataUrl;  
32 - // console.log(dataUrl);  
33 - // image = null;  
34 - // canvas = null;  
35 - // };  
36 - // image.setAttribute('crossOrigin', 'Anonymous');  
37 - // image.src = url;  
38 - // };  
39 -  
40 const updateFn: DataFetchUpdateFn = (message, attribute) => { 20 const updateFn: DataFetchUpdateFn = (message, attribute) => {
41 const { data = {} } = message; 21 const { data = {} } = message;
42 const [latest] = data[attribute] || []; 22 const [latest] = data[attribute] || [];
1 <script lang="ts" setup> 1 <script lang="ts" setup>
2 import { EChartsOption, SeriesOption, ECharts, init } from 'echarts'; 2 import { EChartsOption, SeriesOption, ECharts, init } from 'echarts';
3 import { unref, ref, onMounted, computed, nextTick } from 'vue'; 3 import { unref, ref, onMounted, computed, nextTick } from 'vue';
4 - import { useMultipleDataFetch } from '../../../hook/useSocket';  
5 - import { ComponentPropsConfigType, MultipleDataFetchUpdateFn } from '../../../index.type'; 4 + import { ComponentPropsConfigType } from '../../../index.type';
6 import { option } from './config'; 5 import { option } from './config';
7 import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime'; 6 import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
8 import { useComponentScale } from '../../../hook/useComponentScale'; 7 import { useComponentScale } from '../../../hook/useComponentScale';
9 import { DeviceName } from '/@/views/visual/commonComponents/DeviceName'; 8 import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
10 import { useReceiveMessage } from '../../../hook/useReceiveMessage'; 9 import { useReceiveMessage } from '../../../hook/useReceiveMessage';
11 import { useReceiveValue } from '../../../hook/useReceiveValue'; 10 import { useReceiveValue } from '../../../hook/useReceiveValue';
  11 + import { useMultipleDataFetch } from '../../../hook/socket/useSocket';
  12 + import { MultipleDataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
12 13
13 const props = defineProps<{ 14 const props = defineProps<{
14 config: ComponentPropsConfigType<typeof option>; 15 config: ComponentPropsConfigType<typeof option>;
1 <script lang="ts" setup> 1 <script lang="ts" setup>
2 import { EChartsOption, SeriesOption, ECharts, init } from 'echarts'; 2 import { EChartsOption, SeriesOption, ECharts, init } from 'echarts';
3 import { unref, ref, onMounted, computed, nextTick } from 'vue'; 3 import { unref, ref, onMounted, computed, nextTick } from 'vue';
4 - import { useMultipleDataFetch } from '../../../hook/useSocket';  
5 - import { ComponentPropsConfigType, MultipleDataFetchUpdateFn } from '../../../index.type'; 4 + import { ComponentPropsConfigType } from '../../../index.type';
6 import { option } from './config'; 5 import { option } from './config';
7 import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime'; 6 import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
8 import { useComponentScale } from '../../../hook/useComponentScale'; 7 import { useComponentScale } from '../../../hook/useComponentScale';
@@ -10,6 +9,8 @@ @@ -10,6 +9,8 @@
10 import { useReceiveMessage } from '../../../hook/useReceiveMessage'; 9 import { useReceiveMessage } from '../../../hook/useReceiveMessage';
11 import { useReceiveValue } from '../../../hook/useReceiveValue'; 10 import { useReceiveValue } from '../../../hook/useReceiveValue';
12 import { toRaw } from 'vue'; 11 import { toRaw } from 'vue';
  12 + import { useMultipleDataFetch } from '../../../hook/socket/useSocket';
  13 + import { MultipleDataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
13 14
14 const props = defineProps<{ 15 const props = defineProps<{
15 config: ComponentPropsConfigType<typeof option>; 16 config: ComponentPropsConfigType<typeof option>;
1 <script lang="ts" setup> 1 <script lang="ts" setup>
2 import { EChartsOption, SeriesOption, ECharts, init } from 'echarts'; 2 import { EChartsOption, SeriesOption, ECharts, init } from 'echarts';
3 import { unref, ref, onMounted, computed, nextTick, toRaw } from 'vue'; 3 import { unref, ref, onMounted, computed, nextTick, toRaw } from 'vue';
4 - import { useMultipleDataFetch } from '../../../hook/useSocket';  
5 - import { ComponentPropsConfigType, MultipleDataFetchUpdateFn } from '../../../index.type'; 4 + import { ComponentPropsConfigType } from '../../../index.type';
6 import { option } from './config'; 5 import { option } from './config';
7 import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime'; 6 import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
8 import { useComponentScale } from '../../../hook/useComponentScale'; 7 import { useComponentScale } from '../../../hook/useComponentScale';
9 import { DeviceName } from '/@/views/visual/commonComponents/DeviceName'; 8 import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
  9 + import { useMultipleDataFetch } from '../../../hook/socket/useSocket';
  10 + import { MultipleDataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
10 11
11 const props = defineProps<{ 12 const props = defineProps<{
12 config: ComponentPropsConfigType<typeof option>; 13 config: ComponentPropsConfigType<typeof option>;
1 <script lang="ts" setup> 1 <script lang="ts" setup>
2 import { EChartsOption, SeriesOption, ECharts, init } from 'echarts'; 2 import { EChartsOption, SeriesOption, ECharts, init } from 'echarts';
3 import { unref, ref, onMounted, computed, nextTick, toRaw } from 'vue'; 3 import { unref, ref, onMounted, computed, nextTick, toRaw } from 'vue';
4 - import { useMultipleDataFetch } from '../../../hook/useSocket';  
5 - import { ComponentPropsConfigType, MultipleDataFetchUpdateFn } from '../../../index.type'; 4 + import { ComponentPropsConfigType } from '../../../index.type';
6 import { option } from './config'; 5 import { option } from './config';
7 import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime'; 6 import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
8 import { useComponentScale } from '../../../hook/useComponentScale'; 7 import { useComponentScale } from '../../../hook/useComponentScale';
9 import { DeviceName } from '/@/views/visual/commonComponents/DeviceName'; 8 import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
  9 + import { useMultipleDataFetch } from '../../../hook/socket/useSocket';
  10 + import { MultipleDataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
10 11
11 const props = defineProps<{ 12 const props = defineProps<{
12 config: ComponentPropsConfigType<typeof option>; 13 config: ComponentPropsConfigType<typeof option>;
1 <script lang="ts" setup> 1 <script lang="ts" setup>
2 import { reactive, ref } from 'vue'; 2 import { reactive, ref } from 'vue';
3 - import { useMultipleDataFetch } from '../../../hook/useSocket';  
4 - import { ComponentPropsConfigType, MultipleDataFetchUpdateFn } from '../../../index.type'; 3 + import { ComponentPropsConfigType } from '../../../index.type';
5 import { option } from './config'; 4 import { option } from './config';
6 import { DeviceName } from '/@/views/visual/commonComponents/DeviceName'; 5 import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
7 import { BasicTable, useTable, BasicColumn } from '/@/components/Table'; 6 import { BasicTable, useTable, BasicColumn } from '/@/components/Table';
  7 + import { MultipleDataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
  8 + import { useMultipleDataFetch } from '../../../hook/socket/useSocket';
8 9
9 const props = defineProps<{ 10 const props = defineProps<{
10 config: ComponentPropsConfigType<typeof option>; 11 config: ComponentPropsConfigType<typeof option>;
@@ -28,30 +29,12 @@ @@ -28,30 +29,12 @@
28 canResize: true, 29 canResize: true,
29 maxHeight: 144, 30 maxHeight: 144,
30 size: 'small', 31 size: 'small',
31 - // columns: [{ title: '属性', dataIndex: 'attribute', width: 80 }],  
32 columns: realTimeColumn as any, 32 columns: realTimeColumn as any,
33 }); 33 });
34 34
35 - // const getDesign = computed(() => {  
36 - // const { persetOption, option } = props.config;  
37 - // clearInterval;  
38 - // return {};  
39 - // });  
40 -  
41 - // const randomFn = () => {  
42 - // useIntervalFn(() => {  
43 - // const value = (Math.random() * 100).toFixed(0);  
44 - // unref(chartInstance)?.setOption({  
45 - // series: [{ data: [{ value }] }, { data: [{ value }] }],  
46 - // } as EChartsOption);  
47 - // }, 3000);  
48 - // };  
49 -  
50 const updateFn: MultipleDataFetchUpdateFn = () => {}; 35 const updateFn: MultipleDataFetchUpdateFn = () => {};
51 36
52 useMultipleDataFetch(props, updateFn); 37 useMultipleDataFetch(props, updateFn);
53 -  
54 - // const { getRatio } = useComponentScale(props);  
55 </script> 38 </script>
56 39
57 <template> 40 <template>
1 <script lang="ts" setup> 1 <script lang="ts" setup>
2 import { EChartsOption, ECharts, init } from 'echarts'; 2 import { EChartsOption, ECharts, init } from 'echarts';
3 import { unref, ref, onMounted, nextTick, toRaw } from 'vue'; 3 import { unref, ref, onMounted, nextTick, toRaw } from 'vue';
4 - import { useMultipleDataFetch } from '../../../hook/useSocket';  
5 - import { ComponentPropsConfigType, MultipleDataFetchUpdateFn } from '../../../index.type'; 4 + import { ComponentPropsConfigType } from '../../../index.type';
6 import { option } from './config'; 5 import { option } from './config';
7 import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime'; 6 import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
8 import { useComponentScale } from '../../../hook/useComponentScale'; 7 import { useComponentScale } from '../../../hook/useComponentScale';
9 import { DeviceName } from '/@/views/visual/commonComponents/DeviceName'; 8 import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
10 import { dateFormat } from '/@/utils/common/compUtils'; 9 import { dateFormat } from '/@/utils/common/compUtils';
  10 + import { useMultipleDataFetch } from '../../../hook/socket/useSocket';
  11 + import { MultipleDataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
11 12
12 const props = defineProps<{ 13 const props = defineProps<{
13 config: ComponentPropsConfigType<typeof option>; 14 config: ComponentPropsConfigType<typeof option>;
1 <script lang="ts" setup> 1 <script lang="ts" setup>
2 - import { ComponentPropsConfigType, DataFetchUpdateFn } from '/@/views/visual/packages/index.type'; 2 + import { ComponentPropsConfigType } from '/@/views/visual/packages/index.type';
3 import { option } from './config'; 3 import { option } from './config';
4 import { useComponentScale } from '/@/views/visual/packages/hook/useComponentScale'; 4 import { useComponentScale } from '/@/views/visual/packages/hook/useComponentScale';
5 - import { useDataFetch } from '/@/views/visual/packages/hook/useSocket';  
6 import { ref, onMounted, unref } from 'vue'; 5 import { ref, onMounted, unref } from 'vue';
7 import { useIntervalFn } from '@vueuse/core'; 6 import { useIntervalFn } from '@vueuse/core';
8 import { DeviceName } from '/@/views/visual/commonComponents/DeviceName'; 7 import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
9 import { useReceiveValue } from '../../../hook/useReceiveValue'; 8 import { useReceiveValue } from '../../../hook/useReceiveValue';
  9 + import { useDataFetch } from '../../../hook/socket/useSocket';
  10 + import { DataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
10 11
11 const props = defineProps<{ 12 const props = defineProps<{
12 config: ComponentPropsConfigType<typeof option>; 13 config: ComponentPropsConfigType<typeof option>;
1 <script lang="ts" setup> 1 <script lang="ts" setup>
2 - import { useDataFetch } from '/@/views/visual/packages/hook/useSocket';  
3 - import { ComponentPropsConfigType, DataFetchUpdateFn } from '/@/views/visual/packages/index.type';  
4 - 2 + import { ComponentPropsConfigType } from '/@/views/visual/packages/index.type';
5 import { option } from './config'; 3 import { option } from './config';
6 import { SvgIcon } from '/@/components/Icon'; 4 import { SvgIcon } from '/@/components/Icon';
7 import { computed } from 'vue'; 5 import { computed } from 'vue';
8 import { DeviceName } from '/@/views/visual/commonComponents/DeviceName'; 6 import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
  7 + import { useDataFetch } from '../../../hook/socket/useSocket';
  8 + import { DataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
9 9
10 const props = defineProps<{ 10 const props = defineProps<{
11 config: ComponentPropsConfigType<typeof option>; 11 config: ComponentPropsConfigType<typeof option>;
@@ -33,25 +33,6 @@ @@ -33,25 +33,6 @@
33 }; 33 };
34 }); 34 });
35 35
36 - // const svgList = ref<any>([  
37 - // {  
38 - // value: 26.2,  
39 - // name: 'wendu',  
40 - // icon: 'zongfushe',  
41 - // unit: 'kw',  
42 - // iconColor: '#367BFF',  
43 - // fontColor: '#357CFB',  
44 - // },  
45 - // {  
46 - // value: 53.7,  
47 - // name: 'shidu',  
48 - // icon: 'guangzhaoqiangdu',  
49 - // unit: '℃',  
50 - // iconColor: '#FFA000',  
51 - // fontColor: '#FFA000',  
52 - // },  
53 - // ]);  
54 -  
55 const updateFn: DataFetchUpdateFn = () => {}; 36 const updateFn: DataFetchUpdateFn = () => {};
56 37
57 useDataFetch(props, updateFn); 38 useDataFetch(props, updateFn);
1 <script lang="ts" setup> 1 <script lang="ts" setup>
2 - import { ComponentPropsConfigType, DataFetchUpdateFn } from '/@/views/visual/packages/index.type'; 2 + import { ComponentPropsConfigType } from '/@/views/visual/packages/index.type';
3 import { option } from './config'; 3 import { option } from './config';
4 import { useComponentScale } from '/@/views/visual/packages/hook/useComponentScale'; 4 import { useComponentScale } from '/@/views/visual/packages/hook/useComponentScale';
5 - import { useDataFetch } from '/@/views/visual/packages/hook/useSocket';  
6 import { computed } from 'vue'; 5 import { computed } from 'vue';
7 import { ref } from 'vue'; 6 import { ref } from 'vue';
8 import { DeviceName } from '/@/views/visual/commonComponents/DeviceName'; 7 import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
  8 + import { useDataFetch } from '../../../hook/socket/useSocket';
  9 + import { DataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
9 10
10 const props = defineProps<{ 11 const props = defineProps<{
11 config: ComponentPropsConfigType<typeof option>; 12 config: ComponentPropsConfigType<typeof option>;
1 <script lang="ts" setup> 1 <script lang="ts" setup>
2 - import { ComponentPropsConfigType, DataFetchUpdateFn } from '/@/views/visual/packages/index.type'; 2 + import { ComponentPropsConfigType } from '/@/views/visual/packages/index.type';
3 import { option } from './config'; 3 import { option } from './config';
4 import { useComponentScale } from '/@/views/visual/packages/hook/useComponentScale'; 4 import { useComponentScale } from '/@/views/visual/packages/hook/useComponentScale';
5 - import { useDataFetch } from '/@/views/visual/packages/hook/useSocket';  
6 import { computed } from 'vue'; 5 import { computed } from 'vue';
7 import { ref } from 'vue'; 6 import { ref } from 'vue';
8 import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime'; 7 import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
9 import { DeviceName } from '/@/views/visual/commonComponents/DeviceName'; 8 import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
  9 + import { useDataFetch } from '../../../hook/socket/useSocket';
  10 + import { DataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
10 11
11 const props = defineProps<{ 12 const props = defineProps<{
12 config: ComponentPropsConfigType<typeof option>; 13 config: ComponentPropsConfigType<typeof option>;
1 <script lang="ts" setup> 1 <script lang="ts" setup>
2 - import { ComponentPropsConfigType, DataFetchUpdateFn } from '/@/views/visual/packages/index.type'; 2 + import { ComponentPropsConfigType } from '/@/views/visual/packages/index.type';
3 import { option } from './config'; 3 import { option } from './config';
4 import { useComponentScale } from '/@/views/visual/packages/hook/useComponentScale'; 4 import { useComponentScale } from '/@/views/visual/packages/hook/useComponentScale';
5 - import { useDataFetch } from '/@/views/visual/packages/hook/useSocket';  
6 import { ref } from 'vue'; 5 import { ref } from 'vue';
7 import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime'; 6 import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
8 import { SvgIcon } from '/@/components/Icon'; 7 import { SvgIcon } from '/@/components/Icon';
9 import { computed } from 'vue'; 8 import { computed } from 'vue';
10 import { DeviceName } from '/@/views/visual/commonComponents/DeviceName'; 9 import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
  10 + import { useDataFetch } from '../../../hook/socket/useSocket';
  11 + import { DataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
11 12
12 const props = defineProps<{ 13 const props = defineProps<{
13 config: ComponentPropsConfigType<typeof option>; 14 config: ComponentPropsConfigType<typeof option>;
1 <script lang="ts" setup> 1 <script lang="ts" setup>
2 - import { ComponentPropsConfigType, DataFetchUpdateFn } from '/@/views/visual/packages/index.type'; 2 + import { ComponentPropsConfigType } from '/@/views/visual/packages/index.type';
3 import { option } from './config'; 3 import { option } from './config';
4 import { useComponentScale } from '/@/views/visual/packages/hook/useComponentScale'; 4 import { useComponentScale } from '/@/views/visual/packages/hook/useComponentScale';
5 - import { useDataFetch } from '/@/views/visual/packages/hook/useSocket';  
6 import { computed } from 'vue'; 5 import { computed } from 'vue';
7 import { ref } from 'vue'; 6 import { ref } from 'vue';
8 import { SvgIcon } from '/@/components/Icon'; 7 import { SvgIcon } from '/@/components/Icon';
9 import { DeviceName } from '/@/views/visual/commonComponents/DeviceName'; 8 import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
  9 + import { useDataFetch } from '../../../hook/socket/useSocket';
  10 + import { DataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
10 11
11 const props = defineProps<{ 12 const props = defineProps<{
12 config: ComponentPropsConfigType<typeof option>; 13 config: ComponentPropsConfigType<typeof option>;
1 <script lang="ts" setup> 1 <script lang="ts" setup>
2 import { option } from './config'; 2 import { option } from './config';
3 - // import { useComponentScale } from '/@/views/visual/packages/hook/useComponentScale';  
4 - import { ComponentPropsConfigType, MultipleDataFetchUpdateFn } from '../../../index.type';  
5 - import { useMultipleDataFetch } from '/@/views/visual/packages/hook/useSocket';  
6 - import { computed } from 'vue';  
7 - import { ref } from 'vue'; 3 + import { ComponentPropsConfigType } from '../../../index.type';
8 import { Progress } from 'ant-design-vue'; 4 import { Progress } from 'ant-design-vue';
9 import { DeviceName } from '/@/views/visual/commonComponents/DeviceName'; 5 import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
10 - import { unref } from 'vue';  
11 - import { onMounted } from 'vue';  
12 import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime'; 6 import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
13 import { useReceiveMessage } from '../../../hook/useReceiveMessage'; 7 import { useReceiveMessage } from '../../../hook/useReceiveMessage';
14 import { buildUUID } from '/@/utils/uuid'; 8 import { buildUUID } from '/@/utils/uuid';
15 import { useReceiveValue } from '../../../hook/useReceiveValue'; 9 import { useReceiveValue } from '../../../hook/useReceiveValue';
  10 + import { ref, computed, unref, onMounted } from 'vue';
  11 + import { useMultipleDataFetch } from '../../../hook/socket/useSocket';
  12 + import { MultipleDataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
16 13
17 const props = defineProps<{ 14 const props = defineProps<{
18 config: ComponentPropsConfigType<typeof option>; 15 config: ComponentPropsConfigType<typeof option>;
1 <script lang="ts" setup> 1 <script lang="ts" setup>
2 - import { ComponentPropsConfigType, MultipleDataFetchUpdateFn } from '../../../index.type';  
3 - 2 + import { ComponentPropsConfigType } from '../../../index.type';
4 import { option } from './config'; 3 import { option } from './config';
5 - import { useMultipleDataFetch } from '/@/views/visual/packages/hook/useSocket';  
6 import { ref, unref } from 'vue'; 4 import { ref, unref } from 'vue';
7 import { SvgIcon } from '/@/components/Icon'; 5 import { SvgIcon } from '/@/components/Icon';
8 import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime'; 6 import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
@@ -10,6 +8,8 @@ @@ -10,6 +8,8 @@
10 import { DeviceName } from '/@/views/visual/commonComponents/DeviceName'; 8 import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
11 import { useReceiveMessage } from '../../../hook/useReceiveMessage'; 9 import { useReceiveMessage } from '../../../hook/useReceiveMessage';
12 import { useReceiveValue } from '../../../hook/useReceiveValue'; 10 import { useReceiveValue } from '../../../hook/useReceiveValue';
  11 + import { useMultipleDataFetch } from '../../../hook/socket/useSocket';
  12 + import { MultipleDataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
13 13
14 const props = defineProps<{ 14 const props = defineProps<{
15 config: ComponentPropsConfigType<typeof option>; 15 config: ComponentPropsConfigType<typeof option>;
@@ -42,14 +42,6 @@ @@ -42,14 +42,6 @@
42 deviceRename, 42 deviceRename,
43 id: deviceId, 43 id: deviceId,
44 }; 44 };
45 - // return {  
46 - // unit: unit ?? persetUnit,  
47 - // fontColor: fontColor ?? persetFontColor,  
48 - // icon: icon ?? persetIcon,  
49 - // iconColor: iconColor ?? persetIconColor,  
50 - // attribute: attribute || attributeRename,  
51 - // attributeRename,  
52 - // };  
53 }), 45 }),
54 }; 46 };
55 }); 47 });
@@ -88,25 +80,7 @@ @@ -88,25 +80,7 @@
88 time.value = timespan; 80 time.value = timespan;
89 } 81 }
90 }); 82 });
91 - // });  
92 }); 83 });
93 - // console.log(unref(svgList), 'svglist');  
94 - // const { data = {} } = message;  
95 - // const { dataSource } = unref(getDesign);  
96 - // svgList.value.length = 0;  
97 - // svgList.value = dataSource.map((item) => {  
98 - // const { icon, iconColor, unit, fontColor, attribute } = item || {};  
99 - // const [latest] = data[attribute] || [];  
100 - // const [_timespan, value] = latest || [];  
101 - // return {  
102 - // value: Number(value),  
103 - // name: attribute,  
104 - // icon,  
105 - // unit,  
106 - // iconColor,  
107 - // fontColor,  
108 - // };  
109 - // });  
110 }; 84 };
111 85
112 useMultipleDataFetch(props, updateFn); 86 useMultipleDataFetch(props, updateFn);
src/views/visual/packages/hook/socket/useSocket.ts renamed from src/views/visual/packages/hook/useSocket.ts
1 import { Ref, computed, onUnmounted, unref, watch } from 'vue'; 1 import { Ref, computed, onUnmounted, unref, watch } from 'vue';
2 -import { WidgetDataType } from '../../palette/hooks/useDataSource'; 2 +import { WidgetDataType } from '../../../palette/hooks/useDataSource';
3 import { useWebSocket } from '@vueuse/core'; 3 import { useWebSocket } from '@vueuse/core';
4 import { useGlobSetting } from '/@/hooks/setting'; 4 import { useGlobSetting } from '/@/hooks/setting';
5 import { isShareMode } from '/@/views/sys/share/hook'; 5 import { isShareMode } from '/@/views/sys/share/hook';
6 import { getJwtToken, getShareJwtToken } from '/@/utils/auth'; 6 import { getJwtToken, getShareJwtToken } from '/@/utils/auth';
7 -import { isNullAndUnDef } from '/@/utils/is'; 7 +import { DataSource } from '../../../palette/types';
  8 +import { CUSTOM_SUBSCRIBE_MESSAGE_COMPONENT_KEY_LIST } from '../../package';
8 import { 9 import {
9 - ComponentPropsConfigType, 10 + CmdUpdateMsg,
  11 + CmdUpdateTypeEnum,
10 DataFetchUpdateFn, 12 DataFetchUpdateFn,
11 EntityTypeEnum, 13 EntityTypeEnum,
12 MultipleDataFetchUpdateFn, 14 MultipleDataFetchUpdateFn,
13 - ReceiveGroupMessageType, 15 + ReceiveAlarmDataCmdsMessageType,
  16 + ReceiveEntityCountMessageType,
  17 + ReceiveEntityDataMessageType,
14 ReceiveMessageType, 18 ReceiveMessageType,
  19 + ReceiveTsSubCmdsGroupMessageType,
  20 + ReceiveTsSubCmdsMessageType,
15 ScopeTypeEnum, 21 ScopeTypeEnum,
16 - SubscribeMessageItemType,  
17 SubscribeMessageType, 22 SubscribeMessageType,
18 -} from '../index.type';  
19 -import { DataSource } from '../../palette/types'; 23 + TsSubCmdsItemType,
  24 +} from './useSocket.type';
  25 +import { ComponentPropsConfigType } from '../../index.type';
20 26
21 interface DeviceGroupMapType { 27 interface DeviceGroupMapType {
22 subscriptionId: number; 28 subscriptionId: number;
@@ -29,11 +35,18 @@ interface ComponentUpdateFnMapValueType { @@ -29,11 +35,18 @@ interface ComponentUpdateFnMapValueType {
29 attributes: string[]; 35 attributes: string[];
30 } 36 }
31 37
32 -const parseMessage = (text: string): ReceiveMessageType => { 38 +interface CustomSubscribeMapValueType {
  39 + uuid: string;
  40 + updateFn?: Fn;
  41 +}
  42 +
  43 +export type CustomSubscribeSendMessageFnType = (cmdId: number) => void;
  44 +
  45 +const parseMessage = (text: string): ReceiveTsSubCmdsMessageType => {
33 try { 46 try {
34 return JSON.parse(text); 47 return JSON.parse(text);
35 } catch (error) { 48 } catch (error) {
36 - return {} as ReceiveMessageType; 49 + return {} as ReceiveTsSubCmdsMessageType;
37 } 50 }
38 }; 51 };
39 52
@@ -48,6 +61,8 @@ class Subscriber { @@ -48,6 +61,8 @@ class Subscriber {
48 61
49 componentGroupUpdateFnMap = new Map<string, ComponentUpdateFnMapValueType[]>(); 62 componentGroupUpdateFnMap = new Map<string, ComponentUpdateFnMapValueType[]>();
50 63
  64 + customSubscribeMap = new Map<number, CustomSubscribeMapValueType>();
  65 +
51 getNextSubscribeId() { 66 getNextSubscribeId() {
52 return this.subscribeId++; 67 return this.subscribeId++;
53 } 68 }
@@ -56,6 +71,8 @@ class Subscriber { @@ -56,6 +71,8 @@ class Subscriber {
56 this.deviceGroupMap.clear(); 71 this.deviceGroupMap.clear();
57 this.subscriptionMap.clear(); 72 this.subscriptionMap.clear();
58 this.componentUpdateFnMap.clear(); 73 this.componentUpdateFnMap.clear();
  74 + this.componentGroupUpdateFnMap.clear();
  75 + this.customSubscribeMap.clear();
59 }; 76 };
60 77
61 addSubscriber = (info: Record<'deviceId' | 'slaveDeviceId' | 'attribute' | 'uuid', string>) => { 78 addSubscriber = (info: Record<'deviceId' | 'slaveDeviceId' | 'attribute' | 'uuid', string>) => {
@@ -85,7 +102,7 @@ class Subscriber { @@ -85,7 +102,7 @@ class Subscriber {
85 entityType: EntityTypeEnum.DEVICE, 102 entityType: EntityTypeEnum.DEVICE,
86 scope: ScopeTypeEnum.LATEST_TELEMERY, 103 scope: ScopeTypeEnum.LATEST_TELEMERY,
87 ...(unsubscribe ? { unsubscribe } : {}), 104 ...(unsubscribe ? { unsubscribe } : {}),
88 - } as SubscribeMessageItemType; 105 + } as TsSubCmdsItemType;
89 }); 106 });
90 return { tsSubCmds: message } as SubscribeMessageType; 107 return { tsSubCmds: message } as SubscribeMessageType;
91 } 108 }
@@ -98,14 +115,14 @@ class Subscriber { @@ -98,14 +115,14 @@ class Subscriber {
98 return this.genBasicMessage(); 115 return this.genBasicMessage();
99 } 116 }
100 117
101 - getScopeMessage(message: ReceiveMessageType, attribute: string[]) { 118 + getScopeMessage(message: ReceiveTsSubCmdsMessageType, attribute: string[]) {
102 const data = attribute.reduce((prev, next) => { 119 const data = attribute.reduce((prev, next) => {
103 return { ...prev, [next]: (message.data || {})[next] || [[]] }; 120 return { ...prev, [next]: (message.data || {})[next] || [[]] };
104 - }, {} as ReceiveMessageType['data']); 121 + }, {} as ReceiveTsSubCmdsMessageType['data']);
105 122
106 const latestValues = attribute.reduce((prev, next) => { 123 const latestValues = attribute.reduce((prev, next) => {
107 return { ...prev, [next]: (message.latestValues || {})[next] || [[]] }; 124 return { ...prev, [next]: (message.latestValues || {})[next] || [[]] };
108 - }, {} as ReceiveMessageType['data']); 125 + }, {} as ReceiveTsSubCmdsMessageType['data']);
109 126
110 return { 127 return {
111 subscriptionId: message.subscriptionId, 128 subscriptionId: message.subscriptionId,
@@ -113,10 +130,14 @@ class Subscriber { @@ -113,10 +130,14 @@ class Subscriber {
113 errorMsg: message.errorMsg, 130 errorMsg: message.errorMsg,
114 data, 131 data,
115 latestValues, 132 latestValues,
116 - } as ReceiveMessageType; 133 + } as ReceiveTsSubCmdsMessageType;
117 } 134 }
118 135
119 - getGroupScopeMessage(message: ReceiveMessageType, attribute: string[], deviceId: string) { 136 + getGroupScopeMessage(
  137 + message: ReceiveTsSubCmdsMessageType,
  138 + attribute: string[],
  139 + deviceId: string
  140 + ) {
120 const result = this.getScopeMessage(message, attribute); 141 const result = this.getScopeMessage(message, attribute);
121 142
122 return { 143 return {
@@ -127,7 +148,13 @@ class Subscriber { @@ -127,7 +148,13 @@ class Subscriber {
127 latestValues: { 148 latestValues: {
128 [deviceId]: result.latestValues, 149 [deviceId]: result.latestValues,
129 }, 150 },
130 - } as ReceiveGroupMessageType; 151 + } as ReceiveTsSubCmdsGroupMessageType;
  152 + }
  153 +
  154 + customSubscribe(uuid: string, sendMessageFn: CustomSubscribeSendMessageFnType, updateFn: Fn) {
  155 + const cmdId = this.getNextSubscribeId();
  156 + this.customSubscribeMap.set(cmdId, { uuid, updateFn });
  157 + sendMessageFn(cmdId);
131 } 158 }
132 159
133 trackUpdate(uuid: string, fn: Fn) { 160 trackUpdate(uuid: string, fn: Fn) {
@@ -144,8 +171,30 @@ class Subscriber { @@ -144,8 +171,30 @@ class Subscriber {
144 } 171 }
145 172
146 triggerUpdate(message: ReceiveMessageType) { 173 triggerUpdate(message: ReceiveMessageType) {
  174 + if (message.errorCode) {
  175 + return;
  176 + }
  177 +
  178 + if (isEntityDataUpdateMsg(message)) {
  179 + return;
  180 + }
  181 +
  182 + if (isAlarmDataUpdateMsg(message)) {
  183 + this.triggerAlarmDataMesssage(message);
  184 + return;
  185 + }
  186 +
  187 + if (isEntityCountUpdateMsg(message)) {
  188 + return;
  189 + }
  190 +
  191 + if (message.subscriptionId) {
  192 + this.triggerTsSubCmdsMessage(message);
  193 + }
  194 + }
  195 +
  196 + triggerTsSubCmdsMessage(message: ReceiveTsSubCmdsMessageType) {
147 const { subscriptionId } = message; 197 const { subscriptionId } = message;
148 - if (isNullAndUnDef(subscriptionId)) return;  
149 const deviceId = this.subscriptionMap.get(subscriptionId); 198 const deviceId = this.subscriptionMap.get(subscriptionId);
150 if (!deviceId) return; 199 if (!deviceId) return;
151 const deviceGroup = this.deviceGroupMap.get(deviceId); 200 const deviceGroup = this.deviceGroupMap.get(deviceId);
@@ -179,6 +228,21 @@ class Subscriber { @@ -179,6 +228,21 @@ class Subscriber {
179 } 228 }
180 }); 229 });
181 } 230 }
  231 +
  232 + triggerAlarmDataMesssage(message: ReceiveAlarmDataCmdsMessageType) {
  233 + const { cmdId } = message;
  234 + const isCustomSubscribeMessage = this.customSubscribeMap.get(cmdId);
  235 + if (isCustomSubscribeMessage) {
  236 + const updateFn = isCustomSubscribeMessage.updateFn;
  237 + try {
  238 + updateFn?.(message);
  239 + } catch (error) {
  240 + console.error(`Custom subscribe message invoke update function failed`);
  241 + throw error;
  242 + }
  243 + return;
  244 + }
  245 + }
182 } 246 }
183 247
184 const subscriber = new Subscriber(); 248 const subscriber = new Subscriber();
@@ -206,12 +270,14 @@ export const useSocket = (dataSourceRef: Ref<WidgetDataType[]>) => { @@ -206,12 +270,14 @@ export const useSocket = (dataSourceRef: Ref<WidgetDataType[]>) => {
206 270
207 const initSubscribe = () => { 271 const initSubscribe = () => {
208 subscriber.clearSubscriber(); 272 subscriber.clearSubscriber();
209 - unref(dataSourceRef).forEach((item) => {  
210 - item.dataSource.forEach((temp) => { 273 +
  274 + for (const item of unref(dataSourceRef)) {
  275 + if (CUSTOM_SUBSCRIBE_MESSAGE_COMPONENT_KEY_LIST.includes(item.frontId)) continue;
  276 + for (const temp of item.dataSource) {
211 const { deviceId, slaveDeviceId, attribute, uuid } = temp; 277 const { deviceId, slaveDeviceId, attribute, uuid } = temp;
212 subscriber.addSubscriber({ deviceId, slaveDeviceId, attribute, uuid }); 278 subscriber.addSubscriber({ deviceId, slaveDeviceId, attribute, uuid });
213 - });  
214 - }); 279 + }
  280 + }
215 }; 281 };
216 282
217 watch( 283 watch(
@@ -234,8 +300,34 @@ export const useSocket = (dataSourceRef: Ref<WidgetDataType[]>) => { @@ -234,8 +300,34 @@ export const useSocket = (dataSourceRef: Ref<WidgetDataType[]>) => {
234 onUnmounted(() => { 300 onUnmounted(() => {
235 close(); 301 close();
236 }); 302 });
  303 +
  304 + return {
  305 + send,
  306 + close,
  307 + };
237 }; 308 };
238 309
  310 +export function isEntityDataUpdateMsg(
  311 + message: ReceiveMessageType
  312 +): message is ReceiveEntityDataMessageType {
  313 + const updateMsg = message as CmdUpdateMsg;
  314 + return updateMsg.cmdId !== undefined && updateMsg.cmdUpdateType === CmdUpdateTypeEnum.ENTITY_DATA;
  315 +}
  316 +
  317 +export function isAlarmDataUpdateMsg(
  318 + message: ReceiveMessageType
  319 +): message is ReceiveAlarmDataCmdsMessageType {
  320 + const updateMsg = message as CmdUpdateMsg;
  321 + return updateMsg.cmdId !== undefined && updateMsg.cmdUpdateType === CmdUpdateTypeEnum.ALARM_DATA;
  322 +}
  323 +
  324 +export function isEntityCountUpdateMsg(
  325 + message: ReceiveMessageType
  326 +): message is ReceiveEntityCountMessageType {
  327 + const updateMsg = message as CmdUpdateMsg;
  328 + return updateMsg.cmdId !== undefined && updateMsg.cmdUpdateType === CmdUpdateTypeEnum.COUNT_DATA;
  329 +}
  330 +
239 export const useDataFetch = ( 331 export const useDataFetch = (
240 props: { config: ComponentPropsConfigType }, 332 props: { config: ComponentPropsConfigType },
241 updateFn: DataFetchUpdateFn 333 updateFn: DataFetchUpdateFn
@@ -288,16 +380,6 @@ export const useMultipleDataFetch = ( @@ -288,16 +380,6 @@ export const useMultipleDataFetch = (
288 }); 380 });
289 381
290 if (!Object.keys(unref(getDataSourceGroup)).length) return; 382 if (!Object.keys(unref(getDataSourceGroup)).length) return;
291 - // const getBindAttributes = computed(() => {  
292 - // const attributes = props.config.option.dataSource?.map((item) => item.attribute);  
293 - // return [...new Set(attributes)];  
294 - // });  
295 -  
296 - // if (!unref(getBindAttributes).length) return;  
297 -  
298 - // const getDeviceId = computed(() => {  
299 - // return props.config.option.dataSource?.at(0)?.deviceId;  
300 - // });  
301 383
302 watch( 384 watch(
303 () => getDataSourceGroup, 385 () => getDataSourceGroup,
@@ -318,3 +400,23 @@ export const useMultipleDataFetch = ( @@ -318,3 +400,23 @@ export const useMultipleDataFetch = (
318 400
319 return {}; 401 return {};
320 }; 402 };
  403 +
  404 +export const useCustomDataFetch = (
  405 + props: { config: ComponentPropsConfigType },
  406 + transformMessage: Fn,
  407 + updateFn: Fn
  408 +) => {
  409 + const getUUID = computed(() => {
  410 + return props.config.option.uuid;
  411 + });
  412 +
  413 + watch(
  414 + () => getUUID,
  415 + () => {
  416 + subscriber.customSubscribe(props.config.option.uuid, transformMessage, updateFn);
  417 + },
  418 + {
  419 + immediate: true,
  420 + }
  421 + );
  422 +};
  1 +export interface SubscribeMessageType {
  2 + tsSubCmds?: TsSubCmdsItemType[];
  3 + alarmDataCmds?: AlarmDataCmdsItemType[];
  4 + alarmDataUnsubscribeCmds?: UnsubscribeCmdsItemType[];
  5 + attrSubCmds?: [];
  6 + entityCountCmds?: [];
  7 + entityCountUnsubscribeCmds?: UnsubscribeCmdsItemType[];
  8 + entityDataCmds?: [];
  9 + entityDataUnsubscribeCmds?: UnsubscribeCmdsItemType[];
  10 + historyCmds?: [];
  11 +}
  12 +
  13 +export interface UnsubscribeCmdsItemType {
  14 + cmdId: number;
  15 +}
  16 +
  17 +export enum CmdUpdateTypeEnum {
  18 + ENTITY_DATA = 'ENTITY_DATA',
  19 + ALARM_DATA = 'ALARM_DATA',
  20 + COUNT_DATA = 'COUNT_DATA',
  21 +}
  22 +
  23 +export interface AlarmDataCmdsItemType {
  24 + cmdId: number;
  25 +}
  26 +
  27 +export interface TsSubCmdsItemType {
  28 + cmdId: number;
  29 + entityId: string;
  30 + entityType: string;
  31 + keys?: string;
  32 + scope?: string;
  33 + unsubscribe?: boolean;
  34 +}
  35 +
  36 +export interface ReceiveTsSubCmdsMessageType {
  37 + subscriptionId: number;
  38 + errorCode: number;
  39 + errorMsg: Nullable<string>;
  40 + data: Record<string, [number, string][]>;
  41 + latestValues: Record<string, number>;
  42 +}
  43 +
  44 +export interface ReceiveTsSubCmdsGroupMessageType {
  45 + subscriptionId: number;
  46 + errorCode: number;
  47 + errorMsg: Nullable<string>;
  48 + data: {
  49 + string: Record<string, [number, string][]>;
  50 + };
  51 + latestValues: {
  52 + string: Record<string, number>;
  53 + };
  54 +}
  55 +
  56 +export interface PageData<T> {
  57 + data: T[];
  58 + totalPages: number;
  59 + totalElements: number;
  60 + hasNext: boolean;
  61 +}
  62 +
  63 +export interface CmdUpdateMsg {
  64 + cmdId: number;
  65 + errorCode: number;
  66 + errorMsg: string;
  67 + cmdUpdateType: CmdUpdateTypeEnum;
  68 +}
  69 +
  70 +export interface DataUpdateMsg<T> extends CmdUpdateMsg {
  71 + data?: PageData<T>;
  72 + update?: T[];
  73 +}
  74 +
  75 +export enum EntityType {
  76 + TENANT = 'TENANT',
  77 + TENANT_PROFILE = 'TENANT_PROFILE',
  78 + CUSTOMER = 'CUSTOMER',
  79 + USER = 'USER',
  80 + DASHBOARD = 'DASHBOARD',
  81 + ASSET = 'ASSET',
  82 + DEVICE = 'DEVICE',
  83 + DEVICE_PROFILE = 'DEVICE_PROFILE',
  84 + ASSET_PROFILE = 'ASSET_PROFILE',
  85 + ALARM = 'ALARM',
  86 + RULE_CHAIN = 'RULE_CHAIN',
  87 + RULE_NODE = 'RULE_NODE',
  88 + EDGE = 'EDGE',
  89 + ENTITY_VIEW = 'ENTITY_VIEW',
  90 + WIDGETS_BUNDLE = 'WIDGETS_BUNDLE',
  91 + WIDGET_TYPE = 'WIDGET_TYPE',
  92 + API_USAGE_STATE = 'API_USAGE_STATE',
  93 + TB_RESOURCE = 'TB_RESOURCE',
  94 + OTA_PACKAGE = 'OTA_PACKAGE',
  95 + RPC = 'RPC',
  96 + QUEUE = 'QUEUE',
  97 +}
  98 +
  99 +export enum AliasEntityType {
  100 + CURRENT_CUSTOMER = 'CURRENT_CUSTOMER',
  101 + CURRENT_TENANT = 'CURRENT_TENANT',
  102 + CURRENT_USER = 'CURRENT_USER',
  103 + CURRENT_USER_OWNER = 'CURRENT_USER_OWNER',
  104 +}
  105 +
  106 +export interface HasUUID {
  107 + id: string;
  108 +}
  109 +
  110 +export interface TsValue {
  111 + ts: number;
  112 + value: string;
  113 + count?: number;
  114 +}
  115 +
  116 +export interface EntityId extends HasUUID {
  117 + entityType: EntityType | AliasEntityType;
  118 +}
  119 +
  120 +export interface ComparisonTsValue {
  121 + current?: TsValue;
  122 + previous?: TsValue;
  123 +}
  124 +
  125 +export interface EntityData {
  126 + entityId: EntityId;
  127 + latest: { [entityKeyType: string]: { [key: string]: TsValue } };
  128 + timeseries: { [key: string]: TsValue[] };
  129 + aggLatest?: { [id: number]: ComparisonTsValue };
  130 +}
  131 +
  132 +/**
  133 + * @description entity data receive message
  134 + */
  135 +export interface ReceiveEntityDataMessageType extends DataUpdateMsg<EntityData> {
  136 + cmdUpdateType: CmdUpdateTypeEnum.ENTITY_DATA;
  137 +}
  138 +
  139 +/**
  140 + * @description 告警
  141 + */
  142 +export interface ReceiveAlarmDataCmdsMessageType extends DataUpdateMsg<Recordable> {
  143 + cmdUpdateType: CmdUpdateTypeEnum.ALARM_DATA;
  144 + allowedEntities: number;
  145 + totalEntities: number;
  146 +}
  147 +
  148 +/**
  149 + * @description entity count receive message
  150 + */
  151 +export interface ReceiveEntityCountMessageType extends CmdUpdateMsg {
  152 + cmdUpdateType: CmdUpdateTypeEnum.COUNT_DATA;
  153 + count: number;
  154 +}
  155 +
  156 +/**
  157 + * @description 接受消息
  158 + */
  159 +export type ReceiveMessageType =
  160 + | ReceiveTsSubCmdsMessageType
  161 + | ReceiveAlarmDataCmdsMessageType
  162 + | ReceiveEntityDataMessageType
  163 + | ReceiveEntityCountMessageType;
  164 +
  165 +export enum EntityTypeEnum {
  166 + DEVICE = 'DEVICE',
  167 +}
  168 +
  169 +export enum ScopeTypeEnum {
  170 + LATEST_TELEMERY = 'LATEST_TELEMERY',
  171 +}
  172 +
  173 +export enum AttributeScopeEnum {
  174 + CLIENT_SCOPE = 'CLIENT_SCOPE',
  175 + SERVER_SCOPE = 'SERVER_SCOPE',
  176 + SHARED_SCOPE = 'SHARED_SCOPE',
  177 +}
  178 +
  179 +export type DataFetchUpdateFn = (message: ReceiveTsSubCmdsMessageType, attr: string) => void;
  180 +
  181 +export type MultipleDataFetchUpdateFn = (
  182 + message: ReceiveTsSubCmdsGroupMessageType,
  183 + deviceId: string,
  184 + attr: string[]
  185 +) => void;
1 -import { ReceiveGroupMessageType } from '../index.type'; 1 +import { ReceiveTsSubCmdsGroupMessageType } from '../index.type';
2 2
3 export const useReceiveMessage = () => { 3 export const useReceiveMessage = () => {
4 const forEachGroupMessage = ( 4 const forEachGroupMessage = (
5 - message: ReceiveGroupMessageType, 5 + message: ReceiveTsSubCmdsGroupMessageType,
6 deviceId: string, 6 deviceId: string,
7 attributes: string[], 7 attributes: string[],
8 Fn: (attribute: string, value: any, timespan: number) => void 8 Fn: (attribute: string, value: any, timespan: number) => void
@@ -140,68 +140,3 @@ export interface PackagesType { @@ -140,68 +140,3 @@ export interface PackagesType {
140 // [PackagesCategoryEnum.STATISTICS]: ConfigType[]; 140 // [PackagesCategoryEnum.STATISTICS]: ConfigType[];
141 [PackagesCategoryEnum.OTHER]: ConfigType[]; 141 [PackagesCategoryEnum.OTHER]: ConfigType[];
142 } 142 }
143 -  
144 -export interface SubscribeMessageType {  
145 - tsSubCmds: SubscribeMessageItemType[];  
146 -}  
147 -  
148 -export interface SubscribeMessageItemType {  
149 - cmdId: number;  
150 - entityId: string;  
151 - entityType: string;  
152 - keys?: string;  
153 - scope?: string;  
154 - unsubscribe?: boolean;  
155 -}  
156 -  
157 -export interface ReceiveMessageType {  
158 - subscriptionId: number;  
159 - errorCode: number;  
160 - errorMsg: Nullable<string>;  
161 - data: Record<string, [number, string][]>;  
162 - latestValues: Record<string, number>;  
163 -}  
164 -  
165 -export interface ReceiveGroupMessageType {  
166 - subscriptionId: number;  
167 - errorCode: number;  
168 - errorMsg: Nullable<string>;  
169 - data: {  
170 - string: Record<string, [number, string][]>;  
171 - };  
172 - latestValues: {  
173 - string: Record<string, number>;  
174 - };  
175 -}  
176 -  
177 -export enum EntityTypeEnum {  
178 - DEVICE = 'DEVICE',  
179 -}  
180 -  
181 -export enum ScopeTypeEnum {  
182 - LATEST_TELEMERY = 'LATEST_TELEMERY',  
183 -}  
184 -  
185 -export type DataFetchUpdateFn = (message: ReceiveMessageType, attr: string) => void;  
186 -  
187 -export type MultipleDataFetchUpdateFn = (  
188 - message: ReceiveGroupMessageType,  
189 - deviceId: string,  
190 - attr: string[]  
191 -) => void;  
192 -  
193 -// 旧 组件key  
194 -// TEXT_COMPONENT_1 = 'text-component-1',  
195 -// TEXT_COMPONENT_2 = 'text-component-2',  
196 -// TEXT_COMPONENT_3 = 'text-component-3',  
197 -// TEXT_COMPONENT_4 = 'text-component-4',  
198 -// TEXT_COMPONENT_5 = 'text-component-5',  
199 -// INSTRUMENT_COMPONENT_1 = 'instrument-component-1',  
200 -// INSTRUMENT_COMPONENT_2 = 'instrument-component-2',  
201 -// DIGITAL_DASHBOARD_COMPONENT = 'digital-dashboard-component',  
202 -// PICTURE_COMPONENT_1 = 'picture-component-1',  
203 -// CONTROL_COMPONENT_TOGGLE_SWITCH = 'control-component-toggle-switch',  
204 -// CONTROL_COMPONENT_SWITCH_WITH_ICON = 'control-component-switch-with-icon',  
205 -// CONTROL_COMPONENT_SLIDING_SWITCH = 'control-component-sliding-switch',  
206 -// MAP_COMPONENT_TRACK_REAL = 'map-component-track-real',  
207 -// MAP_COMPONENT_TRACK_HISTORY = 'map-component-track-history',  
@@ -18,3 +18,8 @@ export const packageList: PackagesType = { @@ -18,3 +18,8 @@ export const packageList: PackagesType = {
18 // [PackagesCategoryEnum.STATISTICS]: STATISTICSList, 18 // [PackagesCategoryEnum.STATISTICS]: STATISTICSList,
19 [PackagesCategoryEnum.OTHER]: OtherList, 19 [PackagesCategoryEnum.OTHER]: OtherList,
20 }; 20 };
  21 +
  22 +/**
  23 + * @description
  24 + */
  25 +export const CUSTOM_SUBSCRIBE_MESSAGE_COMPONENT_KEY_LIST: string[] = [];
  1 +import { inject, provide } from 'vue';
  2 +
  3 +const SymbolKey = Symbol('data-board');
  4 +
  5 +export interface ContextOptionsType {
  6 + send: (data: string | ArrayBuffer | Blob, useBuffer?: boolean | undefined) => boolean;
  7 + close: (code?: number | undefined, reason?: string | undefined) => void;
  8 +}
  9 +
  10 +export const createDataBoardContext = (options: ContextOptionsType) => {
  11 + provide(SymbolKey, options);
  12 +};
  13 +
  14 +export const useDataBoardContext = () => {
  15 + return inject<ContextOptionsType>(SymbolKey) || ({} as Partial<ContextOptionsType>);
  16 +};
@@ -25,10 +25,11 @@ @@ -25,10 +25,11 @@
25 import { ModalParamsType } from '/#/utils'; 25 import { ModalParamsType } from '/#/utils';
26 import { DataActionModeEnum } from '/@/enums/toolEnum'; 26 import { DataActionModeEnum } from '/@/enums/toolEnum';
27 import { HistoryTrendModal } from './components/HistoryTrendModal'; 27 import { HistoryTrendModal } from './components/HistoryTrendModal';
28 - import { useSocket } from '../packages/hook/useSocket';  
29 import { watch } from 'vue'; 28 import { watch } from 'vue';
30 import { useRootSetting } from '/@/hooks/setting/useRootSetting'; 29 import { useRootSetting } from '/@/hooks/setting/useRootSetting';
31 import { ThemeEnum } from '/@/enums/appEnum'; 30 import { ThemeEnum } from '/@/enums/appEnum';
  31 + import { createDataBoardContext } from './hooks/useDataBoardContext';
  32 + import { useSocket } from '/@/views/visual/packages/hook/socket/useSocket';
32 33
33 const props = defineProps<{ 34 const props = defineProps<{
34 value?: Recordable; 35 value?: Recordable;
@@ -72,7 +73,9 @@ @@ -72,7 +73,9 @@
72 openTrendModal(true, { mode: DataActionModeEnum.READ, record: data } as ModalParamsType); 73 openTrendModal(true, { mode: DataActionModeEnum.READ, record: data } as ModalParamsType);
73 }; 74 };
74 75
75 - useSocket(dataSource); 76 + const { send, close } = useSocket(dataSource);
  77 +
  78 + createDataBoardContext({ send, close });
76 79
77 const { getDarkMode } = useRootSetting(); 80 const { getDarkMode } = useRootSetting();
78 watch( 81 watch(
@@ -164,3 +167,4 @@ @@ -164,3 +167,4 @@
164 </template> 167 </template>
165 168
166 <style lang="less" scoped></style> 169 <style lang="less" scoped></style>
  170 +../packages/hook/socket/useSocket