perf: 优化异常处理

2025-02-24 16:22:57 +08:00 · 2022-10-12 21:57:30 +08:00 · 2022-10-12 21:57:30 +08:00 · 07e56631da
commit 07e56631da
parent 1435789a6c
21 changed files with 390 additions and 307 deletions
--- a/src/packages/components/Charts/Bars/BarCommon/index.vue
+++ b/src/packages/components/Charts/Bars/BarCommon/index.vue
@ -53,17 +53,21 @@ const option = computed(() => {
 watch(
  () => props.chartConfig.option.dataset,
  (newData: { dimensions: any }, oldData) => {
-    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)
+    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)
+        }
+        replaceMergeArr.value = ['series']
+        props.chartConfig.option.series = seriesArr
+        nextTick(() => {
+          replaceMergeArr.value = []
+        })
      }
-      replaceMergeArr.value = ['series']
-      props.chartConfig.option.series = seriesArr
-      nextTick(() => {
-        replaceMergeArr.value = []
-      })
+    } catch (error) {
+      console.log(error)
    }
  },
  {
--- a/src/packages/components/Charts/Bars/BarCrossrange/index.vue
+++ b/src/packages/components/Charts/Bars/BarCrossrange/index.vue
@ -52,17 +52,21 @@ const option = computed(() => {
 watch(
  () => props.chartConfig.option.dataset,
  (newData: { dimensions: any }, oldData) => {
-    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)
+    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)
+        }
+        replaceMergeArr.value = ['series']
+        props.chartConfig.option.series = seriesArr
+        nextTick(() => {
+          replaceMergeArr.value = []
+        })
      }
-      replaceMergeArr.value = ['series']
-      props.chartConfig.option.series = seriesArr
-      nextTick(() => {
-        replaceMergeArr.value = []
-      })
+    } catch (error) {
+      console.log(error)
    }
  },
  {
--- a/src/packages/components/Charts/Lines/LineCommon/index.vue
+++ b/src/packages/components/Charts/Lines/LineCommon/index.vue
@ -53,17 +53,21 @@ const option = computed(() => {
 watch(
  () => props.chartConfig.option.dataset,
  (newData: { dimensions: any }, oldData) => {
-    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)
+    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)
+        }
+        replaceMergeArr.value = ['series']
+        props.chartConfig.option.series = seriesArr
+        nextTick(() => {
+          replaceMergeArr.value = []
+        })
      }
-      replaceMergeArr.value = ['series']
-      props.chartConfig.option.series = seriesArr
-      nextTick(() => {
-        replaceMergeArr.value = []
-      })
+    } catch (error) {
+      console.log(error)
    }
  },
  {
--- a/src/packages/components/Charts/Lines/LineGradientSingle/index.vue
+++ b/src/packages/components/Charts/Lines/LineGradientSingle/index.vue
@ -1,10 +1,5 @@
 <template>
-  <v-chart 
-    ref="vChartRef" 
-    :theme="themeColor" 
-    :option="option.value" 
-    :manual-update="isPreview()" 
-    autoresize>
+  <v-chart ref="vChartRef" :theme="themeColor" :option="option.value" :manual-update="isPreview()" autoresize>
  </v-chart>
 </template>

@ -37,14 +32,7 @@ const props = defineProps({
  }
 })

