Merge branch 'master' of github.com:gcpaas/DataRoom

DataRoom/dataroom-core/src/main/java/com/gccloud/dataroom/core/module/chart/components/ScreenSelectChart.java

@@ -49,6 +49,9 @@ public class ScreenSelectChart extends Chart {
         @ApiModelProperty("激活项字体颜色")
         private String activeFontColor;
 
+        @ApiModelProperty("占位提示")
+        private String placeholder;
+
     }
 
 

DataRoom/dataroom-core/src/main/java/com/gccloud/dataroom/core/module/chart/components/ScreenTimePickerChart.java

@@ -56,6 +56,9 @@ public class ScreenTimePickerChart extends Chart {
         @ApiModelProperty(notes = "绑定值的格式")
         private String valueFormat;
 
+        @ApiModelProperty("占位提示")
+        private String placeholder;
+
     }
 
 

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/Select/index.vue

@@ -4,7 +4,7 @@
     v-model="value"
     :popper-class="'basic-component-select select-popper-' + config.code"
     :class="['basic-component-select', `select-${config.code}`]"
-    :placeholder="`请选择${placeholder || newPlaceholder}`"
+    :placeholder="config.customize.placeholder"
     clearable
     :filterable="filterable"
     @visible-change="visibleChange"
@@ -21,10 +21,8 @@
 </template>
 
 <script>
-import { EventBus } from 'data-room-ui/js/utils/eventBus'
 import commonMixins from 'data-room-ui/js/mixins/commonMixins'
 import linkageMixins from 'data-room-ui/js/mixins/linkageMixins'
-import { getDataSetDetails } from 'data-room-ui/js/api/bigScreenApi'
 import { settingToTheme } from 'data-room-ui/js/utils/themeFormatting'
 import cloneDeep from 'lodash/cloneDeep'
 window.dataSetFields = []
@@ -44,53 +42,26 @@ export default {
       value: '',
       innerConfig: {},
       optionData: [],
-      newPlaceholder: '',
       filterable: false
     }
   },
   computed: {
     isPreview () {
       return (this.$route.path === window?.BS_CONFIG?.routers?.previewUrl) || (this.$route.path === '/big-screen/preview')
-    },
-    placeholder: {
-      get () {
-        return window.dataSetFields.find(field => field.value === this.config.dataSource.dimensionField)?.label || ''
-      },
-      set (val) {
-        this.newPlaceholder = val
-      }
     }
   },
   watch: { },
   created () {
   },
   mounted () {
-    window.dataSetFields = []
     this.changeStyle(this.config)
-    EventBus.$on('changeBusinessKey', () => {
-      window.dataSetFields = []
-    })
     if (this.isPreview) {
       this.filterable = true
-      document.querySelector(`.select-${this.config.code}`).style.pointerEvents = 'all'
-      if (this.config.dataSource.businessKey && window.dataSetFields.length === 0) {
-        getDataSetDetails(this.config.dataSource.businessKey).then(res => {
-          window.dataSetFields = res.fields.map(field => {
-            return {
-              label: field.comment || field.fieldDesc,
-              value: field.name || field.fieldName
-            }
-          })
-          this.placeholder = window.dataSetFields.find(field => field.value === this.config.dataSource.dimensionField)?.label || ''
-        })
-      }
     } else {
       document.querySelector(`.select-${this.config.code}`).style.pointerEvents = 'none'
     }
   },
