Merge branch 'dev'

src/hooks/useChartDataFetch.hook.ts

@@ -6,6 +6,7 @@ import { CreateComponentType, ChartFrameEnum } from '@/packages/index.d'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { RequestDataTypeEnum } from '@/enums/httpEnum'
 import { isPreview, newFunctionHandle, intervalUnitHandle } from '@/utils'
+import { setOption } from '@/packages/public/chart'
 
 // 获取类型
 type ChartEditStoreType = typeof useChartEditStore
@@ -34,7 +35,7 @@ export const useChartDataFetch = (
   const echartsUpdateHandle = (dataset: any) => {
     if (chartFrame === ChartFrameEnum.ECHARTS) {
       if (vChartRef.value) {
-        vChartRef.value.setOption({ dataset: dataset })
+        setOption(vChartRef.value, { dataset: dataset })
       }
     }
   }

src/main.ts

@@ -3,7 +3,7 @@ import App from './App.vue'
 import router, { setupRouter } from '@/router'
 import i18n from '@/i18n/index'
 import { setupStore } from '@/store'
-import { setupNaive, setupDirectives, setupCustomComponents } from '@/plugins'
+import { setupNaive, setupDirectives, setupCustomComponents, initFunction } from '@/plugins'
 import { GoAppProvider } from '@/components/GoAppProvider/index'
 import { setHtmlTheme } from '@/utils'
 
@@ -53,4 +53,6 @@ async function appInit() {
   window['$vue'] = app
 }
 
-void appInit()
+await appInit()
+
+await initFunction()

src/packages/components/Charts/Bars/CapsuleChart/index.vue

@@ -122,23 +122,28 @@ const calcData = (data: any, type?: string) => {
 
 // 数据解析
 const calcCapsuleLengthAndLabelData = (dataset: any) => {
-  const { source } = dataset
-  if (!source.length) return
+  try {
+    const { source } = dataset
+    if (!source || !source.length) return
 
-  state.capsuleItemHeight = numberSizeHandle(state.mergedConfig.itemHeight)
-  const capsuleValue = source.map((item: DataProps) => item[state.mergedConfig.dataset.dimensions[1]])
+    state.capsuleItemHeight = numberSizeHandle(state.mergedConfig.itemHeight)
+    const capsuleValue = source.map((item: DataProps) => item[state.mergedConfig.dataset.dimensions[1]])
 
-  const maxValue = Math.max(...capsuleValue)
+    const maxValue = Math.max(...capsuleValue)
 
-  state.capsuleValue = capsuleValue
+    state.capsuleValue = capsuleValue
 
-  state.capsuleLength = capsuleValue.map((v: any) => (maxValue ? v / maxValue : 0))
+    state.capsuleLength = capsuleValue.map((v: any) => (maxValue ? v / maxValue : 0))
 
-  const oneFifth = maxValue / 5
+    const oneFifth = maxValue / 5
 
-  const labelData = Array.from(new Set(new Array(6).fill(0).map((v, i) => Math.ceil(i * oneFifth))))
+    const labelData = Array.from(new Set(new Array(6).fill(0).map((v, i) => Math.ceil(i * oneFifth))))
 
-  state.labelData = labelData
+    state.labelData = labelData
+
+  } catch (error) {
+    console.warn(error);
+  }
 }
 
 const numberSizeHandle = (val: string | number) => {

src/packages/components/Charts/Maps/MapBase/index.vue

@@ -11,7 +11,7 @@ import { use, registerMap } from 'echarts/core'
 import { EffectScatterChart, MapChart } from 'echarts/charts'
 import { CanvasRenderer } from 'echarts/renderers'
 import { useChartDataFetch } from '@/hooks'
-import { mergeTheme } from '@/packages/public/chart'
+import { mergeTheme, setOption } from '@/packages/public/chart'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { isPreview } from '@/utils'
 import mapJsonWithoutHainanIsLands from './mapWithoutHainanIsLands.json'
@@ -76,7 +76,7 @@ registerMapInitAsync()
 // 手动触发渲染
 const vEchartsSetOption = () => {
   option.value = props.chartConfig.option
-  vChartRef.value?.setOption(props.chartConfig.option)
+  setOption(vChartRef.value, props.chartConfig.option)
 }
 
 // 更新数据处理

src/packages/components/Charts/Mores/Heatmap/index.vue

@@ -10,7 +10,7 @@ import { use } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
 import { HeatmapChart } from 'echarts/charts'
 import { includes } from './config'
-import { mergeTheme } from '@/packages/public/chart'
+import { mergeTheme, setOption } from '@/packages/public/chart'
 import { useChartDataFetch } from '@/hooks'
 import { CreateComponentType } from '@/packages/index.d'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
@@ -68,7 +68,7 @@ const dataSetHandle = (dataset: typeof dataJson) => {
     props.chartConfig.option.series[0].data = seriesData
   }
   if (vChartRef.value && isPreview()) {
-    vChartRef.value.setOption(props.chartConfig.option)
+    setOption(vChartRef.value, props.chartConfig.option)
   }
 }
 

src/packages/components/Charts/Mores/Radar/index.vue

@@ -10,7 +10,7 @@ import { use } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
 import { RadarChart } from 'echarts/charts'
 import { includes } from './config'
-import { mergeTheme } from '@/packages/public/chart'
+import { mergeTheme, setOption } from '@/packages/public/chart'
 import { useChartDataFetch } from '@/hooks'
 import { CreateComponentType } from '@/packages/index.d'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
@@ -50,7 +50,7 @@ const dataSetHandle = (dataset: typeof dataJson) => {
     props.chartConfig.option.radar.indicator = dataset.radarIndicator
   }
   if (vChartRef.value && isPreview()) {
-    vChartRef.value.setOption(props.chartConfig.option)
+    setOption(vChartRef.value, props.chartConfig.option)
   }
 }
 

src/packages/components/Charts/Mores/TreeMap/index.vue

@@ -10,7 +10,7 @@ import { use } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
 import { TreemapChart } from 'echarts/charts'
 import { includes } from './config'
-import { mergeTheme } from '@/packages/public/chart'
+import { mergeTheme, setOption } from '@/packages/public/chart'
 import { useChartDataFetch } from '@/hooks'
 import { CreateComponentType } from '@/packages/index.d'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
@@ -42,7 +42,7 @@ const option = computed(() => {
 const dataSetHandle = (dataset: typeof dataJson) => {
   if (dataset) {
     props.chartConfig.option.series[0].data = dataset
-    vChartRef.value?.setOption(props.chartConfig.option)
+    setOption(vChartRef.value, props.chartConfig.option)
   }
 }
 

src/packages/components/Informations/Mores/Iframe/config.ts

@@ -14,7 +14,7 @@ export const option = {
 export default class Config extends PublicConfigClass implements CreateComponentType
 {
   public key = IframeConfig.key
-  public attr = { ...chartInitConfig, w: 800, h: 800, zIndex: -1 }
+  public attr = { ...chartInitConfig, w: 1200, h: 800, zIndex: -1 }
   public chartConfig = cloneDeep(IframeConfig)
   public option = cloneDeep(option)
 }

src/packages/components/Informations/Mores/WordCloud/index.vue

@@ -16,7 +16,7 @@ import 'echarts-wordcloud'
 import { use } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
 import config, { includes } from './config'
-import { mergeTheme } from '@/packages/public/chart'
+import { mergeTheme, setOption } from '@/packages/public/chart'
 import { useChartDataFetch } from '@/hooks'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { isPreview } from '@/utils'
@@ -49,7 +49,7 @@ const option = computed(() => {
 const dataSetHandle = (dataset: typeof dataJson) => {
   try {
     dataset && (props.chartConfig.option.series[0].data = dataset)
-    vChartRef.value && isPreview() && vChartRef.value.setOption(props.chartConfig.option)
+    vChartRef.value && isPreview() && setOption(vChartRef.value, props.chartConfig.option)
   } catch (error) {
     console.log(error)
   }

src/packages/components/Informations/Texts/TextBarrage/config.ts

@@ -15,7 +15,6 @@ export const FontWeightObject = {
 }
 
 export const option = {
-  
   dataset: '让数字化看得见',
   fontSize: 32,
   fontColor: '#ffffff',
@@ -39,4 +38,5 @@ export default class Config extends PublicConfigClass implements CreateComponent
   public attr = { ...chartInitConfig, w: 500, h: 70, zIndex: -1 }
   public chartConfig = cloneDeep(TextBarrageConfig)
   public option = cloneDeep(option)
+  public preview = { overFlowHidden: true } 
 }

src/packages/components/Tables/Tables/TableScrollBoard/config.vue

@@ -40,6 +40,15 @@
       <SettingItem name="列宽度">
         <n-input v-model:value="columnWidth" :min="1" size="small" placeholder="列宽度(英文','分割)"></n-input>
       </SettingItem>
+      <SettingItem name="轮播方式">
+        <n-select
+          v-model:value="optionData.carousel"
+          :options="[
+            { label: '单条轮播', value: 'single' },
+            { label: '整页轮播', value: 'page' },
+          ]"
+        />
+      </SettingItem>
     </SettingItemBox>
 
     <SettingItemBox name="样式">

src/packages/index.d.ts

@@ -114,6 +114,10 @@ export interface PublicConfigType {
     // 动画
     animations: string[]
   }
+  preview?: {
+    // 预览超出隐藏
+    overFlowHidden?: boolean
+  }
   filter?: string
   status: StatusType
   events: {

src/packages/public/chart.ts

@@ -2,6 +2,7 @@ import merge from 'lodash/merge'
 import pick from 'lodash/pick'
 import { EchartsDataType } from '../index.d'
 import { globalThemeJson } from '@/settings/chartThemes/index'
+import type VChart from 'vue-echarts'
 
 /**
  * * 合并 color 和全局配置项
@@ -33,3 +34,15 @@ export const setData = (option: any, data: EchartsDataType) => {
   option.dataset = data
   return option
 }
+
+/**
+ * * 配置公共 setOption 方法
+ * @param instance
+ * @param data
+ */
+export const setOption = <T extends typeof VChart | undefined, D>(instance: T, data: D) => {
+  if (!instance) return
+  const option = instance.getOption()
+  option.dataset = null
+  instance.setOption(data)
+}

src/packages/public/publicConfig.ts

@@ -78,6 +78,10 @@ export class PublicConfigClass implements PublicConfigType {
     // 动画
     animations: []
   }
+  // 预览
+  public preview = {
+    overFlowHidden: false
+  }
   // 状态
   public status = {
     lock: false,

src/plugins/index.ts

@@ -2,3 +2,4 @@ export { setupNaive } from '@/plugins/naive'
 export { setupDirectives } from '@/plugins/directives'
 export { setupCustomComponents } from '@/plugins/customComponents'
 export { icon } from '@/plugins/icon'
+export { initFunction } from '@/plugins/initFunction'

src/plugins/initFunction.ts

@@ -0,0 +1,9 @@
+/**
+ * * 页面初始化就执行的函数
+ */
+export const initFunction = async () => {
+  // 捕获全局错误
+  window.addEventListener("unhandledrejection", event => {
+    console.warn(`UNHANDLED PROMISE REJECTION: ${event.reason}`);
+  });
+}

src/utils/storage.ts

@@ -44,7 +44,7 @@ export const clearLocalStorage = (name: string) => {
  */
 export const setSessionStorage = <T>(k: string, v: T) => {
   try {
-    window.sessionStorage.setItem(k, JSON.stringify(v))
+    window.sessionStorage.setItem(k, JSONStringify(v))
   } catch (error) {
     return false
   }

src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataMonacoEditor/index.vue

@@ -150,7 +150,7 @@ const filterRes = computed(() => {
   } catch (error) {
     // eslint-disable-next-line vue/no-side-effects-in-computed-properties
     errorFlag.value = true
-    return '过滤函数错误'
+    return `过滤函数错误，日志：${error}`
   }
 })
 

src/views/chart/index.vue

@@ -14,8 +14,10 @@
         </template>
       </layout-header-pro>
       <n-layout-content content-style="overflow:hidden; display: flex">
-        <content-charts></content-charts>
-        <content-layers></content-layers>
+        <div style="overflow:hidden; display: flex">
+          <content-charts></content-charts>
+          <content-layers></content-layers>
+        </div>
         <content-configurations></content-configurations>
       </n-layout-content>
     </n-layout>

src/views/preview/components/PreviewRenderGroup/index.vue

@@ -9,6 +9,7 @@
       ...getFilterStyle(item.styles),
       ...getTransformStyle(item.styles),
       ...getStatusStyle(item.status),
+      ...getPreviewConfigStyle(item.preview),
       ...getBlendModeStyle(item.styles) as any
     }"
   >
@@ -28,7 +29,7 @@
 import { PropType } from 'vue'
 import { CreateComponentGroupType } from '@/packages/index.d'
 import { animationsClass, getFilterStyle, getTransformStyle, getBlendModeStyle } from '@/utils'
-import { getSizeStyle, getComponentAttrStyle, getStatusStyle } from '../../utils'
+import { getSizeStyle, getComponentAttrStyle, getStatusStyle, getPreviewConfigStyle } from '../../utils'
 import { useLifeHandler } from '@/hooks'
 
 const props = defineProps({
@@ -54,6 +55,5 @@ const props = defineProps({
 <style lang="scss" scoped>
 .chart-item {
   position: absolute;
-  overflow: hidden;
 }
 </style>

src/views/preview/components/PreviewRenderList/index.vue

@@ -2,13 +2,14 @@
   <div
     class="chart-item"
     v-for="(item, index) in localStorageInfo.componentList"
-    :class="[animationsClass(item.styles.animations), !item.isGroup && 'hidden']"
+    :class="animationsClass(item.styles.animations)"
     :key="item.id"
     :style="{
       ...getComponentAttrStyle(item.attr, index),
       ...getFilterStyle(item.styles),
       ...getTransformStyle(item.styles),
       ...getStatusStyle(item.status),
+      ...getPreviewConfigStyle(item.preview),
       ...getBlendModeStyle(item.styles) as any
     }"
   >
@@ -43,7 +44,7 @@ import { PreviewRenderGroup } from '../PreviewRenderGroup/index'
 import { CreateComponentGroupType } from '@/packages/index.d'
 import { chartColors } from '@/settings/chartThemes/index'
 import { animationsClass, getFilterStyle, getTransformStyle, getBlendModeStyle } from '@/utils'
-import { getSizeStyle, getComponentAttrStyle, getStatusStyle } from '../../utils'
+import { getSizeStyle, getComponentAttrStyle, getStatusStyle, getPreviewConfigStyle } from '../../utils'
 import { useLifeHandler } from '@/hooks'
 
 // 初始化数据池
@@ -78,8 +79,5 @@ onMounted(() => {
 <style lang="scss" scoped>
 .chart-item {
   position: absolute;
-  &.hidden {
-    overflow: hidden;
-  }
 }
 </style>

src/views/preview/utils/style.ts

@@ -3,6 +3,7 @@ import { EditCanvasConfigType } from '@/store/modules/chartEditStore/chartEditSt
 
 type AttrType = PickCreateComponentType<'attr'>
 type StatusType = PickCreateComponentType<'status'>
+type PreviewConfig = PickCreateComponentType<'preview'>
 
 // 设置位置
 export const getComponentAttrStyle = (attr: AttrType, index: number) => {
@@ -29,6 +30,17 @@ export const getStatusStyle = (attr: StatusType) => {
   }
 }
 
+// 设置预览配置样式
+export const getPreviewConfigStyle = (previewConfig: PreviewConfig) => {
+  const previewStyle: Partial<CSSStyleDeclaration> = {}
+  if (previewConfig) {
+    if (previewConfig.overFlowHidden) {
+      previewStyle.overflow = 'hidden'
+    }
+  }
+  return previewStyle
+}
+
 // 全局样式
 export const getEditCanvasConfigStyle = (canvas: EditCanvasConfigType) => {
   // 背景