qiangmj / report-ui

Commit f3ef57e5084d439a4f7439a4125378eb19378f92

Authored by qianbao
1 parent 5cedf203

1、添加滚动排名图 

2、添加水位图
3、胶囊柱图修改
4、添加翻牌
Inline Side-by-side
Showing 10 changed files with 684 additions and 14 deletions
src/views/bigscreenDesigner/designer/tools/configure/texts/widget-digital-flop.js 0 → 100644
  View file @f3ef57e
  1 +/*
  2 + * @Descripttion: 水位图
  3 + */
  4 +export const widgetDigitalFlop= {
  5 + code: 'widget-digital-flop',
  6 + type: 'text',
  7 + tabName: '文本栏',
  8 + label: '数字翻牌器',
  9 + icon: 'iconshujujieruKafkajiqun',
  10 + options: {
  11 + // 配置
  12 + setup: [
  13 + {
  14 + type: 'el-input-text',
  15 + label: '图层名称',
  16 + name: 'layerName',
  17 + required: false,
  18 + placeholder: '',
  19 + value: '数字翻牌器',
  20 + },
  21 + {
  22 + type: 'el-input-text',
  23 + label: '数字数值',
  24 + name: 'numberText',
  25 + required: false,
  26 + placeholder: '',
  27 + value: '0',
  28 + },
  29 + {
  30 + type: 'el-select-static',
  31 + label: '主数据源数据',
  32 + name: 'slectedDataType',
  33 + require: false,
  34 + placeholder: '',
  35 + selectOptions: [],
  36 + value: '',
  37 + },
  38 + {
  39 + type: 'el-input-text',
  40 + label: '内容模版',
  41 + name: 'content',
  42 + required: false,
  43 + placeholder: '',
  44 + value: '数字{nt}',
  45 + },
  46 + {
  47 + type: 'el-switch',
  48 + label: '千位符显示',
  49 + name: 'isFormatterNum',
  50 + required: false,
  51 + placeholder: '',
  52 + value: false
  53 + },
  54 + {
  55 + type: 'el-input-number',
  56 + label: '小数位数',
  57 + name: 'toFixed',
  58 + required: false,
  59 + placeholder: '',
  60 + value: 0,
  61 + },
  62 + {
  63 + type: 'el-select',
  64 + label: '水平对齐方式',
  65 + name: 'textAlign',
  66 + required: false,
  67 + placeholder: '',
  68 + selectOptions: [
  69 + {code: 'center', name: '居中'},
  70 + {code: 'left', name: '左对齐'},
  71 + {code: 'right', name: '右对齐'}
  72 + ],
  73 + value: 'center'
  74 + },
  75 + {
  76 + type: 'el-input-number',
  77 + label: '动效帧数',
  78 + name: 'animationFrame',
  79 + required: false,
  80 + placeholder: '',
  81 + value: 100,
  82 + },
  83 + [
  84 + {
  85 + name: '文字样式设置',
  86 + list: [
  87 + {
  88 + type: 'vue-color',
  89 + label: '颜色',
  90 + name: 'fill',
  91 + required: false,
  92 + placeholder: '',
  93 + value: '#3de7c9'
  94 + },
  95 + {
  96 + type: 'el-input-number',
  97 + label: '字体大小',
  98 + name: 'fontSize',
  99 + required: false,
  100 + placeholder: '',
  101 + value: 30,
  102 + },
  103 + {
  104 + type: 'el-select',
  105 + label: '字体粗细',
  106 + name: 'fontWeight',
  107 + required: false,
  108 + placeholder: '',
  109 + selectOptions: [
  110 + {code: 'normal', name: '正常'},
  111 + {code: 'bold', name: '粗体'},
  112 + {code: 'bolder', name: '更粗'},
  113 + {code: 'lighter', name: '更细'},
  114 + ],
  115 + value: 'normal'
  116 + },
  117 + ],
  118 + }
  119 + ]
  120 + ],
  121 + // 数据
  122 + data: [],
  123 + // 坐标
  124 + position: [
  125 + {
  126 + type: 'el-input-number',
  127 + label: '左边距',
  128 + name: 'left',
  129 + required: false,
  130 + placeholder: '',
  131 + value: 10,
  132 + },
  133 + {
  134 + type: 'el-input-number',
  135 + label: '上边距',
  136 + name: 'top',
  137 + required: false,
  138 + placeholder: '',
  139 + value: 10,
  140 + },
  141 + {
  142 + type: 'el-input-number',
  143 + label: '宽度',
  144 + name: 'width',
  145 + required: false,
  146 + placeholder: '该容器在1920px大屏中的宽度',
  147 + value: 200,
  148 + },
  149 + {
  150 + type: 'el-input-number',
  151 + label: '高度',
  152 + name: 'height',
  153 + required: false,
  154 + placeholder: '该容器在1080px大屏中的高度',
  155 + value: 200,
  156 + },
  157 + ],
  158 + }
  159 +}