-use([
-  DatasetComponent,
-  CanvasRenderer,
-  LineChart,
-  GridComponent,
-  TooltipComponent,
-  LegendComponent,
-])
+use([DatasetComponent, CanvasRenderer, LineChart, GridComponent, TooltipComponent, LegendComponent])
 const chartEditStore = useChartEditStore()

 const option = reactive({
@ -52,32 +40,42 @@ const option = reactive({
 })

 // 渐变色处理
-watch(() => chartEditStore.getEditCanvasConfig.chartThemeColor, (newColor: keyof typeof chartColorsSearch) => {
-  if (!isPreview()) {
-    const themeColor = chartColorsSearch[newColor] || chartColorsSearch[defaultTheme]
-    props.chartConfig.option.series.forEach((value: any, index: number) => {
-      value.areaStyle.color = new graphic.LinearGradient(0, 0, 0, 1, [
-        {
-          offset: 0,
-          color: themeColor[3]
-        },
-        {
-          offset: 1,
-          color: 'rgba(0,0,0, 0)'
-        }
-      ])
-    })
+watch(
+  () => chartEditStore.getEditCanvasConfig.chartThemeColor,
+  (newColor: keyof typeof chartColorsSearch) => {
+    try {
+      if (!isPreview()) {
+        const themeColor = chartColorsSearch[newColor] || chartColorsSearch[defaultTheme]
+        props.chartConfig.option.series.forEach((value: any, index: number) => {
+          value.areaStyle.color = new graphic.LinearGradient(0, 0, 0, 1, [
+            {
+              offset: 0,
+              color: themeColor[3]
+            },
+            {
+              offset: 1,
+              color: 'rgba(0,0,0, 0)'
+            }
+          ])
+        })
+      }
+      option.value = mergeTheme(props.chartConfig.option, props.themeSetting, includes)
+      props.chartConfig.option = option.value
+    } catch (error) {
+      console.log(error)
+    }
+  },
+  {
+    immediate: true
  }
-  option.value = mergeTheme(props.chartConfig.option, props.themeSetting, includes)
-  props.chartConfig.option = option.value
-}, {
-  immediate: true
-})
+)

-
-watch(() => props.chartConfig.option.dataset, () => {
-  option.value = props.chartConfig.option
-})
+watch(
+  () => props.chartConfig.option.dataset,
+  () => {
+    option.value = props.chartConfig.option
+  }
+)

 const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore)
 </script>
--- a/src/packages/components/Charts/Lines/LineGradients/index.vue
+++ b/src/packages/components/Charts/Lines/LineGradients/index.vue
@ -1,93 +1,79 @@
 <template>
-  <v-chart
-    ref="vChartRef"
-    :theme="themeColor"
-    :option="option.value"
-    :manual-update="isPreview()"
-    autoresize
-  ></v-chart>
+  <v-chart ref="vChartRef" :theme="themeColor" :option="option.value" :manual-update="isPreview()" autoresize></v-chart>
 </template>

 <script setup lang="ts">
-import { reactive, watch, PropType } from "vue";
-import VChart from "vue-echarts";
-import { use, graphic } from "echarts/core";
-import { CanvasRenderer } from "echarts/renderers";
-import { LineChart } from "echarts/charts";
-import config, { includes } from "./config";
-import { mergeTheme } from "@/packages/public/chart";
-import { useChartEditStore } from "@/store/modules/chartEditStore/chartEditStore";
-import { chartColorsSearch, defaultTheme } from "@/settings/chartThemes/index";
-import {
-  DatasetComponent,
-  GridComponent,
-  TooltipComponent,
-  LegendComponent,
-} from "echarts/components";
-import { useChartDataFetch } from "@/hooks";
-import { isPreview } from "@/utils";
+import { reactive, watch, PropType } from 'vue'
+import VChart from 'vue-echarts'
+import { use, graphic } from 'echarts/core'
+import { CanvasRenderer } from 'echarts/renderers'
+import { LineChart } from 'echarts/charts'
+import config, { includes } from './config'
+import { mergeTheme } from '@/packages/public/chart'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { chartColorsSearch, defaultTheme } from '@/settings/chartThemes/index'
+import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
+import { useChartDataFetch } from '@/hooks'
+import { isPreview } from '@/utils'

 const props = defineProps({
  themeSetting: {
    type: Object,
-    required: true,
+    required: true
  },
  themeColor: {
    type: Object,
-    required: true,
+    required: true
  },
  chartConfig: {
    type: Object as PropType<config>,
-    required: true,
-  },
-});
+    required: true
+  }
+})

-use([
-  DatasetComponent,
-  CanvasRenderer,
-  LineChart,
-  GridComponent,
-  TooltipComponent,
-  LegendComponent,
-]);
-const chartEditStore = useChartEditStore();
+use([DatasetComponent, CanvasRenderer, LineChart, GridComponent, TooltipComponent, LegendComponent])
+const chartEditStore = useChartEditStore()

 const option = reactive({
-  value: {},
-});
+  value: {}
+})

 // 渐变色处理
 watch(
  () => chartEditStore.getEditCanvasConfig.chartThemeColor,
  (newColor: keyof typeof chartColorsSearch) => {
-    if (!isPreview()) {
-      const themeColor = chartColorsSearch[newColor] || chartColorsSearch[defaultTheme];
-      props.chartConfig.option.series.forEach((value: any, index: number) => {
-        value.areaStyle.color = new graphic.LinearGradient(0, 0, 0, 1, [
-          {
-            offset: 0,
-            color: themeColor[3 + index],
-          },
-          {
-            offset: 1,
-            color: "rgba(0,0,0, 0)",
-          },
-        ]);
-      });
+    try {
+      if (!isPreview()) {
+        const themeColor = chartColorsSearch[newColor] || chartColorsSearch[defaultTheme]
+        props.chartConfig.option.series.forEach((value: any, index: number) => {
+          value.areaStyle.color = new graphic.LinearGradient(0, 0, 0, 1, [
+            {
+              offset: 0,
+              color: themeColor[3 + index]
+            },
+            {
+              offset: 1,
+              color: 'rgba(0,0,0, 0)'
+            }
+          ])
+        })
+      }
+      option.value = mergeTheme(props.chartConfig.option, props.themeSetting, includes)
+      props.chartConfig.option = option.value
+    } catch (error) {
+      console.log(error)
    }
-    option.value = mergeTheme(props.chartConfig.option, props.themeSetting, includes);
-    props.chartConfig.option = option.value;
  },
  {
-    immediate: true,
+    immediate: true
  }
-);
+)

 watch(
  () => props.chartConfig.option.dataset,
  () => {
-    option.value = props.chartConfig.option;
+    option.value = props.chartConfig.option
  }
-);
-const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore);
+)
+const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore)
 </script>
