fix:修复系统组件预览问题

data-room-ui/packages/BizComponent/Preview.vue

@@ -37,7 +37,7 @@ export default {
         // eslint-disable-next-line prefer-const
         let setting = []
         // eslint-disable-next-line prefer-const, no-unused-vars
-        let title = []
+        let title = ''
         // eslint-disable-next-line prefer-const, no-unused-vars
         let data = []
         // eslint-disable-next-line prefer-const
@@ -46,6 +46,7 @@ export default {
         settingContent = settingContent?.replace(/export default[\s\S]*/, '')
         eval(settingContent)
         return {
+          title,
           option,
           setting
         }
@@ -98,6 +99,7 @@ export default {
         const remoteComponentList = [...innerRemoteComponents, ...getRemoteComponents()]
         const config = remoteComponentList?.find(item => item.customize.vueSysComponentDirName === dirName)
         this.config.option = config?.option
+        this.config.title = config?.title
         const vueFile = config.customize?.vueFile
         this.remoteComponent = vueFile
         this.loading = false
@@ -106,7 +108,7 @@ export default {
     // 尝试渲染远程文件或远程字符串
     getRemoteComponent () {
       this.loading = true
-      this.dataFormatting(this.config)
+      this.dataFormatting(this.config, { success: false })
       this.remoteComponent = remoteVueLoader('data:text/plain,' + encodeURIComponent(this.vueContentInner))
       this.loading = false
     },
@@ -114,17 +116,17 @@ export default {
      * 组件的配置
      * @returns {Promise<unknown>}
      */
-    dataFormatting (config, data) {
-      config = _.cloneDeep(config)
-      // 遍历config.setting，将config.setting中的值赋值给config.option中对应的optionField
+    // 将config.setting的配置转化为option里的配置，这里之所以将转化的方法提出来，是因为在改变维度指标和样式的时候都需要转化
+    transformSettingToOption (config, type) {
+      let option = null
       config.setting.forEach(set => {
         if (set.optionField) {
           const optionField = set.optionField.split('.')
-          let option = config.option
+          option = config.option
           optionField.forEach((field, index) => {
             if (index === optionField.length - 1) {
               // 数据配置时，必须有值才更新
-              if ((set.tabName === 'data' && set.value) || set.tabName === 'custom') {
+              if ((set.tabName === type && type === 'data' && set.value) || (set.tabName === type && type === 'custom')) {
                 option[field] = set.value
               }
             } else {
@@ -133,11 +135,51 @@ export default {
           })
         }
       })
-      // eslint-disable-next-line no-unused-vars
+      config.option = { ...config.option, ...option }
+      return config
+    },
+    dataFormatting (config, data) {
+      // 数据返回成功则赋值
+      if (data.success) {
+        data = data.data
+        config = this.transformSettingToOption(config, 'data')
+        // 获取到后端返回的数据，有则赋值
+        const option = config.option
+        const setting = config.setting
+        if (config.dataHandler) {
+          try {
+            // 此处函数处理data
+            eval(config.dataHandler)
+          } catch (e) {
+            console.error(e)
+          }
+        }
+        config.option.data = data
+      } else {
+        // 数据返回失败则赋前端的模拟数据
+        config.option.data = this.plotList?.find(plot => plot.name === config.name)?.option?.data
+      }
+      return config
+    },
+    // 组件的样式改变，返回改变后的config
+    changeStyle (config) {
+      config = { ...this.config, ...config }
+      config = this.transformSettingToOption(config, 'custom')
+      // 这里定义了option和setting是为了保证在执行eval时,optionHandler、dataHandler里面可能会用到，
       const option = config.option
-      // eslint-disable-next-line no-unused-vars
       const setting = config.setting
-
+      if (this.config.optionHandler) {
+        try {
+          // 此处函数处理config
+          eval(this.config.optionHandler)
+        } catch (e) {
+          console.error(e)
+        }
+      }
+      if (this.chart) {
+        this.chart.update(config.option)
+      }
+      this.changeChartConfig(config)
       return config
     }
   }

data-room-ui/packages/RemoteComponents/index.vue

@@ -136,17 +136,17 @@ export default {
      * 组件的配置
      * @returns {Promise<unknown>}
      */
-    dataFormatting (config, data) {
-      config = _.cloneDeep(config)
-      // 遍历config.setting，将config.setting中的值赋值给config.option中对应的optionField
+    // 将config.setting的配置转化为option里的配置，这里之所以将转化的方法提出来，是因为在改变维度指标和样式的时候都需要转化
+    transformSettingToOption (config, type) {
+      let option = null
       config.setting.forEach(set => {
         if (set.optionField) {
           const optionField = set.optionField.split('.')
-          let option = config.option
+          option = config.option
           optionField.forEach((field, index) => {
             if (index === optionField.length - 1) {
               // 数据配置时，必须有值才更新
-              if ((set.tabName === 'data' && set.value) || set.tabName === 'custom') {
+              if ((set.tabName === type && type === 'data' && set.value) || (set.tabName === type && type === 'custom')) {
                 option[field] = set.value
               }
             } else {
@@ -155,16 +155,51 @@ export default {
           })
         }
       })
-      // eslint-disable-next-line no-unused-vars
-      const option = config.option
-      // eslint-disable-next-line no-unused-vars
-      const setting = config.setting
-
-      if (data?.success) {
+      config.option = { ...config.option, ...option }
+      return config
+    },
+    dataFormatting (config, data) {
+      // 数据返回成功则赋值
+      if (data.success) {
         data = data.data
-        config.option = option
+        config = this.transformSettingToOption(config, 'data')
+        // 获取到后端返回的数据，有则赋值
+        const option = config.option
+        const setting = config.setting
+        if (config.dataHandler) {
+          try {
+            // 此处函数处理data
+            eval(config.dataHandler)
+          } catch (e) {
+            console.error(e)
+          }
+        }
         config.option.data = data
+      } else {
+        // 数据返回失败则赋前端的模拟数据
+        config.option.data = this.plotList?.find(plot => plot.name === config.name)?.option?.data
+      }
+      return config
+    },
+    // 组件的样式改变，返回改变后的config
+    changeStyle (config) {
+      config = { ...this.config, ...config }
+      config = this.transformSettingToOption(config, 'custom')
+      // 这里定义了option和setting是为了保证在执行eval时,optionHandler、dataHandler里面可能会用到，
+      const option = config.option
+      const setting = config.setting
+      if (this.config.optionHandler) {
+        try {
+          // 此处函数处理config
+          eval(this.config.optionHandler)
+        } catch (e) {
+          console.error(e)
+        }
+      }
+      if (this.chart) {
+        this.chart.update(config.option)
       }
+      this.changeChartConfig(config)
       return config
     },
     // 同步配置

data-room-ui/packages/RemoteComponents/innerComponents/IndicatorCard/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    :class="`bs-indexCard-${customTheme}`"
+    :class="`bs-indexCard`"
     style="width: 100%;height: 100%;position: relative;"
   >
     <div
@@ -35,13 +35,13 @@
   </div>
 </template>
 <script>
-import commonMixins from '../../../js/mixins/commonMixins'
-import paramsMixins from '../../../js/mixins/paramsMixins'
+// import commonMixins from '../../../js/mixins/commonMixins'
+// import paramsMixins from '../../../js/mixins/paramsMixins'
 
 export default {
   name: 'Card',
   components: {},
-  mixins: [paramsMixins, commonMixins],
+  // mixins: [paramsMixins, commonMixins],
   props: {
     // 卡片的属性
     config: {
@@ -56,7 +56,7 @@ export default {
   },
   watch: {},
   mounted () {
-    this.chartInit()
+    // this.chartInit()
   },
   computed: {
     option () {

data-room-ui/packages/RemoteComponents/innerComponents/card/config.js

@@ -1,172 +1,172 @@
 const title = '卡片组件'
 // 右侧配置项
 const setting = [
-    {
-        label: '背景色',
-        // 设置组件类型， select / input / colorPicker
-        type: 'colorPicker',
-        // 字段
-        field: 'customize_backgroundColor',
-        optionField: 'customize.backgroundColor', // 对应options中的字段
-        // 是否多选
-        multiple: false,
-        // 绑定的值
-        value: 'rgba(0,0,0,.15)',
-        // tab页。 data: 数据， custom: 自定义
-        tabName: 'custom'
-    },
-    {
-        label: '边框宽度',
-        // 设置组件类型， select / input / colorPicker
-        type: 'inputNumber',
-        // 字段
-        field: 'customize_border',
-        optionField: 'customize.border', // 对应options中的字段
-        // 是否多选
-        multiple: false,
-        // 绑定的值
-        value: 1,
-        // tab页。 data: 数据， custom: 自定义
-        tabName: 'custom'
-    },
-    {
-        label: '边框颜色',
-        // 设置组件类型， select / input / colorPicker
-        type: 'colorPicker',
-        // 字段
-        field: 'customize_borderColor',
-        optionField: 'customize.borderColor', // 对应options中的字段
-        // 是否多选
-        multiple: false,
-        // 绑定的值
-        value: 'rgba(0,0,0,.15)',
-        // tab页。 data: 数据， custom: 自定义
-        tabName: 'custom'
-    },
-    {
-        label: '边框类型',
-        // 设置组件类型， select / input / colorPicker
-        type: 'select',
-        // 字段
-        field: 'customize_borderStyle',
-        optionField: 'customize.borderStyle', // 对应options中的字段
-        // 是否多选
-        multiple: false,
-        options: [
-            {label: 'solid', value: 'solid'},
-            {label: 'dashed', value: 'dashed'},
-        ],
-        // 绑定的值
-        value: 'solid',
-        // tab页。 data: 数据， custom: 自定义
-        tabName: 'custom'
-    },
-    {
-        label: '标题颜色',
-        // 设置组件类型， select / input / colorPicker
-        type: 'colorPicker',
-        // 字段
-        field: 'customize_headerColor',
-        optionField: 'customize.headerColor', // 对应options中的字段
-        // 是否多选
-        multiple: false,
-        // 绑定的值
-        value: 'white',
-        // tab页。 data: 数据， custom: 自定义
-        tabName: 'custom'
-    },
-    {
-        label: '标题左边距',
-        // 设置组件类型， select / input / colorPicker
-        type: 'inputNumber',
-        // 字段
-        field: 'customize_titlePaddingLeft',
-        optionField: 'customize.titlePaddingLeft', // 对应options中的字段
-        // 是否多选
-        multiple: false,
-        // 绑定的值
-        value: 16,
-        // tab页。 data: 数据， custom: 自定义
-        tabName: 'custom'
-    },
-    {
-        label: '标题左线宽度',
-        // 设置组件类型， select / input / colorPicker
-        type: 'inputNumber',
-        // 字段
-        field: 'customize_titleLineWidth',
-        optionField: 'customize.titleLineWidth', // 对应options中的字段
-        // 是否多选
-        multiple: false,
-        // 绑定的值
-        value: 3,
-        // tab页。 data: 数据， custom: 自定义
-        tabName: 'custom'
-    },
-    {
-        label: '标题线颜色',
-        // 设置组件类型， select / input / colorPicker
-        type: 'colorPicker',
-        // 字段
-        field: 'customize_titleLineColor',
-        optionField: 'customize.titleLineColor', // 对应options中的字段
-        // 是否多选
-        multiple: false,
-        // 绑定的值
-        value: '#007aff',
-        // tab页。 data: 数据， custom: 自定义
-        tabName: 'custom'
-    },
-    {
-        label: '标题底边宽度',
-        // 设置组件类型， select / input / colorPicker
-        type: 'inputNumber',
-        // 字段
-        field: 'customize_titleBottomLineWidth',
-        optionField: 'customize.titleBottomLineWidth', // 对应options中的字段
-        // 是否多选
-        multiple: false,
-        // 绑定的值
-        value: 1,
-        // tab页。 data: 数据， custom: 自定义
-        tabName: 'custom'
-    },
-    {
-        label: '标题底边颜色',
-        // 设置组件类型， select / input / colorPicker
-        type: 'colorPicker',
-        // 字段
-        field: 'customize_titleBottomLineColor',
-        optionField: 'customize.titleBottomLineColor', // 对应options中的字段
-        // 是否多选
-        multiple: false,
-        // 绑定的值
-        value: '#0f131d',
-        // tab页。 data: 数据， custom: 自定义
-        tabName: 'custom'
-    }
+  {
+    label: '背景色',
+    // 设置组件类型， select / input / colorPicker
+    type: 'colorPicker',
+    // 字段
+    field: 'customize_backgroundColor',
+    optionField: 'customize.backgroundColor', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: 'rgba(0,0,0,.15)',
+    // tab页。 data: 数据， custom: 自定义
+    tabName: 'custom'
+  },
+  {
+    label: '边框宽度',
+    // 设置组件类型， select / input / colorPicker
+    type: 'inputNumber',
+    // 字段
+    field: 'customize_border',
+    optionField: 'customize.border', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: 1,
+    // tab页。 data: 数据， custom: 自定义
+    tabName: 'custom'
+  },
+  {
+    label: '边框颜色',
+    // 设置组件类型， select / input / colorPicker
+    type: 'colorPicker',
+    // 字段
+    field: 'customize_borderColor',
+    optionField: 'customize.borderColor', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: 'rgba(0,0,0,.15)',
+    // tab页。 data: 数据， custom: 自定义
+    tabName: 'custom'
+  },
+  {
+    label: '边框类型',
+    // 设置组件类型， select / input / colorPicker
+    type: 'select',
+    // 字段
+    field: 'customize_borderStyle',
+    optionField: 'customize.borderStyle', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    options: [
+      { label: 'solid', value: 'solid' },
+      { label: 'dashed', value: 'dashed' }
+    ],
+    // 绑定的值
+    value: 'solid',
+    // tab页。 data: 数据， custom: 自定义
+    tabName: 'custom'
+  },
+  {
+    label: '标题颜色',
+    // 设置组件类型， select / input / colorPicker
+    type: 'colorPicker',
+    // 字段
+    field: 'customize_headerColor',
+    optionField: 'customize.headerColor', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: 'white',
+    // tab页。 data: 数据， custom: 自定义
+    tabName: 'custom'
+  },
+  {
+    label: '标题左边距',
+    // 设置组件类型， select / input / colorPicker
+    type: 'inputNumber',
+    // 字段
+    field: 'customize_titlePaddingLeft',
+    optionField: 'customize.titlePaddingLeft', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: 16,
+    // tab页。 data: 数据， custom: 自定义
+    tabName: 'custom'
+  },
+  {
+    label: '标题左线宽度',
+    // 设置组件类型， select / input / colorPicker
+    type: 'inputNumber',
+    // 字段
+    field: 'customize_titleLineWidth',
+    optionField: 'customize.titleLineWidth', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: 3,
+    // tab页。 data: 数据， custom: 自定义
+    tabName: 'custom'
+  },
+  {
+    label: '标题线颜色',
+    // 设置组件类型， select / input / colorPicker
+    type: 'colorPicker',
+    // 字段
+    field: 'customize_titleLineColor',
+    optionField: 'customize.titleLineColor', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: '#007aff',
+    // tab页。 data: 数据， custom: 自定义
+    tabName: 'custom'
+  },
+  {
+    label: '标题底边宽度',
+    // 设置组件类型， select / input / colorPicker
+    type: 'inputNumber',
+    // 字段
+    field: 'customize_titleBottomLineWidth',
+    optionField: 'customize.titleBottomLineWidth', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: 1,
+    // tab页。 data: 数据， custom: 自定义
+    tabName: 'custom'
+  },
+  {
+    label: '标题底边颜色',
+    // 设置组件类型， select / input / colorPicker
+    type: 'colorPicker',
+    // 字段
+    field: 'customize_titleBottomLineColor',
+    optionField: 'customize.titleBottomLineColor', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: '#0f131d',
+    // tab页。 data: 数据， custom: 自定义
+    tabName: 'custom'
+  }
 ]
 
 // 模拟数据
 
 const option = {
-    // 自定义组件其他属性
-    customize: {
-        backgroundColor: 'rgba(0,0,0,.15)',
-        border:1,
-        borderColor: 'rgba(0,0,0,.15)',
-        borderStyle: 'solid',
-        headerColor: 'white',
-        titlePaddingLeft: 16,
-        titleLineWidth: 3,
-        titleLineColor: '#007aff',
-        titleBottomLineWidth: 1,
-        titleBottomLineColor: '#0f131d'
-    }
+  // 自定义组件其他属性
+  customize: {
+    backgroundColor: 'rgba(0,0,0,.15)',
+    border: 1,
+    borderColor: 'rgba(0,0,0,.15)',
+    borderStyle: 'solid',
+    headerColor: 'white',
+    titlePaddingLeft: 16,
+    titleLineWidth: 3,
+    titleLineColor: '#007aff',
+    titleBottomLineWidth: 1,
+    titleBottomLineColor: '#0f131d'
+  }
 }
 
 export default {
-    title,
-    option,
-    setting
+  title,
+  option,
+  setting
 }

data-room-ui/packages/RemoteComponents/innerComponents/card/index.vue

@@ -1,46 +1,52 @@
 <template>
+  <div
+    :class="`bs-card`"
+    style="width: 100%;height: 100%;position: relative;"
+  >
     <div
-            :class="`bs-card-${customTheme}`"
-            style="width: 100%;height: 100%;position: relative;"
+      :style="{
+        width: '100%',
+        height: '100%',
+        display: 'flex',
+        flexDirection: 'column',
+        boxSizing: 'border-box',
+        backgroundColor: customize.backgroundColor,
+        border:`${customize.border}px`,
+        borderStyle: customize.borderStyle,
+        borderColor: `${customize.borderColor}`
+      }"
     >
-        <div :style="{
-                width: '100%',
-                height: '100%',
-                display: 'flex',
-                flexDirection: 'column',
-                boxSizing: 'border-box',
-                backgroundColor: customize.backgroundColor,
-                border:`${customize.border}px`,
-                borderStyle: customize.borderStyle,
-                borderColor: `${customize.borderColor}`
-            }">
-            <header :style="{
-                        color: customize.headerColor,
-                        padding: '8px 0',
-                        lineHeight: '16px',
-                        borderBottom:  `${customize.titleBottomLineWidth}px solid ${customize.titleBottomLineColor}`,
-                        fontSize: '16px',
-                        boxSizing: 'border-box',
-                        display: 'flex',
-                        justifyContent: 'space-between',
-            }">
-                <span :style="{
+      <header
+        :style="{
+          color: customize.headerColor,
+          padding: '8px 0',
+          lineHeight: '16px',
+          borderBottom: `${customize.titleBottomLineWidth}px solid ${customize.titleBottomLineColor}`,
+          fontSize: '16px',
+          boxSizing: 'border-box',
+          display: 'flex',
+          justifyContent: 'space-between',
+        }"
+      >
+        <span
+          :style="{
 
-                            display: 'inline-block',
-                            borderLeft: `${customize.titleLineWidth}px solid ${customize.titleLineColor}`,
-                            paddingLeft: customize.titlePaddingLeft+'px'
-                }">
-                    {{config.title}}
-                </span>
-            </header>
-            <div :style="{
-                    flex: 1,
-                    position: 'relative'
-            }">
-
-            </div>
-        </div>
+            display: 'inline-block',
+            borderLeft: `${customize.titleLineWidth}px solid ${customize.titleLineColor}`,
+            paddingLeft: customize.titlePaddingLeft+'px'
+          }"
+        >
+          {{ config.title }}
+        </span>
+      </header>
+      <div
+        :style="{
+          flex: 1,
+          position: 'relative'
+        }"
+      />
     </div>
+  </div>
 </template>
 <script>
 import commonMixins from '../../../js/mixins/commonMixins'
@@ -49,36 +55,36 @@ import paramsMixins from '../../../js/mixins/paramsMixins'
 export default {
   name: 'Card',
   components: {},
-  mixins: [paramsMixins, commonMixins],
+  // mixins: [paramsMixins, commonMixins],
   props: {
-      // 卡片的属性
-      config: {
-          type: Object,
-          default: () => ({})
-      }
+    // 卡片的属性
+    config: {
+      type: Object,
+      default: () => ({})
+    }
   },
-  data() {
-      return {
-          customClass: {}
-      }
+  data () {
+    return {
+      customClass: {}
+    }
   },
   mounted () {
-    this.chartInit()
+    // this.chartInit()
   },
   watch: {},
   computed: {
-      customize() {
-          return this.config.option.customize
-      }
+    customize () {
+      return this.config.option.customize
+    }
   },
   methods: {
-      buildOption(config, data) {
-          // 文本数据配置原则：选择数据集则以后端返回的数据为主，否则以设置面板中标题设置为准
-          if (config.dataSource.businessKey) {
-              config.customize.title = data && data.data && data.data.length ? data.data[0][config.dataSource.metricField] : '暂无数据'
-          }
-          return config
-      }
+    // dataFormatting (config, data) {
+    //   // 文本数据配置原则：选择数据集则以后端返回的数据为主，否则以设置面板中标题设置为准
+    //   if (config.dataSource.businessKey) {
+    //     config.customize.title = data && data.data && data.data.length ? data.data[0][config.dataSource.metricField] : '暂无数据'
+    //   }
+    //   return config
+    // }
   }
 }
 </script>

data-room-ui/packages/RemoteComponents/innerComponents/indexCard/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    :class="`bs-indexCard-${customTheme}`"
+    :class="`bs-indexCard`"
     style="width: 100%;height: 100%;position: relative;"
   >
     <div
@@ -52,13 +52,10 @@
   </div>
 </template>
 <script>
-import commonMixins from '../../../js/mixins/commonMixins'
-import paramsMixins from '../../../js/mixins/paramsMixins'
 
 export default {
   name: 'Card',
   components: {},
-  mixins: [paramsMixins, commonMixins],
   props: {
     // 卡片的属性
     config: {
@@ -73,7 +70,6 @@ export default {
   },
   watch: {},
   mounted () {
-    this.chartInit()
   },
   computed: {
     option () {