Merge branch 'master' of http://git.xlyprint.cn/qiangmj/report-ui

zhangzzzz
2 parents f0e3ea90 a7d37eeb
Showing 8 changed files with 299 additions and 16 deletions
package.json
src/views/bigscreenDesigner/designer/tools/configure/div/widget-border-box.js
src/views/bigscreenDesigner/designer/tools/configure/div/widget-div.js
src/views/bigscreenDesigner/designer/tools/main.js
src/views/bigscreenDesigner/designer/widget/div/widgetBorderBox.vue
src/views/bigscreenDesigner/designer/widget/div/widgetDiv.vue
src/views/bigscreenDesigner/designer/widget/temp.vue
src/views/bigscreenDesigner/designer/widget/widget.vue
@@ -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",
+/*
+ * @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,
+      },
+    ],
+  }
+}
@@ -5,7 +5,7 @@ export const widgetDiv =  {
   code: 'widget-div',
   type: 'html',
   tabName: '图层',
-  label: '边框',
+  label: '边框(二)',
   icon: 'icontupian1',
   options: {
     // 配置
@@ -6,7 +6,8 @@
  * @LastEditors: qianlishi qianlishi@anji-plus.com
  * @LastEditTime: 2022-11-07 15:34:02
  */
-import { widgetDiv } from "./configure/div/widget-div"
+// 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"
@@ -16,7 +17,7 @@ import { widgetTime } from &quot;./configure/texts/widget-time&quot;
 import { widgetVideo } from "./configure/texts/widget-video"
 import { widgetTable } from "./configure/texts/widget-table"
 import { widgetIframe } from "./configure/texts/widget-iframe"
-import { widgetUniversal } from "./configure/widget-universal"
+// import { widgetUniversal } from "./configure/widget-universal"
 import { widgetBarchart } from "./configure/barCharts/widget-barchart"
 import { widgetGradientBarchart } from "./configure/barCharts/widget-gradient-barchart"
 import { widgetLinechart } from "./configure/lineCharts/widget-linechart"
@@ -40,10 +41,10 @@ import { widgetHeatmap } from &quot;./configure/heatmap/widget-heatmap&quot;;
 import { widgetRadar } from "./configure/radarCharts/widget-radar";
 import { widgetBarLineStack } from "./configure/barlineCharts/widget-bar-line-stack";
-
 export const widgetTool = [
   //图层
-  widgetDiv,
+  widgetBorderBox,
+  // widgetDiv,
   widgetImage,
   widgetSliders,
   // type=html类型的组件
+<!--
+  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>
@@ -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,
@@ -42,12 +42,13 @@ import widgetHeatmap from &quot;./heatmap/widgetHeatmap&quot;;
 import widgetRadar from "./radar/widgetRadar";
 import widgetBarLineStackChart from "./barline/widgetBarLineStackChart";
 import widgetDecorate from "./decorate/decorate.vue";
-import widgetDiv from "./div/widgetDiv.vue";
+// import widgetDiv from "./div/widgetDiv.vue";
+import widgetBorderBox from "./div/widgetBorderBox.vue";
 export default {
   name: "WidgetTemp",
   components: {
-    widgetDiv,
+    // widgetDiv,
     widgetDecorate,
     widgetHref,
     widgetText,
@@ -78,7 +79,8 @@ export default {
     widgetWordCloud,
     widgetHeatmap,
     widgetRadar,
-    widgetBarLineStackChart
+    widgetBarLineStackChart,
+    widgetBorderBox
   },
   model: {
     prop: "value",
@@ -20,8 +20,6 @@ import widgetHref from &quot;./text/widgetHref.vue&quot;;
 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";
@@ -47,13 +45,17 @@ import widgetHeatmap from &quot;./heatmap/widgetHeatmap&quot;;
 import widgetRadar from "./radar/widgetRadar";
 import widgetBarLineStackChart from "./barline/widgetBarLineStackChart";
 import widgetDecorate from "./decorate/decorate.vue";
-import widgetDiv from "./div/widgetDiv.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,
+    // widgetDiv,
+    widgetBorderBox,
     widgetHref,
     widgetText,
     WidgetMarquee,