-  beforeDestroy () {
+  beforeDestroy () { },
-    EventBus.$off('changeBusinessKey')
-  },
   methods: {
     dataFormatting (config, data) {
       // 数据返回成功则赋值
@@ -105,20 +76,8 @@ export default {
             console.info(e)
           }
         }
-        config.option.data = data
         this.optionData = data
         config.customize.title = config.option.data[config.dataSource.dimensionField] || config.customize.title
-        if (window.dataSetFields.length === 0) {
-          getDataSetDetails(this.config.dataSource.businessKey).then(res => {
-            window.dataSetFields = res.fields.map(field => {
-              return {
-                label: field.comment || field.fieldDesc,
-                value: field.name || field.fieldName
-              }
-            })
-            this.placeholder = window.dataSetFields.find(field => field.value === this.config.dataSource.dimensionField)?.label || ''
-          })
-        }
         // 语音播报
       } else {
         // 数据返回失败则赋前端的模拟数据

data-room-ui/packages/BasicComponents/Select/settingConfig.js

@@ -30,6 +30,7 @@ const customConfig = {
   },
   // 自定义属性
   customize: {
+    placeholder: '请选择',
     // 输入框背景颜色
     backgroundColor: '#35393F',
     // 输入框字体大小

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;
+  background-color: var(--bs-background-2)!important;
-  //border: 1px solid var(--bs-border-1);
+  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;
+      color: var(--bs-el-color-primary) !important;
-      //background-color: var(--bs-el-background-3) !important;
+      background-color: var(--bs-el-background-3) !important;
     }
   }
 

data-room-ui/packages/BigScreenDesign/RightSetting/DataSetting.vue

@@ -578,7 +578,6 @@
 </template>
 <script>
 import ElDragSelect from './ElDragSelect.vue'
-import { EventBus } from 'data-room-ui/js/utils/eventBus'
 // import { isEmpty, cloneDeep } from 'lodash'
 import isEmpty from 'lodash/isEmpty'
 import cloneDeep from 'lodash/cloneDeep'
@@ -703,6 +702,13 @@ export default {
         }
       },
       deep: true
