perf(src/packages): 优化封装ws数据格式hook

+/**
+ * 此hook的作用是 ws 组装图表需要的数据格式
+ * @param data {'wendu':[[xxxxxx,xxxx]]}
+ * @returns keys:[xx,xx,xx] record:{'x':'xx'}
+ */
+import dayjs from 'dayjs'
+
+export const useAssembleDataHooks = (data: Record<string, string | [number, string]>) => {
+  const formatValueToNumber = (value: string | number, defaultValue = 0) =>
+    isNaN(value as number) ? defaultValue : Number(value)
+
+  const keys = Object.keys(data)
+
+  const record = keys.reduce((prev, next) => {
+    const [latest] = data[next] || []
+    const [ts, value] = latest as unknown as string[]
+    //把值转为number类型 wendu:"23" 转为 wendu:23
+    return { ...prev, ts: dayjs(ts).format('YYYY-MM-DD HH:mm:ss'), [next]: formatValueToNumber(value) }
+  }, {})
+  
+  return {
+    keys,
+    record
+  }
+}

 <template>
 <template>
   <v-chart
   <v-chart
-      ref="vChartRef"
-      :init-options="initOptions"
-      :theme="themeColor"
-      :option="option"
-      :manual-update="isPreview()"
-      :update-options="{
+    ref="vChartRef"
+    :init-options="initOptions"
+    :theme="themeColor"
+    :option="option"
+    :manual-update="isPreview()"
+    :update-options="{
       replaceMerge: replaceMergeArr
       replaceMerge: replaceMergeArr
     }"
     }"
-      autoresize
-      @mouseover="handleHighlight"
-      @mouseout="handleDownplay"
+    autoresize
+    @mouseover="handleHighlight"
+    @mouseout="handleDownplay"
   >
   >
   </v-chart>
   </v-chart>
 </template>
 </template>
 
 
 <script setup lang="ts">
 <script setup lang="ts">
-import {ref, nextTick, computed, watch, PropType, onMounted} from 'vue'
+import { ref, nextTick, computed, watch, PropType, onMounted } from 'vue'
 import VChart from 'vue-echarts'
 import VChart from 'vue-echarts'
-import {useCanvasInitOptions} from '@/hooks/useCanvasInitOptions.hook'
-import {use} from 'echarts/core'
-import {CanvasRenderer} from 'echarts/renderers'
-import {BarChart} from 'echarts/charts'
-import config, {includes, seriesItem} from './config'
-import {mergeTheme} from '@/packages/public/chart'
-import {useChartDataFetch} from '@/hooks'
-import {CreateComponentType} from '@/packages/index.d'
-import {useChartEditStore} from '@/store/modules/chartEditStore/chartEditStore'
-import {isPreview} from '@/utils'
-import {DatasetComponent, GridComponent, TooltipComponent, LegendComponent} from 'echarts/components'
+import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
+import { use } from 'echarts/core'
+import { CanvasRenderer } from 'echarts/renderers'
+import { BarChart } from 'echarts/charts'
+import config, { includes, seriesItem } from './config'
+import { mergeTheme } from '@/packages/public/chart'
+import { useChartDataFetch } from '@/hooks'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { isPreview } from '@/utils'
+import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
 import isObject from 'lodash/isObject'
 import isObject from 'lodash/isObject'
 import dataJson from './data.json'
 import dataJson from './data.json'
