Commit d9e6d691f8dd3dfa6a7769526a8f2b5152eebe92

Authored by ww
1 parent f71dffc5

perf: 优化温度计预览时无法显示具体值

1 1 <script setup lang="ts">
2 2 import { computed, nextTick, onMounted, reactive, unref } from 'vue'
3   -import { Tag } from 'ant-design-vue'
  3 +import { Empty, Tag } from 'ant-design-vue'
4 4 import { useIntervalFn } from '@vueuse/core'
5 5 import { ScrollList } from './ScrollList'
6 6 import { fetchAlarmList } from '@/api/alarm'
... ... @@ -86,6 +86,7 @@ onMounted(async () => {
86 86 <template>
87 87 <div class="seamless-scroll w-full h-full flex justify-center items-center overflow-y-scroll">
88 88 <ScrollList
  89 + v-if="initOptions.alarmList.length"
89 90 v-model="initOptions.scroll" :single-wait-time="initOptions.interval" :list="initOptions.alarmList"
90 91 :is-rem-unit="true" :delay="10" :wheel="true" hover
91 92 >
... ... @@ -103,6 +104,7 @@ onMounted(async () => {
103 104 </div>
104 105 </div>
105 106 </ScrollList>
  107 + <Empty v-else description="暂无数据" />
106 108 </div>
107 109 </template>
108 110
... ...
... ... @@ -67,7 +67,7 @@ else {
67 67 }
68 68
69 69 // 温度计默认配置项
70   -export const defaultOption: EChartsOption = {
  70 +export const getDefaultOption: EChartsOption = {
71 71 grid: {
72 72 left: '50%',
73 73 },
... ...
... ... @@ -2,7 +2,7 @@
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, getShowValue } from './index.config'
  5 +import { getDefaultOption, getShowValue } from './index.config'
6 6 import type { CreateComponentType, RenderComponentExposeType } from '@/core/Library/types'
7 7 import type { NodeDataDataSourceJsonType } from '@/api/node/model'
8 8 import { useLatestMessageValue } from '@/core/Library/hook/useLatestMessageValue'
... ... @@ -20,13 +20,13 @@ const chartInstance = ref<Nullable<ECharts>>()
20 20
21 21 function initChartInstance() {
22 22 chartInstance.value = init(unref(chartElRef))
23   - chartInstance.value.setOption(defaultOption)
  23 + chartInstance.value.setOption(getDefaultOption)
24 24 }
25 25
26 26 const { onMessage } = useOnMessage({
27 27 onReceiveDataSourceMessage(commandSource, message) {
28 28 const { data } = commandSource
29   - const { deviceInfo, attrInfo } = data || {}
  29 + const { deviceInfo, attrInfo } = (data || {}) as NodeDataDataSourceJsonType
30 30 const { deviceName } = deviceInfo || {}
31 31 const { attr } = data as NodeDataDataSourceJsonType
32 32 const { latestValue } = useLatestMessageValue(message.data, attr)
... ... @@ -34,7 +34,26 @@ const { onMessage } = useOnMessage({
34 34 title: {
35 35 text: `${deviceName || ''}-${attrInfo.name || ''}`,
36 36 },
37   - series: [{ data: [{ value: getShowValue(Number(latestValue)) }] }],
  37 + series: [{
  38 + data: [{
  39 + value: getShowValue(Number(latestValue)),
  40 + label: {
  41 + show: true,
  42 + position: [20, '40%'],
  43 + width: 100,
  44 + height: 30,
  45 + color: '#000',
  46 + padding: 5,
  47 + fontSize: 20,
  48 + formatter: `${Number(latestValue)} {unit|℃}`,
  49 + rich: {
  50 + unit: {
  51 + fontSize: 14,
  52 + },
  53 + },
  54 + },
  55 + }],
  56 + }],
38 57 } as EChartsOption)
39 58 },
40 59 })
... ...