refactor: 代码合并

DataRoom/dataroom-core/src/main/java/com/gccloud/dataroom/core/module/manage/service/impl/DataRoomPagePreviewServiceImpl.java

@@ -6,6 +6,7 @@ import com.gccloud.common.exception.GlobalException;
 import com.gccloud.common.utils.BeanConvertUtils;
 import com.gccloud.dataroom.core.module.basic.dao.DataRoomPagePreviewDao;
 import com.gccloud.dataroom.core.module.basic.entity.PagePreviewEntity;
+import com.gccloud.dataroom.core.module.chart.bean.Chart;
 import com.gccloud.dataroom.core.module.manage.dto.DataRoomPageDTO;
 import com.gccloud.dataroom.core.module.manage.service.IDataRoomPagePreviewService;
 import com.gccloud.dataroom.core.utils.CodeGenerateUtils;
@@ -32,6 +33,7 @@ public class DataRoomPagePreviewServiceImpl extends ServiceImpl<DataRoomPagePrev
         if (list != null && !list.isEmpty()) {
             // 有则直接更新
             PagePreviewEntity pagePreviewEntity = list.get(0);
+            bigScreenPageDTO.setCode(code);
             pagePreviewEntity.setConfig(bigScreenPageDTO);
             pagePreviewEntity.setCreateDate(new Date());
             this.updateById(pagePreviewEntity);

data-room-ui/packages/BasicComponents/ThemeSelect/index.vue

@@ -111,13 +111,20 @@ export default {
 }
 // 自定义dropdown的样式
 .theme-dropdown-menu{
-  //background-color: var(--bs-background-2)!important;
-  //border: 1px solid var(--bs-border-1);
+  background-color: var(--bs-background-2)!important;
+  border: 1px solid var(--bs-border-1);
+  /deep/ .popper__arrow{
+    background-color: var(--bs-background-2)!important;
+    &:after{
+      border-bottom-color: var(--bs-background-2)!important;
+    }
+  }
   /deep/ .el-dropdown-menu__item{
-    //background-color: var(--bs-background-2)!important;
+    background-color: var(--bs-background-2)!important;
+    color: rgb(188, 201, 212)!important;
     &:hover {
-      //color: var(--bs-el-color-primary) !important;
-      //background-color: var(--bs-el-background-3) !important;
+      color: var(--bs-el-color-primary) !important;
+      background-color: var(--bs-el-background-3) !important;
     }
   }
 

data-room-ui/packages/Echarts/3D图/3D基础柱状图.js

@@ -1,4 +1,3 @@
-import * as echarts from 'echarts'
 // 配置版本号
 const version = '2023091901'
 // 标题
@@ -65,7 +64,16 @@ const setting = [
     groupName: 'graph'
   },
   {
-    label: '柱子背景顶部颜色',
+    label: '阴影柱子颜色',
+    type: 'colorPicker', // 设置组件类型
+    field: 'seriesCustom_shadowColor', // 字段
+    optionField: 'seriesCustom.shadowColor', // 对应options中的字段
+    value: '#041133',
+    tabName: 'custom',
+    groupName: 'graph'
+  },
+  {
+    label: '阴影柱子顶部颜色',
     type: 'colorPicker', // 设置组件类型
     field: 'seriesCustom_shadowTopColor', // 字段
     optionField: 'seriesCustom.shadowTopColor', // 对应options中的字段
@@ -74,25 +82,92 @@ const setting = [
     groupName: 'graph'
   },
   {
-    label: '阴影柱子颜色',
+    label: '数据标签',
+    type: 'switch', // 设置组件类型
+    field: 'series_barColor_label_show', // 字段
+    optionField: 'series.barColor.label.show', // 对应options中的字段
+    value: 0,
+    active: 1,
+    inactive: 0,
+    tabName: 'custom',
+    groupName: 'graph'
+  },
+  {
+    label: '数据标签位置',
+    type: 'select', // 设置组件类型
+    field: 'series_barColor_label_position', // 字段
+    optionField: 'series.barColor.label.position', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    value: 'inside',
+    tabName: 'custom',
+    options: [
+      {
+        label: '顶部',
+        value: 'top'
+      },
+      {
+        label: '居中',
+        value: 'inside'
+      },
+      {
+        label: '底部',
+        value: 'bottom'
+      }
+    ],
+    groupName: 'graph'
+  },
+  {
+    label: '数据标签颜色',
     type: 'colorPicker', // 设置组件类型
-    field: 'seriesCustom_shadowColor', // 字段
-    optionField: 'seriesCustom.shadowColor', // 对应options中的字段
-    value: '#041133',
+    field: 'series_barColor_label_color', // 字段
+    optionField: 'series.barColor.label.color', // 对应options中的字段
+    value: '#ffffff',
+    tabName: 'custom',
+    groupName: 'graph'
+  },
+  {
+    label: '数据标签大小',
+    // 设置组件类型
+    type: 'inputNumber',
+    // 字段
+    field: 'series_barColor_label_fontSize',
+    // 对应options中的字段
+    optionField: 'series.barColor.label.fontSize',
+    value: 12,
     tabName: 'custom',
     groupName: 'graph'
   },
-  // {
-  //   label: '数据标签',
-  //   type: 'switch', // 设置组件类型
-  //   field: 'label_style_opacity', // 字段
-  //   // optionField: 'series', // 对应options中的字段
-  //   value: 0,
-  //   active: 1,
-  //   inactive: 0,
-  //   tabName: 'custom',
-  //   groupName: 'graph'
-  // },
+  // 网格线
+  {
+    label: '分隔线',
+    type: 'switch',
+    field: 'yAxis_splitLine_show',
+    optionField: 'yAxis.splitLine.show',
+    value: 0,
+    active: 1,
+    inactive: 0,
+    tabName: 'custom',
+    groupName: 'grid'
+  },
+  {
+    label: '宽度',
+    type: 'inputNumber',
+    field: 'yAxis_splitLine_lineStyle_width',
+    optionField: 'yAxis.splitLine.lineStyle.width',
+    value: 2,
+    tabName: 'custom',
+    groupName: 'grid'
+  },
+  {
+    label: '颜色',
+    type: 'colorPicker',
+    field: 'yAxis_splitLine_lineStyle_color',
+    optionField: 'yAxis.splitLine.lineStyle.color',
+    value: '#fff',
+    tabName: 'custom',
+    groupName: 'grid'
+  },
   // x轴 xAxis
   {
     label: '显示',
@@ -252,6 +327,39 @@ const setting = [
     tabName: 'custom',
     groupName: 'yAxis'
   },
+  {
+    label: '刻度显示',
+    type: 'switch',
+    field: 'yAxis_axisTick_show',
+    optionField: 'yAxis.axisTick.show',
+    value: 1,
+    active: 1,
+    inactive: 0,
+    tabName: 'custom',
+    groupName: 'yAxis'
+  },
+  {
+    label: '刻度颜色',
+    type: 'colorPicker',
+    field: 'yAxis_axisTick_lineStyle_color',
+    optionField: 'yAxis.axisTick.lineStyle.color',
+    // 是否多选
+    multiple: false,
+    value: '#fff',
+    tabName: 'custom',
+    groupName: 'yAxis'
+  },
+  {
+    label: '刻度宽度',
+    type: 'inputNumber',
+    field: 'yAxis_axisTick_lineStyle_width',
+    optionField: 'yAxis.axisTick.lineStyle.width',
+    // 是否多选
+    multiple: false,
+    value: 1,
+    tabName: 'custom',
+    groupName: 'yAxis'
+  },
   {
     label: '标签显示',
     type: 'switch',
@@ -471,9 +579,20 @@ const option = {
       },
       margin: 10
     },
+    axisTick: {
+      show: true,
+      lineStyle: {
+        color: '#fff',
+        width: 1
+      }
+    },
     // 分隔线
     splitLine: {
-      show: false // yAxis.show配置为true时，该配置才有效
+      show: true, // yAxis.show配置为true时，该配置才有效
+      lineStyle: {
+        color: '#fff',
+        width: 2
+      }
     },
     // y轴轴线是否显示
     axisLine: {
@@ -509,13 +628,7 @@ const option = {
       symbolPosition: 'end',
       z: 12,
       label: {
-        normal: {
-          show: false,
-          position: 'top',
-          fontSize: 15,
-          fontWeight: 'bold',
-          color: '#27a7ce'
-        }
+        show: false
       },
       color: '#2DB1EF',
       tooltip: {
@@ -536,6 +649,9 @@ const option = {
       tooltip: {
         show: false
       },
+      label: {
+        show: false
+      },
       data: yData
     },
     // 柱子
@@ -562,6 +678,12 @@ const option = {
       //     shadowBlur: 0 // 阴影模糊值
       //   }
       // },
+      label: {
+        show: true,
+        position: 'inside',
+        color: '#fff',
+        fontSize: 12
+      },
       data: yData
     },
     // 阴影柱子
@@ -597,13 +719,7 @@ const option = {
       symbolPosition: 'end',
       z: 12,
       label: {
-        normal: {
-          show: false,
-          position: 'top',
-          fontSize: 15,
-          fontWeight: 'bold',
-          color: '#27a7ce'
-        }
+        show: false
       },
       color: '#142f5a',
       tooltip: {

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

@@ -194,6 +194,30 @@ export default {
                 option = option[field]
               }
             })
+          } else if (optionField[0] === 'series') {
+            // 存储要修改的series对象
+            let changeObject = {}
+            // 存储改变后的series对象
+            let changedObject = {}
+            optionField.forEach((field, index) => {
+              if (index === 0) {
+                option = option[field]
+              } else if (index === 1) {
+                // 根据id找到对应的type
+                changeObject = option.find(obj => obj.id === field)
+                changedObject = changeObject
+                option = option.filter(obj => obj.id !== field)
+              } else if (index === optionField.length - 1) {
+                // 数据配置时，必须有值才更新
+                if ((set.tabName === type && type === 'data' && set.value) || (set.tabName === type && type === 'custom')) {
+                  changeObject[field] = set.value
+                }
+              } else {
+                changeObject = changeObject[field]
+              }
+            })
+            changeObject = { ...changeObject, ...changedObject }
+            option.push(changeObject)
           } else {
             optionField.forEach((field, index) => {
               if (index === optionField.length - 1) {
@@ -261,8 +285,6 @@ export default {
       const yField = config.setting.find(item => item.optionField === 'yField')?.value
       const hasSeries = config.setting.find(item => item.optionField === 'seriesField' && item.value !== '')
       const { xData, yData } = this.getxDataAndYData(xField, yField, data, hasSeries)
-      // const xData = [...new Set(data.map(item => item[xField]))]
-      // const yData = data.map(item => item[yField])
       const maxY = Math.max(...yData) + Math.max(...yData) * 0.2
       // 生成阴影柱子的值
       const shadowData = Array.from({ length: xData.length }, () => maxY)
@@ -390,110 +412,14 @@ export default {
           option.series.push(...seriesItem)
         }
       } else {
-        option.series = [
-          {
-            id: 'barTopColor', // 用于区分是图表的什么部分
-            type: 'pictorialBar', // 象形柱图
-            symbol: 'diamond',
-            symbolOffset: [0, '-50%'], // 上部菱形
-            symbolSize: [30, 15],
-            // symbolOffset: [0, -6], // 上部椭圆
-            symbolPosition: 'end',
-            z: 12,
-            label: {
-              normal: {
-                show: true,
-                position: 'top',
-                fontSize: 15,
-                fontWeight: 'bold',
-                color: '#27a7ce'
-              }
-            },
-            color: option.seriesCustom.barTopColor,
-            data: yData
-          },
-          {
-            id: 'barBottomColor', // 用于区分是图表的什么部分
-            type: 'pictorialBar',
-            symbol: 'diamond',
-            symbolSize: [30, 15],
-            symbolOffset: ['0%', '50%'], // 下部菱形
-            // symbolOffset: [0, 7], // 下部椭圆
-            z: 12,
-            color: option.seriesCustom.barBottomColor,
-            data: yData
-          },
-          {
-            id: 'barColor', // 用于区分是图表的什么部分
-            type: 'bar',
-            barWidth: 30,
-            z: 10,
-            itemStyle: {
-              normal: {
-                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                  {
-                    offset: 0,
-                    color: option.seriesCustom.barColor1
-                  },
-                  {
-                    offset: 1,
-                    color: option.seriesCustom.barColor2
-                  }
-                ]),
-                opacity: 0.8,
-                shadowColor: 'rgba(0, 0, 0, 0.5)', // 阴影颜色
-                shadowBlur: 0 // 阴影模糊值
-              }
-            },
-            data: yData
-          },
-          {
-            id: 'shadowColor', // 用于区分是图表的什么部分
-            type: 'bar',
-            barWidth: 30,
-            xAxisIndex: 1,
-            itemStyle: {
-              normal: {
-                color: option.seriesCustom.shadowColor,
-                opacity: 0.8,
-                shadowColor: 'rgba(0, 0, 0, 0.5)', // 阴影颜色
-                shadowBlur: 0 // 阴影模糊值
-              }
-            },
-            label: {
-              show: false
-            },
-            tooltip: {
-              show: false
-            },
-            data: shadowData
-          },
-          {
-            id: 'shadowTopColor', // 用于区分是图表的什么部分
-            type: 'pictorialBar', // 象形柱图
-            xAxisIndex: 1,
-            symbol: 'diamond',
-            symbolOffset: [0, '-50%'], // 上部菱形
-            symbolSize: [30, 15],
-            // symbolOffset: [0, -6], // 上部椭圆
-            symbolPosition: 'end',
-            z: 12,
-            label: {
-              normal: {
-                show: false,
-                position: 'top',
-                fontSize: 15,
-                fontWeight: 'bold',
-                color: '#27a7ce'
-              }
-            },
-            color: option.seriesCustom.shadowTopColor,
-            tooltip: {
-              show: false
-            },
-            data: shadowData
+        // 没有分组，不需要修改配置，直接修改series中每个对象的series
+        option.series.forEach(item => {
+          if (item.id.includes('shadow')) {
+            item.data = shadowData
+          } else {
+            item.data = yData
           }
-        ]
+        })
       }
       return option
     },