Merge branch 'perf/thermometer-component' into 'main_dev'

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

See merge request yunteng/thingskit-scada!197

 <script setup lang="ts">
 <script setup lang="ts">
 import { computed, nextTick, onMounted, reactive, unref } from 'vue'
 import { computed, nextTick, onMounted, reactive, unref } from 'vue'
-import { Tag } from 'ant-design-vue'
+import { Empty, Tag } from 'ant-design-vue'
 import { useIntervalFn } from '@vueuse/core'
 import { useIntervalFn } from '@vueuse/core'
 import { ScrollList } from './ScrollList'
 import { ScrollList } from './ScrollList'
 import { fetchAlarmList } from '@/api/alarm'
 import { fetchAlarmList } from '@/api/alarm'
@@ -86,6 +86,7 @@ onMounted(async () => {
 <template>
 <template>
   <div class="seamless-scroll w-full h-full flex justify-center items-center overflow-y-scroll">
   <div class="seamless-scroll w-full h-full flex justify-center items-center overflow-y-scroll">
     <ScrollList
     <ScrollList
+      v-if="initOptions.alarmList.length"
       v-model="initOptions.scroll" :single-wait-time="initOptions.interval" :list="initOptions.alarmList"
       v-model="initOptions.scroll" :single-wait-time="initOptions.interval" :list="initOptions.alarmList"
       :is-rem-unit="true" :delay="10" :wheel="true" hover
       :is-rem-unit="true" :delay="10" :wheel="true" hover
     >
     >
@@ -103,6 +104,7 @@ onMounted(async () => {
         </div>
         </div>
       </div>
       </div>
     </ScrollList>
     </ScrollList>
+    <Empty v-else description="暂无数据" />
   </div>
   </div>
 </template>
 </template>
 
 

@@ -67,7 +67,7 @@ else {
 }
 }
 
 
 // 温度计默认配置项
 // 温度计默认配置项
-export const defaultOption: EChartsOption = {
+export const getDefaultOption: EChartsOption = {
   grid: {
   grid: {
     left: '50%',
     left: '50%',
   },
   },

@@ -2,7 +2,7 @@
 import { computed, onMounted, onUnmounted, ref, unref } from 'vue'
 import { computed, onMounted, onUnmounted, ref, unref } from 'vue'
 import type { ECharts, EChartsOption } from 'echarts'
 import type { ECharts, EChartsOption } from 'echarts'
 import { init } from 'echarts'
 import { init } from 'echarts'
-import { defaultOption, getShowValue } from './index.config'
+import { getDefaultOption, getShowValue } from './index.config'
 import type { CreateComponentType, RenderComponentExposeType } from '@/core/Library/types'
 import type { CreateComponentType, RenderComponentExposeType } from '@/core/Library/types'
 import type { NodeDataDataSourceJsonType } from '@/api/node/model'
 import type { NodeDataDataSourceJsonType } from '@/api/node/model'
 import { useLatestMessageValue } from '@/core/Library/hook/useLatestMessageValue'
 import { useLatestMessageValue } from '@/core/Library/hook/useLatestMessageValue'
@@ -20,13 +20,13 @@ const chartInstance = ref<Nullable<ECharts>>()
 
 
 function initChartInstance() {
 function initChartInstance() {
   chartInstance.value = init(unref(chartElRef))
   chartInstance.value = init(unref(chartElRef))
-  chartInstance.value.setOption(defaultOption)
+  chartInstance.value.setOption(getDefaultOption)
 }
 }
 
 
 const { onMessage } = useOnMessage({
 const { onMessage } = useOnMessage({
   onReceiveDataSourceMessage(commandSource, message) {
   onReceiveDataSourceMessage(commandSource, message) {
     const { data } = commandSource
     const { data } = commandSource
-    const { deviceInfo, attrInfo } = data || {}
+    const { deviceInfo, attrInfo } = (data || {}) as NodeDataDataSourceJsonType
     const { deviceName } = deviceInfo || {}
     const { deviceName } = deviceInfo || {}
     const { attr } = data as NodeDataDataSourceJsonType
     const { attr } = data as NodeDataDataSourceJsonType
     const { latestValue } = useLatestMessageValue(message.data, attr)
     const { latestValue } = useLatestMessageValue(message.data, attr)
@@ -34,7 +34,26 @@ const { onMessage } = useOnMessage({
       title: {
       title: {
         text: `${deviceName || ''}-${attrInfo.name || ''}`,
         text: `${deviceName || ''}-${attrInfo.name || ''}`,
       },
       },
-      series: [{ data: [{ value: getShowValue(Number(latestValue)) }] }],
+      series: [{
+        data: [{
+          value: getShowValue(Number(latestValue)),
+          label: {
+            show: true,
+            position: [20, '40%'],
+            width: 100,
+            height: 30,
+            color: '#000',
+            padding: 5,
+            fontSize: 20,
+            formatter: `${Number(latestValue)} {unit|℃}`,
+            rich: {
+              unit: {
+                fontSize: 14,
+              },
+            },
+          },
+        }],
+      }],
     } as EChartsOption)
     } as EChartsOption)
   },
   },
 })
 })