From 2e11de3a812ddcad9126a3ac46b47bd1eeecc1ad Mon Sep 17 00:00:00 2001 From: "wu.jian2" Date: Sun, 8 Oct 2023 10:15:03 +0800 Subject: [PATCH 01/17] =?UTF-8?q?feat:=20=E6=97=A5=E6=9C=9F=E9=80=89?= =?UTF-8?q?=E6=8B=A9=E5=99=A8=E6=B7=BB=E5=8A=A0=E6=95=B0=E6=8D=AE=E6=98=BE?= =?UTF-8?q?=E7=A4=BA=E6=A0=BC=E5=BC=8F=E5=8C=96=E9=85=8D=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../BasicComponents/TimePicker/index.vue | 1 + .../BasicComponents/TimePicker/setting.vue | 90 ++++++++++++++----- .../TimePicker/settingConfig.js | 2 + 3 files changed, 73 insertions(+), 20 deletions(-) diff --git a/data-room-ui/packages/BasicComponents/TimePicker/index.vue b/data-room-ui/packages/BasicComponents/TimePicker/index.vue index f777b074..26764193 100644 --- a/data-room-ui/packages/BasicComponents/TimePicker/index.vue +++ b/data-room-ui/packages/BasicComponents/TimePicker/index.vue @@ -6,6 +6,7 @@ clearable :class="['basic-component-time-picker', `time-picker-${config.code}`]" :popper-class="'basic-component-time-picker time-picker-popper-' + config.code" + :format="config.customize.format" :value-format="config.customize.valueFormat" :default-value="value" @focus="focusEvent" diff --git a/data-room-ui/packages/BasicComponents/TimePicker/setting.vue b/data-room-ui/packages/BasicComponents/TimePicker/setting.vue index db9442b5..0efd7845 100644 --- a/data-room-ui/packages/BasicComponents/TimePicker/setting.vue +++ b/data-room-ui/packages/BasicComponents/TimePicker/setting.vue @@ -84,25 +84,69 @@ 时间格式
- - - +
+ - + + +
+ 小时：H，表示小时（24小时制），不补0，例如：3
+ 小时：HH，表示小时（24小时制），补0，例如：03
+ 小时：h，表示小时（12小时制），须和 A 或 a 使用，不补0，例如：3
+ 小时：hh，表示小时（12小时制），须和 A 或 a 使用，补0，例如：03
+ 分钟：m，表示分钟，不补0，例如：4
+ 分钟：mm，表示分钟，补0，例如：04
+ 秒：s，表示秒钟，不补0，例如：5
+ 秒：ss，表示秒钟，补0，例如：05
+ JS时间戳：timestamp，仅 value-format 可用，组件绑定值为number类型，例如：1483326245000
+ 不需要格式化字符：[MM]，使用方括号标识不需要格式化的字符，例如：MM
+ 具体的时间格式化字符和使用方式，可以参考Element-UI官网的日期选择器的时间格式化部分。 +
+ +
+ + +
+ + + + + +
+ 时间戳：从1970年1月1日开始计算的秒数，数据类型为数值型，例如：1483326245000。
+ 自定义：通过输入特定的格式字符串来指定时间的数据格式，例如：HH:mm:ss对应数据为 09:30:00。
+
+ +
-
+
- 时间格式示例：
- HH：表示小时（24小时制），
- mm：表示分钟，
- ss：表示秒， - 具体可参考Element-UI官网的日期选择器的时间格式化部分。 + 小时：H，表示小时（24小时制），不补0，例如：3
+ 小时：HH，表示小时（24小时制），补0，例如：03
+ 小时：h，表示小时（12小时制），须和 A 或 a 使用，不补0，例如：3
+ 小时：hh，表示小时（12小时制），须和 A 或 a 使用，补0，例如：03
+ 分钟：m，表示分钟，不补0，例如：4
+ 分钟：mm，表示分钟，补0，例如：04
+ 秒：s，表示秒钟，不补0，例如：5
+ 秒：ss，表示秒钟，补0，例如：05
+ JS时间戳：timestamp，仅 value-format 可用，组件绑定值为number类型，例如：1483326245000
+ 不需要格式化字符：[MM]，使用方括号标识不需要格式化的字符，例如：MM
+ 具体的时间格式化字符和使用方式，可以参考Element-UI官网的日期选择器的时间格式化部分。
@@ -184,7 +234,7 @@ export default { width: 97%; padding: 16px; } - .time-format-description{ + .description{ display: flex; align-items: center; .el-tooltip{ diff --git a/data-room-ui/packages/BasicComponents/TimePicker/settingConfig.js b/data-room-ui/packages/BasicComponents/TimePicker/settingConfig.js index b7ebd516..f5ac420a 100644 --- a/data-room-ui/packages/BasicComponents/TimePicker/settingConfig.js +++ b/data-room-ui/packages/BasicComponents/TimePicker/settingConfig.js @@ -41,6 +41,8 @@ const customConfig = { dropDownSelectedFontColor: '#409EFF', // 时间格式化类型:时间戳（timestamp），自定义（custom） formatType: 'custom', + // 时间格式化 + format: 'HH:mm:ss', // 绑定值的格式 valueFormat: 'HH:mm:ss' } From a9b12c767ce09d18607377e733318f368f5788a6 Mon Sep 17 00:00:00 2001 From: "hong.yang" Date: Sun, 8 Oct 2023 10:15:38 +0800 Subject: [PATCH 02/17] =?UTF-8?q?fix:=20=E6=97=B6=E9=97=B4=E3=80=81?= =?UTF-8?q?=E6=97=A5=E6=9C=9F=E9=80=89=E6=8B=A9=E5=99=A8=E6=96=B0=E5=A2=9E?= =?UTF-8?q?=E6=98=BE=E7=A4=BA=E6=A0=BC=E5=BC=8F=E5=8C=96=E9=85=8D=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 时间、日期选择器新增显示格式化配置 --- .../module/chart/components/ScreenDateTimePickerChart.java | 3 +++ .../core/module/chart/components/ScreenTimePickerChart.java | 3 +++ 2 files changed, 6 insertions(+) diff --git a/DataRoom/dataroom-core/src/main/java/com/gccloud/dataroom/core/module/chart/components/ScreenDateTimePickerChart.java b/DataRoom/dataroom-core/src/main/java/com/gccloud/dataroom/core/module/chart/components/ScreenDateTimePickerChart.java index 1a9deefb..28242c92 100644 --- a/DataRoom/dataroom-core/src/main/java/com/gccloud/dataroom/core/module/chart/components/ScreenDateTimePickerChart.java +++ b/DataRoom/dataroom-core/src/main/java/com/gccloud/dataroom/core/module/chart/components/ScreenDateTimePickerChart.java @@ -43,6 +43,9 @@ public class ScreenDateTimePickerChart extends Chart { @ApiModelProperty(notes = "绑定值的格式") private String valueFormat; + @ApiModelProperty(notes = "显示的格式") + private String format; + @ApiModelProperty(notes = "下拉框") private Map dropDownBox; diff --git a/DataRoom/dataroom-core/src/main/java/com/gccloud/dataroom/core/module/chart/components/ScreenTimePickerChart.java b/DataRoom/dataroom-core/src/main/java/com/gccloud/dataroom/core/module/chart/components/ScreenTimePickerChart.java index 1b8d0aee..4c085f1c 100644 --- a/DataRoom/dataroom-core/src/main/java/com/gccloud/dataroom/core/module/chart/components/ScreenTimePickerChart.java +++ b/DataRoom/dataroom-core/src/main/java/com/gccloud/dataroom/core/module/chart/components/ScreenTimePickerChart.java @@ -53,6 +53,9 @@ public class ScreenTimePickerChart extends Chart { @ApiModelProperty(notes = "绑定值的格式") private String valueFormat; + @ApiModelProperty(notes = "显示的格式") + private String format; + } From 0053cebca91269e86d3f706f12bf13ba3a2c061e Mon Sep 17 00:00:00 2001 From: "wu.jian2" Date: Sun, 8 Oct 2023 10:16:37 +0800 Subject: [PATCH 03/17] =?UTF-8?q?feat:=20=E6=97=A5=E6=9C=9F=E6=97=B6?= =?UTF-8?q?=E9=97=B4=E9=80=89=E6=8B=A9=E5=99=A8=E6=B7=BB=E5=8A=A0=E6=95=B0?= =?UTF-8?q?=E6=8D=AE=E6=98=BE=E7=A4=BA=E6=A0=BC=E5=BC=8F=E5=8C=96=E9=85=8D?= =?UTF-8?q?=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../BasicComponents/DateTimePicker/index.vue | 1 + .../DateTimePicker/setting.vue | 138 +++++++++++++----- .../DateTimePicker/settingConfig.js | 3 +- 3 files changed, 103 insertions(+), 39 deletions(-) diff --git a/data-room-ui/packages/BasicComponents/DateTimePicker/index.vue b/data-room-ui/packages/BasicComponents/DateTimePicker/index.vue index c75b1605..5f3d7ef9 100644 --- a/data-room-ui/packages/BasicComponents/DateTimePicker/index.vue +++ b/data-room-ui/packages/BasicComponents/DateTimePicker/index.vue @@ -8,6 +8,7 @@ :class="['basic-component-date-picker', `date-picker-${config.code}`]" :popper-class="'basic-component-date-picker date-picker-popper-' + config.code" :value-format="config.customize.valueFormat" + :format="config.customize.format" :default-value="value" size="large" @focus="focusEvent" diff --git a/data-room-ui/packages/BasicComponents/DateTimePicker/setting.vue b/data-room-ui/packages/BasicComponents/DateTimePicker/setting.vue index df413f32..8b3fd596 100644 --- a/data-room-ui/packages/BasicComponents/DateTimePicker/setting.vue +++ b/data-room-ui/packages/BasicComponents/DateTimePicker/setting.vue @@ -21,6 +21,20 @@
基础
+ + + + + 时间格式
- - - +
+ - + + +
+ 年：yyyy，表示年份，例如：2017
+ 月：M，表示月份，不补0，例如：1
+ 月：MM，表示月份，补0，例如：01
+ 日：d，表示日期，不补0，例如：2
+ 日：dd，表示日期，补0，例如：02
+ 小时：H，表示小时（24小时制），不补0，例如：3
+ 小时：HH，表示小时（24小时制），补0，例如：03
+ 小时：h，表示小时（12小时制），须和 A 或 a 使用，不补0，例如：3
+ 小时：hh，表示小时（12小时制），须和 A 或 a 使用，补0，例如：03
+ 分钟：m，表示分钟，不补0，例如：4
+ 分钟：mm，表示分钟，补0，例如：04
+ 秒：s，表示秒钟，不补0，例如：5
+ 秒：ss，表示秒钟，补0，例如：05
+ AM/PM：A，仅 format 可用，大写，例如：AM
+ am/pm：a，仅 format 可用，小写，例如：am
+ JS时间戳：timestamp，仅 value-format 可用，组件绑定值为number类型，例如：1483326245000
+ 不需要格式化字符：[MM]，使用方括号标识不需要格式化的字符，例如：MM
+ 具体的时间格式化字符和使用方式，可以参考Element-UI官网的日期选择器的时间格式化部分。 +
+ +
- - - - + +
+ + + + + +
+ 时间戳：从1970年1月1日开始计算的秒数，数据类型为数值型，例如：1483326245000。
+ 自定义：通过输入特定的格式字符串来指定时间的数据格式，例如：yyyy-MM-dd HH:mm:ss对应数据为 2023-10-08 09:30:00。
+
+ +
-
+
- 时间格式示例：
- yyyy：表示年份，
- MM：表示月份，
- dd：表示日期，
- HH：表示小时（24小时制），
- mm：表示分钟，
- ss：表示秒，
- 具体可参考Element-UI官网的日期选择器的时间格式化部分。 +
+ 年：yyyy，表示年份，例如：2017
+ 月：M，表示月份，不补0，例如：1
+ 月：MM，表示月份，补0，例如：01
+ 日：d，表示日期，不补0，例如：2
+ 日：dd，表示日期，补0，例如：02
+ 小时：H，表示小时（24小时制），不补0，例如：3
+ 小时：HH，表示小时（24小时制），补0，例如：03
+ 小时：h，表示小时（12小时制），须和 A 或 a 使用，不补0，例如：3
+ 小时：hh，表示小时（12小时制），须和 A 或 a 使用，补0，例如：03
+ 分钟：m，表示分钟，不补0，例如：4
+ 分钟：mm，表示分钟，补0，例如：04
+ 秒：s，表示秒钟，不补0，例如：5
+ 秒：ss，表示秒钟，补0，例如：05
+ AM/PM：A，仅 format 可用，大写，例如：AM
+ am/pm：a，仅 format 可用，小写，例如：am
+ JS时间戳：timestamp，仅 value-format 可用，组件绑定值为number类型，例如：1483326245000
+ 不需要格式化字符：[MM]，使用方括号标识不需要格式化的字符，例如：MM
+ 具体的时间格式化字符和使用方式，可以参考Element-UI官网的日期选择器的时间格式化部分。 +
@@ -162,7 +225,6 @@
+ \ No newline at end of file diff --git a/data-room-ui/packages/BigScreenDesign/RightSetting/RotateSetting.vue b/data-room-ui/packages/BigScreenDesign/RightSetting/RotateSetting.vue new file mode 100644 index 00000000..513db668 --- /dev/null +++ b/data-room-ui/packages/BigScreenDesign/RightSetting/RotateSetting.vue @@ -0,0 +1,74 @@ + + + + + + \ No newline at end of file diff --git a/data-room-ui/packages/BigScreenDesign/RightSetting/index.vue b/data-room-ui/packages/BigScreenDesign/RightSetting/index.vue index 085fe496..2570d79c 100644 --- a/data-room-ui/packages/BigScreenDesign/RightSetting/index.vue +++ b/data-room-ui/packages/BigScreenDesign/RightSetting/index.vue @@ -56,6 +56,7 @@ import { resolveComponentType } from 'data-room-ui/js/utils' import DataSetting from './DataSetting.vue' import rightSetting from 'data-room-ui/js/utils/rightSettingImport' import CustomComponent from './G2CustomSetting.vue' +import EchartsCustomSetting from './EchartsCustomSetting.vue' import Svgs from 'data-room-ui/Svgs/setting.vue' import { mapState, mapMutations } from 'vuex' // import _ from 'lodash' @@ -78,7 +79,7 @@ export default { Svgs, // 远程组件的样式配置也和g2Plot的样式配置一样，采用属性配置, 故使用一个组件 RemoteComponent: CustomComponent, - EchartsComponent: CustomComponent + EchartsComponent: EchartsCustomSetting }, data () { return { @@ -114,6 +115,9 @@ export default { x: this.config?.x, y: this.config?.y, z: this.config?.z, + rotateX: this.config?.rotateX, + rotateY: this.config?.rotateY, + rotateZ: this.config?.rotateZ, setting: cloneDeep(this.config?.setting), customize: cloneDeep(this.config?.customize), url: this.config?.url, diff --git a/data-room-ui/packages/Echarts/echartList.js b/data-room-ui/packages/Echarts/echartList.js index dea9fd30..b04855bb 100644 --- a/data-room-ui/packages/Echarts/echartList.js +++ b/data-room-ui/packages/Echarts/echartList.js @@ -31,6 +31,9 @@ function getEchartsList (files) { h: config?.option?.height || 320, x: 0, y: 0, + rotateX: 0, + rotateY: 0, + rotateZ: 0, type: 'echartsComponent', loading: false, // 把默认右侧配置与自定义右侧配置集合 diff --git a/data-room-ui/packages/EchartsRender/index.vue b/data-room-ui/packages/EchartsRender/index.vue index 46d266a2..4b414bce 100644 --- a/data-room-ui/packages/EchartsRender/index.vue +++ b/data-room-ui/packages/EchartsRender/index.vue @@ -71,6 +71,42 @@ export default { this.changeStyle(this.config, true) } } + }, + 'config.rotateX': { + deep: true, + handler (val) { + const rotate = `rotateX(${this.config.rotateX}deg) rotateY(${this.config.rotateY}deg) rotateZ(${this.config.rotateZ}deg)` + const dom1 = document.querySelector('.bs-design-wrap') + const dom2 = document.querySelector('.render-item-wrap') + dom1.setAttribute('style', 'perspective: 500px;') + dom2.setAttribute('style', 'perspective: 500px;') + dom1.setAttribute('style', 'transform:' + rotate) + dom2.setAttribute('style', 'transform:' + rotate) + } + }, + 'config.rotateY': { + deep: true, + handler (val) { + const rotate = `rotateX(${this.config.rotateX}deg) rotateY(${this.config.rotateY}deg) rotateZ(${this.config.rotateZ}deg)` + const dom1 = document.querySelector('.bs-design-wrap') + const dom2 = document.querySelector('.render-item-wrap') + dom1.setAttribute('style', 'perspective: 500px;') + dom2.setAttribute('style', 'perspective: 500px;') + dom1.setAttribute('style', 'transform:' + rotate) + dom2.setAttribute('style', 'transform:' + rotate) + } + }, + 'config.rotateZ': { + deep: true, + handler (val) { + const rotate = `rotateX(${this.config.rotateX}deg) rotateY(${this.config.rotateY}deg) rotateZ(${this.config.rotateZ}deg)` + const dom1 = document.querySelector('.bs-design-wrap') + const dom2 = document.querySelector('.render-item-wrap') + dom1.setAttribute('style', 'perspective: 500px;') + dom2.setAttribute('style', 'perspective: 500px;') + dom1.setAttribute('style', 'transform:' + rotate) + dom2.setAttribute('style', 'transform:' + rotate) + } } }, mounted () { @@ -410,8 +446,8 @@ export default { seriesStyle (config) { const _config = CloneDeep(config) const seriesCustom = _config.option.seriesCustom - // const ids = ['barTopColor', 'barColor', 'barBottomColor', 'shadowColor', 'shadowTopColor'] const ids = Object.keys(config.option.seriesCustom) + // 判断是否是分组柱状图 const isGroup = _config.option.series.length !== 5 // 宽度配置 _config.option.series.forEach(item => {