From ee5dc225d9a7fc073baccbea93314f3dad325e82 Mon Sep 17 00:00:00 2001
From: qianbao <qianbaoqianbao>
Date: Thu, 1 Dec 2022 23:56:16 +0800
Subject: [PATCH] 1、添加胶状柱行图 2、动态文本添加取全局数据源 3、添加装饰图

---
 src/mixins/common.js                                                                   |  26 +++++++++++++++++++++++++-
 src/views/bigscreenDesigner/designer/tools/configure/barCharts/widget-capsule-chart.js | 148 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/views/bigscreenDesigner/designer/tools/configure/div/widget-border-box.js          |   8 ++++----
 src/views/bigscreenDesigner/designer/tools/configure/div/widget-decoration.js          | 139 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/views/bigscreenDesigner/designer/tools/configure/texts/widget-marquee.js           |   9 +++++++++
 src/views/bigscreenDesigner/designer/tools/configure/texts/widget-text.js              |   2 +-
 src/views/bigscreenDesigner/designer/tools/main.js                                     |   4 ++++
 src/views/bigscreenDesigner/designer/widget/bar/widgetCapsuleChart.vue                 | 126 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/views/bigscreenDesigner/designer/widget/div/widgetBorderBox.vue                    |   1 -
 src/views/bigscreenDesigner/designer/widget/div/widgetDecoration.vue                   | 220 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/views/bigscreenDesigner/designer/widget/temp.vue                                   |   4 ++++
 src/views/bigscreenDesigner/designer/widget/text/widgetMarquee.vue                     |   9 ++++++++-
 src/views/bigscreenDesigner/designer/widget/text/widgetText.vue                        |   8 --------
 src/views/bigscreenDesigner/designer/widget/widget.vue                                 |   4 ++++
 14 files changed, 692 insertions(+), 16 deletions(-)
 create mode 100644 src/views/bigscreenDesigner/designer/tools/configure/barCharts/widget-capsule-chart.js
 create mode 100644 src/views/bigscreenDesigner/designer/tools/configure/div/widget-decoration.js
 create mode 100644 src/views/bigscreenDesigner/designer/widget/bar/widgetCapsuleChart.vue
 create mode 100644 src/views/bigscreenDesigner/designer/widget/div/widgetDecoration.vue

diff --git a/src/mixins/common.js b/src/mixins/common.js
index 092caba..f3037c1 100644
--- a/src/mixins/common.js
+++ b/src/mixins/common.js
@@ -58,6 +58,30 @@ export default {
       }
       return false
     },
