From f3ef57e5084d439a4f7439a4125378eb19378f92 Mon Sep 17 00:00:00 2001
From: qianbao <qianbaoqianbao>
Date: Mon, 5 Dec 2022 23:35:22 +0800
Subject: [PATCH] 1、添加滚动排名图 2、添加水位图 3、胶囊柱图修改 4、添加翻牌

---
 src/views/bigscreenDesigner/designer/tools/configure/div/widget-water-level-pond.js       | 134 --------------------------------------------------------------------------------------------------------------------------------------
 src/views/bigscreenDesigner/designer/tools/configure/texts/widget-digital-flop.js         | 159 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/views/bigscreenDesigner/designer/tools/configure/texts/widget-iframe.js               |   2 +-
 src/views/bigscreenDesigner/designer/tools/configure/texts/widget-scroll-ranking-board.js | 191 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/views/bigscreenDesigner/designer/tools/configure/texts/widget-water-level-pond.js     | 142 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/views/bigscreenDesigner/designer/tools/main.js                                        |  13 ++++++++-----
 src/views/bigscreenDesigner/designer/widget/div/widgetWaterLevelPond.vue                  | 116 --------------------------------------------------------------------------------------------------------------------
 src/views/bigscreenDesigner/designer/widget/temp.vue                                      |   8 ++++++--
 src/views/bigscreenDesigner/designer/widget/text/widgetDigitalFlop.vue                    | 153 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/views/bigscreenDesigner/designer/widget/text/widgetScrollRankingBoard.vue             | 146 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/views/bigscreenDesigner/designer/widget/text/widgetWaterLevelPond.vue                 | 118 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/views/bigscreenDesigner/designer/widget/widget.vue                                    |   8 ++++++--
 12 files changed, 930 insertions(+), 260 deletions(-)
 delete mode 100644 src/views/bigscreenDesigner/designer/tools/configure/div/widget-water-level-pond.js
 create mode 100644 src/views/bigscreenDesigner/designer/tools/configure/texts/widget-digital-flop.js
 create mode 100644 src/views/bigscreenDesigner/designer/tools/configure/texts/widget-scroll-ranking-board.js
 create mode 100644 src/views/bigscreenDesigner/designer/tools/configure/texts/widget-water-level-pond.js
 delete mode 100644 src/views/bigscreenDesigner/designer/widget/div/widgetWaterLevelPond.vue
 create mode 100644 src/views/bigscreenDesigner/designer/widget/text/widgetDigitalFlop.vue
 create mode 100644 src/views/bigscreenDesigner/designer/widget/text/widgetScrollRankingBoard.vue
 create mode 100644 src/views/bigscreenDesigner/designer/widget/text/widgetWaterLevelPond.vue

