From b010148a760cee4e06c5457025a5104702c44d89 Mon Sep 17 00:00:00 2001
From: qianbao <qianbaoqianbao>
Date: Wed, 30 Nov 2022 00:03:47 +0800
Subject: [PATCH] 新增DataV 框架边框

---
 package.json                                                                  |   1 +
 src/views/bigscreenDesigner/designer/tools/configure/div/widget-border-box.js | 139 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/views/bigscreenDesigner/designer/tools/configure/div/widget-div.js        |   2 +-
 src/views/bigscreenDesigner/designer/tools/main.js                            |   3 ++-
 src/views/bigscreenDesigner/designer/widget/div/widgetBorderBox.vue           | 142 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/views/bigscreenDesigner/designer/widget/div/widgetDiv.vue                 |   4 ----
 src/views/bigscreenDesigner/designer/widget/temp.vue                          |   4 +++-
 src/views/bigscreenDesigner/designer/widget/widget.vue                        |   6 ++++--
 8 files changed, 292 insertions(+), 9 deletions(-)
 create mode 100644 src/views/bigscreenDesigner/designer/tools/configure/div/widget-border-box.js
 create mode 100644 src/views/bigscreenDesigner/designer/widget/div/widgetBorderBox.vue

diff --git a/package.json b/package.json
index a15e925..af41e7a 100644
--- a/package.json
+++ b/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",
diff --git a/src/views/bigscreenDesigner/designer/tools/configure/div/widget-border-box.js b/src/views/bigscreenDesigner/designer/tools/configure/div/widget-border-box.js
new file mode 100644
index 0000000..b7bd751
--- /dev/null
+++ b/src/views/bigscreenDesigner/designer/tools/configure/div/widget-border-box.js
@@ -0,0 +1,139 @@
+/*
+ * @Descripttion: DIV图层次
+ */
+export const widgetBorderBox =  {
+  code: 'widget-border-box',
+  type: 'html',
+  tabName: '图层',
+  label: '边框(一)',
+  icon: 'icontupian1',
+  options: {
+    // 配置
+    setup: [
+      {
+        type: 'el-input-text',
+        label: '图层名称',
+        name: 'layerName',
+        required: false,
+        placeholder: '',
+        value: '边框',
+      },
+      {
+        type: 'el-select',
+        label: '边框类型',
+        name: 'divType',
+        required: false,
+        placeholder: '',
+        selectOptions: [
+          {code: 'dv-border-Box-1', name: '边框1'},
+          {code: 'dv-border-Box-2', name: '边框2'},
+          {code: 'dv-border-Box-3', name: '边框3'},
+          {code: 'dv-border-Box-4', name: '边框4'},
+          {code: 'dv-border-Box-5', name: '边框5'},
+          {code: 'dv-border-Box-6', name: '边框6'},
+          {code: 'dv-border-Box-7', name: '边框7'},
+          {code: 'dv-border-Box-8', name: '边框8'},
+          {code: 'dv-border-Box-9', name: '边框9'},
+          {code: 'dv-border-Box-10', name: '边框10'},
+          {code: 'dv-border-Box-11', name: '边框11'},
+          {code: 'dv-border-Box-12', name: '边框12'},
+          {code: 'dv-border-Box-13', name: '边框13'},
+        ],
+        value: 'dv-border-Box-1'
+      },
+      {
+        type: 'vue-color',
+        label: '颜色(主)',
+        name: 'colorOne',
+        required: false,
+        placeholder: '',
+        value: '',
+      },
+      {
+        type: 'vue-color',
+        label: '颜色(次)',
+        name: 'colorTwo',
+        required: false,
+        placeholder: '',
+        value: '',
+      },
+      {
+        type: 'vue-color',
+        label: '背景色',
+        name: 'backgroundColor',
+        required: false,
+        placeholder: '',
+        value: 'rgba(255, 0, 0, 0)',
+      },
+      {
+        type: 'el-input-number',
+        label: '单次动画时间长',
+        name: 'dur',
+        required: false,
+        placeholder: '',
+        value: 3,
+      },
+      {
+        type: 'el-switch',
+        label: '反向',
+        name: 'reverse',
+        require: false,
+        placeholder: '',
+        value: false,
+      },
+      {
+        type: 'el-input-text',
+        label: '标题',
+        name: 'title',
+        require: false,
+        placeholder: '',
+        value: '',
+      },
+      {
+        type: 'el-input-number',
+        label: '标题宽度',
+        name: 'titleWidth',
+        require: false,
+        placeholder: '',
+        value: 250,
+      }
+    ],
+    // 数据
+    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: 1000,
+      },
+      {
+        type: 'el-input-number',
+        label: '高度',
+        name: 'height',
+        required: false,
+        placeholder: '该容器在1080px大屏中的高度',
+        value: 600,
+      },
+    ],
+  }
+}
diff --git a/src/views/bigscreenDesigner/designer/tools/configure/div/widget-div.js b/src/views/bigscreenDesigner/designer/tools/configure/div/widget-div.js
index 917ac2d..90ea4c1 100644
--- a/src/views/bigscreenDesigner/designer/tools/configure/div/widget-div.js
+++ b/src/views/bigscreenDesigner/designer/tools/configure/div/widget-div.js
@@ -5,7 +5,7 @@ export const widgetDiv =  {
   code: 'widget-div',
   type: 'html',
   tabName: '图层',
-  label: '边框',
+  label: '边框(二)',
   icon: 'icontupian1',
   options: {
     // 配置
diff --git a/src/views/bigscreenDesigner/designer/tools/main.js b/src/views/bigscreenDesigner/designer/tools/main.js
index 47a4036..7317fb0 100644
--- a/src/views/bigscreenDesigner/designer/tools/main.js
+++ b/src/views/bigscreenDesigner/designer/tools/main.js
@@ -7,6 +7,7 @@
  * @LastEditTime: 2022-11-07 15:34:02
  */
 import { widgetDiv } from "./configure/div/widget-div"
+import { widgetBorderBox } from "./configure/div/widget-border-box";
 import { widgetImage } from "./configure/div/widget-image"
 import { widgetSliders } from "./configure/div/widget-slider"
 import { widgetText } from "./configure/texts/widget-text"
@@ -40,9 +41,9 @@ import { widgetHeatmap } from "./configure/heatmap/widget-heatmap";
 import { widgetRadar } from "./configure/radarCharts/widget-radar";
 import { widgetBarLineStack } from "./configure/barlineCharts/widget-bar-line-stack";
 
-
 export const widgetTool = [
   //图层
+  widgetBorderBox,
   widgetDiv,
   widgetImage,
   widgetSliders,
diff --git a/src/views/bigscreenDesigner/designer/widget/div/widgetBorderBox.vue b/src/views/bigscreenDesigner/designer/widget/div/widgetBorderBox.vue
new file mode 100644
index 0000000..ad4528b
--- /dev/null
+++ b/src/views/bigscreenDesigner/designer/widget/div/widgetBorderBox.vue
@@ -0,0 +1,142 @@
+<!--
+  Div 图层
+-->
+<template>
+    <dv-border-Box-1 :style="styleColor" :color="transStyle.color" :backgroundColor="transStyle.backgroundColor"
+                     v-if="styleColor.divClass === 'dv-border-Box-1'"></dv-border-Box-1>
+    <dv-border-Box-2 :style="styleColor" :color="transStyle.color" :backgroundColor="transStyle.backgroundColor"
+                     v-else-if="styleColor.divClass === 'dv-border-Box-2'"></dv-border-Box-2>
+    <dv-border-Box-3 :style="styleColor" :color="transStyle.color" :backgroundColor="transStyle.backgroundColor"
+                     v-else-if="styleColor.divClass === 'dv-border-Box-3'"></dv-border-Box-3>
+    <dv-border-Box-4 :style="styleColor" :color="transStyle.color" :backgroundColor="transStyle.backgroundColor"
+                     :reverse="transStyle.reverse"
+                     v-else-if="styleColor.divClass === 'dv-border-Box-4'"></dv-border-Box-4>
+    <dv-border-Box-5 :style="styleColor" :color="transStyle.color" :backgroundColor="transStyle.backgroundColor"
+                     v-else-if="styleColor.divClass === 'dv-border-Box-5'"></dv-border-Box-5>
+    <dv-border-Box-6 :style="styleColor" :color="transStyle.color" :backgroundColor="transStyle.backgroundColor"
+                     v-else-if="styleColor.divClass === 'dv-border-Box-6'"></dv-border-Box-6>
+    <dv-border-Box-7 :style="styleColor" :color="transStyle.color" :backgroundColor="transStyle.backgroundColor"
+                     v-else-if="styleColor.divClass === 'dv-border-Box-7'"></dv-border-Box-7>
+    <dv-border-Box-8 :style="styleColor" :color="transStyle.color" :backgroundColor="transStyle.backgroundColor"
+                     :dur="transStyle.dur"  :reverse="transStyle.reverse"
+                     :title="transStyle.title"  :titleWidth="transStyle.titleWidth"
+                     v-else-if="styleColor.divClass === 'dv-border-Box-8'"   ></dv-border-Box-8>
+    <dv-border-Box-9 :style="styleColor" :color="transStyle.color" :backgroundColor="transStyle.backgroundColor"
+                     v-else-if="styleColor.divClass === 'dv-border-Box-9'"></dv-border-Box-9>
+    <dv-border-Box-10 :style="styleColor" :color="transStyle.color" :backgroundColor="transStyle.backgroundColor"
+                      v-else-if="styleColor.divClass === 'dv-border-Box-10'"></dv-border-Box-10>
+    <dv-border-Box-11 :style="styleColor" :color="transStyle.color" :backgroundColor="transStyle.backgroundColor"
+                      :title="transStyle.title"  :titleWidth="transStyle.titleWidth"
+                      v-else-if="styleColor.divClass === 'dv-border-Box-11'"></dv-border-Box-11>
+    <dv-border-Box-12 :style="styleColor" :color="transStyle.color" :backgroundColor="transStyle.backgroundColor"
+                      v-else-if="styleColor.divClass === 'dv-border-Box-12'"></dv-border-Box-12>
+    <dv-border-Box-13 :style="styleColor" :color="transStyle.color" :backgroundColor="transStyle.backgroundColor"
+                      v-else="styleColor.divClass === 'dv-border-Box-13'"></dv-border-Box-13>
+</template>
+<script>
+import borderBox1 from "@jiaminghi/data-view/lib/components/borderBox1";
+import borderBox2 from "@jiaminghi/data-view/lib/components/borderBox2";
+import borderBox3 from "@jiaminghi/data-view/lib/components/borderBox3";
+import borderBox4 from "@jiaminghi/data-view/lib/components/borderBox4";
+import borderBox5 from "@jiaminghi/data-view/lib/components/borderBox5";
+import borderBox6 from "@jiaminghi/data-view/lib/components/borderBox6";
+import borderBox7 from "@jiaminghi/data-view/lib/components/borderBox7";
+import borderBox8 from "@jiaminghi/data-view/lib/components/borderBox8";
+import borderBox9 from "@jiaminghi/data-view/lib/components/borderBox9";
+import borderBox10 from "@jiaminghi/data-view/lib/components/borderBox10";
+import borderBox11 from "@jiaminghi/data-view/lib/components/borderBox11";
+import borderBox12 from "@jiaminghi/data-view/lib/components/borderBox12";
+import borderBox13 from "@jiaminghi/data-view/lib/components/borderBox13";
+Vue.use(borderBox1)
+Vue.use(borderBox2)
+Vue.use(borderBox3)
+Vue.use(borderBox4)
+Vue.use(borderBox5)
+Vue.use(borderBox6)
+Vue.use(borderBox7)
+Vue.use(borderBox8)
+Vue.use(borderBox9)
+Vue.use(borderBox10)
+Vue.use(borderBox11)
+Vue.use(borderBox12)
+Vue.use(borderBox13)
+export default {
+  name: "WidgetBorderBox",
+  components: {
+  },
+  props: {
+    value: Object,
+    ispreview: Boolean,
+  },
+  data() {
+    return {
+      options: {},
+      optionsData: {},
+    };
+  },
+  computed: {
+    transStyle() {
+      let transStyleObj = this.objToOne(this.options);
+      let color = [];
+      if(!this.isBlankObject(transStyleObj)){
+        const  colorOne = transStyleObj.colorOne;
+        if(!this.isBlankObject(colorOne)){
+          color.push(colorOne);
+        }
+        const colorTwo = transStyleObj.colorTwo;
+        if(!this.isBlankObject(colorTwo)){
+          color.push(colorTwo);
+        }
+        transStyleObj.color = color;
+      }
+      return transStyleObj;
+    },
+    styleColor() {
+      return {
+        position: this.ispreview ? "absolute" : "static",
+        // color: this.transStyle.colorOne,
+        // text: this.transStyle.text,
+        divClass:
+          this.transStyle.divType == undefined
+            ? "dv-border-Box-1"
+            : this.transStyle.divType,
+        // background: this.transStyle.backgroundColor,
+        width: this.transStyle.width + "px",
+        height: this.transStyle.height + "px",
+        left: this.transStyle.left + "px",
+        top: this.transStyle.top + "px",
+        right: this.transStyle.right + "px",
+      };
+    },
+  },
+  watch: {
+    value: {
+      handler(val) {
+        this.options = val;
+        this.optionsData = val.data;
+        this.setOptionsData();
+      },
+      deep: true,
+    },
+  },
+  mounted() {
+    this.options = this.value;
+  },
+  methods: {},
+};
+</script>
+
+<style scoped lang="scss">
+.div {
+  width: 100%;
+  height: 100%;
+  border: 2em;
+  border-color: aqua;
+  overflow: hidden;
+}
+
+.div_Style {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/src/views/bigscreenDesigner/designer/widget/div/widgetDiv.vue b/src/views/bigscreenDesigner/designer/widget/div/widgetDiv.vue
index c833713..d971a34 100644
--- a/src/views/bigscreenDesigner/designer/widget/div/widgetDiv.vue
+++ b/src/views/bigscreenDesigner/designer/widget/div/widgetDiv.vue
@@ -20,13 +20,9 @@
 </template>
 
 <script>
-// import WidgeDiv1 from './svg/div1.vue';
-// import WidgeDiv2 from './svg/div2.vue';
 export default {
   name: "WidgetDiv",
   components: {
-    // div_Style_1: WidgeDiv1,
-    // div_Style_2: WidgeDiv2
   },
   props: {
     value: Object,
diff --git a/src/views/bigscreenDesigner/designer/widget/temp.vue b/src/views/bigscreenDesigner/designer/widget/temp.vue
index 1c97d2b..10b7ca7 100644
--- a/src/views/bigscreenDesigner/designer/widget/temp.vue
+++ b/src/views/bigscreenDesigner/designer/widget/temp.vue
@@ -43,6 +43,7 @@ import widgetRadar from "./radar/widgetRadar";
 import widgetBarLineStackChart from "./barline/widgetBarLineStackChart";
 import widgetDecorate from "./decorate/decorate.vue";
 import widgetDiv from "./div/widgetDiv.vue";
+import widgetBorderBox from "./div/widgetBorderBox.vue";
 
 export default {
   name: "WidgetTemp",
@@ -78,7 +79,8 @@ export default {
     widgetWordCloud,
     widgetHeatmap,
     widgetRadar,
-    widgetBarLineStackChart
+    widgetBarLineStackChart,
+    widgetBorderBox
   },
   model: {
     prop: "value",
diff --git a/src/views/bigscreenDesigner/designer/widget/widget.vue b/src/views/bigscreenDesigner/designer/widget/widget.vue
index d4b2a26..ec48cea 100644
--- a/src/views/bigscreenDesigner/designer/widget/widget.vue
+++ b/src/views/bigscreenDesigner/designer/widget/widget.vue
@@ -20,8 +20,6 @@ import widgetHref from "./text/widgetHref.vue";
 import widgetText from "./text/widgetText.vue";
 import WidgetMarquee from "./text/widgetMarquee.vue";
 import widgetTime from "./text/widgetTime.vue";
-import widgetImage from "./div/widgetImage.vue";
-import widgetSlider from "./div/widgetSlider.vue";
 import widgetVideo from "./text/widgetVideo.vue";
 import WidgetIframe from "./text/widgetIframe.vue";
 import widgetBarchart from "./bar/widgetBarchart.vue";
@@ -48,12 +46,16 @@ import widgetRadar from "./radar/widgetRadar";
 import widgetBarLineStackChart from "./barline/widgetBarLineStackChart";
 import widgetDecorate from "./decorate/decorate.vue";
 import widgetDiv from "./div/widgetDiv.vue";
+import widgetImage from "./div/widgetImage.vue";
+import widgetSlider from "./div/widgetSlider.vue";
+import widgetBorderBox from "./div/widgetBorderBox.vue";
 
 export default {
   name: "Widget",
   components: {
     widgetDecorate,
     widgetDiv,
+    widgetBorderBox,
     widgetHref,
     widgetText,
     WidgetMarquee,
--
libgit2 0.22.2