From 508e3c86b5742c91e5a96365659ee430ef7fe0d4 Mon Sep 17 00:00:00 2001 From: qianming Date: Fri, 5 Nov 2021 16:33:17 +0800 Subject: [PATCH] =?UTF-8?q?=E9=9D=99=E6=80=81=E6=95=B0=E6=8D=AE=E8=B0=83?= =?UTF-8?q?=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../echartsConfigJson/widget-barlinechart.js | 1403 ++++++++--------- .../widget/{ => bar}/widgetBarlinechart.vue | 190 ++- .../report/bigscreen/designer/widget/temp.vue | 10 +- .../bigscreen/designer/widget/widget.vue | 19 +- 4 files changed, 779 insertions(+), 843 deletions(-) rename report-ui/src/views/report/bigscreen/designer/widget/{ => bar}/widgetBarlinechart.vue (59%) diff --git a/report-ui/src/views/report/bigscreen/designer/tools/echartsConfigJson/widget-barlinechart.js b/report-ui/src/views/report/bigscreen/designer/tools/echartsConfigJson/widget-barlinechart.js index b2f5a922..d6b030e0 100644 --- a/report-ui/src/views/report/bigscreen/designer/tools/echartsConfigJson/widget-barlinechart.js +++ b/report-ui/src/views/report/bigscreen/designer/tools/echartsConfigJson/widget-barlinechart.js @@ -7,762 +7,701 @@ * @LastEditTime: 2021-09-28 14:11:57 */ export const widgetBarlinechart = { - code: 'widget-barlinechart', - type: 'chart', - label: '柱线图', - icon: 'iconzhuxiantu', - options: { - // 配置 - setup: [ + code: 'widget-barlinechart', + type: 'chart', + label: '柱线图', + icon: 'iconzhuxiantu', + options: { + // 配置 + setup: [ + { + type: 'el-input-text', + label: '图层名称', + name: 'layerName', + required: false, + placeholder: '', + value: '柱线图', + }, + { + type: 'vue-color', + label: '背景颜色', + name: 'background', + required: false, + placeholder: '', + value: '' + }, + [ { - type: 'el-input-text', - label: '图层名称', - name: 'layerName', - required: false, - placeholder: '', - value: '柱线图', + name: '折线设置', + list: [ + { + type: 'el-switch', + label: '标记点', + name: 'markPoint', + required: false, + placeholder: '', + value: true, + }, + { + type: 'el-slider', + label: '点大小', + name: 'pointSize', + required: false, + placeholder: '', + value: 5, + }, + { + type: 'el-switch', + label: '平滑曲线', + name: 'smoothCurve', + required: false, + placeholder: '', + value: true, + }, + { + type: 'el-switch', + label: '面积堆积', + name: 'area', + required: false, + placeholder: '', + value: true, + }, + { + type: 'el-slider', + label: '面积厚度', + name: 'areaThickness', + required: false, + placeholder: '', + value: 5, + }, + { + type: 'el-slider', + label: '线条宽度', + name: 'lineWidth', + required: false, + placeholder: '', + value: 3, + }, + ], }, { - type: 'vue-color', - label: '背景颜色', - name: 'background', - required: false, - placeholder: '', - value: '' + name: '柱体设置', + list: [ + { + type: 'el-slider', + label: '最大宽度', + name: 'maxWidth', + required: false, + placeholder: '', + value: 10, + }, + { + type: 'el-slider', + label: '圆角', + name: 'radius', + require: false, + placeholder: '', + value: 5, + }, + { + type: 'el-slider', + label: '最小高度', + name: 'minHeight', + require: false, + placeholder: '', + value: 0, + }, + ], }, - [ - { - name: '折线设置', - list: [ - { - type: 'el-switch', - label: '标记点', - name: 'markPoint', - required: false, - placeholder: '', - value: true, - }, - { - type: 'el-slider', - label: '点大小', - name: 'pointSize', - required: false, - placeholder: '', - value: 5, - }, - { - type: 'el-switch', - label: '平滑曲线', - name: 'smoothCurve', - required: false, - placeholder: '', - value: true, - }, - { - type: 'el-switch', - label: '面积堆积', - name: 'area', - required: false, - placeholder: '', - value: true, - }, - { - type: 'el-slider', - label: '面积厚度', - name: 'areaThickness', - required: false, - placeholder: '', - value: 5, - }, - { - type: 'el-slider', - label: '线条宽度', - name: 'lineWidth', - required: false, - placeholder: '', - value: 3, - }, - ], - }, - { - name: '柱体设置', - list: [ - { - type: 'el-slider', - label: '最大宽度', - name: 'maxWidth', - required: false, - placeholder: '', - value: 10, - }, - { - type: 'el-slider', - label: '圆角', - name: 'radius', - require: false, - placeholder: '', - value: 5, - }, - { - type: 'el-slider', - label: '最小高度', - name: 'minHeight', - require: false, - placeholder: '', - value: 0, - }, - ], - }, - { - name: '标题设置', - list: [ - { - type: 'el-switch', - label: '标题', - name: 'isNoTitle', - required: false, - placeholder: '', - value: true - }, - { - type: 'el-input-text', - label: '标题', - name: 'titleText', - required: false, - placeholder: '', - value: '' - }, - { - type: 'vue-color', - label: '字体颜色', - name: 'textColor', - required: false, - placeholder: '', - value: '#fff' - }, - { - type: 'el-select', - label: '字体粗细', - name: 'textFontWeight', - required: false, - placeholder: '', - selectOptions: [ - {code: 'normal', name: '正常'}, - {code: 'bold', name: '粗体'}, - {code: 'bolder', name: '特粗体'}, - {code: 'lighter', name: '细体'} - ], - value: 'normal' - }, - { - type: 'el-input-number', - label: '字体大小', - name: 'textFontSize', - required: false, - placeholder: '', - value: 20 - }, - { - type: 'el-select', - label: '字体位置', - name: 'textAlign', - required: false, - placeholder: '', - selectOptions: [ - {code: 'center', name: '居中'}, - {code: 'left', name: '左对齐'}, - {code: 'right', name: '右对齐'}, - ], - value: 'left' - }, - { - type: 'el-input-text', - label: '副标题', - name: 'subText', - required: false, - placeholder: '', - value: '' - }, - { - type: 'vue-color', - label: '字体颜色', - name: 'subTextColor', - required: false, - placeholder: '', - value: '#fff' - }, - { - 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: [ - { - type: 'el-switch', - label: '显示', - name: 'hideX', - required: false, - placeholder: '', - value: true, - }, - { - type: 'el-input-text', - label: '坐标名', - name: 'xName', - required: false, - placeholder: '', - value: '' - }, - { - type: 'vue-color', - label: '坐标名颜色', - name: 'nameColorX', - required: false, - placeholder: '', - value: '#fff', - }, - { - type: 'el-input-number', - label: '坐标字号', - name: 'nameFontSizeX', - required: false, - placeholder: '', - value: 14, - }, - { - type: 'vue-color', - label: '数值颜色', - name: 'Xcolor', - required: false, - placeholder: '', - value: '#fff', - }, - { - type: 'el-input-number', - label: '数值字号', - name: 'fontSizeX', - required: false, - placeholder: '', - value: 14, - }, - { - type: 'el-slider', - label: '数值角度', - name: 'textAngle', - required: false, - placeholder: '', - value: 0 - }, - { - type: 'el-input-number', - label: '数值间隔', - name: 'textInterval', - required: false, - placeholder: '', - value: '' - }, - { - type: 'el-switch', - label: '轴反转', - name: 'reversalX', - required: false, - placeholder: '', - value: false - }, - { - type: 'vue-color', - label: '轴颜色', - name: 'lineColorX', - required: false, - placeholder: '', - value: '#fff', - }, - { - type: 'el-switch', - label: '分割线显示', - name: 'isShowSplitLineX', - require: false, - placeholder: '', - value: false, - }, - { - type: 'vue-color', - label: '分割线颜色', - name: 'splitLineColorX', - required: false, - placeholder: '', - value: '#fff', - } - ], - }, - { - name: 'Y轴设置', - list: [ - { - type: 'el-switch', - label: '左显示', - name: 'isShowYLeft', - require: false, - placeholder: '', - value: true, - }, - { - type: 'el-input-text', - label: '左坐标名', - name: 'textNameYLeft', - require: false, - placeholder: '', - value: '' - }, - { - type: 'vue-color', - label: '左坐标名颜色', - name: 'nameColorYLeft', - required: false, - placeholder: '', - value: '#fff', - }, - { - type: 'el-input-number', - label: '左坐标字号', - name: 'namefontSizeYLeft', - required: false, - placeholder: '', - value: 14, - }, - { - type: 'el-input-number', - label: '左均分', - name: 'splitNumberLeft', - required: false, - placeholder: '', - value: '' - }, - { - type: 'el-switch', - label: '右显示', - name: 'isShowYRight', - require: false, - placeholder: '', - value: true, - }, - { - type: 'el-input-text', - label: '右坐标名', - name: 'textNameYRight', - require: false, - placeholder: '', - value: '' - }, - { - type: 'vue-color', - label: '右坐标名颜色', - name: 'nameColorYRight', - required: false, - placeholder: '', - value: '#fff', - }, - { - type: 'el-input-number', - label: '右坐标字号', - name: 'namefontSizeYRight', - required: false, - placeholder: '', - value: 14, - }, - { - type: 'el-input-number', - label: '右均分', - name: 'splitNumberRight', - required: false, - placeholder: '', - value: '' - }, - { - type: 'vue-color', - label: '数值颜色', - name: 'colorY', - required: false, - placeholder: '', - value: '#fff', - }, - { - type: 'el-input-number', - label: '数值字号', - name: 'fontSizeY', - required: false, - placeholder: '', - value: 14, - }, - { - type: 'el-switch', - label: '轴反转', - name: 'reversalY', - required: false, - placeholder: '', - value: false - }, - { - type: 'vue-color', - label: '轴颜色', - name: 'lineColorY', - required: false, - placeholder: '', - value: '#fff', - }, - ], - }, - { - name: '折线数值设定', - list: [ - { - type: 'el-switch', - label: '显示', - name: 'isShowLine', - required: false, - placeholder: '', - value: false - }, - { - type: 'el-input-number', - label: '距离', - name: 'distanceLine', - required: false, - placeholder: '', - value: 5 - }, - { - type: 'el-input-number', - label: '字体字号', - name: 'fontSizeLine', - required: false, - placeholder: '', - value: 14 - }, - { - type: 'vue-color', - label: '字体颜色', - name: 'subTextColorLine', - required: false, - placeholder: '', - value: '#fff' - }, - { - type: 'el-select', - label: '字体粗细', - name: 'fontWeightLine', - required: false, - placeholder: '', - selectOptions: [ - {code: 'normal', name: '正常'}, - {code: 'bold', name: '粗体'}, - {code: 'bolder', name: '特粗体'}, - {code: 'lighter', name: '细体'} - ], - value: 'normal' - }, - ], - }, - { - name: '柱体数值设定', - list: [ - { - type: 'el-switch', - label: '显示', - name: 'isShowBar', - required: false, - placeholder: '', - value: false - }, - { - type: 'el-input-number', - label: '距离', - name: 'distanceBar', - required: false, - placeholder: '', - value: 5 - }, - { - type: 'el-input-number', - label: '字体字号', - name: 'fontSizeBar', - required: false, - placeholder: '', - value: 14 - }, - { - type: 'vue-color', - label: '字体颜色', - name: 'subTextColorBar', - required: false, - placeholder: '', - value: '#fff' - }, - { - type: 'el-select', - label: '字体粗细', - name: 'fontWeightBar', - required: false, - placeholder: '', - selectOptions: [ - {code: 'normal', name: '正常'}, - {code: 'bold', name: '粗体'}, - {code: 'bolder', name: '特粗体'}, - {code: 'lighter', name: '细体'} - ], - value: 'normal' - }, - ], - }, - { - name: '提示语设置', - list: [ - { - type: 'el-input-number', - label: '字体大小', - name: 'tipFontSize', - required: false, - placeholder: '', - value: 12 - }, - { - type: 'vue-color', - label: '字体颜色', - name: 'lineColor', - required: false, - placeholder: '', - value: '#e68b55' - }, - ], - }, - { - name: '坐标轴边距设置', - list: [ - { - type: 'el-slider', - label: '左边距(像素)', - name: 'marginLeft', - required: false, - placeholder: '', - value: 10, - }, { - type: 'el-slider', - label: '顶边距(像素)', - name: 'marginTop', - required: false, - placeholder: '', - value: 50, - }, { - type: 'el-slider', - label: '右边距(像素)', - name: 'marginRight', - required: false, - placeholder: '', - value: 40, - }, { - type: 'el-slider', - label: '底边距(像素)', - name: 'marginBottom', - required: false, - placeholder: '', - value: 10, - }, - ], - }, - /*{ - name: '图例操作', - list: [ - { - type: 'el-switch', - label: '显示', - name: 'isShowLegend', - required: false, - placeholder: '', - value: true, - }, - { - type: 'vue-color', - label: '字体颜色', - name: 'lengedColor', - required: false, - placeholder: '', - value: '#fff', - }, - { - type: 'el-input-number', - label: '字体大小', - name: 'lengedFontSize', - required: false, - placeholder: '', - value: 16, - }, - { - type: 'el-input-number', - label: '图例宽度', - name: 'lengedWidth', - required: false, - placeholder: '', - value: 15, - }, - { - type: 'el-select', - label: '横向位置', - name: 'lateralPosition', - required: false, - placeholder: '', - selectOptions: [ - {code: 'center', name: '居中'}, - {code: 'left', name: '左对齐'}, - {code: 'right', name: '右对齐'}, - ], - value: 'center' - }, - { - type: 'el-select', - label: '纵向位置', - name: 'longitudinalPosition', - required: false, - placeholder: '', - selectOptions: [ - {code: 'top', name: '顶部'}, - {code: 'bottom', name: '底部'}, - ], - value: 'top' - }, - { - type: 'el-select', - label: '布局前置', - name: 'layoutFront', - required: false, - placeholder: '', - selectOptions: [ - {code: 'vertical', name: '竖排'}, - {code: 'horizontal', name: '横排'}, - ], - value: 'horizontal' - }, - ], - },*/ - { - name: '自定义配色', - list: [ - { - type: 'customColor', - label: '', - name: 'customColor', - required: false, - value: [{color: '#00F4FFFF'}, {color: '#e68b55'}], - }, - ], - }, - ], - ], - // 数据 - data: [ { - type: 'el-radio-group', - label: '数据类型', - name: 'dataType', - require: false, - placeholder: '', - selectValue: true, - selectOptions: [ + name: '标题设置', + list: [ + { + type: 'el-switch', + label: '标题', + name: 'isNoTitle', + required: false, + placeholder: '', + value: true + }, + { + type: 'el-input-text', + label: '标题', + name: 'titleText', + required: false, + placeholder: '', + value: '' + }, + { + type: 'vue-color', + label: '字体颜色', + name: 'textColor', + required: false, + placeholder: '', + value: '#fff' + }, { - code: 'staticData', - name: '静态数据', + type: 'el-select', + label: '字体粗细', + name: 'textFontWeight', + required: false, + placeholder: '', + selectOptions: [ + {code: 'normal', name: '正常'}, + {code: 'bold', name: '粗体'}, + {code: 'bolder', name: '特粗体'}, + {code: 'lighter', name: '细体'} + ], + value: 'normal' }, { - code: 'dynamicData', - name: '动态数据', + type: 'el-input-number', + label: '字体大小', + name: 'textFontSize', + required: false, + placeholder: '', + value: 20 + }, + { + type: 'el-select', + label: '字体位置', + name: 'textAlign', + required: false, + placeholder: '', + selectOptions: [ + {code: 'center', name: '居中'}, + {code: 'left', name: '左对齐'}, + {code: 'right', name: '右对齐'}, + ], + value: 'left' + }, + { + type: 'el-input-text', + label: '副标题', + name: 'subText', + required: false, + placeholder: '', + value: '' + }, + { + type: 'vue-color', + label: '字体颜色', + name: 'subTextColor', + required: false, + placeholder: '', + value: '#fff' + }, + { + 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 }, ], - value: 'staticData', }, { - type: 'el-input-number', - label: '刷新时间(毫秒)', - name: 'refreshTime', - relactiveDom: 'dataType', - relactiveDomValue: 'dynamicData', - value: 5000 + name: 'X轴设置', + list: [ + { + type: 'el-switch', + label: '显示', + name: 'hideX', + required: false, + placeholder: '', + value: true, + }, + { + type: 'el-input-text', + label: '坐标名', + name: 'xName', + required: false, + placeholder: '', + value: '' + }, + { + type: 'vue-color', + label: '坐标名颜色', + name: 'nameColorX', + required: false, + placeholder: '', + value: '#fff', + }, + { + type: 'el-input-number', + label: '坐标字号', + name: 'nameFontSizeX', + required: false, + placeholder: '', + value: 14, + }, + { + type: 'vue-color', + label: '数值颜色', + name: 'Xcolor', + required: false, + placeholder: '', + value: '#fff', + }, + { + type: 'el-input-number', + label: '数值字号', + name: 'fontSizeX', + required: false, + placeholder: '', + value: 14, + }, + { + type: 'el-slider', + label: '数值角度', + name: 'textAngle', + required: false, + placeholder: '', + value: 0 + }, + { + type: 'el-input-number', + label: '数值间隔', + name: 'textInterval', + required: false, + placeholder: '', + value: '' + }, + { + type: 'el-switch', + label: '轴反转', + name: 'reversalX', + required: false, + placeholder: '', + value: false + }, + { + type: 'vue-color', + label: '轴颜色', + name: 'lineColorX', + required: false, + placeholder: '', + value: '#fff', + }, + { + type: 'el-switch', + label: '分割线显示', + name: 'isShowSplitLineX', + require: false, + placeholder: '', + value: false, + }, + { + type: 'vue-color', + label: '分割线颜色', + name: 'splitLineColorX', + required: false, + placeholder: '', + value: '#fff', + } + ], }, { - type: 'el-button', - label: '静态数据', - name: 'staticData', - required: false, - placeholder: '', - relactiveDom: 'dataType', - relactiveDomValue: 'staticData', - value: {"xAxis": ["1月", "2月", "3月", "4月", "5月","6月", "7月", "8月","9月","10月","11月","12月"],"series": [{"type": "bar","name": "货运量","data": [2.6,5.9,9,26.4,28.7,70.7,175.6,182.2,48.7,18.8,6,2.3]},{"type": "line","name": "货运总量","yAxisIndex": 1,"data": [2,2.2,3.3,4.5,6.3,10.2,20.3,23.4,23,16.5,12,6.2]}]}, + name: 'Y轴设置', + list: [ + { + type: 'el-switch', + label: '左显示', + name: 'isShowYLeft', + require: false, + placeholder: '', + value: true, + }, + { + type: 'el-input-text', + label: '左坐标名', + name: 'textNameYLeft', + require: false, + placeholder: '', + value: '' + }, + { + type: 'vue-color', + label: '左坐标名颜色', + name: 'nameColorYLeft', + required: false, + placeholder: '', + value: '#fff', + }, + { + type: 'el-input-number', + label: '左坐标字号', + name: 'namefontSizeYLeft', + required: false, + placeholder: '', + value: 14, + }, + { + type: 'el-input-number', + label: '左均分', + name: 'splitNumberLeft', + required: false, + placeholder: '', + value: '' + }, + { + type: 'el-switch', + label: '右显示', + name: 'isShowYRight', + require: false, + placeholder: '', + value: true, + }, + { + type: 'el-input-text', + label: '右坐标名', + name: 'textNameYRight', + require: false, + placeholder: '', + value: '' + }, + { + type: 'vue-color', + label: '右坐标名颜色', + name: 'nameColorYRight', + required: false, + placeholder: '', + value: '#fff', + }, + { + type: 'el-input-number', + label: '右坐标字号', + name: 'namefontSizeYRight', + required: false, + placeholder: '', + value: 14, + }, + { + type: 'el-input-number', + label: '右均分', + name: 'splitNumberRight', + required: false, + placeholder: '', + value: '' + }, + { + type: 'vue-color', + label: '数值颜色', + name: 'colorY', + required: false, + placeholder: '', + value: '#fff', + }, + { + type: 'el-input-number', + label: '数值字号', + name: 'fontSizeY', + required: false, + placeholder: '', + value: 14, + }, + { + type: 'el-switch', + label: '轴反转', + name: 'reversalY', + required: false, + placeholder: '', + value: false + }, + { + type: 'vue-color', + label: '轴颜色', + name: 'lineColorY', + required: false, + placeholder: '', + value: '#fff', + }, + ], }, { - type: 'dycustComponents', - label: '', - name: 'dynamicData', - required: false, - placeholder: '', - relactiveDom: 'dataType', - chartType: 'widget-barlinechart', - dictKey: 'BAR_LINE_PROPERTIES', - relactiveDomValue: 'dynamicData', + name: '折线数值设定', + list: [ + { + type: 'el-switch', + label: '显示', + name: 'isShowLine', + required: false, + placeholder: '', + value: false + }, + { + type: 'el-input-number', + label: '距离', + name: 'distanceLine', + required: false, + placeholder: '', + value: 5 + }, + { + type: 'el-input-number', + label: '字体字号', + name: 'fontSizeLine', + required: false, + placeholder: '', + value: 14 + }, + { + type: 'vue-color', + label: '字体颜色', + name: 'subTextColorLine', + required: false, + placeholder: '', + value: '#fff' + }, + { + type: 'el-select', + label: '字体粗细', + name: 'fontWeightLine', + required: false, + placeholder: '', + selectOptions: [ + {code: 'normal', name: '正常'}, + {code: 'bold', name: '粗体'}, + {code: 'bolder', name: '特粗体'}, + {code: 'lighter', name: '细体'} + ], + value: 'normal' + }, + ], }, - ], - // 坐标 - position: [ { - type: 'el-input-number', - label: '左边距', - name: 'left', - required: false, - placeholder: '', - value: 0, + name: '柱体数值设定', + list: [ + { + type: 'el-switch', + label: '显示', + name: 'isShowBar', + required: false, + placeholder: '', + value: false + }, + { + type: 'el-input-number', + label: '距离', + name: 'distanceBar', + required: false, + placeholder: '', + value: 5 + }, + { + type: 'el-input-number', + label: '字体字号', + name: 'fontSizeBar', + required: false, + placeholder: '', + value: 14 + }, + { + type: 'vue-color', + label: '字体颜色', + name: 'subTextColorBar', + required: false, + placeholder: '', + value: '#fff' + }, + { + type: 'el-select', + label: '字体粗细', + name: 'fontWeightBar', + required: false, + placeholder: '', + selectOptions: [ + {code: 'normal', name: '正常'}, + {code: 'bold', name: '粗体'}, + {code: 'bolder', name: '特粗体'}, + {code: 'lighter', name: '细体'} + ], + value: 'normal' + }, + ], }, { - type: 'el-input-number', - label: '上边距', - name: 'top', - required: false, - placeholder: '', - value: 0, + name: '提示语设置', + list: [ + { + type: 'el-input-number', + label: '字体大小', + name: 'tipFontSize', + required: false, + placeholder: '', + value: 12 + }, + { + type: 'vue-color', + label: '字体颜色', + name: 'lineColor', + required: false, + placeholder: '', + value: '#e68b55' + }, + ], }, { - type: 'el-input-number', - label: '宽度', - name: 'width', - required: false, - placeholder: '该容器在1920px大屏中的宽度', - value: 400, + name: '坐标轴边距设置', + list: [ + { + type: 'el-slider', + label: '左边距(像素)', + name: 'marginLeft', + required: false, + placeholder: '', + value: 10, + }, { + type: 'el-slider', + label: '顶边距(像素)', + name: 'marginTop', + required: false, + placeholder: '', + value: 50, + }, { + type: 'el-slider', + label: '右边距(像素)', + name: 'marginRight', + required: false, + placeholder: '', + value: 40, + }, { + type: 'el-slider', + label: '底边距(像素)', + name: 'marginBottom', + required: false, + placeholder: '', + value: 10, + }, + ], }, { - type: 'el-input-number', - label: '高度', - name: 'height', - required: false, - placeholder: '该容器在1080px大屏中的高度', - value: 200, + name: '自定义配色', + list: [ + { + type: 'customColor', + label: '', + name: 'customColor', + required: false, + value: [{color: '#00F4FFFF'}, {color: '#e68b55'}], + }, + ], }, ], - } + ], + // 数据 + data: [ + { + type: 'el-radio-group', + label: '数据类型', + name: 'dataType', + require: false, + placeholder: '', + selectValue: true, + selectOptions: [ + { + code: 'staticData', + name: '静态数据', + }, + { + code: 'dynamicData', + name: '动态数据', + }, + ], + value: 'staticData', + }, + { + type: 'el-input-number', + label: '刷新时间(毫秒)', + name: 'refreshTime', + relactiveDom: 'dataType', + relactiveDomValue: 'dynamicData', + value: 5000 + }, + { + type: 'el-button', + label: '静态数据', + name: 'staticData', + required: false, + placeholder: '', + relactiveDom: 'dataType', + relactiveDomValue: 'staticData', + value: [ + {"axis": "1月", "bar": 2.6, "line": 2}, + {"axis": "2月", "bar": 5.9, "line": 2.2}, + {"axis": "3月", "bar": 9, "line": 3.3}, + {"axis": "4月", "bar": 26.4, "line": 4.5}, + {"axis": "5月", "bar": 28.7, "line": 6.3}, + {"axis": "6月", "bar": 70.7, "line": 10.2}, + {"axis": "7月", "bar": 175.6, "line": 20.3}, + {"axis": "8月", "bar": 182.2, "line": 23.4}, + {"axis": "9月", "bar": 48.7, "line": 23}, + {"axis": "10月", "bar": 18.8, "line": 16.5}, + {"axis": "11月", "bar": 6, "line": 12}, + {"axis": "12月", "bar": 2.3, "line": 6.2}, + ] + }, + { + type: 'dycustComponents', + label: '', + name: 'dynamicData', + required: false, + placeholder: '', + relactiveDom: 'dataType', + chartType: 'widget-barlinechart', + dictKey: 'BAR_LINE_PROPERTIES', + relactiveDomValue: 'dynamicData', + }, + ], + // 坐标 + position: [ + { + type: 'el-input-number', + label: '左边距', + name: 'left', + required: false, + placeholder: '', + value: 0, + }, + { + type: 'el-input-number', + label: '上边距', + name: 'top', + required: false, + placeholder: '', + value: 0, + }, + { + type: 'el-input-number', + label: '宽度', + name: 'width', + required: false, + placeholder: '该容器在1920px大屏中的宽度', + value: 400, + }, + { + type: 'el-input-number', + label: '高度', + name: 'height', + required: false, + placeholder: '该容器在1080px大屏中的高度', + value: 200, + }, + ], } +} diff --git a/report-ui/src/views/report/bigscreen/designer/widget/widgetBarlinechart.vue b/report-ui/src/views/report/bigscreen/designer/widget/bar/widgetBarlinechart.vue similarity index 59% rename from report-ui/src/views/report/bigscreen/designer/widget/widgetBarlinechart.vue rename to report-ui/src/views/report/bigscreen/designer/widget/bar/widgetBarlinechart.vue index 2102e0ba..1a937a09 100644 --- a/report-ui/src/views/report/bigscreen/designer/widget/widgetBarlinechart.vue +++ b/report-ui/src/views/report/bigscreen/designer/widget/bar/widgetBarlinechart.vue @@ -143,57 +143,57 @@ export default { }, // 标题修改 setOptionsTitle() { - const optionsCollapse = this.optionsSetup; + const optionsSetup = this.optionsSetup; const title = {}; - title.text = optionsCollapse.titleText; - title.show = optionsCollapse.isNoTitle; - title.left = optionsCollapse.textAlign; + title.text = optionsSetup.titleText; + title.show = optionsSetup.isNoTitle; + title.left = optionsSetup.textAlign; title.textStyle = { - color: optionsCollapse.textColor, - fontSize: optionsCollapse.textFontSize, - fontWeight: optionsCollapse.textFontWeight + color: optionsSetup.textColor, + fontSize: optionsSetup.textFontSize, + fontWeight: optionsSetup.textFontWeight }; - title.subtext = optionsCollapse.subText; + title.subtext = optionsSetup.subText; title.subtextStyle = { - color: optionsCollapse.subTextColor, - fontWeight: optionsCollapse.subTextFontWeight, - fontSize: optionsCollapse.subTextFontSize + color: optionsSetup.subTextColor, + fontWeight: optionsSetup.subTextFontWeight, + fontSize: optionsSetup.subTextFontSize }; this.options.title = title; }, // X轴设置 setOptionsX() { - const optionsCollapse = this.optionsSetup; + const optionsSetup = this.optionsSetup; const xAxis = { type: "category", - show: optionsCollapse.hideX, // 坐标轴是否显示 - name: optionsCollapse.xName, // 坐标轴名称 + show: optionsSetup.hideX, // 坐标轴是否显示 + name: optionsSetup.xName, // 坐标轴名称 nameTextStyle: { - color: optionsCollapse.nameColorX, - fontSize: optionsCollapse.nameFontSizeX + color: optionsSetup.nameColorX, + fontSize: optionsSetup.nameFontSizeX }, - nameRotate: optionsCollapse.textAngle, // 文字角度 - inverse: optionsCollapse.reversalX, // 轴反转 + nameRotate: optionsSetup.textAngle, // 文字角度 + inverse: optionsSetup.reversalX, // 轴反转 axisLabel: { show: true, - interval: optionsCollapse.textInterval, // 文字间隔 - rotate: optionsCollapse.textAngle, // 文字角度 + interval: optionsSetup.textInterval, // 文字间隔 + rotate: optionsSetup.textAngle, // 文字角度 textStyle: { - color: optionsCollapse.Xcolor, // x轴 坐标文字颜色 - fontSize: optionsCollapse.fontSizeX + color: optionsSetup.Xcolor, // x轴 坐标文字颜色 + fontSize: optionsSetup.fontSizeX } }, axisLine: { show: true, lineStyle: { - color: optionsCollapse.lineColorX + color: optionsSetup.lineColorX } }, splitLine: { - show: optionsCollapse.isShowSplitLineX, + show: optionsSetup.isShowSplitLineX, lineStyle: { - color: optionsCollapse.splitLineColorX + color: optionsSetup.splitLineColorX } } }; @@ -201,29 +201,29 @@ export default { }, // Y轴设置 setOptionsY() { - const optionsCollapse = this.optionsSetup; + const optionsSetup = this.optionsSetup; const yAxis = [ { type: "value", - splitNumber: optionsCollapse.splitNumberLeft,// 均分 - show: optionsCollapse.isShowYLeft, // 坐标轴是否显示 - name: optionsCollapse.textNameYLeft, // 坐标轴名称 + splitNumber: optionsSetup.splitNumberLeft,// 均分 + show: optionsSetup.isShowYLeft, // 坐标轴是否显示 + name: optionsSetup.textNameYLeft, // 坐标轴名称 nameTextStyle: { // 别名 - color: optionsCollapse.nameColorYLeft, - fontSize: optionsCollapse.namefontSizeYLeft + color: optionsSetup.nameColorYLeft, + fontSize: optionsSetup.namefontSizeYLeft }, - inverse: optionsCollapse.reversalY, // 轴反转 + inverse: optionsSetup.reversalY, // 轴反转 axisLabel: { show: true, textStyle: { - color: optionsCollapse.colorY, // y轴 坐标文字颜色 - fontSize: optionsCollapse.fontSizeY + color: optionsSetup.colorY, // y轴 坐标文字颜色 + fontSize: optionsSetup.fontSizeY } }, axisLine: { show: true, lineStyle: { - color: optionsCollapse.lineColorY + color: optionsSetup.lineColorY } }, splitLine: { @@ -232,25 +232,25 @@ export default { }, { type: "value", - splitNumber: optionsCollapse.splitNumberRight,// 均分 - show: optionsCollapse.isShowYRight, // 坐标轴是否显示 - name: optionsCollapse.textNameYRight, // 坐标轴名称 + splitNumber: optionsSetup.splitNumberRight,// 均分 + show: optionsSetup.isShowYRight, // 坐标轴是否显示 + name: optionsSetup.textNameYRight, // 坐标轴名称 nameTextStyle: { // 别名 - color: optionsCollapse.nameColorYRight, - fontSize: optionsCollapse.namefontSizeYRight + color: optionsSetup.nameColorYRight, + fontSize: optionsSetup.namefontSizeYRight }, - inverse: optionsCollapse.reversalY, // 轴反转 + inverse: optionsSetup.reversalY, // 轴反转 axisLabel: { show: true, textStyle: { - color: optionsCollapse.colorY, // y轴 坐标文字颜色 - fontSize: optionsCollapse.fontSizeY + color: optionsSetup.colorY, // y轴 坐标文字颜色 + fontSize: optionsSetup.fontSizeY } }, axisLine: { show: true, lineStyle: { - color: optionsCollapse.lineColorY + color: optionsSetup.lineColorY } }, splitLine: { @@ -262,16 +262,16 @@ export default { }, // 折线设置 数值设置 setOptionsTop() { - const optionsCollapse = this.optionsSetup; + const optionsSetup = this.optionsSetup; const series = this.options.series; for (const key in series) { if (series[key].type == "line") { - series[key].showSymbol = optionsCollapse.markPoint; - series[key].symbolSize = optionsCollapse.pointSize; - series[key].smooth = optionsCollapse.smoothCurve; - if (optionsCollapse.area) { + series[key].showSymbol = optionsSetup.markPoint; + series[key].symbolSize = optionsSetup.pointSize; + series[key].smooth = optionsSetup.smoothCurve; + if (optionsSetup.area) { series[key].areaStyle = { - opacity: optionsCollapse.areaThickness / 100 + opacity: optionsSetup.areaThickness / 100 }; } else { series[key].areaStyle = { @@ -279,16 +279,16 @@ export default { }; } series[key].lineStyle = { - width: optionsCollapse.lineWidth + width: optionsSetup.lineWidth }; - series[key].itemStyle.borderRadius = optionsCollapse.radius; + series[key].itemStyle.borderRadius = optionsSetup.radius; series[key].label = { - show: optionsCollapse.isShowLine, + show: optionsSetup.isShowLine, position: "top", - distance: optionsCollapse.distanceLine, - fontSize: optionsCollapse.fontSizeLine, - color: optionsCollapse.subTextColorLine, - fontWeight: optionsCollapse.fontWeightLine + distance: optionsSetup.distanceLine, + fontSize: optionsSetup.fontSizeLine, + color: optionsSetup.subTextColorLine, + fontWeight: optionsSetup.fontWeightLine }; } } @@ -296,71 +296,54 @@ export default { }, // 柱体设置 数值设置 setOptionsBar() { - const optionsCollapse = this.optionsSetup; + const optionsSetup = this.optionsSetup; const series = this.options.series; for (const key in series) { if (series[key].type == "bar") { series[key].label = { - show: optionsCollapse.isShowBar, + show: optionsSetup.isShowBar, position: "top", - distance: optionsCollapse.distanceBar, - fontSize: optionsCollapse.fontSizeBar, - color: optionsCollapse.subTextColorBar, - fontWeight: optionsCollapse.fontWeightBar + distance: optionsSetup.distanceBar, + fontSize: optionsSetup.fontSizeBar, + color: optionsSetup.subTextColorBar, + fontWeight: optionsSetup.fontWeightBar }; - series[key].barWidth = optionsCollapse.maxWidth; - series[key].barMinHeight = optionsCollapse.minHeight; - series[key].itemStyle.barBorderRadius = optionsCollapse.radius; + series[key].barWidth = optionsSetup.maxWidth; + series[key].barMinHeight = optionsSetup.minHeight; + series[key].itemStyle.barBorderRadius = optionsSetup.radius; } } this.options.series = series; }, // tooltip 设置 setOptionsTooltip() { - const optionsCollapse = this.optionsSetup; + const optionsSetup = this.optionsSetup; const tooltip = { trigger: "item", show: true, textStyle: { - color: optionsCollapse.lineColor, - fontSize: optionsCollapse.tipFontSize + color: optionsSetup.lineColor, + fontSize: optionsSetup.tipFontSize } }; this.options.tooltip = tooltip; }, // 边距设置 setOptionsMargin() { - const optionsCollapse = this.optionsSetup; + const optionsSetup = this.optionsSetup; const grid = { - left: optionsCollapse.marginLeft, - right: optionsCollapse.marginRight, - bottom: optionsCollapse.marginBottom, - top: optionsCollapse.marginTop, + left: optionsSetup.marginLeft, + right: optionsSetup.marginRight, + bottom: optionsSetup.marginBottom, + top: optionsSetup.marginTop, containLabel: true }; this.options.grid = grid; }, -/* // 图例操作 legend - setOptionsLegend() { - const optionsCollapse = this.optionsSetup; - const legend = this.options.legend; - legend.show = optionsCollapse.isShowLegend; - legend.left = optionsCollapse.lateralPosition; - legend.top = optionsCollapse.longitudinalPosition == "top" ? 0 : "auto"; - legend.bottom = - optionsCollapse.longitudinalPosition == "bottom" ? 0 : "auto"; - legend.orient = optionsCollapse.layoutFront; - legend.textStyle = { - color: optionsCollapse.lengedColor, - fontSize: optionsCollapse.lengedFontSize - }; - legend.itemWidth = optionsCollapse.lengedWidth; - console.log(legend); - },*/ // 图例颜色修改 setOptionsColor() { - const optionsCollapse = this.optionsSetup; - const customColor = optionsCollapse.customColor; + const optionsSetup = this.optionsSetup; + const customColor = optionsSetup.customColor; if (!customColor) return; const arrColor = []; for (let i = 0; i < customColor.length; i++) { @@ -377,16 +360,23 @@ export default { : this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime); }, staticDataFn(val) { - const staticData = typeof val == "string" ? JSON.parse(val) : val; + const series = this.options.series; + let axis = []; + let bar = []; + let line = []; + for (const i in val) { + axis[i] = val[i].axis; + bar[i] = val[i].bar; + line[i] = val[i].line; + } // x轴 - this.options.xAxis.data = staticData.xAxis; + this.options.xAxis.data = axis; // series - const series = this.options.series; for (const i in series) { - for (const j in staticData.series) { - if (series[i].type == staticData.series[j].type) { - series[i].data = staticData.series[j].data; - } + if (series[i].type == "bar") { + series[i].data = bar; + } else { + series[i].data = line; } } }, diff --git a/report-ui/src/views/report/bigscreen/designer/widget/temp.vue b/report-ui/src/views/report/bigscreen/designer/widget/temp.vue index d2088fe9..edd7587f 100644 --- a/report-ui/src/views/report/bigscreen/designer/widget/temp.vue +++ b/report-ui/src/views/report/bigscreen/designer/widget/temp.vue @@ -6,7 +6,7 @@ !--> @@ -21,7 +21,7 @@ import widgetVideo from "./widgetVideo.vue"; import WidgetIframe from "./widgetIframe.vue"; import widgetBarchart from "./bar/widgetBarchart.vue"; import widgetLinechart from "./line/widgetLinechart.vue"; -import widgetBarlinechart from "./widgetBarlinechart"; +import widgetBarlinechart from "./bar/widgetBarlinechart"; import widgetGradientColorBarchart from "./bar/widgetGradientColorBarchart.vue"; import WidgetPiechart from "./widgetPiechart.vue"; import WidgetFunnel from "./widgetFunnel.vue"; @@ -72,13 +72,15 @@ export default { type: String, value: { type: [Object], - default: () => {} + default: () => { + } } }, data() { return {}; }, - mounted() {}, + mounted() { + }, methods: {} }; diff --git a/report-ui/src/views/report/bigscreen/designer/widget/widget.vue b/report-ui/src/views/report/bigscreen/designer/widget/widget.vue index 46f98a8b..840901b6 100644 --- a/report-ui/src/views/report/bigscreen/designer/widget/widget.vue +++ b/report-ui/src/views/report/bigscreen/designer/widget/widget.vue @@ -17,7 +17,7 @@ @focus="handleFocus" @blur="handleBlur" > - + @@ -33,7 +33,7 @@ import WidgetIframe from "./widgetIframe.vue"; import widgetBarchart from "./bar/widgetBarchart.vue"; import widgetGradientColorBarchart from "./bar/widgetGradientColorBarchart.vue"; import widgetLinechart from "./line/widgetLinechart.vue"; -import widgetBarlinechart from "./widgetBarlinechart"; +import widgetBarlinechart from "./bar/widgetBarlinechart"; import WidgetPiechart from "./widgetPiechart.vue"; import WidgetFunnel from "./widgetFunnel.vue"; import WidgetGauge from "./widgetGauge.vue"; @@ -89,7 +89,8 @@ export default { bigscreen: Object, value: { type: [Object], - default: () => {} + default: () => { + } }, step: Number }, @@ -119,11 +120,13 @@ export default { return this.value.position.zIndex || 1; } }, - mounted() {}, + mounted() { + }, methods: { - handleFocus({ index, left, top, width, height }) {}, - handleBlur({ index, left, top, width, height }) { - this.$emit("onActivated", { index, left, top, width, height }); + handleFocus({index, left, top, width, height}) { + }, + handleBlur({index, left, top, width, height}) { + this.$emit("onActivated", {index, left, top, width, height}); this.$refs.draggable.setActive(true); } } @@ -134,11 +137,13 @@ export default { .vue-draggalbe { position: absolute; } + .widget-active { cursor: move; border: 1px dashed #09f; background-color: rgba(115, 170, 229, 0.5); } + .avue-draggable { padding: 0 !important; }