src/views/bigscreenDesigner/designer/tools/configure/texts/widget-iframe.js
  View file @f3ef57e
@@ -29,7 +29,7 @@ export const widgetIframe = { @@ -29,7 +29,7 @@ export const widgetIframe = {
29 name: 'iframeAdress', 29 name: 'iframeAdress',
30 required: false, 30 required: false,
31 placeholder: '', 31 placeholder: '',
32 - value: 'https://ajreport.beliefteam.cn/index.html', 32 + value: '',
33 }, 33 },
34 ], 34 ],
35 // 数据 35 // 数据
src/views/bigscreenDesigner/designer/tools/configure/texts/widget-scroll-ranking-board.js 0 → 100644
  View file @f3ef57e
  1 +/*
  2 + * @Descripttion: 排名轮播表
  3 + */
  4 +export const widgetScrollRankingBoard= {
  5 + code: 'widget-scroll-ranking-board',
  6 + type: 'text',
  7 + tabName: '文本栏',
  8 + label: '排名轮播表',
  9 + icon: 'icon511tongji_shutu',
  10 + options: {
  11 + // 配置
  12 + setup: [
  13 + {
  14 + type: 'el-input-text',
  15 + label: '图层名称',
  16 + name: 'layerName',
  17 + required: false,
  18 + placeholder: '',
  19 + value: '排名轮播表',
  20 + },
  21 + {
  22 + type: 'el-input-number',
  23 + label: '表行数',
  24 + name: 'rowNum',
  25 + required: false,
  26 + placeholder: '',
  27 + value: 5,
  28 + },
  29 + {
  30 + type: 'el-input-number',
  31 + label: '滚动间隔(毫秒)',
  32 + name: 'waitTime',
  33 + required: false,
  34 + placeholder: '',
  35 + value: 2500,
  36 + },
  37 + {
  38 + type: 'el-select',
  39 + label: '动画效果',
  40 + name: 'carousel',
  41 + required: false,
  42 + placeholder: '',
  43 + selectOptions: [
  44 + {code: 'single', name: '单条'},
  45 + {code: 'page', name: '整页'}
  46 + ],
  47 + value: 'single'
  48 + },
  49 + {
  50 + type: 'el-input-text',
  51 + label: '数值单位',
  52 + name: 'unit',
  53 + required: false,
  54 + placeholder: '',
  55 + value: '',
  56 + },
  57 + {
  58 + type: 'el-switch',
  59 + label: '自动排序',
  60 + name: 'sort',
  61 + required: false,
  62 + placeholder: '',
  63 + value: true
  64 + },
  65 + {
  66 + type: 'vue-color',
  67 + label: '背景颜色',
  68 + name: 'background',
  69 + required: false,
  70 + placeholder: '',
  71 + value: ''
  72 + },
  73 + ],
  74 + // 数据
  75 + data: [
  76 + {
  77 + type: 'el-radio-group',
  78 + label: '数据类型',
  79 + name: 'dataType',
  80 + require: false,
  81 + placeholder: '',
  82 + selectValue: true,
  83 + selectOptions: [
  84 + {
  85 + code: 'staticData',
  86 + name: '静态数据',
  87 + },
  88 + {
  89 + code: 'dynamicData',
  90 + name: '动态数据',
  91 + },
  92 + ],
  93 + value: 'staticData',
  94 + },
  95 + {
  96 + type: 'el-input-number',
  97 + label: '刷新时间(毫秒)',
  98 + name: 'refreshTime',
  99 + relactiveDom: 'dataType',
  100 + relactiveDomValue: 'dynamicData',
  101 + value: 30000
  102 + },
  103 + {
  104 + type: 'el-button',
  105 + label: '静态数据',
  106 + name: 'staticData',
  107 + required: false,
  108 + placeholder: '',
  109 + relactiveDom: 'dataType',
  110 + relactiveDomValue: 'staticData',
  111 + value: [
  112 + {
  113 + name: '周口',
  114 + value: 55
  115 + },
  116 + {
  117 + name: '南阳',
  118 + value: 120
  119 + },
  120 + {
  121 + name: '西峡',
  122 + value: 78
  123 + },
  124 + {
  125 + name: '驻马店',
  126 + value: 66
  127 + },
  128 + {
  129 + name: '新乡',
  130 + value: 80
  131 + },
  132 + {
  133 + name: '信阳',
  134 + value: 45
  135 + },
  136 + {
  137 + name: '漯河',
  138 + value: 29
  139 + }
  140 + ],
  141 + },
  142 + {
  143 + type: 'dycustComponents',
  144 + label: '',
  145 + name: 'dynamicData',
  146 + required: false,
  147 + placeholder: '',
  148 + relactiveDom: 'dataType',
  149 + relactiveDomValue: 'dynamicData',
  150 + chartType: 'widget-scroll-ranking-board',
  151 + dictKey: 'TEXT_PROPERTIES',
  152 + value: '',
  153 + },
  154 + ],
  155 + // 坐标
  156 + position: [
  157 + {
  158 + type: 'el-input-number',
  159 + label: '左边距',
  160 + name: 'left',
  161 + required: false,
  162 + placeholder: '',
  163 + value: 10,
  164 + },
  165 + {
  166 + type: 'el-input-number',
  167 + label: '上边距',
  168 + name: 'top',
  169 + required: false,
  170 + placeholder: '',
  171 + value: 10,
  172 + },
  173 + {
  174 + type: 'el-input-number',
  175 + label: '宽度',
  176 + name: 'width',
  177 + required: false,
  178 + placeholder: '该容器在1920px大屏中的宽度',
  179 + value: 600,
  180 + },
  181 + {
  182 + type: 'el-input-number',
  183 + label: '高度',
  184 + name: 'height',
  185 + required: false,
  186 + placeholder: '该容器在1080px大屏中的高度',
  187 + value: 300,
  188 + },
  189 + ],
  190 + }
  191 +}
