简柏林 / thingskit-scada · Commits

Commit 7d9352774ca41a56848a1d808941e997590687b8

Authored by ww
1 parent a267a621

perf: 修复流量计组件设置颜色无效

Inline Side-by-side
Showing 8 changed files with 237 additions and 216 deletions
... ... @@ -55,8 +55,10 @@ export interface ChartOptionType {
55 55 unit?: string
56 56 }
57 57
58   -export interface FlowMeterOptionType {
59   -
  58 +export interface FlowMeterColorItemType {
  59 + key: string
  60 + value: string
  61 + label: string
60 62 }
61 63
62 64 export interface VideoOptionType {
... ... @@ -97,9 +99,8 @@ export interface NodeDataDataSourceJsonType {
97 99 deviceProfileId?: string
98 100 label?: string
99 101 }
100   - circularFlowMeterOption?: FlowMeterOptionType// 圆形水球图数据暂定any
101   - additional?: any// 圆形水球图颜色配置数据暂定any
102   - rectFlowMeterOption?: FlowMeterOptionType// 方形水球图颜色配置数据暂定any
  102 + circularFlowMeterOption?: FlowMeterColorItemType[] // 圆形水球图数据暂定any
  103 + rectFlowMeterOption?: FlowMeterColorItemType[] // 方形水球图颜色配置数据暂定any
103 104 thermometerOption?: any// 温度计数据暂定any
104 105 }
105 106
... ...
1 1 <script setup lang="ts">
2 2 import { Button, Divider, Space } from 'ant-design-vue'
3 3 import { onMounted, ref, unref } from 'vue'
  4 +import { defaultFlowmetmerColorConfig } from './form.config'
4 5 import { DataSourceForm } from '@/core/Library/components/PublicForm/components/DataSourceForm'
5 6 import { useNodeData } from '@/core/Library/hook/useNodeData'
6 7 import type { ConfigComponentProps } from '@/core/Library/types'
7 8 import { useMessage } from '@/hooks/web/useMessage'
8   -import type { NodeDataDataSourceJsonType } from '@/api/node/model'
  9 +import type { FlowMeterColorItemType, NodeDataDataSourceJsonType } from '@/api/node/model'
9 10 import { useSavePageContent } from '@/core/Library/hook/useSavePageContent'
10   -
11 11 const props = defineProps<ConfigComponentProps>()
12 12
13 13 const { createMessage } = useMessage()
14 14
15 15 const loading = ref(false)
16 16
17   -const colorConfig = ref([
18   - {
19   - label: '背景色',
20   - value: '#8BADCB',
21   - },
22   - {
23   - label: '颜色一',
24   - value: '#4579e2',
25   - },
26   - {
27   - label: '颜色二',
28   - value: '#3461c1',
29   - },
30   - {
31   - label: '颜色三',
32   - value: '#2d55aa',
33   - },
34   -])
  17 +const colorConfig = ref<FlowMeterColorItemType[]>(defaultFlowmetmerColorConfig)
35 18
36   -const nodeDataActinType = useNodeData({ cell: props.cell!, immediate: true })
  19 +const nodeDataActinType = useNodeData({ cell: props.cell!, immediate: false })
37 20
38 21 const { getNodeAllData, saveNodeAllData, getNodeData } = nodeDataActinType
39 22
... ... @@ -57,11 +40,11 @@ const handleSubmit = async () => {
57 40
58 41 onMounted(async () => {
59 42 await getNodeAllData()
60   - if (unref(getNodeData)?.dataSourceJson) {
61   - const { circularFlowMeterOption, additional } = unref(getNodeData)?.dataSourceJson as NodeDataDataSourceJsonType
62   - colorConfig.value = additional || unref(colorConfig)
63   - if (!circularFlowMeterOption) return
64   - dataSourceFormRef.value?.setFieldsValue(circularFlowMeterOption)
  43 + const { dataSourceJson } = unref(getNodeData) || {}
  44 + if (dataSourceJson) {
  45 + const { circularFlowMeterOption } = unref(getNodeData)?.dataSourceJson as NodeDataDataSourceJsonType
  46 + colorConfig.value = circularFlowMeterOption || unref(colorConfig)
  47 + unref(dataSourceFormRef)?.setFieldsValue(unref(getNodeData)?.dataSourceJson)
65 48 }
66 49 })
67 50 </script>
... ... @@ -69,18 +52,20 @@ onMounted(async () => {
69 52 <template>
70 53 <main class="w-full h-full flex flex-col px-2 py-4 box-border">
71 54 <main class="form-container">
72   - <Divider orientation="left">
  55 + <Divider orientation="left" class="!text-sm">
73 56 数据源
74 57 </Divider>
75 58 <DataSourceForm ref="dataSourceFormRef" />
76 59 </main>
77 60 <main class="form-container mt-2">
78   - <Divider orientation="left">
  61 + <Divider orientation="left" class="!text-sm">
79 62 流量计配置
80 63 </Divider>
81 64 <Space direction="vertical">
82   - <div v-for="(item, index) in colorConfig" :key="index" class="mt-3 ml-5">
83   - <span>{{ item.label }}</span>
  65 + <div v-for="(item, index) in colorConfig" :key="index" class="mt-3 ml-5 flex">
  66 + <div class="w-20">
  67 + {{ item.label }}
  68 + </div>
84 69 <input v-model="item.value" class="ml-3" type="color">
85 70 </div>
86 71 </Space>
... ... @@ -91,3 +76,4 @@ onMounted(async () => {
91 76 </Button>
92 77 </main>
93 78 </template>
  79 +
... ...
  1 +import type { FlowMeterColorItemType } from '@/api/node/model'
  2 +
  3 +export enum FormFieldsEnum {
  4 + BACKGROUND = 'background',
  5 + COLOR_FIRST = 'colorFirst',
  6 + COLOR_SECOND = 'colorSecond',
  7 + COLOR_THIRD = 'colorThird',
  8 +}
  9 +
  10 +export const colorItemName = {
  11 + [FormFieldsEnum.BACKGROUND]: '背景颜色',
  12 + [FormFieldsEnum.COLOR_FIRST]: '颜色一',
  13 + [FormFieldsEnum.COLOR_SECOND]: '颜色二',
  14 + [FormFieldsEnum.COLOR_THIRD]: '颜色三',
  15 +}
  16 +
  17 +export const defaultFlowmetmerColorConfig: FlowMeterColorItemType[] = [
  18 + {
  19 + key: FormFieldsEnum.BACKGROUND,
  20 + label: colorItemName[FormFieldsEnum.BACKGROUND],
  21 + value: '#0d396b',
  22 + },
  23 + {
  24 + key: FormFieldsEnum.COLOR_FIRST,
  25 + label: colorItemName[FormFieldsEnum.COLOR_FIRST],
  26 + value: '#25498b',
  27 + },
  28 + {
  29 + key: FormFieldsEnum.COLOR_SECOND,
  30 + label: colorItemName[FormFieldsEnum.COLOR_SECOND],
  31 + value: '#0d5cb8',
  32 + },
  33 + {
  34 + key: FormFieldsEnum.COLOR_THIRD,
  35 + label: colorItemName[FormFieldsEnum.COLOR_THIRD],
  36 + value: '#008adf',
  37 + },
  38 +]
... ...
1   -const value = 40 // 水球图数据源
2   -export const defaultOption = {
3   - series: [
4   - {
5   - type: 'liquidFill',
6   - radius: '90%',
7   - data: [
8   - value / 100,
9   - {
10   - value: (value - 10) / 100,
11   - direction: 'left',
  1 +import { FormFieldsEnum, defaultFlowmetmerColorConfig } from './form.config'
  2 +import { isLightboxMode } from '@/utils/env'
  3 +import type { FlowMeterColorItemType } from '@/api/node/model'
  4 +
  5 +export function getSetValue(value: number) {
  6 + return [
  7 + value / 100,
  8 + (value - 10) / 100,
  9 + (value - 20) / 100,
  10 + ]
  11 +}
  12 +export const setOption = (value: number = 40, circularFlowMeterOption: FlowMeterColorItemType[] = defaultFlowmetmerColorConfig) => {
  13 + const colorMap = (isLightboxMode() ? circularFlowMeterOption : defaultFlowmetmerColorConfig).reduce((prev, next) => ({ ...prev, [next.key]: next.value }), {} as Record<FormFieldsEnum, string>)
  14 + return {
  15 + series: [
  16 + {
  17 + type: 'liquidFill',
  18 + radius: '90%',
  19 + data: getSetValue(value),
  20 + color: [colorMap[FormFieldsEnum.COLOR_FIRST], colorMap[FormFieldsEnum.COLOR_SECOND], colorMap[FormFieldsEnum.COLOR_THIRD]],
  21 + itemStyle: {
  22 + opacity: 0.6,
12 23 },
13   - ],
14   - backgroundStyle: {
15   - borderWidth: 1,
16   - color: 'transparent', // 这里设置背景色
17   - },
18   - label: {
19   - color: '#27e5f1',
20   - insideColor: '#f7e8c1',
21   - left: '50%',
22   - top: '40%',
23   - textAlign: 'center',
24   - fontSize: 20,
25   - fontWeight: 600,
26   - textBorderColor: 'rgba(0, 0, 0, 0)',
27   - textShadowColor: '#000',
28   - textShadowBlur: 0,
29   - textShadowOffsetX: 0,
30   - textShadowOffsetY: 1,
31   - },
32   - color: [
33   - {
34   - type: 'linear',
35   - x: 0,
36   - y: 0,
37   - x2: 1,
38   - y2: 1,
39   - colorStops: [
40   - {
41   - offset: 0,
42   - color: '#324791', // 这里设置水球波动 0% 处的颜色
43   - }, {
44   - offset: 1,
45   - color: '#449090', // 这里设置水球波动 100% 处的颜色
46   - }],
47   - global: false,
  24 + backgroundStyle: {
  25 + borderWidth: 1,
  26 + color: colorMap[FormFieldsEnum.BACKGROUND], // 这里设置背景色
48 27 },
49   - ],
50   - outline: {
51   - show: true,
52   - borderDistance: 1,
53   - itemStyle: {
54   - borderWidth: 0,
55   - color: {
56   - type: 'linear',
57   - x: 0,
58   - y: 0,
59   - x2: 1,
60   - y2: 0,
61   - colorStops: [
62   - {
63   - offset: 0, color: '#0b2355', // 这里设置水球外边框 0% 处的颜色
64   - },
65   - {
66   - offset: 1, color: '#195b9d', // 这里设置水球外边框 100% 处的颜色
67   - },
68   - ],
69   - global: false,
  28 + emphasis: {
  29 + itemStyle: {
  30 + opacity: 0.9,
  31 + },
  32 + },
  33 + label: {
  34 + color: '#fff',
  35 + insideColor: '#f7e8c1',
  36 + left: '50%',
  37 + top: '40%',
  38 + textAlign: 'center',
  39 + fontSize: 20,
  40 + fontWeight: 600,
  41 + textBorderColor: 'rgba(0, 0, 0, 0)',
  42 + textShadowColor: '#000',
  43 + textShadowBlur: 0,
  44 + textShadowOffsetX: 0,
  45 + textShadowOffsetY: 1,
  46 + },
  47 +
  48 + outline: {
  49 + show: true,
  50 + borderDistance: 1,
  51 + itemStyle: {
  52 + borderWidth: 0,
  53 + color: {
  54 + type: 'linear',
  55 + x: 0,
  56 + y: 0,
  57 + x2: 1,
  58 + y2: 0,
  59 + colorStops: [
  60 + {
  61 + offset: 0,
  62 + color: '#0b2355', // 这里设置水球外边框 0% 处的颜色
  63 + },
  64 + {
  65 + offset: 1,
  66 + color: '#195b9d', // 这里设置水球外边框 100% 处的颜色
  67 + },
  68 + ],
  69 + global: false,
  70 + },
70 71 },
71 72 },
72 73 },
73   - },
74   - ],
  74 + ],
  75 + }
75 76 }
... ...
... ... @@ -2,17 +2,22 @@
2 2 import { computed, onMounted, onUnmounted, ref, unref } from 'vue'
3 3 import type { ECharts, EChartsOption } from 'echarts'
4 4 import { init } from 'echarts'
5   -import { defaultOption } from './index.config'
  5 +import { getSetValue, setOption } from './index.config'
6 6 import type { CreateComponentType, RenderComponentExposeType } from '@/core/Library/types'
7 7 import 'echarts-liquidfill' // 水球图插件
8 8 import { useOnMessage } from '@/core/Library/hook/useOnMessage'
9 9 import type { NodeDataDataSourceJsonType } from '@/api/node/model'
10 10 import { useLatestMessageValue } from '@/core/Library/hook/useLatestMessageValue'
  11 +import { useContentDataStore } from '@/store/modules/contentData'
11 12
12 13 const props = defineProps<{
13 14 config: CreateComponentType
14 15 }>()
15 16
  17 +const contentDataStore = useContentDataStore()
  18 +
  19 +const getCurrentNodeData = computed(() => contentDataStore.contentData.find(item => item.id === props.config.cellInfo?.id))
  20 +
16 21 const getCellBounds = computed(() => props.config.cellBounds || { width: 300, height: 300, x: 0, y: 0 })
17 22
18 23 const chartElRef = ref<Nullable<HTMLDivElement>>()
... ... @@ -20,8 +25,10 @@ const chartElRef = ref<Nullable<HTMLDivElement>>()
20 25 const chartInstance = ref<Nullable<ECharts>>()
21 26
22 27 function initChartInstance() {
  28 + const { dataSourceJson } = unref(getCurrentNodeData) || {}
  29 + const { circularFlowMeterOption } = dataSourceJson || {}
23 30 chartInstance.value = init(unref(chartElRef))
24   - chartInstance.value.setOption(defaultOption)
  31 + chartInstance.value.setOption(setOption(40, circularFlowMeterOption))
25 32 }
26 33
27 34 const { onMessage } = useOnMessage({
... ... @@ -31,13 +38,7 @@ const { onMessage } = useOnMessage({
31 38 const { latestValue } = useLatestMessageValue(message.data, attr)
32 39 unref(chartInstance)?.setOption({
33 40 series: [{
34   - data: [
35   - Number(latestValue) / 100,
36   - {
37   - value: (Number(latestValue) - 10) / 100,
38   - direction: 'left',
39   - },
40   - ],
  41 + data: getSetValue(Number(latestValue)),
41 42 }],
42 43 } as EChartsOption)
43 44 },
... ...
1 1 <script setup lang="ts">
2 2 import { Button, Divider, Space } from 'ant-design-vue'
3 3 import { onMounted, ref, unref } from 'vue'
  4 +import { defaultFlowmetmerColorConfig } from '../CircularFlowMeter/form.config'
4 5 import { DataSourceForm } from '@/core/Library/components/PublicForm/components/DataSourceForm'
5 6 import { useNodeData } from '@/core/Library/hook/useNodeData'
6 7 import type { ConfigComponentProps } from '@/core/Library/types'
7 8 import { useMessage } from '@/hooks/web/useMessage'
8   -import type { NodeDataDataSourceJsonType } from '@/api/node/model'
  9 +import type { FlowMeterColorItemType } from '@/api/node/model'
9 10 import { useSavePageContent } from '@/core/Library/hook/useSavePageContent'
10 11
11 12 const props = defineProps<ConfigComponentProps>()
... ... @@ -14,24 +15,7 @@ const { createMessage } = useMessage()
14 15
15 16 const loading = ref(false)
16 17
17   -const colorConfig = ref([
18   - {
19   - label: '背景色',
20   - value: '#8BADCB',
21   - },
22   - {
23   - label: '颜色一',
24   - value: '#4579e2',
25   - },
26   - {
27   - label: '颜色二',
28   - value: '#3461c1',
29   - },
30   - {
31   - label: '颜色三',
32   - value: '#2d55aa',
33   - },
34   -])
  18 +const colorConfig = ref<FlowMeterColorItemType[]>(defaultFlowmetmerColorConfig)
35 19
36 20 const nodeDataActinType = useNodeData({ cell: props.cell!, immediate: true })
37 21
... ... @@ -57,11 +41,11 @@ const handleSubmit = async () => {
57 41
58 42 onMounted(async () => {
59 43 await getNodeAllData()
60   - if (unref(getNodeData)?.dataSourceJson) {
61   - const { rectFlowMeterOption, additional } = unref(getNodeData)?.dataSourceJson as NodeDataDataSourceJsonType
62   - colorConfig.value = additional || unref(colorConfig)
63   - if (!rectFlowMeterOption) return
64   - dataSourceFormRef.value?.setFieldsValue(rectFlowMeterOption)
  44 + const { dataSourceJson } = unref(getNodeData) || {}
  45 + if (dataSourceJson) {
  46 + const { rectFlowMeterOption } = dataSourceJson || {}
  47 + colorConfig.value = rectFlowMeterOption || unref(colorConfig)
  48 + dataSourceFormRef.value?.setFieldsValue(dataSourceJson)
65 49 }
66 50 })
67 51 </script>
... ... @@ -69,18 +53,20 @@ onMounted(async () => {
69 53 <template>
70 54 <main class="w-full h-full flex flex-col px-2 py-4 box-border">
71 55 <main class="form-container">
72   - <Divider orientation="left">
  56 + <Divider orientation="left" class="!text-sm">
73 57 数据源
74 58 </Divider>
75 59 <DataSourceForm ref="dataSourceFormRef" />
76 60 </main>
77 61 <main class="form-container mt-2">
78   - <Divider orientation="left">
  62 + <Divider orientation="left" class="!text-sm">
79 63 流量计配置
80 64 </Divider>
81 65 <Space direction="vertical">
82   - <div v-for="(item, index) in colorConfig" :key="index" class="mt-3 ml-5">
83   - <span>{{ item.label }}</span>
  66 + <div v-for="(item, index) in colorConfig" :key="index" class="flex mt-3 ml-5">
  67 + <div class="w-20">
  68 + {{ item.label }}
  69 + </div>
84 70 <input v-model="item.value" class="ml-3" type="color">
85 71 </div>
86 72 </Space>
... ...
1   -const value = 40 // 水球图数据源
2   -export const defaultOption = {
3   - series: [
4   - {
5   - type: 'liquidFill',
6   - shape: 'rect', // 设置水球图形状
7   - radius: '90%',
8   - data: [
9   - value / 100,
10   - {
11   - value: (value - 10) / 100,
12   - direction: 'left',
13   - },
14   - ],
15   - backgroundStyle: {
16   - borderWidth: 1,
17   - color: 'transparent', // 这里设置背景色
18   - },
19   - label: {
20   - color: '#27e5f1',
21   - insideColor: '#f7e8c1',
22   - left: '50%',
23   - top: '40%',
24   - textAlign: 'center',
25   - fontSize: 20,
26   - fontWeight: '600',
27   - textBorderColor: 'rgba(0, 0, 0, 0)',
28   - textShadowColor: '#000',
29   - textShadowBlur: '0',
30   - textShadowOffsetX: 0,
31   - textShadowOffsetY: 1,
32   - },
33   - color: [{
34   - type: 'linear',
35   - x: 0,
36   - y: 0,
37   - x2: 1,
38   - y2: 1,
39   - colorStops: [{
40   - offset: 0,
41   - color: ['#324791'], // 这里设置水球波动 0% 处的颜色
42   - }, {
43   - offset: 1,
44   - color: ['#449090'], // 这里设置水球波动 100% 处的颜色
45   - }],
46   - global: false,
47   - }],
48   - outline: {
49   - show: true,
50   - borderDistance: 1,
  1 +import { FormFieldsEnum, defaultFlowmetmerColorConfig } from '../CircularFlowMeter/form.config'
  2 +import { isLightboxMode } from '@/utils/env'
  3 +import type { FlowMeterColorItemType } from '@/api/node/model'
  4 +
  5 +export function getSetValue(value: number) {
  6 + return [
  7 + value / 100,
  8 + (value - 10) / 100,
  9 + (value - 20) / 100,
  10 + ]
  11 +}
  12 +export const setOption = (value: number = 40, circularFlowMeterOption: FlowMeterColorItemType[] = defaultFlowmetmerColorConfig) => {
  13 + const colorMap = (isLightboxMode() ? circularFlowMeterOption : defaultFlowmetmerColorConfig).reduce((prev, next) => ({ ...prev, [next.key]: next.value }), {} as Record<FormFieldsEnum, string>)
  14 + return {
  15 + series: [
  16 + {
  17 + type: 'liquidFill',
  18 + radius: '90%',
  19 + shape: 'rect', // 设置水球图形状
  20 + data: getSetValue(value),
  21 + color: [colorMap[FormFieldsEnum.COLOR_FIRST], colorMap[FormFieldsEnum.COLOR_SECOND], colorMap[FormFieldsEnum.COLOR_THIRD]],
51 22 itemStyle: {
52   - borderWidth: 0,
53   - color: {
54   - type: 'linear',
55   - x: 0,
56   - y: 0,
57   - x2: 1,
58   - y2: 0,
59   - colorStops: [{
60   - offset: 0, color: '#0b2355', // 这里设置水球外边框 0% 处的颜色
61   - }, {
62   - offset: 1, color: '#195b9d', // 这里设置水球外边框 100% 处的颜色
63   - }],
64   - global: false,
  23 + opacity: 0.6,
  24 + },
  25 + backgroundStyle: {
  26 + borderWidth: 1,
  27 + color: colorMap[FormFieldsEnum.BACKGROUND], // 这里设置背景色
  28 + },
  29 + emphasis: {
  30 + itemStyle: {
  31 + opacity: 0.9,
  32 + },
  33 + },
  34 + label: {
  35 + color: '#fff',
  36 + insideColor: '#f7e8c1',
  37 + left: '50%',
  38 + top: '40%',
  39 + textAlign: 'center',
  40 + fontSize: 20,
  41 + fontWeight: 600,
  42 + textBorderColor: 'rgba(0, 0, 0, 0)',
  43 + textShadowColor: '#000',
  44 + textShadowBlur: 0,
  45 + textShadowOffsetX: 0,
  46 + textShadowOffsetY: 1,
  47 + },
  48 +
  49 + outline: {
  50 + show: true,
  51 + borderDistance: 1,
  52 + itemStyle: {
  53 + borderWidth: 0,
  54 + color: {
  55 + type: 'linear',
  56 + x: 0,
  57 + y: 0,
  58 + x2: 1,
  59 + y2: 0,
  60 + colorStops: [
  61 + {
  62 + offset: 0,
  63 + color: '#0b2355', // 这里设置水球外边框 0% 处的颜色
  64 + },
  65 + {
  66 + offset: 1,
  67 + color: '#195b9d', // 这里设置水球外边框 100% 处的颜色
  68 + },
  69 + ],
  70 + global: false,
  71 + },
65 72 },
66 73 },
67 74 },
68   - },
69   - ],
  75 + ],
  76 + }
70 77 }
... ...
... ... @@ -2,17 +2,22 @@
2 2 import { computed, onMounted, onUnmounted, ref, unref } from 'vue'
3 3 import type { ECharts, EChartsOption } from 'echarts'
4 4 import { init } from 'echarts'
5   -import { defaultOption } from './index.config'
  5 +import { getSetValue, setOption } from './index.config'
6 6 import type { CreateComponentType, RenderComponentExposeType } from '@/core/Library/types'
7 7 import 'echarts-liquidfill' // 水球图插件
8   -import type { NodeDataDataSourceJsonType } from '@/api/node/model'
9 8 import { useOnMessage } from '@/core/Library/hook/useOnMessage'
  9 +import type { NodeDataDataSourceJsonType } from '@/api/node/model'
10 10 import { useLatestMessageValue } from '@/core/Library/hook/useLatestMessageValue'
  11 +import { useContentDataStore } from '@/store/modules/contentData'
11 12
12 13 const props = defineProps<{
13 14 config: CreateComponentType
14 15 }>()
15 16
  17 +const contentDataStore = useContentDataStore()
  18 +
  19 +const getCurrentNodeData = computed(() => contentDataStore.contentData.find(item => item.id === props.config.cellInfo?.id))
  20 +
16 21 const getCellBounds = computed(() => props.config.cellBounds || { width: 300, height: 300, x: 0, y: 0 })
17 22
18 23 const chartElRef = ref<Nullable<HTMLDivElement>>()
... ... @@ -20,8 +25,10 @@ const chartElRef = ref<Nullable<HTMLDivElement>>()
20 25 const chartInstance = ref<Nullable<ECharts>>()
21 26
22 27 function initChartInstance() {
  28 + const { dataSourceJson } = unref(getCurrentNodeData) || {}
  29 + const { rectFlowMeterOption } = dataSourceJson || {}
23 30 chartInstance.value = init(unref(chartElRef))
24   - chartInstance.value.setOption(defaultOption)
  31 + chartInstance.value.setOption(setOption(40, rectFlowMeterOption))
25 32 }
26 33
27 34 const { onMessage } = useOnMessage({
... ... @@ -31,13 +38,7 @@ const { onMessage } = useOnMessage({
31 38 const { latestValue } = useLatestMessageValue(message.data, attr)
32 39 unref(chartInstance)?.setOption({
33 40 series: [{
34   - data: [
35   - Number(latestValue) / 100,
36   - {
37   - value: (Number(latestValue) - 10) / 100,
38   - direction: 'left',
39   - },
40   - ],
  41 + data: getSetValue(Number(latestValue)),
41 42 }],
42 43 } as EChartsOption)
43 44 },
... ...