From d39ec9b75a52e409170cfcaff0346c8da3d1ddb0 Mon Sep 17 00:00:00 2001
From: wenqindong <wenqindong@aisino.com>
Date: Fri, 9 Jun 2023 09:01:07 +0800
Subject: [PATCH 1/2] =?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 @@
+<template>
+ <div :style="styleObj" >
+ <component :is="value.setup.showtype" :value="value" />
+ </div>
+</template>
+<script>
+export default ({
+ data() {
+ return {
+ optionsStyle: {}, // 样式
+ }
+ },
+ props: {
+ value: Object,
+ ispreview: Boolean,
+ widgetIndex: {
+ type: Number,
+ default: 0,
+ }, // 当前组件，在工作区变量widgetInWorkbench中的索引
+ },
+ watch: {
+ value: {
+ handler(val) {
+ this.optionsStyle = val.position;
+ this.optionsData = val.data;
+ this.optionsCollapse = val.collapse;
+ this.optionsSetup = val.setup;
+ },
+ deep: true,
+ },
+ },
+ computed: {
+ styleObj() {
+ return {
+ position: this.ispreview ? "absolute" : "static",
+ width: this.optionsStyle.width + "px",
+ height: this.optionsStyle.height + "px",
+ left: this.optionsStyle.left + "px",
+ top: this.optionsStyle.top + "px",
+ };
+ },
+ }
+})
+</script>
+<style scoped lang="scss">
+</style>
\ 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 @@
+<template>
+ <div :style="styleObj">
+ <component :is="value.setup.showtype" :value="value" :style="styleObj"/>
+ </div>
+</template>
+<script>
+export default ({
+ data() {
+ return {
+ optionsStyle: {}, // 样式
+ }
+ },
+ props: {
+ value: Object,
+ ispreview: Boolean,
+ widgetIndex: {
+ type: Number,
+ default: 0,
+ }, // 当前组件，在工作区变量widgetInWorkbench中的索引
+ },
+ watch: {
+ value: {
+ handler(val) {
+ this.optionsStyle = val.position;
+ this.optionsData = val.data;
+ this.optionsCollapse = val.collapse;
+ this.optionsSetup = val.setup;
+ },
+ deep: true,
+ },
+ },
+ computed: {
+ styleObj() {
+ return {
+ position: this.ispreview ? "absolute" : "static",
+ width: this.optionsStyle.width + "px",
+ height: this.optionsStyle.height + "px",
+ left: this.optionsStyle.left + "px",
+ top: this.optionsStyle.top + "px",
+ };
+ },
+ }
+})
+</script>
+<style scoped lang="scss"></style>
\ 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,
From dcd3ed30f17bbc2e55c58ae679cfff1473962f6a Mon Sep 17 00:00:00 2001
From: wenqindong <wenqindong@aisino.com>
Date: Fri, 9 Jun 2023 09:15:59 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E5=A4=A7=E5=B1=8F?=
=?UTF-8?q?=E7=BB=84=E4=BB=B6datav=E4=BE=9D=E8=B5=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
report-ui/package.json | 1 +
1 file changed, 1 insertion(+)
diff --git a/report-ui/package.json b/report-ui/package.json
index efd67958..1858c0ad 100644
--- a/report-ui/package.json
+++ b/report-ui/package.json
@@ -13,6 +13,7 @@
},
"dependencies": {
"@ckeditor/ckeditor5-build-decoupled-document": "^23.1.0",
+ "@jiaminghi/data-view": "^2.10.0",
"@smallwei/avue": "^2.8.23",
"axios": "0.18.0",
"chokidar": "^3.5.2",