feat: ✨ 引入datav依赖，增加了边框、装饰组件

增加了样式组件分组，支持边框组件、装饰组件，可以在组件属性配置里切换不同的样式

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'

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,
+        },
+      ],
+    }
+  }

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,
+        },
+      ],
+    }
+  }

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,

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>

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>

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,