Showing
1 changed file
with
38 additions
and
15 deletions
1 | <template> | 1 | <template> |
2 | <n-space class="go-decorates-flipper-number" :size="flipperGap" align="center" justify="center"> | 2 | <n-space class="go-decorates-flipper-number" :size="flipperGap" align="center" justify="center"> |
3 | - <flipper | ||
4 | - :count="item" | ||
5 | - :width="flipperWidth" | ||
6 | - :height="flipperHeight" | ||
7 | - :front-color="flipperTextColor" | ||
8 | - :back-color="flipperBgColor" | ||
9 | - :radius="flipperRadius" | ||
10 | - :flip-type="flipperType" | ||
11 | - :duration="flipperSpeed" | ||
12 | - :border-width="flipperBorderWidth" | ||
13 | - v-for="(item, index) in flipperData" | ||
14 | - :key="index" | ||
15 | - class="go-d-block" | ||
16 | - /> | 3 | + <flipper :count="item" :width="flipperWidth" :height="flipperHeight" :front-color="flipperTextColor" |
4 | + :back-color="flipperBgColor" :radius="flipperRadius" :flip-type="flipperType" :duration="flipperSpeed" | ||
5 | + :border-width="flipperBorderWidth" v-for="(item, index) in flipperData" :key="index" class="go-d-block" /> | ||
17 | </n-space> | 6 | </n-space> |
18 | </template> | 7 | </template> |
19 | 8 | ||
20 | <script setup lang="ts"> | 9 | <script setup lang="ts"> |
21 | -import { PropType, toRefs, watch, ref } from 'vue' | 10 | +import { PropType, toRefs, watch, ref, computed, unref } from 'vue' |
22 | import { CreateComponentType } from '@/packages/index.d' | 11 | import { CreateComponentType } from '@/packages/index.d' |
23 | import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' | 12 | import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' |
24 | import { useChartDataFetch } from '@/hooks' | 13 | import { useChartDataFetch } from '@/hooks' |
25 | import { Flipper } from '@/components/Pages/Flipper' | 14 | import { Flipper } from '@/components/Pages/Flipper' |
26 | import { OptionType } from './config' | 15 | import { OptionType } from './config' |
16 | +import { RequestContentTypeEnum } from '@/enums/external/httpEnum' | ||
17 | +import { useTargetData } from '@/views/chart/ContentConfigurations/components/hooks/useTargetData.hook' | ||
27 | 18 | ||
28 | const props = defineProps({ | 19 | const props = defineProps({ |
29 | chartConfig: { | 20 | chartConfig: { |
@@ -34,6 +25,37 @@ const props = defineProps({ | @@ -34,6 +25,37 @@ const props = defineProps({ | ||
34 | 25 | ||
35 | const { w, h } = toRefs(props.chartConfig.attr) | 26 | const { w, h } = toRefs(props.chartConfig.attr) |
36 | 27 | ||
28 | +const { targetData, chartEditStore } = useTargetData() | ||
29 | + | ||
30 | +const isWebsocket = computed(() => { | ||
31 | + const result = query(chartEditStore.getComponentList) | ||
32 | + if (result === false) return false | ||
33 | + | ||
34 | + if (result.id === targetData.value.id) | ||
35 | + return targetData.value.request.requestContentType as RequestContentTypeEnum === RequestContentTypeEnum.WEB_SOCKET | ||
36 | + else { | ||
37 | + return result.request.requestContentType as RequestContentTypeEnum === RequestContentTypeEnum.WEB_SOCKET | ||
38 | + } | ||
39 | +}) | ||
40 | + | ||
41 | +function query(list: CreateComponentType[]) { | ||
42 | + if (!list || !list?.length) return false | ||
43 | + | ||
44 | + for (const item of list) { | ||
45 | + if (item.id === targetData.value.id) { | ||
46 | + return item | ||
47 | + } | ||
48 | + if (item.groupList && item.groupList?.length) { | ||
49 | + const flag = query(list) | ||
50 | + if (flag) { | ||
51 | + return item | ||
52 | + } | ||
53 | + } | ||
54 | + } | ||
55 | + | ||
56 | + return false | ||
57 | +} | ||
58 | + | ||
37 | const { | 59 | const { |
38 | flipperLength, | 60 | flipperLength, |
39 | flipperBgColor, | 61 | flipperBgColor, |
@@ -75,6 +97,7 @@ watch( | @@ -75,6 +97,7 @@ watch( | ||
75 | ) | 97 | ) |
76 | 98 | ||
77 | useChartDataFetch(props.chartConfig, useChartEditStore, (newVal: string | number) => { | 99 | useChartDataFetch(props.chartConfig, useChartEditStore, (newVal: string | number) => { |
100 | + if (unref(isWebsocket)) return | ||
78 | updateDatasetHandler(newVal) | 101 | updateDatasetHandler(newVal) |
79 | }) | 102 | }) |
80 | </script> | 103 | </script> |