--- a/src/packages/components/Charts/Lines/LineLinearSingle/index.vue
+++ b/src/packages/components/Charts/Lines/LineLinearSingle/index.vue
@ -43,17 +43,21 @@ const option = reactive({
 watch(
  () => chartEditStore.getEditCanvasConfig.chartThemeColor,
  (newColor: keyof typeof chartColorsSearch) => {
-    if (!isPreview()) {
-      const themeColor = chartColorsSearch[newColor] || chartColorsSearch[defaultTheme]
-      props.chartConfig.option.series.forEach((value: any) => {
-        value.lineStyle.shadowColor = themeColor[2]
-        value.lineStyle.color.colorStops.forEach((v: { color: string }, i: number) => {
-          v.color = themeColor[i]
+    try {
+      if (!isPreview()) {
+        const themeColor = chartColorsSearch[newColor] || chartColorsSearch[defaultTheme]
+        props.chartConfig.option.series.forEach((value: any) => {
+          value.lineStyle.shadowColor = themeColor[2]
+          value.lineStyle.color.colorStops.forEach((v: { color: string }, i: number) => {
+            v.color = themeColor[i]
+          })
        })
-      })
+      }
+      option.value = mergeTheme(props.chartConfig.option, props.themeSetting, includes)
+      props.chartConfig.option = option.value
+    } catch (error) {
+      console.log(error)
    }
-    option.value = mergeTheme(props.chartConfig.option, props.themeSetting, includes)
-    props.chartConfig.option = option.value
  },
  {
    immediate: true
--- a/src/packages/components/Charts/Maps/MapBase/index.vue
+++ b/src/packages/components/Charts/Maps/MapBase/index.vue
@ -64,9 +64,9 @@ registerMap(props.chartConfig.option.mapRegion.adcode, { geoJSON: {} as any, spe
 // 进行更换初始化地图 如果为china 单独处理
 const registerMapInitAsync = async () => {
  await nextTick()
-  if (props.chartConfig.option.mapRegion.adcode!="china") {
+  if (props.chartConfig.option.mapRegion.adcode != 'china') {
    await getGeojson(props.chartConfig.option.mapRegion.adcode)
-  }else{
+  } else {
    await hainanLandsHandle(props.chartConfig.option.mapRegion.showHainanIsLands)
  }
  vEchartsSetOption()
@ -90,12 +90,12 @@ const dataSetHandle = async (dataset: any) => {
  isPreview() && vEchartsSetOption()
 }
 // 处理海南群岛
-const hainanLandsHandle=async(newData:boolean)=>{
+const hainanLandsHandle = async (newData: boolean) => {
  if (newData) {
-      await getGeojson('china')
-    } else {
-      registerMap('china', { geoJSON: mapJsonWithoutHainanIsLands as any, specialAreas: {} })
-    }
+    await getGeojson('china')
+  } else {
+    registerMap('china', { geoJSON: mapJsonWithoutHainanIsLands as any, specialAreas: {} })
+  }
 }
 //监听 dataset 数据发生变化
 watch(
@ -113,8 +113,12 @@ watch(
 watch(
  () => props.chartConfig.option.mapRegion.showHainanIsLands,
  async newData => {
-    await hainanLandsHandle(newData)
-    vEchartsSetOption()
+    try {
+      await hainanLandsHandle(newData)
+      vEchartsSetOption()
+    } catch (error) {
+      console.log(error)
+    }
  },
  {
    deep: false
@ -125,12 +129,16 @@ watch(
 watch(
  () => props.chartConfig.option.mapRegion.adcode,
  async newData => {
-    await getGeojson(newData)
-    props.chartConfig.option.geo.map = newData
-    props.chartConfig.option.series.forEach((item: any) => {
-      if (item.type === 'map') item.map = newData
-    })
-    vEchartsSetOption()
+    try {
+      await getGeojson(newData)
+      props.chartConfig.option.geo.map = newData
+      props.chartConfig.option.series.forEach((item: any) => {
+        if (item.type === 'map') item.map = newData
+      })
+      vEchartsSetOption()
+    } catch (error) {
+      console.log(error)
+    }
  },
  {
    deep: false
--- a/src/packages/components/Charts/Mores/Heatmap/index.vue
+++ b/src/packages/components/Charts/Mores/Heatmap/index.vue
@ -75,7 +75,11 @@ const dataSetHandle = (dataset: typeof dataJson) => {
 watch(
  () => props.chartConfig.option.dataset,
  newData => {
-    dataSetHandle(newData)
+    try {
+      dataSetHandle(newData)
+    } catch (error) {
+      console.log(error)
+    }
  },
  {
    deep: false
--- a/src/packages/components/Charts/Mores/Process/index.vue
+++ b/src/packages/components/Charts/Mores/Process/index.vue
@ -57,7 +57,11 @@ const option = shallowReactive({
 watch(
  () => props.chartConfig.option.dataset,
  (newData: any) => {
-    option.dataset = toNumber(newData, 2)
+    try {
+      option.dataset = toNumber(newData, 2)
+    } catch (error) {
+      console.log(error)
+    }
  },
  {
    deep: false
--- a/src/packages/components/Charts/Mores/Radar/index.vue
+++ b/src/packages/components/Charts/Mores/Radar/index.vue
@ -57,7 +57,11 @@ const dataSetHandle = (dataset: typeof dataJson) => {
 watch(
  () => props.chartConfig.option.dataset,
  newData => {
-    dataSetHandle(newData)
+    try {
+      dataSetHandle(newData)
+    } catch (error) {
+      console.log(error)
+    }
  },
  {
    deep: false
--- a/src/packages/components/Charts/Mores/TreeMap/index.vue
+++ b/src/packages/components/Charts/Mores/TreeMap/index.vue
@ -49,8 +49,12 @@ const dataSetHandle = (dataset: typeof dataJson) => {
 watch(
  () => props.chartConfig.option.dataset,
  newData => {
-    if(!isArray(newData)) return
-    dataSetHandle(newData)
+    try {
+      if (!isArray(newData)) return
+      dataSetHandle(newData)
+    } catch (error) {
+      console.log(error)
+    }
  },
  {
    deep: false
--- a/src/packages/components/Charts/Mores/WaterPolo/index.vue
+++ b/src/packages/components/Charts/Mores/WaterPolo/index.vue
@ -42,23 +42,27 @@ const option = reactive({
 watch(
  () => chartEditStore.getEditCanvasConfig.chartThemeColor,
  (newColor: keyof typeof chartColorsSearch) => {
-    if (!isPreview()) {
-      const themeColor = chartColorsSearch[newColor] || chartColorsSearch[defaultTheme]
-      // 背景颜色
-      props.chartConfig.option.series[0].backgroundStyle.color = themeColor[2]
-      // 水球颜色
-      props.chartConfig.option.series[0].color[0].colorStops = [
-        {
-          offset: 0,
-          color: themeColor[0]
-        },
-        {
-          offset: 1,
-          color: themeColor[1]
-        }
-      ]
+    try {
+      if (!isPreview()) {
+        const themeColor = chartColorsSearch[newColor] || chartColorsSearch[defaultTheme]
+        // 背景颜色
+        props.chartConfig.option.series[0].backgroundStyle.color = themeColor[2]
+        // 水球颜色
+        props.chartConfig.option.series[0].color[0].colorStops = [
+          {
+            offset: 0,
+            color: themeColor[0]
+          },
+          {
+            offset: 1,
+            color: themeColor[1]
+          }
+        ]
+      }
+      option.value = props.chartConfig.option
+    } catch (error) {
+      console.log(error)
    }
-    option.value = props.chartConfig.option
  },
  {
    immediate: true
@ -75,7 +79,7 @@ const dataHandle = (newData: number | string) => {
 watch(
  () => props.chartConfig.option.dataset,
  newData => {
-    if(!isString(newData) && !isNumber(newData)) return
+    if (!isString(newData) && !isNumber(newData)) return
    props.chartConfig.option.series[0].data = [dataHandle(newData)]
    option.value = props.chartConfig.option
  },
--- a/src/packages/components/Charts/Pies/PieCircle/index.vue
+++ b/src/packages/components/Charts/Pies/PieCircle/index.vue
@ -48,7 +48,13 @@ const dataHandle = (newData: any) => {
 // 配置时
 watch(
  () => props.chartConfig.option.dataset,
-  newData => dataHandle(newData),
+  newData => {
+    try {
+      dataHandle(newData)
+    } catch (error) {
+      console.log(error)
+    }
+  },
  {
    immediate: true,
    deep: false
--- a/src/packages/components/Charts/Pies/PieCommon/index.vue
+++ b/src/packages/components/Charts/Pies/PieCommon/index.vue
@ -39,15 +39,19 @@ const option = computed(() => {
 watch(
  () => props.chartConfig.option.type,
  newData => {
-    if (newData === 'nomal') {
-      props.chartConfig.option.series[0].radius = '70%'
-      props.chartConfig.option.series[0].roseType = false
-    } else if (newData === 'ring') {
-      props.chartConfig.option.series[0].radius = ['40%', '65%']
-      props.chartConfig.option.series[0].roseType = false
-    } else {
-      props.chartConfig.option.series[0].radius = '70%'
-      props.chartConfig.option.series[0].roseType = true
+    try {
+      if (newData === 'nomal') {
+        props.chartConfig.option.series[0].radius = '70%'
+        props.chartConfig.option.series[0].roseType = false
+      } else if (newData === 'ring') {
+        props.chartConfig.option.series[0].radius = ['40%', '65%']
+        props.chartConfig.option.series[0].roseType = false
+      } else {
+        props.chartConfig.option.series[0].radius = '70%'
+        props.chartConfig.option.series[0].roseType = true
+      }
+    } catch (error) {
+      console.log(error)
    }
  },
  { deep: false, immediate: true }
--- a/src/packages/components/Charts/Scatters/ScatterCommon/index.vue
+++ b/src/packages/components/Charts/Scatters/ScatterCommon/index.vue
@ -69,17 +69,21 @@ const option = computed(() => {
 watch(
  () => props.chartConfig.option.dataset,
  (newData, oldData) => {
-    if (!isArray(newData)) return
-    if (Array.isArray(newData)) {
-      replaceMergeArr.value = ['series']
-      // eslint-disable-next-line vue/no-mutating-props
-      props.chartConfig.option.series = newData.map((item: { dimensions: any[] }, index: number) => ({
-        ...seriesItem,
-        datasetIndex: index
-      }))
-      nextTick(() => {
-        replaceMergeArr.value = []
-      })
+    try {
+      if (!isArray(newData)) return
+      if (Array.isArray(newData)) {
+        replaceMergeArr.value = ['series']
+        // eslint-disable-next-line vue/no-mutating-props
+        props.chartConfig.option.series = newData.map((item: { dimensions: any[] }, index: number) => ({
+          ...seriesItem,
+          datasetIndex: index
+        }))
+        nextTick(() => {
+          replaceMergeArr.value = []
+        })
+      }
+    } catch (error) {
+      console.log(error)
    }
  },
  {
--- a/src/packages/components/Decorates/Mores/CountDown/index.vue
+++ b/src/packages/components/Decorates/Mores/CountDown/index.vue
@ -133,10 +133,14 @@ const renderCountdown: CountdownProps['render'] = ({ hours, minutes, seconds })
 }

 const updateTotalDuration = () => {
-  countdownActive.value = false
-  totalDuration.value = useEndDate.value ? endDate.value - new Date().getTime() : dataset.value * 1000
-  countdownRef.value?.reset && countdownRef.value?.reset()
-  countdownActive.value = true
+  try {
+    countdownActive.value = false
+    totalDuration.value = useEndDate.value ? endDate.value - new Date().getTime() : dataset.value * 1000
+    countdownRef.value?.reset && countdownRef.value?.reset()
+    countdownActive.value = true
+  } catch (error) {
+    console.log(error)
+  }
 }

 watch(
--- a/src/packages/components/Decorates/Mores/FlipperNumber/index.vue
+++ b/src/packages/components/Decorates/Mores/FlipperNumber/index.vue
@ -60,7 +60,11 @@ const updateDatasetHandler = (newVal: string | number) => {
 watch(
  () => props.chartConfig.option,
  newVal => {
-    updateDatasetHandler((newVal as OptionType).dataset)
+    try {
+      updateDatasetHandler((newVal as OptionType).dataset)
+    } catch (error) {
+      console.log(error)
+    }
  },
  {
    immediate: true,
--- a/src/packages/components/Decorates/Mores/TimeCommon/index.vue
+++ b/src/packages/components/Decorates/Mores/TimeCommon/index.vue
@ -11,23 +11,23 @@
 </template>

 <script setup lang="ts">
-import { PropType, toRefs, ref, reactive, watch, onMounted, onUnmounted } from "vue";
-import { CreateComponentType } from "@/packages/index.d";
-import { useChartEditStore } from "@/store/modules/chartEditStore/chartEditStore";
-import { useChartDataFetch } from "@/hooks";
+import { PropType, toRefs, ref, reactive, watch, onMounted, onUnmounted } from 'vue'
+import { CreateComponentType } from '@/packages/index.d'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { useChartDataFetch } from '@/hooks'

 const props = defineProps({
  chartConfig: {
    type: Object as PropType<CreateComponentType>,
-    required: true,
-  },
-});
-let yearMonthDay = ref("2021-2-3");
-let nowData = ref("08:00:00");
-let newData = ref("2021-2-3 08:00:00");
-let boxShadow = ref("none");
+    required: true
+  }
+})
+let yearMonthDay = ref('2021-2-3')
+let nowData = ref('08:00:00')
+let newData = ref('2021-2-3 08:00:00')
+let boxShadow = ref('none')

-const { w, h } = toRefs(props.chartConfig.attr);
+const { w, h } = toRefs(props.chartConfig.attr)

 let {
  timeColor,
@ -39,54 +39,55 @@ let {
  hShadow,
  vShadow,
  blurShadow,
-  colorShadow,
-} = toRefs(props.chartConfig.option);
+  colorShadow
+} = toRefs(props.chartConfig.option)

 watch(
  props.chartConfig.option,
  () => {
-    if (props.chartConfig.option.showShadow) {
-      boxShadow.value = `${props.chartConfig.option.hShadow}px ${props.chartConfig.option.vShadow}px ${props.chartConfig.option.blurShadow}px ${props.chartConfig.option.colorShadow}`;
-    } else {
-      boxShadow.value = "none";
+    try {
+      if (props.chartConfig.option.showShadow) {
+        boxShadow.value = `${props.chartConfig.option.hShadow}px ${props.chartConfig.option.vShadow}px ${props.chartConfig.option.blurShadow}px ${props.chartConfig.option.colorShadow}`
+      } else {
+        boxShadow.value = 'none'
+      }
+    } catch (error) {
+      console.log(error)
    }
  },
  {
-    immediate: true,
+    immediate: true
  }
-);
+)
 onMounted(() => {
  const timer = setInterval(() => {
-    var datetime = new Date();
-    var year = datetime.getFullYear();
-    var month =
-      datetime.getMonth() + 1 < 10
-        ? "0" + (datetime.getMonth() + 1)
-        : datetime.getMonth() + 1;
-    var date = datetime.getDate() < 10 ? "0" + datetime.getDate() : datetime.getDate();
-    var hh = datetime.getHours(); // 时
-    var mm = datetime.getMinutes(); // 分
-    var ss = datetime.getSeconds(); // 分
-    let time = "";
-    if (hh < 10) time += "0";
-    time += hh + ":";
-    if (mm < 10) time += "0";
-    time += mm + ":";
-    if (ss < 10) time += "0";
-    time += ss;
-    yearMonthDay.value = `${year}-${month}-${date}`;
-    nowData.value = time;
-    newData.value = yearMonthDay.value + " " + nowData.value;
-  }, 500);
-});
+    var datetime = new Date()
+    var year = datetime.getFullYear()
+    var month = datetime.getMonth() + 1 < 10 ? '0' + (datetime.getMonth() + 1) : datetime.getMonth() + 1
+    var date = datetime.getDate() < 10 ? '0' + datetime.getDate() : datetime.getDate()
+    var hh = datetime.getHours() // 时
+    var mm = datetime.getMinutes() // 分
+    var ss = datetime.getSeconds() // 分
+    let time = ''
+    if (hh < 10) time += '0'
+    time += hh + ':'
+    if (mm < 10) time += '0'
+    time += mm + ':'
+    if (ss < 10) time += '0'
+    time += ss
+    yearMonthDay.value = `${year}-${month}-${date}`
+    nowData.value = time
+    newData.value = yearMonthDay.value + ' ' + nowData.value
+  }, 500)
+})
 onUnmounted(() => {
-  clearInterval();
-});
-useChartDataFetch(props.chartConfig, useChartEditStore);
+  clearInterval()
+})
+useChartDataFetch(props.chartConfig, useChartEditStore)
 </script>

 <style lang="scss" scoped>
-@include go("decorates-number") {
+@include go('decorates-number') {
  text-align: center;
 }
 </style>
--- a/src/packages/components/Informations/Mores/WordCloud/index.vue
+++ b/src/packages/components/Informations/Mores/WordCloud/index.vue
@ -47,9 +47,12 @@ const option = computed(() => {
 })

 const dataSetHandle = (dataset: typeof dataJson) => {
-  dataset && (props.chartConfig.option.series[0].data = dataset)
-
-  vChartRef.value && isPreview() && vChartRef.value.setOption(props.chartConfig.option)
+  try {
+    dataset && (props.chartConfig.option.series[0].data = dataset)
+    vChartRef.value && isPreview() && vChartRef.value.setOption(props.chartConfig.option)
+  } catch (error) {
+    console.log(error)
+  }
 }

 // dataset 无法变更条数的补丁
--- a/src/packages/components/Tables/Tables/TableList/index.vue
+++ b/src/packages/components/Tables/Tables/TableList/index.vue
@ -10,19 +10,12 @@
        <div class="rank" :style="`color: ${color};font-size: ${indexFontSize}px`">No.{{ item.ranking }}</div>
        <div class="info-name" :style="`font-size: ${leftFontSize}px`" v-html="item.name" />
        <div class="ranking-value" :style="`color: ${textColor};font-size: ${rightFontSize}px`">
-          {{
-            status.mergedConfig.valueFormatter
-              ? status.mergedConfig.valueFormatter(item)
-              : item.value
-          }}
+          {{ status.mergedConfig.valueFormatter ? status.mergedConfig.valueFormatter(item) : item.value }}
          {{ unit }}
        </div>
      </div>
      <div class="ranking-column" :style="`border-color: ${borderColor}`">
-        <div
-          class="inside-column"
-          :style="`width: ${item.percent}%;background-color: ${color}`"
-        >
+        <div class="inside-column" :style="`width: ${item.percent}%;background-color: ${color}`">
          <div class="shine" />
        </div>
      </div>
@ -39,8 +32,8 @@ import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore
 const props = defineProps({
  chartConfig: {
    type: Object as PropType<CreateComponentType>,
-    required: true,
-  },
+    required: true
+  }
 })
 const { w, h } = toRefs(props.chartConfig.attr)
 const { rowNum, unit, color, textColor, borderColor, indexFontSize, leftFontSize, rightFontSize } = toRefs(
@ -50,13 +43,15 @@ const { rowNum, unit, color, textColor, borderColor, indexFontSize, leftFontSize
 const status = reactive({
  mergedConfig: props.chartConfig.option,
  rowsData: [],
-  rows: [{
-    scroll: 0,
-    ranking: 1,
-    name: '',
-    value: '',
-    percent: 0
-  }],
+  rows: [
+    {
+      scroll: 0,
+      ranking: 1,
+      name: '',
+      value: '',
+      percent: 0
+    }
+  ],
  heights: [0],
  animationIndex: 0,
  animationHandler: 0,
@ -81,16 +76,16 @@ const calcRowsData = () => {
  // abs of max
  const maxAbs = Math.abs(max)
  const total = max + minAbs
-  dataset = dataset.map((row: any, i:number) => ({
+  dataset = dataset.map((row: any, i: number) => ({
    ...row,
    ranking: i + 1,
-    percent: ((row.value + minAbs) / total) * 100,
+    percent: ((row.value + minAbs) / total) * 100
  }))
  const rowLength = dataset.length
  if (rowLength > rowNum && rowLength < 2 * rowNum) {
    dataset = [...dataset, ...dataset]
  }
-  dataset = dataset.map((d:any, i:number) => ({ ...d, scroll: i }))
+  dataset = dataset.map((d: any, i: number) => ({ ...d, scroll: i }))
  status.rowsData = dataset
  status.rows = dataset
 }
@ -134,11 +129,15 @@ const stopAnimation = () => {
 }

 const onRestart = async () => {
-  if (!status.mergedConfig) return
-  stopAnimation()
-  calcRowsData()
-  calcHeights(true)
-  animation(true)
+  try {
+    if (!status.mergedConfig) return
+    stopAnimation()
+    calcRowsData()
+    calcHeights(true)
+    animation(true)
+  } catch (error) {
+    console.log(error)
+  }
 }

 onRestart()
--- a/src/packages/components/Tables/Tables/TableScrollBoard/index.vue
+++ b/src/packages/components/Tables/Tables/TableScrollBoard/index.vue
@ -1,24 +1,47 @@
 <template>
  <div class="dv-scroll-board">
-    <div class="header" v-if="status.header.length && status.mergedConfig"
-      :style="`background-color: ${status.mergedConfig.headerBGC};`">
-      <div class="header-item" v-for="(headerItem, i) in status.header" :key="`${headerItem}${i}`" :style="`
+    <div
+      class="header"
+      v-if="status.header.length && status.mergedConfig"
+      :style="`background-color: ${status.mergedConfig.headerBGC};`"
+    >
+      <div
+        class="header-item"
+        v-for="(headerItem, i) in status.header"
+        :key="`${headerItem}${i}`"
+        :style="`
        height: ${status.mergedConfig.headerHeight}px;
        line-height: ${status.mergedConfig.headerHeight}px;
        width: ${status.widths[i]}px;
-      `" :align="status.aligns[i]" v-html="headerItem" />
+      `"
+        :align="status.aligns[i]"
+        v-html="headerItem"
+      />
    </div>

-    <div v-if="status.mergedConfig" class="rows"
-      :style="`height: ${h - (status.header.length ? status.mergedConfig.headerHeight : 0)}px;`">
-      <div class="row-item" v-for="(row, ri) in status.rows" :key="`${row.toString()}${row.scroll}`" :style="`
+    <div
+      v-if="status.mergedConfig"
+      class="rows"
+      :style="`height: ${h - (status.header.length ? status.mergedConfig.headerHeight : 0)}px;`"
+    >
+      <div
+        class="row-item"
+        v-for="(row, ri) in status.rows"
+        :key="`${row.toString()}${row.scroll}`"
+        :style="`
        height: ${status.heights[ri]}px;
        line-height: ${status.heights[ri]}px;
        background-color: ${status.mergedConfig[row.rowIndex % 2 === 0 ? 'evenRowBGC' : 'oddRowBGC']};
-      `">
-        <div class="ceil" v-for="(ceil, ci) in row.ceils" :key="`${ceil}${ri}${ci}`"
-          :style="`width: ${status.widths[ci]}px;`" :align="status.aligns[ci]" v-html="ceil" />
-
+      `"
+      >
+        <div
+          class="ceil"
+          v-for="(ceil, ci) in row.ceils"
+          :key="`${ceil}${ri}${ci}`"
+          :style="`width: ${status.widths[ci]}px;`"
+          :align="status.aligns[ci]"
+          v-html="ceil"
+        />
      </div>
    </div>
  </div>
@ -35,8 +58,8 @@ import cloneDeep from 'lodash/cloneDeep'
 const props = defineProps({
  chartConfig: {
    type: Object as PropType<CreateComponentType>,
-    required: true,
-  },
+    required: true
+  }
 })

 // 这里能拿到图表宽高等
@ -138,11 +161,13 @@ const status = reactive({
  mergedConfig: props.chartConfig.option,
  header: [],
  rowsData: [],
-  rows: [{
-    ceils: [],
-    rowIndex: 0,
-    scroll: 0
-  }],
+  rows: [
+    {
+      ceils: [],
+      rowIndex: 0,
+      scroll: 0
+    }
+  ],
  widths: [],
  heights: [0],
  avgHeight: 0,
@ -163,7 +188,7 @@ const calcData = () => {
  animation(true)
 }

-onMounted(()=> {
+onMounted(() => {
  calcData()
 })

@ -185,19 +210,21 @@ const calcHeaderData = () => {
 const calcRowsData = () => {
  let { dataset, index, headerBGC, rowNum } = status.mergedConfig
  if (index) {
-    dataset = dataset.map((row:any, i:number) => {
+    dataset = dataset.map((row: any, i: number) => {
      row = [...row]
-      const indexTag = `<span class="index" style="background-color: ${headerBGC};border-radius: 3px;padding: 0px 3px;">${i + 1}</span>`
+      const indexTag = `<span class="index" style="background-color: ${headerBGC};border-radius: 3px;padding: 0px 3px;">${
+        i + 1
+      }</span>`
      row.unshift(indexTag)
      return row
    })
  }
-  dataset = dataset.map((ceils:any, i:number) => ({ ceils, rowIndex: i }))
+  dataset = dataset.map((ceils: any, i: number) => ({ ceils, rowIndex: i }))
  const rowLength = dataset.length
  if (rowLength > rowNum && rowLength < 2 * rowNum) {
    dataset = [...dataset, ...dataset]
  }
-  dataset = dataset.map((d:any, i:number) => ({ ...d, scroll: i }))
+  dataset = dataset.map((d: any, i: number) => ({ ...d, scroll: i }))

  status.rowsData = dataset
  status.rows = dataset
@ -206,7 +233,7 @@ const calcRowsData = () => {
 const calcWidths = () => {
  const { mergedConfig, rowsData } = status
  const { columnWidth, header } = mergedConfig
-  const usedWidth = columnWidth.reduce((all:any, ws:number) => all + ws, 0)
+  const usedWidth = columnWidth.reduce((all: any, ws: number) => all + ws, 0)
  let columnNum = 0
  if (rowsData[0]) {
    columnNum = (rowsData[0] as any).ceils.length
@ -254,7 +281,7 @@ const animation = async (start = false) => {
  const rowLength = rowsData.length
  if (rowNum >= rowLength) return
  if (start) {
-    await new Promise(resolve => setTimeout(resolve, waitTime*1000))
+    await new Promise(resolve => setTimeout(resolve, waitTime * 1000))
    if (updater !== status.updater) return
  }
  const animationNum = carousel === 'single' ? 1 : rowNum
@ -269,7 +296,7 @@ const animation = async (start = false) => {
  const back = animationIndex - rowLength
  if (back >= 0) animationIndex = back
  status.animationIndex = animationIndex
-  status.animationHandler = setTimeout(animation, waitTime*1000 - 300) as any
+  status.animationHandler = setTimeout(animation, waitTime * 1000 - 300) as any
 }

 const stopAnimation = () => {
@ -279,9 +306,13 @@ const stopAnimation = () => {
 }

 const onRestart = async () => {
-  if (!status.mergedConfig) return
-  stopAnimation()
-  calcData()
+  try {
+    if (!status.mergedConfig) return
+    stopAnimation()
+    calcData()
+  } catch (error) {
+    console.log(error)
+  }
 }

 watch(
@ -304,7 +335,7 @@ watch(
  () => {
    onRestart()
  },
-  {deep:true}
+  { deep: true }
 )

 // 数据更新 (默认更新 dataset，若更新之后有其它操作，可添加回调函数)
@ -316,7 +347,6 @@ useChartDataFetch(props.chartConfig, useChartEditStore, (resData: any[]) => {
 onUnmounted(() => {
  stopAnimation()
 })
-
 </script>

 <style lang="scss" scoped>