diff --git a/src/views/bigscreenDesigner/designer/tools/configure/div/widget-water-level-pond.js b/src/views/bigscreenDesigner/designer/tools/configure/div/widget-water-level-pond.js
deleted file mode 100644
index e0e4185..0000000
--- a/src/views/bigscreenDesigner/designer/tools/configure/div/widget-water-level-pond.js
+++ /dev/null
@@ -1,134 +0,0 @@
-/*
- * @Descripttion: 水位图
- */
-export const widgetWaterLevelPond=  {
-  code: 'widget-water-level-pond',
-  type: 'html',
-  tabName: '图层',
-  label: '水位图',
-  icon: 'iconshouji',
-  options: {
-    // 配置
-    setup: [
-      {
-        type: 'el-input-text',
-        label: '图层名称',
-        name: 'layerName',
-        required: false,
-        placeholder: '',
-        value: '水位图',
-      },
-      {
-        type: 'el-input-text',
-        label: '水位数据',
-        name: 'waterLevelPondDataText',
-        required: false,
-        placeholder: '',
-        value: '0',
-      },
-      {
-        type: 'el-select-static',
-        label: '主数据源数据',
-        name: 'slectedDataType',
-        require: false,
-        placeholder: '',
-        selectOptions: [],
-        value: '',
-      },
-      {
-        type: 'el-select',
-        label: '水位图形状',
-        name: 'shape',
-        required: false,
-        placeholder: '',
-        selectOptions: [
-          {code: 'rect', name: '矩形'},
-          {code: 'roundRect', name: '圆角矩形'},
-          {code: 'round', name: '圆形'}
-        ],
-        value: 'rect'
-      },
-      {
-        type: 'el-input-number',
-        label: '波浪数量',
-        name: 'waveNum',
-        required: false,
-        placeholder: '',
-        value: 1,
-      },
-      {
-        type: 'el-input-number',
-        label: '波浪高度',
-        name: 'waveHeight',
-        required: false,
-        placeholder: '',
-        value: 40,
-      },
-      {
-        type: 'el-slider',
-        label: '波浪透明度',
-        name: 'waveOpacity',
-        required: false,
-        placeholder: '',
-        value: 0.4,
-      },
-      {
-        type: 'el-input-text',
-        label: '信息格式化',
-        name: 'formatter',
-        required: false,
-        placeholder: '',
-        value: '{value}%',
-      },
-      [{
-        name: '水位图配色',
-        list: [
-          {
-            type: 'customColor',
-            label: '',
-            name: 'customColor',
-            required: false,
-            value: [{ color: '#1E90FF' }, { color: '#96bfff' }],
-          },
-        ],
-      }],
-    ],
-    // 数据
-    data: [],
-    // 坐标
-    position: [
-      {
-        type: 'el-input-number',
-        label: '左边距',
-        name: 'left',
-        required: false,
-        placeholder: '',
-        value: 10,
-      },
-      {
-        type: 'el-input-number',
-        label: '上边距',
-        name: 'top',
-        required: false,
-        placeholder: '',
-        value: 10,
-      },
-      {
-        type: 'el-input-number',
-        label: '宽度',
-        name: 'width',
-        required: false,
-        placeholder: '该容器在1920px大屏中的宽度',
-        value: 200,
-      },
-      {
-        type: 'el-input-number',
-        label: '高度',
-        name: 'height',
-        required: false,
-        placeholder: '该容器在1080px大屏中的高度',
-        value: 350,
-      },
-    ],
-  }
-}
diff --git a/src/views/bigscreenDesigner/designer/tools/configure/texts/widget-digital-flop.js b/src/views/bigscreenDesigner/designer/tools/configure/texts/widget-digital-flop.js
new file mode 100644
index 0000000..f3bd9c4
--- /dev/null
+++ b/src/views/bigscreenDesigner/designer/tools/configure/texts/widget-digital-flop.js
@@ -0,0 +1,159 @@
+/*
+ * @Descripttion: 水位图
+ */
+export const widgetDigitalFlop=  {
+  code: 'widget-digital-flop',
+  type: 'text',
+  tabName: '文本栏',
+  label: '数字翻牌器',
+  icon: 'iconshujujieruKafkajiqun',
+  options: {
+    // 配置
+    setup: [
+      {
+        type: 'el-input-text',
+        label: '图层名称',
+        name: 'layerName',
+        required: false,
+        placeholder: '',
+        value: '数字翻牌器',
+      },
+      {
+        type: 'el-input-text',
+        label: '数字数值',
+        name: 'numberText',
+        required: false,
+        placeholder: '',
+        value: '0',
+      },
+      {
+        type: 'el-select-static',
+        label: '主数据源数据',
+        name: 'slectedDataType',
+        require: false,
+        placeholder: '',
+        selectOptions: [],
+        value: '',
+      },
+      {
+        type: 'el-input-text',
+        label: '内容模版',
+        name: 'content',
+        required: false,
+        placeholder: '',
+        value: '数字{nt}',
+      },
+      {
+        type: 'el-switch',
+        label: '千位符显示',
+        name: 'isFormatterNum',
+        required: false,
+        placeholder: '',
+        value: false
+      },
+      {
+        type: 'el-input-number',
+        label: '小数位数',
+        name: 'toFixed',
+        required: false,
+        placeholder: '',
+        value: 0,
+      },
+      {
+        type: 'el-select',
+        label: '水平对齐方式',
+        name: 'textAlign',
+        required: false,
+        placeholder: '',
+        selectOptions: [
+          {code: 'center', name: '居中'},
+          {code: 'left', name: '左对齐'},
+          {code: 'right', name: '右对齐'}
+        ],
+        value: 'center'
+      },
+      {
+        type: 'el-input-number',
+        label: '动效帧数',
+        name: 'animationFrame',
+        required: false,
+        placeholder: '',
+        value: 100,
+      },
+      [
+        {
+          name: '文字样式设置',
+          list: [
+            {
+              type: 'vue-color',
+              label: '颜色',
+              name: 'fill',
+              required: false,
+              placeholder: '',
+              value: '#3de7c9'
+            },
+            {
+              type: 'el-input-number',
+              label: '字体大小',
+              name: 'fontSize',
+              required: false,
+              placeholder: '',
+              value: 30,
+            },
+            {
+              type: 'el-select',
+              label: '字体粗细',
+              name: 'fontWeight',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                {code: 'normal', name: '正常'},
+                {code: 'bold', name: '粗体'},
+                {code: 'bolder', name: '更粗'},
+                {code: 'lighter', name: '更细'},
+              ],
+              value: 'normal'
+            },
+          ],
+        }
+      ]
+    ],
+    // 数据
+    data: [],
+    // 坐标
+    position: [
+      {
+        type: 'el-input-number',
+        label: '左边距',
+        name: 'left',
+        required: false,
+        placeholder: '',
+        value: 10,
+      },
+      {
+        type: 'el-input-number',
+        label: '上边距',
+        name: 'top',
+        required: false,
+        placeholder: '',
+        value: 10,
+      },
+      {
+        type: 'el-input-number',
+        label: '宽度',
+        name: 'width',
+        required: false,
+        placeholder: '该容器在1920px大屏中的宽度',
+        value: 200,
+      },
+      {
+        type: 'el-input-number',
+        label: '高度',
+        name: 'height',
+        required: false,
+        placeholder: '该容器在1080px大屏中的高度',
+        value: 200,
+      },
+    ],
+  }
+}
diff --git a/src/views/bigscreenDesigner/designer/tools/configure/texts/widget-iframe.js b/src/views/bigscreenDesigner/designer/tools/configure/texts/widget-iframe.js
index e56cc30..da3c8e6 100644
--- a/src/views/bigscreenDesigner/designer/tools/configure/texts/widget-iframe.js
+++ b/src/views/bigscreenDesigner/designer/tools/configure/texts/widget-iframe.js
@@ -29,7 +29,7 @@ export const widgetIframe = {
         name: 'iframeAdress',
         required: false,
         placeholder: '',
-        value: 'https://ajreport.beliefteam.cn/index.html',
+        value: '',
       },
     ],
     // 数据
