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

2 years ago · e03310675f
parent 510731cb3d ad6d1f0d65
commit e03310675f
24 changed files with 135 additions and 101 deletions
--- a/DataRoom/dataroom-core/src/main/java/com/gccloud/dataroom/core/module/chart/components/CustomComponentChart.java
+++ b/DataRoom/dataroom-core/src/main/java/com/gccloud/dataroom/core/module/chart/components/CustomComponentChart.java
@ -6,6 +6,7 @@ import io.swagger.annotations.ApiModelProperty;
 import lombok.Data;

 import java.util.List;
+import java.util.Map;

 /**
 * 自定义组件
@ -38,7 +39,7 @@ public class CustomComponentChart extends Chart {
    private Object option;

    @ApiModelProperty(notes = "右侧面板自定义配置")
-    private List<Setting> setting;
+    private List<Map<String, Object>> setting;

    @ApiModelProperty(notes = "组件的唯一名称")
    private String name;
--- a/data-room-ui/packages/BasicComponents/CurrentTime/index.vue
+++ b/data-room-ui/packages/BasicComponents/CurrentTime/index.vue
@ -31,8 +31,8 @@
 import moment from 'moment'
 import paramsMixins from 'data-room-ui/js/mixins/paramsMixins'
 import { settingToTheme } from 'data-room-ui/js/utils/themeFormatting'
-import cloneDeep from "lodash/cloneDeep";
-import {mapMutations, mapState} from 'vuex'
+import cloneDeep from 'lodash/cloneDeep'
+import { mapMutations, mapState } from 'vuex'
 export default {
  name: 'CurrentTime',
  mixins: [paramsMixins],
--- a/data-room-ui/packages/BasicComponents/DateTimePicker/index.vue
+++ b/data-room-ui/packages/BasicComponents/DateTimePicker/index.vue
@ -52,7 +52,7 @@ export default {
        if (val && val.customize && val.customize.formatType === 'custom') {
          // 解决时间格式化类型为自定义时，时间格式化类型和时间格式化值数据类型不匹配的问题
          this.$nextTick(() => {
-            this.value = toString(this.value)
+            this.config.customize.value = toString(this.config.customize.value)
          })
        }
      },
@ -65,6 +65,10 @@ export default {
      document.querySelector(`.date-picker-${this.config.code}`).style.pointerEvents = 'none'
    }
    this.changeStyle(this.config)
+    // 将config.customize.value设置值为当前时间 ：
+    if (this.config.customize.value === '') {
+      this.config.customize.value = new Date()
+    }
  },
  beforeDestroy () {
  },
--- a/data-room-ui/packages/BasicComponents/DateTimePicker/setting.vue
+++ b/data-room-ui/packages/BasicComponents/DateTimePicker/setting.vue
@ -137,13 +137,22 @@
                />
                <!-- HH表示小时（24小时制），mm表示分钟，ss表示秒 -->
                <el-tooltip
-                  content="时间格式示例：yyyy表示年份，MM表示月份，dd表示日期，HH表示小时（24小时制），mm表示分钟，ss表示秒，具体可参考Element-UI官网的日期选择器的时间格式化部分"
                  placement="top"
                >
                  <span
                    class="el-icon-question"
                    style="color:#9e9e9e"
                  />
+                  <div slot="content">
+                    时间格式示例：<br>
+                    yyyy：表示年份，<br>
+                    MM：表示月份，<br>
+                    dd：表示日期，<br>
+                    HH：表示小时（24小时制），<br>
+                    mm：表示分钟，<br>
+                    ss：表示秒，<br>
+                    具体可参考Element-UI官网的日期选择器的时间格式化部分。
+                  </div>
                </el-tooltip>
              </div>
            </el-form-item>
@ -193,7 +202,6 @@ export default {
      second: 'ss',
      // 时间格式化类型选项
      formatTypeOptions: [
-        { label: 'Date 对象', value: 'default' },
        { label: '时间戳', value: 'timestamp' },
        { label: '自定义', value: 'custom' }
      ],
@ -213,10 +221,7 @@ export default {
  mounted () {},
  methods: {
    selectFormatType (type) {
-      if (type === 'default') {
-        this.config.customize.value = ''
-        this.config.customize.valueFormat = ''
-      } else if (type === 'timestamp') {
+      if (type === 'timestamp') {
        this.config.customize.value = 0
        this.config.customize.valueFormat = 'timestamp'
      } else if (type === 'custom') {
--- a/data-room-ui/packages/BasicComponents/DateTimePicker/settingConfig.js
+++ b/data-room-ui/packages/BasicComponents/DateTimePicker/settingConfig.js
@ -31,10 +31,10 @@ const customConfig = {
    fontSize: 20,
    // 显示类型 year/month/date/week/ datetime/datetimerange/daterange
    type: 'datetime',
-    // 时间格式化类型:Date 对象（default），时间戳（timestamp），自定义（custom）
-    formatType: 'default',
+    // 时间格式化类型:时间戳（timestamp），自定义（custom）
+    formatType: 'custom',
    // 绑定值的格式
-    valueFormat: '',
+    valueFormat: 'yyyy-MM-dd HH:mm:ss',
    // 下拉框
    dropDownBox: {
      // 下拉框背景颜色
--- a/data-room-ui/packages/BasicComponents/TimePicker/index.vue
+++ b/data-room-ui/packages/BasicComponents/TimePicker/index.vue
@ -14,6 +14,7 @@
 </template>

 <script>
+import moment from 'moment'
 import cloneDeep from 'lodash/cloneDeep'
 import commonMixins from 'data-room-ui/js/mixins/commonMixins'
 import linkageMixins from 'data-room-ui/js/mixins/linkageMixins'
@ -51,7 +52,7 @@ export default {
      handler: function (val) {
        if (val && val.customize && val.customize.formatType === 'custom') {
          this.$nextTick(() => {
-            this.value = toString(this.value)
+            this.config.customize.value = toString(this.config.customize.value)
          })
        }
      },
@ -64,6 +65,14 @@ export default {
      // document.querySelector(`.time-picker-${this.config.code}`).style.pointerEvents = 'none'
    }
    this.changeStyle(this.config)
+    // 将config.customize.value设置值为当前时间 ：HH:mm:ss
+    // if (this.config.customize.value === '') {
+    //   this.config.customize.valueFormat = 'HH:mm:ss'
+    //   this.$nextTick(() => {
+    //     this.config.customize.value = moment(new Date()).format('HH:mm:ss')
+    //     console.log(this.config.customize.value)
+    //   })
+    // }
  },
  beforeDestroy () { },
  methods: {
--- a/data-room-ui/packages/BasicComponents/TimePicker/setting.vue
+++ b/data-room-ui/packages/BasicComponents/TimePicker/setting.vue
@ -111,13 +111,19 @@
                  clearable
                />
                <el-tooltip
-                  content="时间格式示例：HH表示小时（24小时制），mm表示分钟，ss表示秒"
                  placement="top"
                >
                  <span
                    class="el-icon-question"
                    style="color:#9e9e9e"
                  />
+                  <div slot="content">
+                    时间格式示例：<br>
+                    HH：表示小时（24小时制），<br>
+                    mm：表示分钟，<br>
+                    ss：表示秒，
+                    具体可参考Element-UI官网的日期选择器的时间格式化部分。
+                  </div>
                </el-tooltip>
              </div>
            </el-form-item>
@ -162,12 +168,8 @@ export default {
  },
  data () {
    return {
-      hour: 'HH',
-      minute: 'mm',
-      second: 'ss',
      // 时间格式化类型选项
      formatTypeOptions: [
-        { label: 'Date 对象', value: 'default' },
        { label: '时间戳', value: 'timestamp' },
        { label: '自定义', value: 'custom' }
      ]
@ -177,10 +179,7 @@ export default {
  mounted () {},
  methods: {
    selectFormatType (type) {
-      if (type === 'default') {
-        this.config.customize.value = ''
-        this.config.customize.valueFormat = ''
-      } else if (type === 'timestamp') {
+      if (type === 'timestamp') {
        this.config.customize.value = 0
        this.config.customize.valueFormat = 'timestamp'
      } else if (type === 'custom') {
--- a/data-room-ui/packages/BasicComponents/TimePicker/settingConfig.js
+++ b/data-room-ui/packages/BasicComponents/TimePicker/settingConfig.js
@ -39,10 +39,10 @@ const customConfig = {
    dropDownHoverFontColor: '#FFFFFF',
    // 下拉项激活文字颜色
    dropDownSelectedFontColor: '#409EFF',
-    // 时间格式化类型:Date 对象（default），时间戳（timestamp），自定义（custom）
-    formatType: 'default',
+    // 时间格式化类型:时间戳（timestamp），自定义（custom）
+    formatType: 'custom',
    // 绑定值的格式
-    valueFormat: ''
+    valueFormat: 'HH:mm:ss'
  }
 }
 export const dataConfig = {
--- a/data-room-ui/packages/G2Plots/折线图/多折线动画图.js
+++ b/data-room-ui/packages/G2Plots/折线图/多折线动画图.js
@ -5,7 +5,7 @@
 */

 // 配置版本号
