Commit 1d986bc057987bdfd5831d20ea1c3896968566d8
1 parent
eb4f2d6a
fix: DEFECT-1723 修复鼠标移入折线图时无法显示具体值
Showing
3 changed files
with
16 additions
and
7 deletions
| @@ -9,6 +9,7 @@ import type { NodeDataDataSourceJsonType } from '@/api/node/model' | @@ -9,6 +9,7 @@ import type { NodeDataDataSourceJsonType } from '@/api/node/model' | ||
| 9 | import { SocketSubscriberEnum } from '@/enums/datasource' | 9 | import { SocketSubscriberEnum } from '@/enums/datasource' |
| 10 | import type { SubscriptionData } from '@/core/websocket/type/message' | 10 | import type { SubscriptionData } from '@/core/websocket/type/message' |
| 11 | import { formatToDateTime } from '@/utils/dateUtil' | 11 | import { formatToDateTime } from '@/utils/dateUtil' |
| 12 | +import type { CommandSource } from '@/core/websocket/processor' | ||
| 12 | 13 | ||
| 13 | const props = defineProps<{ | 14 | const props = defineProps<{ |
| 14 | config: CreateComponentType | 15 | config: CreateComponentType |
| @@ -25,18 +26,25 @@ function initChartInstance() { | @@ -25,18 +26,25 @@ function initChartInstance() { | ||
| 25 | chartInstance.value.setOption(defaultOption) | 26 | chartInstance.value.setOption(defaultOption) |
| 26 | } | 27 | } |
| 27 | 28 | ||
| 28 | -const handleHistoryData = (message: SubscriptionData, attr: string) => { | ||
| 29 | - const data = message[attr] | 29 | +const handleHistoryData = (commandSource: CommandSource, message: SubscriptionData) => { |
| 30 | + const { data } = commandSource | ||
| 31 | + const { attrInfo, deviceInfo, attr } = data as NodeDataDataSourceJsonType | ||
| 32 | + const { deviceName } = deviceInfo || {} | ||
| 33 | + | ||
| 34 | + const historyData = message[attr] | ||
| 30 | const xAxisData: string[] = [] | 35 | const xAxisData: string[] = [] |
| 31 | const seriesData: number[] = [] | 36 | const seriesData: number[] = [] |
| 32 | 37 | ||
| 33 | - for (const item of data) { | 38 | + for (const item of historyData) { |
| 34 | const [ts, value] = item | 39 | const [ts, value] = item |
| 35 | xAxisData.push(formatToDateTime(ts)) | 40 | xAxisData.push(formatToDateTime(ts)) |
| 36 | seriesData.push(value) | 41 | seriesData.push(value) |
| 37 | } | 42 | } |
| 38 | 43 | ||
| 39 | unref(chartInstance)?.setOption({ | 44 | unref(chartInstance)?.setOption({ |
| 45 | + title: { | ||
| 46 | + text: `${deviceName || ''}-${attrInfo.name || ''}`, | ||
| 47 | + }, | ||
| 40 | xAxis: { data: xAxisData }, | 48 | xAxis: { data: xAxisData }, |
| 41 | series: { data: seriesData }, | 49 | series: { data: seriesData }, |
| 42 | } as EChartsOption) | 50 | } as EChartsOption) |
| @@ -45,11 +53,11 @@ const handleHistoryData = (message: SubscriptionData, attr: string) => { | @@ -45,11 +53,11 @@ const handleHistoryData = (message: SubscriptionData, attr: string) => { | ||
| 45 | const { onMessage } = useOnMessage({ | 53 | const { onMessage } = useOnMessage({ |
| 46 | onReceiveDataSourceMessage(commandSource, message) { | 54 | onReceiveDataSourceMessage(commandSource, message) { |
| 47 | const { data } = commandSource | 55 | const { data } = commandSource |
| 48 | - const { chartOption, attr } = data as NodeDataDataSourceJsonType | 56 | + const { chartOption } = data as NodeDataDataSourceJsonType |
| 49 | const { queryType } = chartOption || {} | 57 | const { queryType } = chartOption || {} |
| 50 | 58 | ||
| 51 | if (queryType === SocketSubscriberEnum.HISTORY_CMDS) | 59 | if (queryType === SocketSubscriberEnum.HISTORY_CMDS) |
| 52 | - handleHistoryData(message.data, attr) | 60 | + handleHistoryData(commandSource, message.data) |
| 53 | }, | 61 | }, |
| 54 | }) | 62 | }) |
| 55 | 63 |
| @@ -4,7 +4,8 @@ import { isLightboxMode } from '@/utils/env' | @@ -4,7 +4,8 @@ import { isLightboxMode } from '@/utils/env' | ||
| 4 | export const getDefaultOption = (): EChartsOption => { | 4 | export const getDefaultOption = (): EChartsOption => { |
| 5 | return { | 5 | return { |
| 6 | tooltip: { | 6 | tooltip: { |
| 7 | - trigger: 'axis', | 7 | + trigger: 'item', |
| 8 | + confine: true, | ||
| 8 | }, | 9 | }, |
| 9 | grid: { | 10 | grid: { |
| 10 | left: '3%', | 11 | left: '3%', |
| @@ -64,7 +64,7 @@ const handlerTimeSeriesData = (commandSource: CommandSource, message: Subscripti | @@ -64,7 +64,7 @@ const handlerTimeSeriesData = (commandSource: CommandSource, message: Subscripti | ||
| 64 | 64 | ||
| 65 | unref(chartInstance)?.setOption({ | 65 | unref(chartInstance)?.setOption({ |
| 66 | title: { | 66 | title: { |
| 67 | - text: `${deviceName}-${attrInfo.name}`, | 67 | + text: `${deviceName || ''}-${attrInfo.name || ''}`, |
| 68 | }, | 68 | }, |
| 69 | dataset: { | 69 | dataset: { |
| 70 | dimensions: ['ts', attr], | 70 | dimensions: ['ts', attr], |