+    },
+    'config.dataSource.dimensionField' (val) {
+      if (['select'].includes(this.config.type)) {
+        if (this.config.customize?.placeholder) {
+          this.config.customize.placeholder = '请选择' + this.dataSourceDataList.find(item => item.fieldName === val).comment
+        }
+      }
     }
   },
   mounted () {
@@ -738,7 +744,6 @@ export default {
       if (id) {
         this.config.dataSource.businessKey = id
         getDataSetDetails(id).then(res => {
-          EventBus.$emit('changeBusinessKey')
           this.fieldsList = res.fields
           // 初始化时以组件本来的参数设置为主
           if (type === 'initial') {

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

@@ -408,7 +408,9 @@ export default {
       const node = document.querySelector('.remote-preview-inner-wrap')
       // 获取node下的第一个子节点
       const childrenNode = node.children[0]
-      toPng(childrenNode)
+      // 为childrenNode添加一个背景颜色
+      childrenNode.style.backgroundColor = 'var(--bs-background-1)'
+      toJpeg(childrenNode)
         .then((dataUrl) => {
           const link = document.createElement('a')
           link.download = `${this.form.name}.png`

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', // 字段
+    field: 'series_barColor_label_color', // 字段
-    optionField: 'seriesCustom.shadowColor', // 对应options中的字段
+    optionField: 'series.barColor.label.color', // 对应options中的字段
-    value: '#041133',
+    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', // 设置组件类型
+    label: '分隔线',
-  //   field: 'label_style_opacity', // 字段
+    type: 'switch',
-  //   // optionField: 'series', // 对应options中的字段
+    field: 'yAxis_splitLine_show',
-  //   value: 0,
+    optionField: 'yAxis.splitLine.show',
-  //   active: 1,
+    value: 0,
-  //   inactive: 0,
+    active: 1,
-  //   tabName: 'custom',
+    inactive: 0,
-  //   groupName: 'graph'
+    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
-          show: false,
-          position: 'top',
-          fontSize: 15,
-          fontWeight: 'bold',
-          color: '#27a7ce'
-        }
       },
       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
-          show: false,
-          position: 'top',
-          fontSize: 15,
-          fontWeight: 'bold',
-          color: '#27a7ce'
-        }
       },
       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 = [
+        // 没有分组，不需要修改配置，直接修改series中每个对象的series
-          {
+        option.series.forEach(item => {
-            id: 'barTopColor', // 用于区分是图表的什么部分
+          if (item.id.includes('shadow')) {
-            type: 'pictorialBar', // 象形柱图
+            item.data = shadowData
-            symbol: 'diamond',
+          } else {
-            symbolOffset: [0, '-50%'], // 上部菱形
+            item.data = yData
-            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
           }
-        ]
+        })
       }
       return option
     },

data-room-ui/packages/G2Plots/漏斗图/分面漏斗图.js

@@ -229,7 +229,8 @@ const data = [
 const optionHandler = `option.legend = option.legendEnable ? {position: option.legendPosition}: false;
 window.conversionTagName = option.conversionTagName
 option.conversionTag.formatter = (datum) => {
-  return window.conversionTagName + datum.$$percentage$$.toFixed(2) * 100 + '%'
+  const percentage = parseFloat(datum.$$percentage$$)
+  return window.conversionTagName +  (percentage * 100).toFixed(2) + '%'
 }
 if (option.legendEnable) {
    option.legend.itemName = option.legendItemName
@@ -277,7 +278,8 @@ const option = {
       fontSize: 12
     },
     formatter: (datum) => {
-      return option.conversionTagName + datum.$$percentage$$.toFixed(2) * 100 + '%'
+      const percentage = parseFloat(datum.$$percentage$$)
+      return '转化率' + (percentage * 100).toFixed(2) + '%'
     }
   }
 }

data-room-ui/packages/G2Plots/漏斗图/基础漏斗图.js

@@ -1,6 +1,7 @@
+import { Funnel } from '@antv/g2plot'
 
 // 配置版本号
-const version = '2023071001'
+const version = '2023071002'
 // 分类
 const category = 'Funnel'
 // 标题
@@ -211,7 +212,7 @@ const setting = [
     value: '#595959',
     tabName: 'custom',
     groupName: 'legend'
-  },
+  }
   // 边距 padding
 ]
 
@@ -228,7 +229,8 @@ const data = [
 const optionHandler = `option.legend = option.legendEnable ? {position: option.legendPosition}: false;
 window.conversionTagName = option.conversionTagName
 option.conversionTag.formatter = (datum) => {
-  return window.conversionTagName + datum.$$percentage$$.toFixed(2) * 100 + '%'
+  const percentage = parseFloat(datum.$$percentage$$)
+  return window.conversionTagName +  (percentage * 100).toFixed(2) + '%'
 }
 if (option.legendEnable) {
    option.legend.itemName = option.legendItemName
@@ -275,7 +277,8 @@ const option = {
       fontSize: 12
     },
     formatter: (datum) => {
-      return '转化率' + datum.$$percentage$$.toFixed(2) * 100 + '%'
+      const percentage = parseFloat(datum.$$percentage$$)
+      return '转化率' + (percentage * 100).toFixed(2) + '%'
     }
   }
 }

data-room-ui/packages/G2Plots/漏斗图/对比漏斗图.js

@@ -229,7 +229,8 @@ const data = [
 const optionHandler = `option.legend = option.legendEnable ? {position: option.legendPosition}: false;
 window.conversionTagName = option.conversionTagName
 option.conversionTag.formatter = (datum) => {
-  return window.conversionTagName + datum.$$percentage$$.toFixed(2) * 100 + '%'
+  const percentage = parseFloat(datum.$$percentage$$)
+  return window.conversionTagName +  (percentage * 100).toFixed(2) + '%'
 }
 if (option.legendEnable) {
    option.legend.itemName = option.legendItemName
@@ -277,7 +278,8 @@ const option = {
       fontSize: 12
     },
     formatter: (datum) => {
-      return option.conversionTagName + datum.$$percentage$$.toFixed(2) * 100 + '%'
+      const percentage = parseFloat(datum.$$percentage$$)
+      return '转化率' + (percentage * 100).toFixed(2) + '%'
     }
   }
 }