diff --git a/src/views/bigscreenDesigner/designer/tools/configure/texts/widget-scroll-ranking-board.js b/src/views/bigscreenDesigner/designer/tools/configure/texts/widget-scroll-ranking-board.js
new file mode 100644
index 0000000..48074aa
--- /dev/null
+++ b/src/views/bigscreenDesigner/designer/tools/configure/texts/widget-scroll-ranking-board.js
@@ -0,0 +1,191 @@
+/*
+ * @Descripttion: 排名轮播表
+ */
+export const widgetScrollRankingBoard=  {
+  code: 'widget-scroll-ranking-board',
+  type: 'text',
+  tabName: '文本栏',
+  label: '排名轮播表',
+  icon: 'icon511tongji_shutu',
+  options: {
+    // 配置
+    setup: [
+      {
+        type: 'el-input-text',
+        label: '图层名称',
+        name: 'layerName',
+        required: false,
+        placeholder: '',
+        value: '排名轮播表',
+      },
+      {
+        type: 'el-input-number',
+        label: '表行数',
+        name: 'rowNum',
+        required: false,
+        placeholder: '',
+        value: 5,
+      },
+      {
+        type: 'el-input-number',
+        label: '滚动间隔(毫秒)',
+        name: 'waitTime',
+        required: false,
+        placeholder: '',
+        value: 2500,
+      },
+      {
+        type: 'el-select',
+        label: '动画效果',
+        name: 'carousel',
+        required: false,
+        placeholder: '',
+        selectOptions: [
+          {code: 'single', name: '单条'},
+          {code: 'page', name: '整页'}
+        ],
+        value: 'single'
+      },
+      {
+        type: 'el-input-text',
+        label: '数值单位',
+        name: 'unit',
+        required: false,
+        placeholder: '',
+        value: '',
+      },
+      {
+        type: 'el-switch',
+        label: '自动排序',
+        name: 'sort',
+        required: false,
+        placeholder: '',
+        value: true
+      },
+      {
+        type: 'vue-color',
+        label: '背景颜色',
+        name: 'background',
+        required: false,
+        placeholder: '',
+        value: ''
+      },
+    ],
+    // 数据
+    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: 30000
+      },
+      {
+        type: 'el-button',
+        label: '静态数据',
+        name: 'staticData',
+        required: false,
+        placeholder: '',
+        relactiveDom: 'dataType',
+        relactiveDomValue: 'staticData',
+        value: [
+          {
+            name: '周口',
+            value: 55
+          },
+          {
+            name: '南阳',
+            value: 120
+          },
+          {
+            name: '西峡',
+            value: 78
+          },
+          {
+            name: '驻马店',
+            value: 66
+          },
+          {
+            name: '新乡',
+            value: 80
+          },
+          {
+            name: '信阳',
+            value: 45
+          },
+          {
+            name: '漯河',
+            value: 29
+          }
+        ],
+      },
+      {
+        type: 'dycustComponents',
+        label: '',
+        name: 'dynamicData',
+        required: false,
+        placeholder: '',
+        relactiveDom: 'dataType',
+        relactiveDomValue: 'dynamicData',
+        chartType: 'widget-scroll-ranking-board',
+        dictKey: 'TEXT_PROPERTIES',
+        value: '',
+      },
+    ],
+    // 坐标
+    position: [
+      {
+        type: 'el-input-number',
+        label: '左边距',
+        name: 'left',
+        required: false,
+        placeholder: '',
+        value: 10,
+      },
+      {
+        type: 'el-input-number',
+        label: '上边距',
+        name: 'top',
+        required: false,
+        placeholder: '',
+        value: 10,
+      },
+      {
+        type: 'el-input-number',
+        label: '宽度',
+        name: 'width',
+        required: false,
+        placeholder: '该容器在1920px大屏中的宽度',
+        value: 600,
+      },
+      {
+        type: 'el-input-number',
+        label: '高度',
+        name: 'height',
+        required: false,
+        placeholder: '该容器在1080px大屏中的高度',
+        value: 300,
+      },
+    ],
+  }
+}
diff --git a/src/views/bigscreenDesigner/designer/tools/configure/texts/widget-water-level-pond.js b/src/views/bigscreenDesigner/designer/tools/configure/texts/widget-water-level-pond.js
new file mode 100644
index 0000000..f3cd5c7
--- /dev/null
+++ b/src/views/bigscreenDesigner/designer/tools/configure/texts/widget-water-level-pond.js
@@ -0,0 +1,142 @@
+/*
+ * @Descripttion: 水位图
+ */
+export const widgetWaterLevelPond=  {
+  code: 'widget-water-level-pond',
+  type: 'text',
+  tabName: '文本栏',
+  label: '水位图',
+  icon: 'iconshouji',
+  options: {
+    // 配置
+    setup: [
+      {
+        type: 'el-input-text',
+        label: '图层名称',
+        name: 'layerName',
+        required: false,
+        placeholder: '',
+        value: '水位图',
+      },
+      {
+        type: 'el-input-text',
+        label: '水位数据',
+        name: 'waterLevelPondDataText',
+        required: false,
+        placeholder: '',
+        value: '0',
+      },
+      {
+        type: 'el-select-static',
+        label: '主数据源数据',
+        name: 'slectedDataType',
+        require: false,
+        placeholder: '',
+        selectOptions: [],
+        value: '',
+      },
+      {
+        type: 'el-select',
+        label: '水位图形状',
+        name: 'shape',
+        required: false,
+        placeholder: '',
+        selectOptions: [
+          {code: 'rect', name: '矩形'},
+          {code: 'roundRect', name: '圆角矩形'},
+          {code: 'round', name: '圆形'}
+        ],
+        value: 'rect'
+      },
+      {
+        type: 'el-input-number',
+        label: '波浪数量',
+        name: 'waveNum',
+        required: false,
+        placeholder: '',
+        value: 1,
+      },
+      {
+        type: 'el-input-number',
+        label: '波浪高度',
+        name: 'waveHeight',
+        required: false,
+        placeholder: '',
+        value: 40,
+      },
+      {
+        type: 'el-slider',
+        label: '波浪透明度',
+        name: 'waveOpacity',
+        required: false,
+        placeholder: '',
+        value: 0.4,
+      },
+      {
+        type: 'el-input-text',
+        label: '信息格式化',
+        name: 'formatter',
+        required: false,
+        placeholder: '',
+        value: '{value}%',
+      },
+      {
+        type: 'vue-color',
+        label: '背景颜色',
+        name: 'background',
+        required: false,
+        placeholder: '',
+        value: ''
+      },
+      [{
+        name: '水位图配色',
+        list: [
+          {
+            type: 'customColor',
+            label: '',
+            name: 'customColor',
+            required: false,
+            value: [{ color: '#1E90FF' }, { color: '#96bfff' }],
+          },
+        ],
+      }],
+    ],
+    // 数据
+    data: [],
+    // 坐标
+    position: [
+      {
+        type: 'el-input-number',
+        label: '左边距',
+        name: 'left',
+        required: false,
+        placeholder: '',
+        value: 10,
+      },
+      {
+        type: 'el-input-number',
+        label: '上边距',
+        name: 'top',
+        required: false,
+        placeholder: '',
+        value: 10,
+      },
+      {
+        type: 'el-input-number',
+        label: '宽度',
+        name: 'width',
+        required: false,
+        placeholder: '该容器在1920px大屏中的宽度',
+        value: 200,
+      },
+      {
+        type: 'el-input-number',
+        label: '高度',
+        name: 'height',
+        required: false,
+        placeholder: '该容器在1080px大屏中的高度',
+        value: 350,
+      },
+    ],
+  }
+}
diff --git a/src/views/bigscreenDesigner/designer/tools/main.js b/src/views/bigscreenDesigner/designer/tools/main.js
index 48b1aae..d7f4502 100644
--- a/src/views/bigscreenDesigner/designer/tools/main.js
+++ b/src/views/bigscreenDesigner/designer/tools/main.js
@@ -43,14 +43,15 @@ import { widgetHeatmap } from "./configure/heatmap/widget-heatmap";
 import { widgetRadar } from "./configure/radarCharts/widget-radar";
 import { widgetBarLineStack } from "./configure/barlineCharts/widget-bar-line-stack";
 import { widgetProgress } from "./configure/percentCharts/widget-progress";
