瀏覽代碼

feat:修改折线图的配置名称

liu.shiyi 1 年之前
父節點
當前提交
4d78b1c006
共有 2 個文件被更改,包括 57 次插入4 次删除
  1. 1 1
      data-room-ui/packages/G2Plots/折线图/基础折线图.js
  2. 56 3
      data-room-ui/packages/js/store/actions.js

+ 1 - 1
data-room-ui/packages/G2Plots/折线图/基础折线图.js

@@ -17,7 +17,7 @@ const name = 'JiChuZheXianTu'
 // 右侧配置项
 const setting = [
   {
-    label: '横坐标',
+    label: '维度',
     // 设置组件类型, select / input / colorPicker
     type: 'select',
     // 字段

+ 56 - 3
data-room-ui/packages/js/store/actions.js

@@ -1,6 +1,6 @@
 // 组件配置转化
 import _ from 'lodash'
-import { setModules } from 'packages/js/utils/configImport'
+import { setModules, dataModules } from 'packages/js/utils/configImport'
 import { getScreenInfo, getDataSetDetails, getDataByDataSetId } from '../api/bigScreenApi'
 import { stringToFunction } from '../utils/evalFunctions'
 import { EventBus } from '../utils/eventBus'
@@ -65,21 +65,74 @@ export function handleResData (data) {
   // 如果pageConfig中的cacheDataSets为null,赋值[]
   pageInfo.pageConfig.cacheDataSets = pageInfo.pageConfig.cacheDataSets || []
   pageInfo.pageConfig.refreshConfig = pageInfo.pageConfig.refreshConfig || []
+  let originalConfig = {}
   pageInfo.chartList.forEach((chart) => {
     if (!['customComponent', 'remoteComponent'].includes(chart.type)) {
-      chart.option = _.cloneDeep(setModules[chart.type])
+      // chart.option = _.cloneDeep(setModules[chart.type])
+      originalConfig = { option: { ...setModules[chart.type] }, ...dataModules[chart.type] }
+      chart = compatibility(chart, originalConfig)
     } else {
+      originalConfig = plotList?.find(plot => plot.name === chart.name)
       chart.option = stringToFunction(chart.option)
       // 如果是自定义组件,且没配数据集,就给前端的模拟数据
       if (!chart?.dataSource?.businessKey) {
         chart.option.data = plotList?.find(plot => plot.name === chart.name)?.option?.data
       }
+      chart = compatibility(chart, originalConfig)
     }
     chart.key = chart.code
   })
   return pageInfo
 }
-
+// 组件属性兼容
+function compatibility (config, originalConfig) {
+  const newConfig = config
+  newConfig.dataSource = objCompare(newConfig.dataSource, originalConfig.dataSource)
+  newConfig.customize = objCompare(newConfig.customize, originalConfig.customize)
+  newConfig.option = { ...objCompare(newConfig.option, originalConfig.option), displayOption: originalConfig.option.displayOption }
+  newConfig.setting = arrCompare(newConfig.setting, originalConfig.setting)
+  return newConfig
+}
+// 对象比较
+function objCompare (obj1, obj2) {
+  const keys1 = obj1 ? Object.keys(obj1) : []
+  const keys2 = obj2 ? Object.keys(obj2) : []
+  // 交集
+  const intersection = keys1?.filter(function (v) { return keys2.indexOf(v) > -1 }) || []
+  // 差集
+  const differenceSet = keys2?.filter(function (v) { return keys1.indexOf(v) === -1 }) || []
+  const obj = {}
+  for (const item of intersection) {
+    obj[item] = obj1[item]
+  }
+  for (const item of differenceSet) {
+    obj[item] = obj2[item]
+  }
+  return obj
+}
+// 数组比较
+function arrCompare (list1, list2) {
+  const fieldList = list1?.map(item => item.field) || []
+  const list = list2?.map(item => {
+    let value = null
+    // 如果存在交集
+    if (fieldList.includes(item.field)) {
+      // 保留旧数据的value
+      // console.log(list1.filter(j => j.field === item.field))
+      value = (list1.filter(j => {
+        return j.field === item.field
+      }))[0].value
+    } else {
+      // 不存在交集,直接覆盖
+      value = item.value
+    }
+    return {
+      ...item,
+      value
+    }
+  }) || []
+  return list
+}
 // 推送数据到各个组件
 function emitDataToChart (dataSetId, data) {
   if (data && data.length) {