-import {useFullScreen} from '../../utls/fullScreen'
+import { useFullScreen } from '../../utls/fullScreen'
+import cloneDeep from 'lodash/cloneDeep'
+import { useAssembleDataHooks } from '@/hooks/external/useAssembleData.hook'
+import { SocketReceiveMessageType } from '@/store/external/modules/socketStore.d'
 
 
 const props = defineProps({
 const props = defineProps({
   themeSetting: {
   themeSetting: {
@@ -77,33 +79,46 @@ const toolBoxOption = {
 }
 }
 props.chartConfig.option = {
 props.chartConfig.option = {
   ...props.chartConfig.option,
   ...props.chartConfig.option,
-  ...{toolbox: toolBoxOption}
+  ...{ toolbox: toolBoxOption }
 }
 }
 
 
 // dataset 无法变更条数的补丁
 // dataset 无法变更条数的补丁
 watch(
 watch(
-    () => props.chartConfig.option.dataset,
-    (newData: { dimensions: any }, oldData) => {
-      try {
-        if (!isObject(newData) || !('dimensions' in newData)) return
-        if (Array.isArray(newData?.dimensions)) {
-          const seriesArr = []
-          for (let i = 0; i < newData.dimensions.length - 1; i++) {
-            seriesArr.push(seriesItem)
+  () => props.chartConfig.option.dataset,
+  (newData: { dimensions: any }, oldData) => {
+    try {
+      if (!isObject(newData) || !('dimensions' in newData)) return
+      if (Array.isArray(newData?.dimensions)) {
+        const seriesArr = []
+        // 对oldData进行判断，防止传入错误数据之后对旧维度判断产生干扰
+        // 此处计算的是dimensions的Y轴维度，若是dimensions.length为0或1，则默认为1，排除X轴维度干扰
+        const oldDimensions =
+          Array.isArray(oldData?.dimensions) && oldData.dimensions.length >= 1 ? oldData.dimensions.length : 1
+        const newDimensions = newData.dimensions.length >= 1 ? newData.dimensions.length : 1
+        const dimensionsGap = newDimensions - oldDimensions
+        if (dimensionsGap < 0) {
+          props.chartConfig.option.series.splice(newDimensions - 1)
+        } else if (dimensionsGap > 0) {
+          if (!oldData || !oldData?.dimensions || !Array.isArray(oldData?.dimensions) || !oldData?.dimensions.length) {
+            props.chartConfig.option.series = []
           }
           }
-          replaceMergeArr.value = ['series']
-          props.chartConfig.option.series = seriesArr
-          nextTick(() => {
-            replaceMergeArr.value = []
-          })
+          for (let i = 0; i < dimensionsGap; i++) {
+            seriesArr.push(cloneDeep(seriesItem))
+          }
+          props.chartConfig.option.series.push(...seriesArr)
         }
         }
-      } catch (error) {
-        console.log(error)
+        replaceMergeArr.value = ['series']
+        nextTick(() => {
+          replaceMergeArr.value = []
+        })
       }
       }
-    },
-    {
-      deep: false
+    } catch (error) {
+      console.log(error)
     }
     }
+  },
+  {
+    deep: false
+  }
 )
 )
 
 
 let seriesDataNum = -1
 let seriesDataNum = -1
@@ -167,30 +182,51 @@ const handleDownplay = () => {
 }
 }
 
 
 watch(
 watch(
-    () => props.chartConfig.option.isCarousel,
-    newData => {
-      if (newData) {
-        addPieInterval(undefined, true)
-        props.chartConfig.option.legend.show = false
-      } else {
-        props.chartConfig.option.legend.show = true
-        clearPieInterval()
-      }
+  () => props.chartConfig.option.isCarousel,
+  newData => {
+    if (newData) {
+      addPieInterval(undefined, true)
+      props.chartConfig.option.legend.show = false
+    } else {
+      props.chartConfig.option.legend.show = true
+      clearPieInterval()
     }
     }
+  }
 )
 )
 
 
 //fix 修复v-chart图表绑定联动组件视图不更新问题
 //fix 修复v-chart图表绑定联动组件视图不更新问题
-const updateVChart = (newData: any) => {
-  if (!newData) return
-  vChartRef.value?.clear()
-  vChartRef.value?.setOption({
-    ...option.value,
-    dataset: newData
-  })
+const updateVChart = (newData:SocketReceiveMessageType) => {
+  //区分是普通请求还是ws请求
+  if (!isObject(newData) || !('dimensions' in newData)) {
+    const { data } = newData
+    const { keys, record } = useAssembleDataHooks(data)
+    vChartRef.value?.setOption({
+      dataset: {
+        dimensions: ['ts', ...keys],
+        source: [record]
+      }
+    })
+  } else {
+    //异步更新，同步更新会造成联动组件控制，图表不及时更新
+    new Promise((resolve) => {
+      setTimeout(() => {
+        resolve(
+          vChartRef.value?.setOption(
+            {
+              ...option.value,
+              dataset: newData
+            },
+            {
+              notMerge: true
+            }
+          )
+        )
+      }, 100)
+    })
+  }
 }
 }
 
 
-const {vChartRef} = useChartDataFetch(props.chartConfig, useChartEditStore, (newData) => {
-  // addPieInterval(newData)
+const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, newData => {
   updateVChart(newData)
   updateVChart(newData)
 })
 })
 
 

@@ -31,7 +31,7 @@ import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } fr
 import dataJson from './data.json'
 import dataJson from './data.json'
 import { useFullScreen } from '../../utls/fullScreen'
 import { useFullScreen } from '../../utls/fullScreen'
 import { SocketReceiveMessageType } from '@/store/external/modules/socketStore.d'
 import { SocketReceiveMessageType } from '@/store/external/modules/socketStore.d'
-import dayjs from 'dayjs'
+import { useAssembleDataHooks } from '@/hooks/external/useAssembleData.hook'
 
 
 const props = defineProps({
 const props = defineProps({
   themeSetting: {
   themeSetting: {
@@ -161,20 +161,11 @@ watch(
   }
   }
 )
 )
 
 
-const formatValueToNumber = (value: string | number, defaultValue = 0) =>
-  isNaN(value as number) ? defaultValue : Number(value)
-
 //fix 修复v-chart图表绑定联动组件视图不更新问题
 //fix 修复v-chart图表绑定联动组件视图不更新问题
 const updateVChart = (newData: SocketReceiveMessageType) => {
 const updateVChart = (newData: SocketReceiveMessageType) => {
   if (!newData) return
   if (!newData) return
   const { data } = newData
   const { data } = newData
-  const keys = Object.keys(data)
-  const record = keys.reduce((prev, next) => {
-    const [latest] = data[next] || []
-    const [ts, value] = latest as unknown as string[]
-    return { ...prev, ts: dayjs(ts).format('YYYY-MM-DD HH:mm:ss'), [next]: formatValueToNumber(value) }
-    // return { ...prev, ts, [next]: formatValueToNumber(value) }
-  }, {})
+  const {keys,record}= useAssembleDataHooks(data)
   if (unref(realTimeList).length >= chartMaxDataPoint.value) {
   if (unref(realTimeList).length >= chartMaxDataPoint.value) {
     unref(realTimeList).splice(0, 1)
     unref(realTimeList).splice(0, 1)
   }
   }