-import {widgetWaterLevelPond} from "./configure/div/widget-water-level-pond";
+import {widgetWaterLevelPond} from "./configure/texts/widget-water-level-pond";
+import {widgetDigitalFlop} from "./configure/texts/widget-digital-flop";
+import {widgetScrollRankingBoard} from "./configure/texts/widget-scroll-ranking-board";
 
 
 export const widgetTool = [
   //图层
   widgetBorderBox,
   widgetDecoration,
-  widgetCapsuleChart,
   // widgetDiv,
   widgetImage,
   widgetSliders,
@@ -59,11 +60,15 @@ export const widgetTool = [
   widgetMarquee,
   widgetHref,
   widgetTime,
+  widgetIframe,
   widgetVideo,
+  widgetWaterLevelPond,
+  widgetDigitalFlop,
   widgetTable,
-  widgetIframe,
+  widgetScrollRankingBoard,
   //  widgetUniversal,
   widgetBarchart,
+  widgetCapsuleChart,
   widgetGradientBarchart,
   widgetLinechart,
   widgetBarlinechart,
@@ -87,6 +92,4 @@ export const widgetTool = [
   widgetRadar,
   widgetBarLineStack,
   widgetProgress,
-  widgetWaterLevelPond
-
 ]
diff --git a/src/views/bigscreenDesigner/designer/widget/div/widgetWaterLevelPond.vue b/src/views/bigscreenDesigner/designer/widget/div/widgetWaterLevelPond.vue
deleted file mode 100644
index e37e417..0000000
--- a/src/views/bigscreenDesigner/designer/widget/div/widgetWaterLevelPond.vue
+++ /dev/null
@@ -1,116 +0,0 @@
-<!--
-  胶囊柱图
--->
-<template>
-  <dv-water-level-pond :config="options" :style="styleObj"/>
-</template>
-<script>
-import waterLevelPond from "@jiaminghi/data-view/lib/components/waterLevelPond";
-import Vue from "vue";
-import {mapState} from "vuex";
-Vue.use(waterLevelPond)
-export default {
-  name: "WidgetWaterLevelPond",
-  props: {
-    value: Object,
-    ispreview: Boolean,
-  },
-  data() {
-    return {
-      //返回图标数据
-      options: {
-        data:[20],//水位位置
-        shape:'rect',//水位图形状
-        colors: [],//水位图配色
-        waveNum: 3,//波浪数量
-        waveHeight: 40,//波浪高度
-        waveOpacity: 40,//波浪透明度
-        formatter: '{value}%'//信息格式化
-      },
-      optionsStyle: {}, // 样式
-      optionsData: {}, // 数据
-      optionsCollapse: {}, // 图标属性
-      optionsSetup: {}
-    };
-  },
-  computed: {
-    ...mapState('dataSource', ['staticData']),
-    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.optionsSetup = val.setup;
-        this.editorOptions();
-      },
-      deep: true
-    }
-  },
-  created() {
-    this.optionsStyle = this.value.position;
-    this.optionsData = this.value.data;
-    this.optionsSetup = this.value.setup;
-    this.editorOptions();
-  },
-  methods: {
-    // 修改图标options属性
-    editorOptions() {
-      //颜色值修改
-      this.setOptionsColor();
-      //数据修改
-      this.setOptionsData();
-      //水位位置
-      this.showText();
-    },
-    // 颜色修改
-    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);
-    },
-    //水位位置
-    showText() {
-      const {slectedDataType,waterLevelPondDataText} = this.optionsSetup;
-      let datav = this.staticData[slectedDataType] || waterLevelPondDataText;
-      let dataArray = datav.toString().split(",");
-      this.options.data = dataArray;
-    },
-    // 数据修改
-    setOptionsData() {
-      const optionsSetup = this.optionsSetup;
-      this.options.shape=optionsSetup.shape;//水位图形状
-      this.options.waveHeight=optionsSetup.waveHeight;//波浪高度
-      let waveOpacity = optionsSetup.waveHeight||0;
-      this.options.waveOpacity= waveOpacity/100;//波浪透明度
-      this.options.formatter = optionsSetup.formatter;
-      this.options.waveNum = optionsSetup.waveNum;//波浪数量
-    },
-
-  }
-};
-
-</script>
-<style scoped lang="scss">
-.echarts {
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-}
-</style>
diff --git a/src/views/bigscreenDesigner/designer/widget/temp.vue b/src/views/bigscreenDesigner/designer/widget/temp.vue
index eb36d80..4d1138e 100644
--- a/src/views/bigscreenDesigner/designer/widget/temp.vue
+++ b/src/views/bigscreenDesigner/designer/widget/temp.vue
@@ -47,7 +47,9 @@ import widgetBorderBox from "./div/widgetBorderBox";
 import widgetProgress from "./percent/widgetProgress";
 import widgetDecoration from "./div/widgetDecoration";
 import widgetCapsuleChart from "./bar/widgetCapsuleChart";