src/views/bigscreenDesigner/designer/tools/configure/div/widget-water-level-pond.js renamed to src/views/bigscreenDesigner/designer/tools/configure/texts/widget-water-level-pond.js
  View file @f3ef57e
@@ -3,8 +3,8 @@ @@ -3,8 +3,8 @@
3 */ 3 */
4 export const widgetWaterLevelPond= { 4 export const widgetWaterLevelPond= {
5 code: 'widget-water-level-pond', 5 code: 'widget-water-level-pond',
6 - type: 'html',  
7 - tabName: '图层', 6 + type: 'text',
  7 + tabName: '文本栏',
8 label: '水位图', 8 label: '水位图',
9 icon: 'iconshouji', 9 icon: 'iconshouji',
10 options: { 10 options: {
@@ -80,6 +80,14 @@ export const widgetWaterLevelPond= { @@ -80,6 +80,14 @@ export const widgetWaterLevelPond= {
80 placeholder: '', 80 placeholder: '',
81 value: '{value}%', 81 value: '{value}%',
82 }, 82 },
  83 + {
  84 + type: 'vue-color',
  85 + label: '背景颜色',
  86 + name: 'background',
  87 + required: false,
  88 + placeholder: '',
  89 + value: ''
  90 + },
83 [{ 91 [{
84 name: '水位图配色', 92 name: '水位图配色',
85 list: [ 93 list: [
src/views/bigscreenDesigner/designer/tools/main.js
  View file @f3ef57e
@@ -43,14 +43,15 @@ import { widgetHeatmap } from "./configure/heatmap/widget-heatmap"; @@ -43,14 +43,15 @@ import { widgetHeatmap } from "./configure/heatmap/widget-heatmap";
43 import { widgetRadar } from "./configure/radarCharts/widget-radar"; 43 import { widgetRadar } from "./configure/radarCharts/widget-radar";
44 import { widgetBarLineStack } from "./configure/barlineCharts/widget-bar-line-stack"; 44 import { widgetBarLineStack } from "./configure/barlineCharts/widget-bar-line-stack";
45 import { widgetProgress } from "./configure/percentCharts/widget-progress"; 45 import { widgetProgress } from "./configure/percentCharts/widget-progress";
46 -import {widgetWaterLevelPond} from "./configure/div/widget-water-level-pond"; 46 +import {widgetWaterLevelPond} from "./configure/texts/widget-water-level-pond";
  47 +import {widgetDigitalFlop} from "./configure/texts/widget-digital-flop";
  48 +import {widgetScrollRankingBoard} from "./configure/texts/widget-scroll-ranking-board";
47 49
48 50
49 export const widgetTool = [ 51 export const widgetTool = [
50 //图层 52 //图层
51 widgetBorderBox, 53 widgetBorderBox,
52 widgetDecoration, 54 widgetDecoration,
53 - widgetCapsuleChart,  
54 // widgetDiv, 55 // widgetDiv,
55 widgetImage, 56 widgetImage,
56 widgetSliders, 57 widgetSliders,
@@ -59,11 +60,15 @@ export const widgetTool = [ @@ -59,11 +60,15 @@ export const widgetTool = [
59 widgetMarquee, 60 widgetMarquee,
60 widgetHref, 61 widgetHref,
61 widgetTime, 62 widgetTime,
  63 + widgetIframe,
62 widgetVideo, 64 widgetVideo,
  65 + widgetWaterLevelPond,
  66 + widgetDigitalFlop,
63 widgetTable, 67 widgetTable,
64 - widgetIframe, 68 + widgetScrollRankingBoard,
65 // widgetUniversal, 69 // widgetUniversal,
66 widgetBarchart, 70 widgetBarchart,
  71 + widgetCapsuleChart,
67 widgetGradientBarchart, 72 widgetGradientBarchart,
68 widgetLinechart, 73 widgetLinechart,
69 widgetBarlinechart, 74 widgetBarlinechart,
@@ -87,6 +92,4 @@ export const widgetTool = [ @@ -87,6 +92,4 @@ export const widgetTool = [
87 widgetRadar, 92 widgetRadar,
88 widgetBarLineStack, 93 widgetBarLineStack,
89 widgetProgress, 94 widgetProgress,
90 - widgetWaterLevelPond  
91 -  
92 ] 95 ]
src/views/bigscreenDesigner/designer/widget/temp.vue
  View file @f3ef57e
@@ -47,7 +47,9 @@ import widgetBorderBox from "./div/widgetBorderBox"; @@ -47,7 +47,9 @@ import widgetBorderBox from "./div/widgetBorderBox";
47 import widgetProgress from "./percent/widgetProgress"; 47 import widgetProgress from "./percent/widgetProgress";
48 import widgetDecoration from "./div/widgetDecoration"; 48 import widgetDecoration from "./div/widgetDecoration";
49 import widgetCapsuleChart from "./bar/widgetCapsuleChart"; 49 import widgetCapsuleChart from "./bar/widgetCapsuleChart";
50 -import widgetWaterLevelPond from "./div/widgetWaterLevelPond"; 50 +import widgetWaterLevelPond from "./text/widgetWaterLevelPond";
  51 +import widgetDigitalFlop from "./text/widgetDigitalFlop";
  52 +import widgetScrollRankingBoard from "./text/widgetScrollRankingBoard";
51 53
52 54
53 export default { 55 export default {
@@ -89,7 +91,9 @@ export default { @@ -89,7 +91,9 @@ export default {
89 widgetDecoration, 91 widgetDecoration,
90 widgetCapsuleChart, 92 widgetCapsuleChart,
91 widgetProgress, 93 widgetProgress,
92 - widgetWaterLevelPond 94 + widgetWaterLevelPond,
  95 + widgetDigitalFlop,
  96 + widgetScrollRankingBoard
93 }, 97 },
94 model: { 98 model: {
95 prop: "value", 99 prop: "value",
src/views/bigscreenDesigner/designer/widget/text/widgetDigitalFlop.vue 0 → 100644
  View file @f3ef57e
  1 +<!--
  2 +数字翻牌器
  3 +-->
  4 +<template>
  5 + <div id="widget-digital-flop" :style="styleObj">
  6 + <dv-digital-flop :config="options" :style="styleObj"/>
  7 + </div>
  8 +</template>
  9 +<script>
  10 +
  11 +import digitalFlop from "@jiaminghi/data-view/lib/components/digitalFlop";
  12 +import {mapState} from "vuex";
  13 +import Vue from "vue";
  14 +Vue.use(digitalFlop);
  15 +export default {
  16 + name: "WidgetDigitalFlop",
  17 + props: {
  18 + value: Object,
  19 + ispreview: Boolean,
  20 + },
  21 + data() {
  22 + return {
  23 + //返回图标数据
  24 + options: {
  25 + number:[],//数字数值
  26 + content:'数字{nt}',//number中的元素将被用于替换content内容模版中的{nt}标记，其替换顺序与模版标记的顺序一一对应：实际显示效果：'数字1,数字2,数字3,数字4'
  27 + toFixed: 0,//小数位数
  28 + textAlign: 'center',//水平对齐方式 textAlign用于设置文字的水平对齐方式，可选值为'center'|'left'|'right'，该值将覆盖style属性中的textAlign属性。
  29 + rowGap: 0,//行间距 当使用\n进行换行的时候，rowGap可以控制行间距
  30 + style: {
  31 + fontSize: 30,
  32 + fill: '#3de7c9'
  33 + },//可使用fill属性设置字体颜色、stroke属性设置字体描边颜色、fontSize属性设置文字大小
  34 + //formatter:this.formatterNum,//格式化数字 类型： Function,
  35 + animationCurve: 'easeOutCubic', //动效曲线
  36 + animationFrame:50
  37 + },
  38 + config:{},
  39 + optionsStyle: {}, // 样式
  40 + optionsData: {}, // 数据
  41 + optionsCollapse: {}, // 图标属性
  42 + optionsSetup: {}
  43 + };
  44 + },
  45 + computed: {
  46 + ...mapState('dataSource', ['staticData']),
  47 + styleObj() {
  48 + return {
  49 + position: this.ispreview ? "absolute" : "static",
  50 + width: this.optionsStyle.width + "px",
  51 + height: this.optionsStyle.height + "px",
  52 + left: this.optionsStyle.left + "px",
  53 + top: this.optionsStyle.top + "px",
  54 + background: this.optionsSetup.background
  55 + };
  56 + },
  57 + },
  58 + watch: {
  59 + value: {
  60 + handler(val) {
  61 + this.optionsStyle = val.position;
  62 + this.optionsData = val.data;
  63 + this.optionsSetup = val.setup;
  64 + this.editorOptions();
  65 + },
  66 + deep: true
  67 + }
  68 + },
  69 + created() {
  70 + this.optionsStyle = this.value.position;
  71 + this.optionsData = this.value.data;
  72 + this.optionsSetup = this.value.setup;
  73 + this.editorOptions();
  74 + },
  75 + methods: {
  76 + // 修改图标options属性
  77 + editorOptions() {
  78 + //数据修改
  79 + this.setOptionsData();
  80 + //显示内容
  81 + this.showText();
  82 + //字体样式
  83 + this.setFontStyle();
  84 + },
  85 + /*中间随机数量**/
  86 + randomExtend (minNum, maxNum) {
  87 + if (arguments.length === 1) {
  88 + return parseInt(Math.random() * minNum + 1, 10)
  89 + } else {
  90 + return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10)
  91 + }
  92 + },
  93 + //显示的内容
  94 + showText() {
  95 + const {slectedDataType,numberText} = this.optionsSetup;
  96 + let datav = this.staticData[slectedDataType] || numberText;
  97 + let dataArray = datav.toString().split(",");
  98 + const numArray=[];
  99 + if(this.isNotBlankArray(dataArray)){
  100 + dataArray.forEach(num=>{
  101 + numArray.push(parseInt(num));
  102 + });
  103 + }
  104 + // console.log("返回数据number",numArray);
  105 + this.options.number = numArray;
  106 + },
  107 + //字体修改
  108 + setFontStyle() {
  109 + const optionsSetup = this.optionsSetup;
  110 + const fontStyle = {};
  111 + fontStyle.fill=optionsSetup.fill;
  112 + fontStyle.fontSize=optionsSetup.fontSize;
  113 + fontStyle.fontWeight=optionsSetup.fontWeight;
  114 + this.options.style = fontStyle;
  115 + },
  116 + //千为分隔符
  117 + formatterNum (number) {
  118 + const numbers = number.toString().split('').reverse();
  119 + const segs = [];
  120 + while (numbers.length) segs.push(numbers.splice(0, 3).join(''));
  121 + return segs.join(',').split('').reverse().join('');
  122 + },
  123 + // 数据修改
  124 + setOptionsData() {
  125 +
  126 + const optionsSetup = this.optionsSetup;
  127 + if(optionsSetup.isFormatterNum){
  128 + this.options.formatter=this.formatterNum;
  129 + }else{
  130 + this.options.formatter=undefined;
  131 + }
  132 + this.options.isFormatterNum=optionsSetup.isFormatterNum;//千分位显示
  133 + this.options.content=optionsSetup.content;
  134 + this.options.toFixed=optionsSetup.toFixed;
  135 + this.options.textAlign=optionsSetup.textAlign;
  136 + this.options.animationFrame=optionsSetup.animationFrame;
  137 + // this.options.rowGap=optionsSetup.rowGap;
  138 + const optionsDeep =this.deepClone(this.options);
  139 + // console.log("返回数据options",optionsDeep);
  140 + this.options={};
  141 + this.options=optionsDeep;
  142 + },
  143 + }
  144 +};
  145 +
  146 +</script>
  147 +<style scoped lang="scss">
  148 +.echarts {
  149 + width: 100%;
  150 + height: 100%;
  151 + overflow: hidden;
  152 +}
  153 +</style>
src/views/bigscreenDesigner/designer/widget/text/widgetScrollRankingBoard.vue 0 → 100644
  View file @f3ef57e
  1 +<!--
  2 +排名轮播表
  3 +-->
  4 +<template>
  5 + <div id="widget-scroll-ranking-board" :style="styleObj">
  6 + <dv-scroll-ranking-board :config="options" :style="styleObj"/>
  7 + </div>
  8 +</template>
  9 +<script>
  10 +import Vue from "vue";
  11 +import scrollRankingBoard from "@jiaminghi/data-view/lib/components/scrollRankingBoard";
  12 +Vue.use(scrollRankingBoard)
  13 +export default {
  14 + name: "WidgetScrollRankingBoard",
  15 + props: {
  16 + value: Object,
  17 + ispreview: Boolean,
  18 + },
  19 + data() {
  20 + const {valueFormatter} = this;
  21 + return {
  22 + //返回图标数据
  23 + options: {
  24 + data:[],//表数据
  25 + rowNum:'5',//表行数(显示)
  26 + waitTime: 2000,//轮播时间间隔(ms)
  27 + carousel: 'single',//轮播方式 'single'|'page'
  28 + unit: '',//数值单位
  29 + sort: true,//自动排序
  30 + isValueFormatter: true,//数值格式化
  31 + valueFormatter: valueFormatter//数值格式化
  32 +
  33 + },
  34 + optionsStyle: {}, // 样式
  35 + optionsData: {}, // 数据
  36 + optionsCollapse: {}, // 图标属性
  37 + optionsSetup: {}
  38 + };
  39 + },
  40 + computed: {
  41 + styleObj() {
  42 + return {
  43 + position: this.ispreview ? "absolute" : "static",
  44 + width: this.optionsStyle.width + "px",
  45 + height: this.optionsStyle.height + "px",
  46 + left: this.optionsStyle.left + "px",
  47 + top: this.optionsStyle.top + "px",
  48 + background: this.optionsSetup.background
  49 + };
  50 + },
  51 + },
  52 + watch: {
  53 + value: {
  54 + handler(val) {
  55 + this.optionsStyle = val.position;
  56 + this.optionsData = val.data;
  57 + this.optionsSetup = val.setup;
  58 + this.editorOptions();
  59 + },
  60 + deep: true
  61 + }
  62 + },
  63 + created() {
  64 + this.optionsStyle = this.value.position;
  65 + this.optionsData = this.value.data;
  66 + this.optionsSetup = this.value.setup;
  67 + this.editorOptions();
  68 + },
  69 + methods: {
  70 + // 修改图标options属性
  71 + editorOptions() {
  72 + //配置修改
  73 + this.setOptionsConfig();
  74 + //数据修改
  75 + this.setOptionsData();
  76 + },
  77 + // 配置修改
  78 + setOptionsConfig() {
  79 + const optionsSetup = this.optionsSetup;
  80 + this.options.rowNum =optionsSetup.rowNum;
  81 + this.options.waitTime =optionsSetup.waitTime;
  82 + this.options.carousel =optionsSetup.carousel;
  83 + this.options.unit =optionsSetup.unit;
  84 + this.options.sort =optionsSetup.sort;
  85 + this.options.isValueFormatter =optionsSetup.isValueFormatter;
  86 + if(this.options.isValueFormatter){
  87 + this.options.valueFormatter= this.valueFormatter;
  88 + }else{
  89 + this.options.valueFormatter=undefined;
  90 + }
  91 + },
  92 + //数据类型
  93 + setOptionsData() {
  94 + const optionsData = this.optionsData; // 数据类型 静态 or 动态
  95 + optionsData.dataType == "staticData"
  96 + ? this.staticDataFn(optionsData.staticData)
  97 + : this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);
  98 + },
  99 + staticDataFn(val) {
  100 + // console.log("设置静态数据",this.options)
  101 + const staticData = typeof val == "string" ? JSON.parse(val) : val;
  102 + this.options.data=staticData;
  103 + },
  104 + dynamicDataFn(val, refreshTime) {
  105 + if (!val) return;
  106 + if (this.ispreview) {
  107 + this.getEchartData(val);
  108 + this.flagInter = setInterval(() => {
  109 + this.getEchartData(val);
  110 + }, refreshTime);
  111 + } else {
  112 + this.getEchartData(val);
  113 + }
  114 + },
  115 + getEchartData(val) {
  116 + const data = this.queryEchartsData(val);
  117 + data.then(res => {
  118 + this.renderingFn(res);
  119 + });
  120 + },
  121 + renderingFn(val) {
  122 + this.options.data=val;
  123 + },
  124 + valueFormatter ({ value }) {
  125 + // console.warn(arguments)
  126 + const reverseNumber = (value + '').split('').reverse()
  127 + let valueStr = ''
  128 +
  129 + while (reverseNumber.length) {
  130 + const seg = reverseNumber.splice(0, 3).join('')
  131 + valueStr += seg
  132 + if (seg.length === 3) valueStr += ','
  133 + }
  134 + return valueStr.split('').reverse().join('')
  135 + }
  136 + }
  137 +};
  138 +
  139 +</script>
  140 +<style scoped lang="scss">
  141 +.echarts {
  142 + width: 100%;
  143 + height: 100%;
  144 + overflow: hidden;
  145 +}
  146 +</style>
src/views/bigscreenDesigner/designer/widget/div/widgetWaterLevelPond.vue renamed to src/views/bigscreenDesigner/designer/widget/text/widgetWaterLevelPond.vue
  View file @f3ef57e
1 <!-- 1 <!--
2 - 胶囊柱图 2 + 水位图
3 --> 3 -->
4 <template> 4 <template>
5 - <dv-water-level-pond :config="options" :style="styleObj"/> 5 + <div id="widget-water-pond-level" :style="styleObj">
  6 + <dv-water-level-pond :config="options" :style="styleObj"/>
  7 + </div>
6 </template> 8 </template>
7 <script> 9 <script>
8 import waterLevelPond from "@jiaminghi/data-view/lib/components/waterLevelPond"; 10 import waterLevelPond from "@jiaminghi/data-view/lib/components/waterLevelPond";
src/views/bigscreenDesigner/designer/widget/widget.vue
  View file @f3ef57e
@@ -52,7 +52,9 @@ import widgetBorderBox from &quot;./div/widgetBorderBox.vue&quot;; @@ -52,7 +52,9 @@ import widgetBorderBox from &quot;./div/widgetBorderBox.vue&quot;;
52 import widgetDecoration from "./div/widgetDecoration.vue"; 52 import widgetDecoration from "./div/widgetDecoration.vue";
53 import widgetCapsuleChart from "./bar/widgetCapsuleChart"; 53 import widgetCapsuleChart from "./bar/widgetCapsuleChart";
54 import widgetProgress from "./percent/widgetProgress"; 54 import widgetProgress from "./percent/widgetProgress";
55 -import widgetWaterLevelPond from "./div/widgetWaterLevelPond"; 55 +import widgetWaterLevelPond from "./text/widgetWaterLevelPond";
  56 +import widgetDigitalFlop from "./text/widgetDigitalFlop";
  57 +import widgetScrollRankingBoard from "./text/widgetScrollRankingBoard";
56 58
57 export default { 59 export default {
58 name: "Widget", 60 name: "Widget",
@@ -93,7 +95,9 @@ export default { @@ -93,7 +95,9 @@ export default {
93 widgetRadar, 95 widgetRadar,
94 widgetBarLineStackChart, 96 widgetBarLineStackChart,
95 widgetProgress, 97 widgetProgress,
96 - widgetWaterLevelPond 98 + widgetWaterLevelPond,
  99 + widgetDigitalFlop,
  100 + widgetScrollRankingBoard
97 }, 101 },
98 model: { 102 model: {
99 prop: "value", 103 prop: "value",