From 3cc9008f072f1b6979247e3857be6bfc96d560af Mon Sep 17 00:00:00 2001 From: qianming Date: Wed, 25 Aug 2021 15:13:41 +0800 Subject: [PATCH 1/3] =?UTF-8?q?=E6=9F=B1=E7=8A=B6=E5=AF=B9=E6=AF=94?= =?UTF-8?q?=E5=9B=BE=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../views/report/bigscreen/designer/tools.js | 62 ++--------- .../widget/bar/widgetBarCompareChart.vue | 103 ++++++++++++++++-- 2 files changed, 105 insertions(+), 60 deletions(-) diff --git a/report-ui/src/views/report/bigscreen/designer/tools.js b/report-ui/src/views/report/bigscreen/designer/tools.js index 8e77dab7..e0d06072 100644 --- a/report-ui/src/views/report/bigscreen/designer/tools.js +++ b/report-ui/src/views/report/bigscreen/designer/tools.js @@ -7010,7 +7010,7 @@ const widgetTools = [ code: 'widgetBarCompareChart', type: 'chart', label: '柱状对比图', - icon: 'iconbianzu23', + icon: 'iconduibitupu', options: { // 配置 setup: [ @@ -7022,14 +7022,14 @@ const widgetTools = [ placeholder: '', value: '柱状对比图', }, - { + /*{ type: 'el-switch', label: '竖展示', name: 'verticalShow', required: false, placeholder: '', value: false, - }, + },*/ { type: 'vue-color', label: '背景颜色', @@ -7048,7 +7048,7 @@ const widgetTools = [ name: 'maxWidth', required: false, placeholder: '', - value: 20, + value: 15, }, { type: 'el-slider', @@ -7122,47 +7122,9 @@ const widgetTools = [ ], value: 'center' }, - { - type: 'el-input-text', - label: '副标题', - name: 'subText', - required: false, - placeholder: '', - value: '' - }, - { - type: 'vue-color', - label: '字体颜色', - name: 'subTextColor', - required: false, - placeholder: '', - value: 'rgba(30, 144, 255, 1)' - }, - { - type: 'el-select', - label: '字体粗细', - name: 'subTextFontWeight', - required: false, - placeholder: '', - selectOptions: [ - {code: 'normal', name: '正常'}, - {code: 'bold', name: '粗体'}, - {code: 'bolder', name: '特粗体'}, - {code: 'lighter', name: '细体'} - ], - value: 'normal' - }, - { - type: 'el-input-number', - label: '字体大小', - name: 'subTextFontSize', - required: false, - placeholder: '', - value: 20 - }, ], }, - { + /*{ name: 'X轴设置', list: [ { @@ -7263,8 +7225,8 @@ const widgetTools = [ } ], - }, - { + },*/ + /*{ name: 'Y轴设置', list: [ { @@ -7355,7 +7317,7 @@ const widgetTools = [ } ], - }, + },*/ { name: '数值设定', list: [ @@ -7365,7 +7327,7 @@ const widgetTools = [ name: 'isShow', required: false, placeholder: '', - value: false + value: true }, { type: 'el-input-number', @@ -7399,7 +7361,7 @@ const widgetTools = [ }, ], }, - { + /*{ name: '提示语设置', list: [ { @@ -7526,7 +7488,7 @@ const widgetTools = [ value: 'horizontal' }, ], - }, + },*/ { name: '自定义配色', list: [ @@ -7535,7 +7497,7 @@ const widgetTools = [ label: '', name: 'customColor', required: false, - value: [{color: '#ff7f50'}, {color: '#87cefa'}], + value: [{color: '#36c5e7'}, {color: '#e68b55'}], }, ], }, diff --git a/report-ui/src/views/report/bigscreen/designer/widget/bar/widgetBarCompareChart.vue b/report-ui/src/views/report/bigscreen/designer/widget/bar/widgetBarCompareChart.vue index 4ee1dd6b..8a4fc3de 100644 --- a/report-ui/src/views/report/bigscreen/designer/widget/bar/widgetBarCompareChart.vue +++ b/report-ui/src/views/report/bigscreen/designer/widget/bar/widgetBarCompareChart.vue @@ -17,7 +17,7 @@ export default { return { options: { title: { - text: '柱状对比图', + //text: '柱状对比图', x: 'center', textStyle: { color: '#ffffff', @@ -61,8 +61,8 @@ export default { //itemWidth: 0 }, xAxis: [ - { - splitNumber: 2,//左间隔 + {// 左 + splitNumber: 2, type: 'value', inverse: true, axisLine: { @@ -72,14 +72,14 @@ export default { show: false, }, position: 'bottom', - axisLabel: { + axisLabel: { // x轴 show: true, textStyle: { color: '#ffffff', fontSize: 12 } }, - splitLine: { + splitLine: { // 分割线 show: true, lineStyle: { color: '#57617f', @@ -92,7 +92,7 @@ export default { gridIndex: 1, show: false, }, - { + {// 右 gridIndex: 2, type: 'value', axisLine: { @@ -177,7 +177,7 @@ export default { name: '', type: 'bar', barGap: 20, - barWidth: '80%', + barWidth: 15, label: { normal: { show: true, @@ -207,7 +207,7 @@ export default { name: '', type: 'bar', barGap: 20, - barWidth: '80%', + barWidth: 15, xAxisIndex: 2, yAxisIndex: 2, label: { @@ -256,7 +256,7 @@ export default { handler(val) { this.optionsStyle = val.position; this.optionsData = val.data; - this.optionsCollapse = val.setup; + this.optionsSetup = val.setup; this.optionsSetup = val.setup; this.editorOptions(); }, @@ -273,8 +273,92 @@ export default { methods: { // 修改图标options属性 editorOptions() { + this.setOptionsTitle(); + this.setOptionsTop(); + this.setOptionsColor(); this.setOptionsData(); }, + // 标题修改 + setOptionsTitle() { + const optionsCollapse = this.optionsSetup; + const title = {}; + title.text = optionsCollapse.titleText; + title.show = optionsCollapse.isNoTitle; + title.left = optionsCollapse.textAlign; + title.textStyle = { + color: optionsCollapse.textColor, + fontSize: optionsCollapse.textFontSize, + fontWeight: optionsCollapse.textFontWeight + }; + this.options.title = title; + }, + // 数值设定 or 柱体设置 + setOptionsTop() { + const optionsSetup = this.optionsSetup; + const series = this.options.series; + for (const key in series) { + if (series[key].type == "bar") { + series[0].label = { + normal: { + show: optionsSetup.isShow, + //color: 'red', + position: 'insideLeft', + textStyle: { + fontSize: optionsSetup.fontSize, + color: optionsSetup.subTextColor, + fontWeight: optionsSetup.fontWeight + } + }, + emphasis: { + show: false, + }, + }, + series[1].label = { + normal: { + show: optionsSetup.isShow, + color: 'red', + position: 'insideRight', + textStyle: { + fontSize: optionsSetup.fontSize, + color: optionsSetup.subTextColor, + fontWeight: optionsSetup.fontWeight + } + }, + emphasis: { + show: false, + }, + }, + series[key].barWidth = optionsSetup.maxWidth; + } + } + this.options.series = series; + }, + // 颜色修改，圆角修改 + setOptionsColor() { + const optionsSetup = this.optionsSetup; + const customColor = optionsSetup.customColor; + if (!customColor) return; + const itemStyleLeft = { + normal: { + color: customColor[0].color, + barBorderRadius: [optionsSetup.radius, 0, 0, optionsSetup.radius] + }, + emphasis: { + show: false, + }, + } + const itemStyleRight = { + normal: { + color: customColor[1].color, + barBorderRadius: [0, optionsSetup.radius, optionsSetup.radius, 0] + }, + emphasis: { + show: false, + }, + } + this.options.series[0].itemStyle = itemStyleLeft; + this.options.series[1].itemStyle = itemStyleRight; + }, // 数据解析 setOptionsData() { const optionsSetup = this.optionsSetup; @@ -335,7 +419,6 @@ export default { this.options.series[1]['name'] = arrayList[1].name this.options.series[1]['data'] = arrayList[1].data this.options.yAxis[1]['data'] = xAxisList - /*if (optionsSetup.verticalShow) { this.options.xAxis.data = []; this.options.yAxis.data = xAxisList; From 56d26d74554aa18ab84da43ce4288c78150bfb09 Mon Sep 17 00:00:00 2001 From: qianming Date: Wed, 25 Aug 2021 17:51:40 +0800 Subject: [PATCH 2/3] =?UTF-8?q?=E6=9F=B1=E7=8A=B6=E5=AF=B9=E6=AF=94?= =?UTF-8?q?=E5=9B=BE=E5=8A=9F=E8=83=BD=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../views/report/bigscreen/designer/tools.js | 16 +++--------- .../widget/bar/widgetBarCompareChart.vue | 25 ++++++++++++++++--- 2 files changed, 25 insertions(+), 16 deletions(-) diff --git a/report-ui/src/views/report/bigscreen/designer/tools.js b/report-ui/src/views/report/bigscreen/designer/tools.js index e0d06072..823e82ea 100644 --- a/report-ui/src/views/report/bigscreen/designer/tools.js +++ b/report-ui/src/views/report/bigscreen/designer/tools.js @@ -7022,14 +7022,6 @@ const widgetTools = [ placeholder: '', value: '柱状对比图', }, - /*{ - type: 'el-switch', - label: '竖展示', - name: 'verticalShow', - required: false, - placeholder: '', - value: false, - },*/ { type: 'vue-color', label: '背景颜色', @@ -7361,7 +7353,7 @@ const widgetTools = [ }, ], }, - /*{ + { name: '提示语设置', list: [ { @@ -7381,7 +7373,7 @@ const widgetTools = [ }, ], }, - { + /*{ name: '坐标轴边距设置', list: [ { @@ -7414,7 +7406,7 @@ const widgetTools = [ value: 10, }, ], - }, + },*/ { name: '图例操作', list: [ @@ -7488,7 +7480,7 @@ const widgetTools = [ value: 'horizontal' }, ], - },*/ + }, { name: '自定义配色', list: [ diff --git a/report-ui/src/views/report/bigscreen/designer/widget/bar/widgetBarCompareChart.vue b/report-ui/src/views/report/bigscreen/designer/widget/bar/widgetBarCompareChart.vue index 8a4fc3de..6be98c15 100644 --- a/report-ui/src/views/report/bigscreen/designer/widget/bar/widgetBarCompareChart.vue +++ b/report-ui/src/views/report/bigscreen/designer/widget/bar/widgetBarCompareChart.vue @@ -28,7 +28,7 @@ export default { show: false, left: '4%', top: 60, - bottom: 60, + bottom: 10, containLabel: true, width: '40%' }, @@ -43,7 +43,7 @@ export default { show: false, right: '4%', top: 60, - bottom: 60, + bottom: 10, containLabel: true, width: '40%' }, @@ -275,6 +275,7 @@ export default { editorOptions() { this.setOptionsTitle(); this.setOptionsTop(); + this.setOptionsLegend(); this.setOptionsColor(); this.setOptionsData(); }, @@ -292,7 +293,7 @@ export default { }; this.options.title = title; }, - // 数值设定 or 柱体设置 + // 数值设定、柱体设置 setOptionsTop() { const optionsSetup = this.optionsSetup; const series = this.options.series; @@ -333,7 +334,23 @@ export default { } this.options.series = series; }, - // 颜色修改，圆角修改 + // 图例操作 + setOptionsLegend() { + const optionsSetup = this.optionsSetup; + const legend = this.options.legend; + legend.show = optionsSetup.isShowLegend; + legend.left = optionsSetup.lateralPosition; + legend.top = optionsSetup.longitudinalPosition == "top" ? 0 : "auto"; + legend.bottom = + optionsSetup.longitudinalPosition == "bottom" ? 0 : "auto"; + legend.orient = optionsSetup.layoutFront; + legend.textStyle = { + color: optionsSetup.lengedColor, + fontSize: optionsSetup.lengedFontSize + }; + legend.itemWidth = optionsSetup.lengedWidth; + }, + // 颜色修改、圆角修改 setOptionsColor() { const optionsSetup = this.optionsSetup; const customColor = optionsSetup.customColor; From c369e29cbdfc434390dff2e66467d966ddb95780 Mon Sep 17 00:00:00 2001 From: qianlishi <1432731663@qq.com> Date: Thu, 26 Aug 2021 15:53:06 +0800 Subject: [PATCH 3/3] update table --- report-ui/src/main.js | 3 --- .../bigscreen/designer/widget/widgetTable.vue | 4 ++++ report-ui/static/home.mp4 | Bin 0 -> 2165079 bytes 3 files changed, 4 insertions(+), 3 deletions(-) create mode 100644 report-ui/static/home.mp4 diff --git a/report-ui/src/main.js b/report-ui/src/main.js index e9e3524a..abc86422 100644 --- a/report-ui/src/main.js +++ b/report-ui/src/main.js @@ -41,9 +41,6 @@ import Avue from '@smallwei/avue'; import '@smallwei/avue/lib/index.css'; Vue.use(Avue); -import VueSuperSlide from 'vue-superslide' -Vue.use(VueSuperSlide) - // enable element zh-cn Vue.use(ElementUI, { zhLocale }) diff --git a/report-ui/src/views/report/bigscreen/designer/widget/widgetTable.vue b/report-ui/src/views/report/bigscreen/designer/widget/widgetTable.vue index 7297f22d..91a48967 100644 --- a/report-ui/src/views/report/bigscreen/designer/widget/widgetTable.vue +++ b/report-ui/src/views/report/bigscreen/designer/widget/widgetTable.vue @@ -27,7 +27,11 @@