From d39ec9b75a52e409170cfcaff0346c8da3d1ddb0 Mon Sep 17 00:00:00 2001 From: wenqindong Date: Fri, 9 Jun 2023 09:01:07 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E2=9C=A8=20=E5=BC=95=E5=85=A5datav?= =?UTF-8?q?=E4=BE=9D=E8=B5=96=EF=BC=8C=E5=A2=9E=E5=8A=A0=E4=BA=86=E8=BE=B9?= =?UTF-8?q?=E6=A1=86=E3=80=81=E8=A3=85=E9=A5=B0=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 增加了样式组件分组，支持边框组件、装饰组件，可以在组件属性配置里切换不同的样式 --- report-ui/src/main.js | 4 +- .../configure/styleWidget/widget-border.js | 74 +++++++++++++++++++ .../styleWidget/widget-decoration.js | 74 +++++++++++++++++++ .../bigscreenDesigner/designer/tools/main.js | 4 + .../widget/styleWidget/widgetBorder.vue | 46 ++++++++++++ .../widget/styleWidget/widgetDecoration.vue | 45 +++++++++++ .../designer/widget/widget.vue | 4 + 7 files changed, 250 insertions(+), 1 deletion(-) create mode 100644 report-ui/src/views/bigscreenDesigner/designer/tools/configure/styleWidget/widget-border.js create mode 100644 report-ui/src/views/bigscreenDesigner/designer/tools/configure/styleWidget/widget-decoration.js create mode 100644 report-ui/src/views/bigscreenDesigner/designer/widget/styleWidget/widgetBorder.vue create mode 100644 report-ui/src/views/bigscreenDesigner/designer/widget/styleWidget/widgetDecoration.vue diff --git a/report-ui/src/main.js b/report-ui/src/main.js index abc86422..2fc0e97d 100644 --- a/report-ui/src/main.js +++ b/report-ui/src/main.js @@ -22,7 +22,9 @@ import 'echarts/lib/component/tooltip' //import 'echarts-liquidfill' // import 'echarts-gl' Vue.component('v-chart', ECharts) - +// 全局引入datav +import dataV from '@jiaminghi/data-view' +Vue.use(dataV) // anji component import anjiCrud from '@/components/AnjiPlus/anji-crud/anji-crud' import anjiSelect from '@/components/AnjiPlus/anji-select' diff --git a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/styleWidget/widget-border.js b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/styleWidget/widget-border.js new file mode 100644 index 00000000..ba7b5c32 --- /dev/null +++ b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/styleWidget/widget-border.js @@ -0,0 +1,74 @@ +/** + * author:wenqindong + * date:2023-05-31 + */ +let selectOptions = [] +for(let i=1;i<14;i++){ + selectOptions.push({code: 'dv-border-Box-'+i, name: '样式'+i}) +} +export const widgetBorder = { + code: 'widget-border', + type: 'border', + tabName: '样式组件', + label: '边框', + icon: 'icontupian1', + options: { + // 配置 + setup: [ + { + type: 'el-input-text', + label: '图层名称', + name: 'layerName', + required: false, + placeholder: '', + value: '边框一', + }, + { + type: 'el-select', + label: '样式', + name: 'showtype', + required: false, + placeholder: '', + selectOptions: selectOptions, + value: 'dv-border-Box-1' + }, + ], + // 数据 + data: [], + // 坐标 + 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: 300, + }, + ], + } + } diff --git a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/styleWidget/widget-decoration.js b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/styleWidget/widget-decoration.js new file mode 100644 index 00000000..880e4170 --- /dev/null +++ b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/styleWidget/widget-decoration.js @@ -0,0 +1,74 @@ +/** + * author:wenqindong + * date:2023-05-31 + */ +let selectOptions = [] +for(let i=1;i<13;i++){ + selectOptions.push({code: 'dv-decoration-'+i, name: '装饰'+i}) +} +export const widgetDecoration = { + code: 'widget-decoration', + type: 'border', + tabName: '样式组件', + label: '装饰', + icon: 'icontupian1', + options: { + // 配置 + setup: [ + { + type: 'el-input-text', + label: '图层名称', + name: 'layerName', + required: false, + placeholder: '', + value: '装饰一', + }, + { + type: 'el-select', + label: '样式', + name: 'showtype', + required: false, + placeholder: '', + selectOptions: selectOptions, + value: 'dv-decoration-1' + }, + ], + // 数据 + data: [], + // 坐标 + 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: 150, + }, + ], + } + } diff --git a/report-ui/src/views/bigscreenDesigner/designer/tools/main.js b/report-ui/src/views/bigscreenDesigner/designer/tools/main.js index db8e376b..c307dda2 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/tools/main.js +++ b/report-ui/src/views/bigscreenDesigner/designer/tools/main.js @@ -44,10 +44,14 @@ import { widgetFormTime } from "./configure/form/widget-form-time"; import { widgetScaleVertical } from "./configure/scaleCharts/widget-scale-vertical"; import { widgetScaleHorizontal } from "./configure/scaleCharts/widget-scale-horizontal" import {widgetBarDoubleYaxis} from "./configure/barCharts/widget-bar-double-yaxis-chart"; +import {widgetBorder} from "./configure/styleWidget/widget-border"; +import {widgetDecoration} from "./configure/styleWidget/widget-decoration"; export const widgetTool = [ // type=html类型的组件 widgetText, + widgetBorder, + widgetDecoration, widgetMarquee, widgetHref, widgetTime, diff --git a/report-ui/src/views/bigscreenDesigner/designer/widget/styleWidget/widgetBorder.vue b/report-ui/src/views/bigscreenDesigner/designer/widget/styleWidget/widgetBorder.vue new file mode 100644 index 00000000..6491def0 --- /dev/null +++ b/report-ui/src/views/bigscreenDesigner/designer/widget/styleWidget/widgetBorder.vue @@ -0,0 +1,46 @@ + + + \ No newline at end of file diff --git a/report-ui/src/views/bigscreenDesigner/designer/widget/styleWidget/widgetDecoration.vue b/report-ui/src/views/bigscreenDesigner/designer/widget/styleWidget/widgetDecoration.vue new file mode 100644 index 00000000..a34a3c55 --- /dev/null +++ b/report-ui/src/views/bigscreenDesigner/designer/widget/styleWidget/widgetDecoration.vue @@ -0,0 +1,45 @@ + + + \ No newline at end of file diff --git a/report-ui/src/views/bigscreenDesigner/designer/widget/widget.vue b/report-ui/src/views/bigscreenDesigner/designer/widget/widget.vue index d9ad8dda..f9edce68 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/widget/widget.vue +++ b/report-ui/src/views/bigscreenDesigner/designer/widget/widget.vue @@ -53,12 +53,16 @@ import widgetFormTime from "./form/widgetFormTime.vue"; import widgetScaleVertical from "./scale/widgetScaleVertical.vue"; import widgetScaleHorizontal from "./scale/widgetScaleHorizontal.vue"; import widgetBarDoubleYaxisChart from "./bar/widgetBarDoubleYaxisChart.vue"; +import widgetBorder from "./styleWidget/widgetBorder.vue"; +import widgetDecoration from "./styleWidget/widgetDecoration.vue"; export default { name: "Widget", components: { widgetHref, widgetText, + widgetBorder, + widgetDecoration, WidgetMarquee, widgetTime, widgetImage,