-const version = '2023092201'
+const version = '2023092501'
 // 分类
 const category = 'Line'
 // 标题
@ -584,6 +584,7 @@ const dataHandler = ''
 const option = {
  // 数据将要放入到哪个字段中
  dataKey: 'data',
+  renderer: 'canvas',
  data,
  color: ['#5B8FF9', '#61DDAA', '#5D7092', '#F6BD16', '#6F5EF9', '#6DC8EC', '#945FB9', '#FF9845', '#1E9493', '#FF99C3'],
  xField: 'year',
--- a/data-room-ui/packages/G2Plots/折线图/多折线图.js
+++ b/data-room-ui/packages/G2Plots/折线图/多折线图.js
@ -5,7 +5,7 @@
 */

 // 配置版本号
-const version = '2023092201'
+const version = '2023092501'
 // 分类
 const category = 'Line'
 // 标题
@ -1276,6 +1276,7 @@ const dataHandler = ''
 const option = {
  // 数据将要放入到哪个字段中
  dataKey: 'data',
+  renderer: 'canvas',
  data,
  xField: 'year',
  yField: 'value',
--- a/data-room-ui/packages/G2Plots/折线图/多阶梯折线图.js
+++ b/data-room-ui/packages/G2Plots/折线图/多阶梯折线图.js
@ -1,6 +1,6 @@

 // 配置版本号
-const version = '2023092201'
+const version = '2023092501'
 // 分类
 const category = 'Line'
 // 标题
@ -471,6 +471,7 @@ const dataHandler = ''
 const option = {
  // 数据将要放入到哪个字段中
  dataKey: 'data',
+  renderer: 'canvas',
  data,
  xField: 'month',
  yField: 'value',
--- a/data-room-ui/packages/G2Plots/折线图/折线趋势填充图.js
+++ b/data-room-ui/packages/G2Plots/折线图/折线趋势填充图.js
@ -5,7 +5,7 @@
 */

 // 配置版本号
-const version = '2023092201'
+const version = '2023092501'
 // 分类
 const category = 'Line'
 // 标题
@ -598,6 +598,7 @@ const dataHandler = ''
 const option = {
  // 数据将要放入到哪个字段中
  dataKey: 'data',
+  renderer: 'canvas',
  data,
  color: ['#5B8FF9', '#61DDAA', '#5D7092', '#F6BD16', '#6F5EF9', '#6DC8EC', '#945FB9', '#FF9845', '#1E9493', '#FF99C3'],
  xField: 'year',
--- a/data-room-ui/packages/G2Plots/条形图/分组条形图.js
+++ b/data-room-ui/packages/G2Plots/条形图/分组条形图.js
@ -5,7 +5,7 @@
 */

 // 配置版本号
-const version = '2023092201'
+const version = '2023092501'
 // 分类
 const category = 'Bar'
 // 标题
@ -59,35 +59,35 @@ const setting = [
  },
  /** 样式配置 **/
  // 图表 graph
-  {
-    label: '条形样式',
-    type: 'select', // 设置组件类型
-    field: 'shape', // 字段
-    optionField: 'shape', // 对应options中的字段
-    // 是否多选
-    multiple: false,
-    value: 'default',
-    tabName: 'custom',
-    options: [
-      {
-        label: '实心条形',
-        value: 'default'
-      },
-      // {
-      //   label: '线性',
-      //   value: 'line'
-      // },
-      {
-        label: '空心条形',
-        value: 'hollow-rect'
-      },
-      {
-        label: '钉形',
-        value: 'tick'
-      }
-    ],
-    groupName: 'graph'
-  },
+  // {
+  //   label: '条形样式',
+  //   type: 'select', // 设置组件类型
+  //   field: 'shape', // 字段
+  //   optionField: 'shape', // 对应options中的字段
+  //   // 是否多选
+  //   multiple: false,
+  //   value: 'default',
+  //   tabName: 'custom',
+  //   options: [
+  //     {
+  //       label: '实心条形',
+  //       value: 'default'
+  //     },
+  //     // {
+  //     //   label: '线性',
+  //     //   value: 'line'
+  //     // },
+  //     {
+  //       label: '空心条形',
+  //       value: 'hollow-rect'
+  //     },
+  //     {
+  //       label: '钉形',
+  //       value: 'tick'
+  //     }
+  //   ],
+  //   groupName: 'graph'
+  // },
  {
    label: '圆角设置',
    // 设置组件类型
@ -563,9 +563,10 @@ const dataHandler = ''
 const option = {
  // 数据将要放入到哪个字段中
  dataKey: 'data',
+  renderer: 'canvas',
  data,
  isGroup: true,
-  shape: ' ',
+  // shape: ' ',
  xField: 'value',
  yField: 'label',
  legendEnable: false,
--- a/data-room-ui/packages/G2Plots/条形图/基础条形图.js
+++ b/data-room-ui/packages/G2Plots/条形图/基础条形图.js
@ -5,7 +5,7 @@
 */

 // 配置版本号
-const version = '2023092201'
+const version = '2023092501'
 // 分类
 const category = 'Bar'
 // 标题
@ -46,35 +46,35 @@ const setting = [
  },
  /** 样式配置 **/
  // 图表 graph
-  {
-    label: '条形样式',
-    type: 'select', // 设置组件类型
-    field: 'shape', // 字段
-    optionField: 'shape', // 对应options中的字段
-    // 是否多选
-    multiple: false,
-    value: 'default',
-    tabName: 'custom',
-    options: [
-      {
-        label: '实心条形',
-        value: 'default'
-      },
-      // {
-      //   label: '线性',
-      //   value: 'line'
-      // },
-      {
-        label: '空心条形',
-        value: 'hollow-rect'
-      },
-      {
-        label: '钉形',
-        value: 'tick'
-      }
-    ],
-    groupName: 'graph'
-  },
+  // {
+  //   label: '条形样式',
+  //   type: 'select', // 设置组件类型
+  //   field: 'shape', // 字段
+  //   optionField: 'shape', // 对应options中的字段
+  //   // 是否多选
+  //   multiple: false,
+  //   value: 'default',
+  //   tabName: 'custom',
+  //   options: [
+  //     {
+  //       label: '实心条形',
+  //       value: 'default'
+  //     },
+  //     // {
+  //     //   label: '线性',
+  //     //   value: 'line'
+  //     // },
+  //     {
+  //       label: '空心条形',
+  //       value: 'hollow-rect'
+  //     },
+  //     {
+  //       label: '钉形',
+  //       value: 'tick'
+  //     }
+  //   ],
+  //   groupName: 'graph'
+  // },
  {
    label: '圆角设置',
    // 设置组件类型
@ -506,10 +506,11 @@ const dataHandler = 'const yFieldValue = setting.find(settingItem=>settingItem.f
 const option = {
  // 数据将要放入到哪个字段中
  dataKey: 'data',
+  renderer: 'canvas',
  data,
  xField: 'value',
  yField: 'year',
-  shape: 'default', // 条形图形状
+  // shape: 'default', // 条形图形状
  seriesField: 'year',
  color: ['#5B8FF9', '#61DDAA', '#5D7092', '#F6BD16', '#6F5EF9', '#6DC8EC', '#945FB9', '#FF9845', '#1E9493', '#FF99C3'],
  legendEnable: true,
@ -528,6 +529,7 @@ const option = {
  },
  label: {
    position: 'middle',
+    layout:{},
    style: {
      fill: '#59F25F',
      opacity: 0,
--- a/data-room-ui/packages/G2Plots/漏斗图/分面漏斗图.js
+++ b/data-room-ui/packages/G2Plots/漏斗图/分面漏斗图.js
@ -1,6 +1,6 @@

 // 配置版本号
-const version = '2023092201'
+const version = '2023092501'
 // 分类
 const category = 'Funnel'
 // 标题
@ -244,6 +244,7 @@ const dataHandler = 'data = data.sort((a, b) => b[option.yField] - a[option.yFie
 const option = {
  // 数据将要放入到哪个字段中
  dataKey: 'data',
+  renderer: 'canvas',
  data,
  color: ['#5B8FF9', '#61DDAA', '#5D7092', '#F6BD16', '#6F5EF9', '#6DC8EC', '#945FB9', '#FF9845', '#1E9493', '#FF99C3'],
  xField: 'stage',
--- a/data-room-ui/packages/G2Plots/漏斗图/基础漏斗图.js
+++ b/data-room-ui/packages/G2Plots/漏斗图/基础漏斗图.js
@ -242,6 +242,7 @@ const dataHandler = 'data = data.sort((a, b) => b[option.yField] - a[option.yFie
 const option = {
  // 数据将要放入到哪个字段中
  dataKey: 'data',
+  renderer: 'canvas',
  data,
  color: ['#5B8FF9', '#61DDAA', '#5D7092', '#F6BD16', '#6F5EF9', '#6DC8EC', '#945FB9', '#FF9845', '#1E9493', '#FF99C3'],
  xField: 'stage',
--- a/data-room-ui/packages/G2Plots/漏斗图/对比漏斗图.js
+++ b/data-room-ui/packages/G2Plots/漏斗图/对比漏斗图.js
@ -1,6 +1,6 @@

 // 配置版本号
-const version = '2023092201'
+const version = '2023092501'
 // 分类
 const category = 'Funnel'
 // 标题
@ -244,6 +244,7 @@ const dataHandler = 'data = data.sort((a, b) => b[option.yField] - a[option.yFie
 const option = {
  // 数据将要放入到哪个字段中
  dataKey: 'data',
+  renderer: 'canvas',
  data,
  color: ['#5B8FF9', '#61DDAA', '#5D7092', '#F6BD16', '#6F5EF9', '#6DC8EC', '#945FB9', '#FF9845', '#1E9493', '#FF99C3'],
  xField: 'stage',
--- a/data-room-ui/packages/G2Plots/矩形树图/基础矩形树图.js
+++ b/data-room-ui/packages/G2Plots/矩形树图/基础矩形树图.js
@ -1,6 +1,6 @@

 // 配置版本号
-const version = '2023092201'
+const version = '2023092501'
 // 分类
 const category = 'Treemap'
 // 标题
@ -193,6 +193,7 @@ const dataHandler = '// 转换数据格式\n' +
 const option = {
  // 数据将要放入到哪个字段中
  dataKey: 'data',
+  renderer: 'canvas',
  data,
  color: ['#5B8FF9', '#61DDAA', '#5D7092', '#F6BD16', '#6F5EF9', '#6DC8EC', '#945FB9', '#FF9845', '#1E9493', '#FF99C3'],
  colorField: 'name',
--- a/data-room-ui/packages/G2Plots/雷达图/分组雷达图.js
+++ b/data-room-ui/packages/G2Plots/雷达图/分组雷达图.js
@ -1,6 +1,6 @@

 // 配置版本号
-const version = '2023092201'
+const version = '2023092501'
 // 分类
 const category = 'Radar'
 // 标题
@ -271,6 +271,7 @@ const dataHandler = ''
 const option = {
  // 数据将要放入到哪个字段中
  dataKey: 'data',
+  renderer: 'canvas',
  data,
  xField: 'item',
  yField: 'score',
--- a/data-room-ui/packages/G2Plots/面积图/堆叠面积图.js
+++ b/data-room-ui/packages/G2Plots/面积图/堆叠面积图.js
@ -5,7 +5,7 @@
 */

 // 配置版本号
-const version = '2023092201'
+const version = '2023092501'
 // 分类
 const category = 'Area'
 // 标题
@ -603,6 +603,7 @@ const dataHandler = ''
 const option = {
  // 数据将要放入到哪个字段中
  dataKey: 'data',
+  renderer: 'canvas',
  data,
  xField: 'date',
  yField: 'value',
--- a/data-room-ui/packages/G2Plots/饼图/基础环图.js
+++ b/data-room-ui/packages/G2Plots/饼图/基础环图.js
@ -1,6 +1,6 @@

 // 配置版本号
-const version = '2023092201'
+const version = '2023092501'
 // 分类
 const category = 'Pie'
 // 标题
@ -315,6 +315,7 @@ const dataHandler = ''
 const option = {
  // 数据将要放入到哪个字段中
  dataKey: 'data',
+  renderer: 'canvas',
  data,
  angleField: 'value',
  colorField: 'type',
--- a/data-room-ui/packages/G2Plots/饼图/基础饼图.js
+++ b/data-room-ui/packages/G2Plots/饼图/基础饼图.js
@ -1,6 +1,6 @@

 // 配置版本号
-const version = '2023092201'
+const version = '2023092501'
 // 分类
 const category = 'Pie'
 // 标题
@ -220,6 +220,7 @@ const dataHandler = ''
 const option = {
  // 数据将要放入到哪个字段中
  dataKey: 'data',
+  renderer: 'canvas',
  data,
  legendEnable: false,
  legendLayout: 'vertical',
--- a/data-room-ui/packages/G2Plots/饼图/玫瑰图.js
+++ b/data-room-ui/packages/G2Plots/饼图/玫瑰图.js
@ -1,6 +1,6 @@

 // 配置版本号
-const version = '2023092201'
+const version = '2023092501'
 // 分类
 const category = 'Rose'
 // 标题
@ -182,6 +182,7 @@ const dataHandler = ''
 const option = {
  // 数据将要放入到哪个字段中
  dataKey: 'data',
+  renderer: 'canvas',
  data,
  xField: 'type',
  yField: 'value',
--- a/data-room-ui/packages/js/utils/getComponentConfig.js
+++ b/data-room-ui/packages/js/utils/getComponentConfig.js
@ -278,7 +278,7 @@ export default function getComponentConfig (type) {
        name: '日期时间选择器',
        title: '日期时间选择器',
        icon: Icon.getNameList()[23],
-        className: 'com.gccloud.dataroom.core.module.chart.components.ScreenTimePickerChart',
+        className: 'com.gccloud.dataroom.core.module.chart.components.ScreenDateTimePickerChart',
        w: 260,
        h: 80,
        x: 0,