-import widgetWaterLevelPond from "./div/widgetWaterLevelPond";
+import widgetWaterLevelPond from "./text/widgetWaterLevelPond";
+import widgetDigitalFlop from "./text/widgetDigitalFlop";
+import widgetScrollRankingBoard from "./text/widgetScrollRankingBoard";
 
 
 export default {
@@ -89,7 +91,9 @@ export default {
     widgetDecoration,
     widgetCapsuleChart,
     widgetProgress,
-    widgetWaterLevelPond
+    widgetWaterLevelPond,
+    widgetDigitalFlop,
+    widgetScrollRankingBoard
   },
   model: {
     prop: "value",
diff --git a/src/views/bigscreenDesigner/designer/widget/text/widgetDigitalFlop.vue b/src/views/bigscreenDesigner/designer/widget/text/widgetDigitalFlop.vue
new file mode 100644
index 0000000..84d50ee
--- /dev/null
+++ b/src/views/bigscreenDesigner/designer/widget/text/widgetDigitalFlop.vue
@@ -0,0 +1,153 @@
+<!--
+数字翻牌器
+-->
+<template>
+  <div id="widget-digital-flop" :style="styleObj">
+    <dv-digital-flop :config="options" :style="styleObj"/>
+  </div>
+</template>
+<script>
+
+import digitalFlop from "@jiaminghi/data-view/lib/components/digitalFlop";
+import {mapState} from "vuex";
+import Vue from "vue";
+Vue.use(digitalFlop);
+export default {
+  name: "WidgetDigitalFlop",
+  props: {
+    value: Object,
+    ispreview: Boolean,
+  },
+  data() {
+    return {
+      //返回图标数据
+      options: {
+        number:[],//数字数值
+        content:'数字{nt}',//number中的元素将被用于替换content内容模版中的{nt}标记，其替换顺序与模版标记的顺序一一对应：实际显示效果：'数字1,数字2,数字3,数字4'
+        toFixed: 0,//小数位数
+        textAlign: 'center',//水平对齐方式 textAlign用于设置文字的水平对齐方式，可选值为'center'|'left'|'right'，该值将覆盖style属性中的textAlign属性。
+        rowGap: 0,//行间距 当使用\n进行换行的时候，rowGap可以控制行间距
+        style: {
+          fontSize: 30,
+          fill: '#3de7c9'
+        },//可使用fill属性设置字体颜色、stroke属性设置字体描边颜色、fontSize属性设置文字大小
+        //formatter:this.formatterNum,//格式化数字	类型： Function,
+        animationCurve: 'easeOutCubic',   //动效曲线
+        animationFrame:50
+      },
+      config:{},
+      optionsStyle: {}, // 样式
+      optionsData: {}, // 数据
+      optionsCollapse: {}, // 图标属性
+      optionsSetup: {}
+    };
+  },
+  computed: {
+    ...mapState('dataSource', ['staticData']),
+    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.optionsSetup = val.setup;
+        this.editorOptions();
+      },
+      deep: true
+    }
+  },
+  created() {
+    this.optionsStyle = this.value.position;
+    this.optionsData = this.value.data;
+    this.optionsSetup = this.value.setup;
+    this.editorOptions();
+  },
+  methods: {
+    // 修改图标options属性
+    editorOptions() {
+      //数据修改
+      this.setOptionsData();
+      //显示内容
+      this.showText();
+      //字体样式
+      this.setFontStyle();
+    },
+    /*中间随机数量**/
+    randomExtend (minNum, maxNum) {
+      if (arguments.length === 1) {
+        return parseInt(Math.random() * minNum + 1, 10)
+      } else {
+        return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10)
+      }
+    },
+    //显示的内容
+    showText() {
+      const {slectedDataType,numberText} = this.optionsSetup;
+      let datav = this.staticData[slectedDataType] || numberText;
+      let dataArray = datav.toString().split(",");
+      const numArray=[];
+      if(this.isNotBlankArray(dataArray)){
+        dataArray.forEach(num=>{
+          numArray.push(parseInt(num));
+        });
+      }
+      // console.log("返回数据number",numArray);
+      this.options.number = numArray;
+    },
+    //字体修改
+    setFontStyle() {
+      const optionsSetup = this.optionsSetup;
+      const fontStyle = {};
+      fontStyle.fill=optionsSetup.fill;
+      fontStyle.fontSize=optionsSetup.fontSize;
+      fontStyle.fontWeight=optionsSetup.fontWeight;
+      this.options.style = fontStyle;
+    },
+    //千为分隔符
+    formatterNum (number) {
+      const numbers = number.toString().split('').reverse();
+      const segs = [];
+      while (numbers.length) segs.push(numbers.splice(0, 3).join(''));
+      return segs.join(',').split('').reverse().join('');
+    },
+    // 数据修改
+    setOptionsData() {
+
+      const optionsSetup = this.optionsSetup;
+      if(optionsSetup.isFormatterNum){
+        this.options.formatter=this.formatterNum;
+      }else{
+        this.options.formatter=undefined;
+      }
+      this.options.isFormatterNum=optionsSetup.isFormatterNum;//千分位显示
+      this.options.content=optionsSetup.content;
+      this.options.toFixed=optionsSetup.toFixed;
+      this.options.textAlign=optionsSetup.textAlign;
+      this.options.animationFrame=optionsSetup.animationFrame;
+      // this.options.rowGap=optionsSetup.rowGap;
+      const optionsDeep =this.deepClone(this.options);
+      // console.log("返回数据options",optionsDeep);
+      this.options={};
+      this.options=optionsDeep;
+    },
+  }
+};
+
+</script>
+<style scoped lang="scss">
+.echarts {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+</style>
diff --git a/src/views/bigscreenDesigner/designer/widget/text/widgetScrollRankingBoard.vue b/src/views/bigscreenDesigner/designer/widget/text/widgetScrollRankingBoard.vue
new file mode 100644
index 0000000..987dd80
--- /dev/null
+++ b/src/views/bigscreenDesigner/designer/widget/text/widgetScrollRankingBoard.vue
@@ -0,0 +1,146 @@
+<!--
+排名轮播表
+-->
+<template>
+  <div id="widget-scroll-ranking-board" :style="styleObj">
+    <dv-scroll-ranking-board :config="options" :style="styleObj"/>
+  </div>
+</template>
+<script>
+import Vue from "vue";
+import scrollRankingBoard from "@jiaminghi/data-view/lib/components/scrollRankingBoard";
+Vue.use(scrollRankingBoard)
+export default {
+  name: "WidgetScrollRankingBoard",
+  props: {
+    value: Object,
+    ispreview: Boolean,
+  },
+  data() {
+    const {valueFormatter} = this;
+    return {
+      //返回图标数据
+      options: {
+        data:[],//表数据
+        rowNum:'5',//表行数(显示)
+        waitTime: 2000,//轮播时间间隔(ms)
+        carousel: 'single',//轮播方式 'single'|'page'
+        unit: '',//数值单位
+        sort: true,//自动排序
+        isValueFormatter: true,//数值格式化
+        valueFormatter: valueFormatter//数值格式化
+
+      },
+      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.optionsSetup = val.setup;
+        this.editorOptions();
+      },
+      deep: true
+    }
+  },
+  created() {
+    this.optionsStyle = this.value.position;
+    this.optionsData = this.value.data;
+    this.optionsSetup = this.value.setup;
+    this.editorOptions();
+  },
+  methods: {
+    // 修改图标options属性
+    editorOptions() {
+      //配置修改
+      this.setOptionsConfig();
+      //数据修改
+      this.setOptionsData();
+    },
+    // 配置修改
+    setOptionsConfig() {
+      const optionsSetup = this.optionsSetup;
+      this.options.rowNum =optionsSetup.rowNum;
+      this.options.waitTime =optionsSetup.waitTime;
+      this.options.carousel =optionsSetup.carousel;
+      this.options.unit =optionsSetup.unit;
+      this.options.sort =optionsSetup.sort;
+      this.options.isValueFormatter =optionsSetup.isValueFormatter;
+      if(this.options.isValueFormatter){
+        this.options.valueFormatter= this.valueFormatter;
+      }else{
+        this.options.valueFormatter=undefined;
+      }
+    },
+    //数据类型
+    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;
+    },
+    valueFormatter ({ value }) {
+      // console.warn(arguments)
+      const reverseNumber = (value + '').split('').reverse()
+      let valueStr = ''
+
+      while (reverseNumber.length) {
+        const seg = reverseNumber.splice(0, 3).join('')
+        valueStr += seg
+        if (seg.length === 3) valueStr += ','
+      }
+      return valueStr.split('').reverse().join('')
+    }
+  }
+};
+
+</script>
+<style scoped lang="scss">
+.echarts {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+</style>
diff --git a/src/views/bigscreenDesigner/designer/widget/text/widgetWaterLevelPond.vue b/src/views/bigscreenDesigner/designer/widget/text/widgetWaterLevelPond.vue
new file mode 100644
index 0000000..fdbbacb
--- /dev/null
+++ b/src/views/bigscreenDesigner/designer/widget/text/widgetWaterLevelPond.vue
@@ -0,0 +1,118 @@
+<!--
+  水位图
+-->
+<template>
+  <div id="widget-water-pond-level" :style="styleObj">
+    <dv-water-level-pond :config="options" :style="styleObj"/>
+  </div>
+</template>
+<script>
+import waterLevelPond from "@jiaminghi/data-view/lib/components/waterLevelPond";
+import Vue from "vue";
+import {mapState} from "vuex";
+Vue.use(waterLevelPond)
+export default {
+  name: "WidgetWaterLevelPond",
+  props: {
+    value: Object,
+    ispreview: Boolean,
+  },
+  data() {
+    return {
+      //返回图标数据
+      options: {
+        data:[20],//水位位置
+        shape:'rect',//水位图形状
+        colors: [],//水位图配色
+        waveNum: 3,//波浪数量
+        waveHeight: 40,//波浪高度
+        waveOpacity: 40,//波浪透明度
+        formatter: '{value}%'//信息格式化
+      },
+      optionsStyle: {}, // 样式
+      optionsData: {}, // 数据
+      optionsCollapse: {}, // 图标属性
+      optionsSetup: {}
+    };
+  },
+  computed: {
+    ...mapState('dataSource', ['staticData']),
+    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.optionsSetup = val.setup;
+        this.editorOptions();
+      },
+      deep: true
+    }
+  },
+  created() {
+    this.optionsStyle = this.value.position;
+    this.optionsData = this.value.data;
+    this.optionsSetup = this.value.setup;
+    this.editorOptions();
+  },
+  methods: {
+    // 修改图标options属性
+    editorOptions() {
+      //颜色值修改
+      this.setOptionsColor();
+      //数据修改
+      this.setOptionsData();
+      //水位位置
+      this.showText();
+    },
+    // 颜色修改
+    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);
+    },
+    //水位位置
+    showText() {
+      const {slectedDataType,waterLevelPondDataText} = this.optionsSetup;
+      let datav = this.staticData[slectedDataType] || waterLevelPondDataText;
+      let dataArray = datav.toString().split(",");
+      this.options.data = dataArray;
+    },
+    // 数据修改
+    setOptionsData() {
+      const optionsSetup = this.optionsSetup;
+      this.options.shape=optionsSetup.shape;//水位图形状
+      this.options.waveHeight=optionsSetup.waveHeight;//波浪高度
+      let waveOpacity = optionsSetup.waveHeight||0;
+      this.options.waveOpacity= waveOpacity/100;//波浪透明度
+      this.options.formatter = optionsSetup.formatter;
+      this.options.waveNum = optionsSetup.waveNum;//波浪数量
+    },
+
+  }
+};
+
+</script>
+<style scoped lang="scss">
+.echarts {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+</style>
diff --git a/src/views/bigscreenDesigner/designer/widget/widget.vue b/src/views/bigscreenDesigner/designer/widget/widget.vue
index aeb9d07..92feee3 100644
--- a/src/views/bigscreenDesigner/designer/widget/widget.vue
+++ b/src/views/bigscreenDesigner/designer/widget/widget.vue
@@ -52,7 +52,9 @@ import widgetBorderBox from "./div/widgetBorderBox.vue";
 import widgetDecoration from "./div/widgetDecoration.vue";
 import widgetCapsuleChart from "./bar/widgetCapsuleChart";
 import widgetProgress from "./percent/widgetProgress";
-import widgetWaterLevelPond from "./div/widgetWaterLevelPond";
+import widgetWaterLevelPond from "./text/widgetWaterLevelPond";
+import widgetDigitalFlop from "./text/widgetDigitalFlop";
+import widgetScrollRankingBoard from "./text/widgetScrollRankingBoard";
 
 export default {
   name: "Widget",
@@ -93,7 +95,9 @@ export default {
     widgetRadar,
     widgetBarLineStackChart,
     widgetProgress,
-    widgetWaterLevelPond
+    widgetWaterLevelPond,
+    widgetDigitalFlop,
+    widgetScrollRankingBoard
   },
   model: {
     prop: "value",
--
libgit2 0.22.2