+    isBlankObj (val) {
+      if (typeof val === 'undefined') {
+        return true
+      }
+      if (val == null || val === '' || val =={} || val.length==0) {
+        return true
+      }
+      return false
+    },
+    isNotBlankObj (val) {
+      return  !this.isBlankObj(val);
+    },
+    isBlankArray (val) {
+      if (typeof val === 'undefined') {
+        return true
+      }
+      if (val == null || val === '' || val ==[] || val.length==0) {
+        return true
+      }
+      return false
+    },
+    isNotBlankArray (val) {
+      return  !this.isBlankArray(val);
+    },
     // 封装定制删除数组中的值
     contains (a, obj) {
       let i = a.length
@@ -272,7 +296,7 @@ export default {
       return { top: top, left: left }
     },
     objToOne (obj) {
-      console.log(obj)
+      // console.log(obj)
       let tmpData = {}
       for (let index in obj) {
         if (typeof obj[index] == 'object' && !this.isArrayFn(obj[index])) {
diff --git a/src/views/bigscreenDesigner/designer/tools/configure/barCharts/widget-capsule-chart.js b/src/views/bigscreenDesigner/designer/tools/configure/barCharts/widget-capsule-chart.js
new file mode 100644
index 0000000..4c307ba
--- /dev/null
+++ b/src/views/bigscreenDesigner/designer/tools/configure/barCharts/widget-capsule-chart.js
@@ -0,0 +1,148 @@
+/*
+ * @Descripttion: DIV图层次
+ */
+export const widgetCapsuleChart =  {
+  code: 'widget-capsule-chart',
+  type: 'barChart',
+  tabName: '柱状图',
+  label: '胶囊柱图',
+  icon: 'iconzhuxiantu',
+  options: {
+    // 配置
+    setup: [
+      {
+        type: 'el-input-text',
+        label: '图层名称',
+        name: 'layerName',
+        required: false,
+        placeholder: '',
+        value: '胶囊柱图',
+      },
+      {
+        type: 'el-input-text',
+        label: '单位',
+        name: 'unit',
+        required: false,
+        placeholder: '',
+        value: '个',
+      },
+      {
+        type: 'el-switch',
+        label: '显示数值',
+        name: 'showValue',
+        required: false,
+        placeholder: '',
+        value: true,
+      },
+      {
+        type: 'vue-color',
+        label: '背景颜色',
+        name: 'background',
+        required: false,
+        placeholder: '',
+        value: ''
+      },
+      [{
+        name: '自定义配色',
+        list: [
+          {
+            type: 'customColor',
+            label: '',
+            name: 'customColor',
+            required: false,
+            //'#e062ae', '#fb7293', '#e690d1', '#32c5e9', '#96bfff'
+            value: [{ color: '#e062ae' }, { color: '#fb7293' }, { color: '#e690d1' }, { color: '#32c5e9' }, { color: '#96bfff' }],
+          },
+        ],
+      }],
+    ],
+
+    // 数据
+    data: [
+      {
+        type: 'el-radio-group',
+        label: '数据类型',
+        name: 'dataType',
+        require: false,
+        placeholder: '',
+        selectValue: true,
+        selectOptions: [
+          {
+            code: 'staticData',
+            name: '静态数据',
+          },
+          {
+            code: 'dynamicData',
+            name: '动态数据',
+          },
+        ],
+        value: 'staticData',
+      },
+      {
+        type: 'el-input-number',
+        label: '刷新时间(毫秒)',
+        name: 'refreshTime',
+        relactiveDom: 'dataType',
+        relactiveDomValue: 'dynamicData',
+        value: 5000
+      },
+      {
+        type: 'el-button',
+        label: '静态数据',
+        name: 'staticData',
+        required: false,
+        placeholder: '',
+        relactiveDom: 'dataType',
+        relactiveDomValue: 'staticData',
+        value: [{ value: 1048, name: "搜索引擎" }, { value: 735, name: "直接访问" }, { value: 580, name: "邮件营销" }, { value: 484, name: "联盟广告" }, { value: 300, name: "视频广告" }]
+      },
+      {
+        type: 'dycustComponents',
+        label: '',
+        name: 'dynamicData',
+        required: false,
+        placeholder: '',
+        relactiveDom: 'dataType',
+        relactiveDomValue: 'dynamicData',
+        chartType: 'widget-capsule-chart',
+        dictKey: 'STACK_PROPERTIES',
+        value: '',
+      },
+    ],
+    // 坐标
+    position: [
+      {
+        type: 'el-input-number',
+        label: '左边距',
+        name: 'left',
+        required: false,
+        placeholder: '',
+        value: 50,
+      },
+      {
+        type: 'el-input-number',
+        label: '上边距',
+        name: 'top',
+        required: false,
+        placeholder: '',
+        value: 50,
+      },
+      {
+        type: 'el-input-number',
+        label: '宽度',
+        name: 'width',
+        required: false,
+        placeholder: '该容器在1920px大屏中的宽度',
+        value: 800,
+      },
+      {
+        type: 'el-input-number',
+        label: '高度',
+        name: 'height',
+        required: false,
+        placeholder: '该容器在1080px大屏中的高度',
+        value: 600,
+      },
+    ],
+  }
+}
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
index 14eb3cc..52e9dfb 100644
--- a/src/views/bigscreenDesigner/designer/tools/configure/div/widget-border-box.js
+++ b/src/views/bigscreenDesigner/designer/tools/configure/div/widget-border-box.js
@@ -108,7 +108,7 @@ export const widgetBorderBox =  {
         name: 'left',
         required: false,
         placeholder: '',
-        value: 0,
+        value: 10,
       },
       {
         type: 'el-input-number',
@@ -116,7 +116,7 @@ export const widgetBorderBox =  {
         name: 'top',
         required: false,
         placeholder: '',
-        value: 0,
+        value: 10,
       },
       {
         type: 'el-input-number',
@@ -124,7 +124,7 @@ export const widgetBorderBox =  {
         name: 'width',
         required: false,
         placeholder: '该容器在1920px大屏中的宽度',
-        value: 1000,
+        value: 500,
       },
       {
         type: 'el-input-number',
@@ -132,7 +132,7 @@ export const widgetBorderBox =  {
         name: 'height',
         required: false,
         placeholder: '该容器在1080px大屏中的高度',
-        value: 600,
+        value: 350,
       },
     ],
   }
diff --git a/src/views/bigscreenDesigner/designer/tools/configure/div/widget-decoration.js b/src/views/bigscreenDesigner/designer/tools/configure/div/widget-decoration.js
new file mode 100644
index 0000000..6583731
--- /dev/null
+++ b/src/views/bigscreenDesigner/designer/tools/configure/div/widget-decoration.js
@@ -0,0 +1,139 @@
+/*
+ * @Descripttion: DIV图层次
+ */
+export const widgetDecoration =  {
+  code: 'widget-decoration',
+  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: '',
+        onChange:"handleChange",
+        selectOptions: [
+          {code: 'dvDecoration1', name: '边框1'},
+          {code: 'dvDecoration2', name: '边框2'},
+          {code: 'dvDecoration3', name: '边框3'},
+          {code: 'dvDecoration4', name: '边框4'},
+          {code: 'dvDecoration5', name: '边框5'},
+          {code: 'dvDecoration6', name: '边框6'},
+          {code: 'dvDecoration7', name: '边框7'},
+          {code: 'dvDecoration8', name: '边框8'},
+          {code: 'dvDecoration9', name: '边框9'},
+          {code: 'dvDecoration10', name: '边框10'},
+          {code: 'dvDecoration11', name: '边框11'},
+          {code: 'dvDecoration12', name: '边框12'},
+        ],
+        value: 'dvDecoration1'
+      },
+      {
+        type: 'vue-color',
+        label: '颜色(主)',
+        name: 'colorOne',
+        required: false,
+        placeholder: '',
+        value: '',
+      },
+      {
+        type: 'vue-color',
+        label: '颜色(次)',
+        name: 'colorTwo',
+        required: false,
+        placeholder: '',
+        value: '',
+      },
+      {
+        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: 'scanDur',
+        required: false,
+        placeholder: '',
+        value: 3,
+      },
+      {
+        type: 'el-input-number',
+        label: '光晕动画(秒)',
+        name: 'haloDur',
+        required: false,
+        placeholder: '',
+        value: 2,
+      },
+    ],
+    // 数据
+    data: [],
+    // 坐标
+    position: [
+      {
+        type: 'el-input-number',
+        label: '左边距',
+        name: 'left',
+        required: false,
+        placeholder: '',
+        value: 20,
+      },
+      {
+        type: 'el-input-number',
+        label: '上边距',
+        name: 'top',
+        required: false,
+        placeholder: '',
+        value: 20,
+      },
+      {
+        type: 'el-input-number',
+        label: '宽度',
+        name: 'width',
+        required: false,
+        placeholder: '该容器在1920px大屏中的宽度',
+        value: 300,
+      },
+      {
+        type: 'el-input-number',
+        label: '高度',
+        name: 'height',
+        required: false,
+        placeholder: '该容器在1080px大屏中的高度',
+        value: 40,
+      },
+    ],
+  }
+}
diff --git a/src/views/bigscreenDesigner/designer/tools/configure/texts/widget-marquee.js b/src/views/bigscreenDesigner/designer/tools/configure/texts/widget-marquee.js
index bbaed19..14e683c 100644
--- a/src/views/bigscreenDesigner/designer/tools/configure/texts/widget-marquee.js
+++ b/src/views/bigscreenDesigner/designer/tools/configure/texts/widget-marquee.js
@@ -32,6 +32,15 @@ export const widgetMarquee = {
           value: '滚动文本',
         },
         {
+          type: 'el-select-static',
+          label: '主数据源数据',
+          name: 'slectedDataType',
+          require: false,
+          placeholder: '',
+          selectOptions: [],
+          value: '',
+        },
+        {
           type: 'el-input-number',
           label: '字体字号',
           name: 'fontSize',
diff --git a/src/views/bigscreenDesigner/designer/tools/configure/texts/widget-text.js b/src/views/bigscreenDesigner/designer/tools/configure/texts/widget-text.js
index 3858ff0..3364079 100644
--- a/src/views/bigscreenDesigner/designer/tools/configure/texts/widget-text.js
+++ b/src/views/bigscreenDesigner/designer/tools/configure/texts/widget-text.js
@@ -33,7 +33,7 @@ export const widgetText =  {
         },
         {
           type: 'el-select-static',
-          label: '全局静态数据选择',
+          label: '主数据源数据',
           name: 'slectedDataType',
           require: false,
           placeholder: '',
diff --git a/src/views/bigscreenDesigner/designer/tools/main.js b/src/views/bigscreenDesigner/designer/tools/main.js
index 2948ed2..cf60961 100644
--- a/src/views/bigscreenDesigner/designer/tools/main.js
+++ b/src/views/bigscreenDesigner/designer/tools/main.js
@@ -8,6 +8,8 @@
  */
 // import { widgetDiv } from "./configure/div/widget-div"
 import { widgetBorderBox } from "./configure/div/widget-border-box";
+import { widgetDecoration } from "./configure/div/widget-decoration";
+import { widgetCapsuleChart} from "./configure/barCharts/widget-capsule-chart";
 import { widgetImage } from "./configure/div/widget-image"
 import { widgetSliders } from "./configure/div/widget-slider"
 import { widgetText } from "./configure/texts/widget-text"
@@ -45,6 +47,8 @@ import { widgetProgress } from "./configure/percentCharts/widget-progress";
 export const widgetTool = [
   //图层
   widgetBorderBox,
+  widgetDecoration,
+  widgetCapsuleChart,
   // widgetDiv,
   widgetImage,
   widgetSliders,
diff --git a/src/views/bigscreenDesigner/designer/widget/bar/widgetCapsuleChart.vue b/src/views/bigscreenDesigner/designer/widget/bar/widgetCapsuleChart.vue
new file mode 100644
index 0000000..a789688
--- /dev/null
+++ b/src/views/bigscreenDesigner/designer/widget/bar/widgetCapsuleChart.vue
@@ -0,0 +1,126 @@
+<!--
+  胶囊柱图
+-->
+<template>
+  <dv-capsule-chart :config="options" :style="styleObj"/>
+</template>
+<script>
+import capsuleChart from "@jiaminghi/data-view/lib/components/capsuleChart";
+import Vue from "vue";
+Vue.use(capsuleChart)
+export default {
+  name: "WidgetCapsuleChart",
+  props: {
+    value: Object,
+    ispreview: Boolean,
+  },
+  data() {
+    return {
+      //返回图标数据
+      options: {
+        colors: [],//颜色
+        data:[],//数据
+        unit: '',//单位
+        showValue: true//显示数值
+      },
+      optionsStyle: {}, // 样式
+      optionsData: {}, // 数据
+      optionsCollapse: {}, // 图标属性
+      optionsSetup: {}
+    };
+  },
+  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",
+        background: this.optionsSetup.background
+      };
+    }
+  },
+  watch: {
+    value: {
+      handler(val) {
+        this.optionsStyle = val.position;
+        this.optionsData = val.data;
+        this.optionsCollapse = val.collapse;
+        this.optionsSetup = val.setup;
+        this.editorOptions();
+      },
+      deep: true
+    }
+  },
+  created() {
+    this.optionsStyle = this.value.position;
+    this.optionsData = this.value.data;
+    this.optionsCollapse = this.value.collapse;
+    this.optionsSetup = this.value.setup;
+    this.editorOptions();
+  },
+  methods: {
+    // 修改图标options属性
+    editorOptions() {
+      //颜色值修改
+      this.setOptionsColor();
+      //数据修改
+      this.setOptionsData();
+    },
+    // 颜色修改
+    setOptionsColor() {
+      const optionsSetup = this.optionsSetup;
+      const customColor = optionsSetup.customColor;
+      if (!customColor) return;
+      const arrColor = [];
+      for (let i = 0; i < customColor.length; i++) {
+        arrColor.push(customColor[i].color);
+      }
+      this.options.colors = arrColor;
+      this.options = Object.assign({}, this.options);
+      this.options.unit =optionsSetup.unit;
+      this.options.showValue =optionsSetup.showValue;
+    },
+    setOptionsData() {
+      const optionsData = this.optionsData; // 数据类型 静态 or 动态
+      optionsData.dataType == "staticData"
+        ? this.staticDataFn(optionsData.staticData)
+        : this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);
+    },
+    staticDataFn(val) {
+      // console.log("设置静态数据",this.options)
+      const staticData = typeof val == "string" ? JSON.parse(val) : val;
+      this.options.data=staticData;
+    },
+    dynamicDataFn(val, refreshTime) {
+      if (!val) return;
+      if (this.ispreview) {
+        this.getEchartData(val);
+        this.flagInter = setInterval(() => {
+          this.getEchartData(val);
+        }, refreshTime);
+      } else {
+        this.getEchartData(val);
+      }
+    },
+    getEchartData(val) {
+      const data = this.queryEchartsData(val);
+      data.then(res => {
+        this.renderingFn(res);
+      });
+    },
+    renderingFn(val) {
+      this.options.data=val;
+    }
+  }
+};
+
+</script>
+<style scoped lang="scss">
+.echarts {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+</style>
diff --git a/src/views/bigscreenDesigner/designer/widget/div/widgetBorderBox.vue b/src/views/bigscreenDesigner/designer/widget/div/widgetBorderBox.vue
index ad4528b..9e1506d 100644
--- a/src/views/bigscreenDesigner/designer/widget/div/widgetBorderBox.vue
+++ b/src/views/bigscreenDesigner/designer/widget/div/widgetBorderBox.vue
@@ -114,7 +114,6 @@ export default {
       handler(val) {
         this.options = val;
         this.optionsData = val.data;
-        this.setOptionsData();
       },
       deep: true,
     },
diff --git a/src/views/bigscreenDesigner/designer/widget/div/widgetDecoration.vue b/src/views/bigscreenDesigner/designer/widget/div/widgetDecoration.vue
new file mode 100644
index 0000000..738daad
--- /dev/null
+++ b/src/views/bigscreenDesigner/designer/widget/div/widgetDecoration.vue
@@ -0,0 +1,220 @@
+<!--
+ 装饰图
+-->
+<template>
+    <dv-decoration-12  :style="styleColor"
+                       :color="transStyle.color"
+                       :dur="transStyle.dur"
+                       :reverse="transStyle.reverse"
+                       :scanDur="transStyle.scanDur"
+                       :haloDur="transStyle.haloDur"
+                       v-if="styleColor.divClass === 'dvDecoration12'" ></dv-decoration-12>
+    <dv-decoration-2 :style="styleColor" :color="transStyle.color" :dur="transStyle.dur"  :reverse="transStyle.reverse"
+                     v-else-if="styleColor.divClass === 'dvDecoration2'">{{transStyle.title}}</dv-decoration-2>
+    <dv-decoration-3 :style="styleColor" :color="transStyle.color" :dur="transStyle.dur"  :reverse="transStyle.reverse"
+                     v-else-if="styleColor.divClass === 'dvDecoration3'">{{transStyle.title}}</dv-decoration-3>
+    <dv-decoration-4 :style="styleColor" :color="transStyle.color" :dur="transStyle.dur"  :reverse="transStyle.reverse"
+                     v-else-if="styleColor.divClass === 'dvDecoration4'">{{transStyle.title}}</dv-decoration-4>
+    <dv-decoration-5 :style="styleColor" :color="transStyle.color" :dur="transStyle.dur"  :reverse="transStyle.reverse"
+                     v-else-if="styleColor.divClass === 'dvDecoration5'">{{transStyle.title}}</dv-decoration-5>
+    <dv-decoration-6 :style="styleColor" :color="transStyle.color" :dur="transStyle.dur"  :reverse="transStyle.reverse"
+                     v-else-if="styleColor.divClass === 'dvDecoration6'">{{transStyle.title}}</dv-decoration-6>
+    <dv-decoration-7 :style="styleColor" :color="transStyle.color" :dur="transStyle.dur"  :reverse="transStyle.reverse"
+                     v-else-if="styleColor.divClass === 'dvDecoration7'">{{transStyle.title}}</dv-decoration-7>
+    <dv-decoration-8 :style="styleColor" :color="transStyle.color" :dur="transStyle.dur"  :reverse="transStyle.reverse"
+                     v-else-if="styleColor.divClass === 'dvDecoration8'"   >{{transStyle.title}}</dv-decoration-8>
+    <dv-decoration-9 :style="styleColor" :color="transStyle.color" :dur="transStyle.dur"  :reverse="transStyle.reverse"
+                     v-else-if="styleColor.divClass === 'dvDecoration9'">{{transStyle.title}}<p v-if="transStyle.title!=null && transStyle.title!=''">%</p>  </dv-decoration-9>
+    <dv-decoration-10 :style="styleColor" :color="transStyle.color" :dur="transStyle.dur"  :reverse="transStyle.reverse"
+                      v-else-if="styleColor.divClass === 'dvDecoration10'">{{transStyle.title}}</dv-decoration-10>
+    <dv-decoration-11 :style="styleColor" :color="transStyle.color" :dur="transStyle.dur"  :reverse="transStyle.reverse"
+                      v-else-if="transStyle.divClass === 'dvDecoration11'">{{transStyle.title}}</dv-decoration-11>
+    <dv-decoration-1  :style="styleColor"   :color="transStyle.color" :dur="transStyle.dur"  :reverse="transStyle.reverse"
+                      v-else="styleColor.divClass === 'dvDecoration1'"> {{transStyle.title}}</dv-decoration-1>
+</template>
+<script>
+import decoration1 from "@jiaminghi/data-view/lib/components/decoration1";
+import decoration2 from "@jiaminghi/data-view/lib/components/decoration2";
+import decoration3 from "@jiaminghi/data-view/lib/components/decoration3";
+import decoration4 from "@jiaminghi/data-view/lib/components/decoration4";
+import decoration5 from "@jiaminghi/data-view/lib/components/decoration5";
+import decoration6 from "@jiaminghi/data-view/lib/components/decoration6";
+import decoration7 from "@jiaminghi/data-view/lib/components/decoration7";
+import decoration8 from "@jiaminghi/data-view/lib/components/decoration8";
+import decoration9 from "@jiaminghi/data-view/lib/components/decoration9";
+import decoration10 from "@jiaminghi/data-view/lib/components/decoration10";
+import decoration11 from "@jiaminghi/data-view/lib/components/decoration11";
+import decoration12 from "@jiaminghi/data-view/lib/components/decoration12";
+Vue.use(decoration1)
+Vue.use(decoration2)
+Vue.use(decoration3)
+Vue.use(decoration4)
+Vue.use(decoration5)
+Vue.use(decoration6)
+Vue.use(decoration7)
+Vue.use(decoration8)
+Vue.use(decoration9)
+Vue.use(decoration10)
+Vue.use(decoration11)
+Vue.use(decoration12)
+export default {
+  name: "WidgetDecoration",
+  components: {
+  },
+  props: {
+    value: Object,
+    ispreview: Boolean,
+  },
+  data() {
+    return {
+      options: {},
+      optionsData: {},
+      oldDecoration1Value:"",
+      decorationHwMap:{
+        dvDecoration1:{
+          width:250,
+          height:50,
+        },
+        dvDecoration2:{
+          width:200,
+          height:50,
+        },
+        dvDecoration2f:{
+          width:50,
+          height:200,
+        },
+        dvDecoration3:{
+          width:250,
+          height:30,
+        },
+        dvDecoration4:{
+          width:50,
+          height:150,
+        },
+        dvDecoration4f:{
+          width:250,
+          height:50,
+        },
+        dvDecoration5:{
+          width:400,
+          height:50,
+        },
+        dvDecoration6:{
+          width:300,
+          height:30,
+        },
+        dvDecoration7:{
+          width:150,
+          height:30,
+        },
+        dvDecoration8:{
+          width:300,
+          height:50,
+        },
+        dvDecoration9:{
+          width:300,
+          height:300,
+        },
+        dvDecoration10:{
+          width:300,
+          height:70,
+        },
+        dvDecoration11:{
+          width:200,
+          height:60,
+        },
+        dvDecoration12:{
+          width:300,
+          height:300,
+        },
+      }
+    };
+  },
+  computed: {
+    transStyle() {
+      let transStyleObj = this.objToOne(this.options);
+      let color = [];
+      if(!this.isBlankObj(transStyleObj)){
+        const  colorOne = transStyleObj.colorOne;
+        if(!this.isBlankObj(colorOne)){
+          color.push(colorOne);
+        }
+        const colorTwo = transStyleObj.colorTwo;
+        if(!this.isBlankObj(colorTwo)){
+          color.push(colorTwo);
+        }
+        transStyleObj.color = color;
+      }
+      return transStyleObj;
+    },
+    styleColor() {
+      const divTypeValue = this.isBlank(this.transStyle.divType)?"dv-decoration-1":this.transStyle.divType;
+      return {
+        position: this.ispreview ? "absolute" : "static",
+        divClass: divTypeValue,
+        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;
+      },
+      deep: true,
+    },
+    'value.setup.divType':{
+      handler(val) {
+        this.setDivType(val);
+      },
+      //immediate:true,首次绑定时候是否执行
+      deep: true,
+    }
+  },
+  mounted() {
+    this.options = this.value;
+  },
+  methods: {
+    // 修改options属性
+    // editorOptions(val) {
+    //   this.setDivType(val);
+    // },
+    setDivType(dvDecoration){
+      if(this.isNotBlank(dvDecoration) && this.oldDecoration1Value!==dvDecoration){
+        let decorationHwMap = this.decorationHwMap;
+        console.log(this.transStyle.reverse,dvDecoration+"f",decorationHwMap[dvDecoration+"f"]);
+       //   console.log(this.options.position);
+        if(this.transStyle.reverse && this.isNotBlankObj(decorationHwMap[dvDecoration+"f"])){
+          // console.log(decorationHwMap[dvDecoration+"f"]);
+          this.options.position.height = decorationHwMap[dvDecoration+"f"].height;
+          this.options.position.width = decorationHwMap[dvDecoration+"f"].width;
+        }else{
+          this.options.position.height=decorationHwMap[dvDecoration].height;
+          this.options.position.width=decorationHwMap[dvDecoration].width;
+        }
+        this.oldDecoration1Value = dvDecoration;
+      }
+    }
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.div {
+  width: 100%;
+  height: 100%;
+  border: 2em;
+  border-color: aqua;
+  overflow: hidden;
+}
+.div_Style {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+</style>
diff --git a/src/views/bigscreenDesigner/designer/widget/temp.vue b/src/views/bigscreenDesigner/designer/widget/temp.vue
index 9efaac9..50b61e2 100644
--- a/src/views/bigscreenDesigner/designer/widget/temp.vue
+++ b/src/views/bigscreenDesigner/designer/widget/temp.vue
@@ -45,6 +45,8 @@ import widgetDecorate from "./decorate/decorate.vue";
 // import widgetDiv from "./div/widgetDiv.vue";
 import widgetBorderBox from "./div/widgetBorderBox.vue";
 import widgetProgress from "./percent/widgetProgress";
+import widgetDecoration from "./div/widgetDecoration.vue";
+import widgetCapsuleCart from "./bar/widgetCapsuleChart.vue";
 
 export default {
   name: "WidgetTemp",
@@ -82,6 +84,8 @@ export default {
     widgetRadar,
     widgetBarLineStackChart,
     widgetBorderBox,
+    widgetDecoration,
+    widgetCapsuleCart,
     widgetProgress
   },
   model: {
diff --git a/src/views/bigscreenDesigner/designer/widget/text/widgetMarquee.vue b/src/views/bigscreenDesigner/designer/widget/text/widgetMarquee.vue
index 4c9ea4c..bc4bb51 100644
--- a/src/views/bigscreenDesigner/designer/widget/text/widgetMarquee.vue
+++ b/src/views/bigscreenDesigner/designer/widget/text/widgetMarquee.vue
@@ -1,12 +1,14 @@
 <template>
   <div class="text" :style="styleColor">
     <marquee behavior="" :direction="styleColor.direction">{{
-      styleColor.text
+        showText
     }}</marquee>
   </div>
 </template>
 
 <script>
+import {mapState} from "vuex";
+
 export default {
   name: "WidgetMarquee",
   components: {},
@@ -20,6 +22,7 @@ export default {
     };
   },
   computed: {
+    ...mapState('dataSource', ['staticData']),
     transStyle() {
       return this.objToOne(this.options);
     },
@@ -44,6 +47,10 @@ export default {
     },
     isBehavior() {
       return this.styleColor.marqueeSet ? "start()" : "stop()";
+    },
+    showText() {
+      const {text, slectedDataType} = this.transStyle;
+      return this.staticData[slectedDataType] || text;
     }
   },
   watch: {
diff --git a/src/views/bigscreenDesigner/designer/widget/text/widgetText.vue b/src/views/bigscreenDesigner/designer/widget/text/widgetText.vue
index 2314e87..e23d0e1 100644
--- a/src/views/bigscreenDesigner/designer/widget/text/widgetText.vue
+++ b/src/views/bigscreenDesigner/designer/widget/text/widgetText.vue
@@ -65,14 +65,6 @@ export default {
       const optionsData = this.optionsData; // 数据类型 静态 or 动态
       if (optionsData.dataType == "dynamicData") {
         this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);
-      } else {
-        console.log("静态数据",this,this.master,this.masterData);
-        //父数据不为空，
-        // if(this.isBlankObject(this.masterData)){
-        //
-        //
-        // }
-
       };
     },
     dynamicDataFn(val, refreshTime) {
diff --git a/src/views/bigscreenDesigner/designer/widget/widget.vue b/src/views/bigscreenDesigner/designer/widget/widget.vue
index fe92cb8..fd04ff5 100644
--- a/src/views/bigscreenDesigner/designer/widget/widget.vue
+++ b/src/views/bigscreenDesigner/designer/widget/widget.vue
@@ -49,12 +49,16 @@ import widgetDecorate from "./decorate/decorate.vue";
 import widgetImage from "./div/widgetImage.vue";
 import widgetSlider from "./div/widgetSlider.vue";
 import widgetBorderBox from "./div/widgetBorderBox.vue";
+import widgetDecoration from "./div/widgetDecoration.vue";
+import widgetCapsuleChart from "./bar/widgetCapsuleChart";
 import widgetProgress from "./percent/widgetProgress";
 
 export default {
   name: "Widget",
   components: {
     widgetDecorate,
+    widgetDecoration,
+    widgetCapsuleChart,
     // widgetDiv,
     widgetBorderBox,
     widgetHref,
--
libgit2 0.22.2