qiangmj / report-ui

Commit 5afe5d30944522939c9345de9e5e3224dd0e92a4

Authored by qianbao
1 parent f3ef57e5

1、添加环形图。 

2、一些已知问题修复
Inline Side-by-side
Showing 9 changed files with 427 additions and 35 deletions
src/views/bigscreenDesigner/designer/tools/configure/barCharts/widget-capsule-chart.js
  View file @5afe5d3
... ... @@ -51,7 +51,7 @@ export const widgetCapsuleChart = {
51 51 name: 'customColor',
52 52 required: false,
53 53 //'#e062ae', '#fb7293', '#e690d1', '#32c5e9', '#96bfff'
54   - value: [{ color: '#e062ae' }, { color: '#fb7293' }, { color: '#e690d1' }, { color: '#32c5e9' }, { color: '#96bfff' }],
  54 + value: [{ color: '#0044BB' }, { color: '#5500DD' }, { color: '#FF0088' }, { color: '#00AA00' }, { color: '#C63300' }],
55 55 },
56 56 ],
57 57 }],
... ...
src/views/bigscreenDesigner/designer/tools/configure/percentCharts/widget-active-ring-chart.js 0 → 100644
  View file @5afe5d3
  1 +/*
  2 + * @Descripttion: 动态环图
  3 + */
  4 +export const widgetActiveRingChart= {
  5 + code: 'widget-active-ring-chart',
  6 + type: 'percent',
  7 + tabName: '百分比',
  8 + label: '动态环图',
  9 + icon: 'iconicon_tubiao_bingtu',
  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-slider',
  23 + label: '环半径(%)',
  24 + name: 'radius',
  25 + required: false,
  26 + placeholder: '',
  27 + value: 50,
  28 + },
  29 + {
  30 + type: 'el-slider',
  31 + label: '环半径(动态)(%)',
  32 + name: 'activeRadius',
  33 + required: false,
  34 + placeholder: '',
  35 + value: 55,
  36 + },
  37 + {
  38 + type: 'el-input-number',
  39 + label: '环线条宽度',
  40 + name: 'lineWidth',
  41 + required: false,
  42 + placeholder: '',
  43 + value: 20,
  44 + },
  45 + {
  46 + type: 'el-input-number',
  47 + label: '切换间隔(ms)',
  48 + name: 'activeTimeGap',
  49 + required: false,
  50 + placeholder: '',
  51 + value: 3000,
  52 + },
  53 + {
  54 + type: 'el-input-number',
  55 + label: '小数位数',
  56 + name: 'digitalFlopToFixed',
  57 + required: false,
  58 + placeholder: '',
  59 + value: 0,
  60 + },
  61 + {
  62 + type: 'el-input-text',
  63 + label: '数字翻牌器单位',
  64 + name: 'digitalFlopUnit',
  65 + required: false,
  66 + placeholder: '单位',
  67 + value: '',
  68 + },
  69 + {
  70 + type: 'el-input-number',
  71 + label: '动画帧数',
  72 + name: 'animationFrame',
  73 + required: false,
  74 + placeholder: '',
  75 + value: 50,
  76 + },
  77 + {
  78 + type: 'el-switch',
  79 + label: '显示原始值',
  80 + name: 'showOriginValue',
  81 + required: false,
  82 + placeholder: '',
  83 + value: false,
  84 + },
  85 + {
  86 + type: 'vue-color',
  87 + label: '背景颜色',
  88 + name: 'background',
  89 + required: false,
  90 + placeholder: '',
  91 + value: ''
  92 + },
  93 + [{
  94 + name: '环颜色',
  95 + list: [
  96 + {
  97 + type: 'customColor',
  98 + label: '',
  99 + name: 'customColor',
  100 + required: false,
  101 + value: [{ color: '#1E90FF'},{ color: '#77FF00' },{ color: '#7700BB' },{ color: '#FF0088' },{ color: '#CC00CC' }],
  102 + },
  103 + ],
  104 + }],
  105 + [
  106 + {
  107 + name: '数字翻牌器样式',
  108 + list: [
  109 + {
  110 + type: 'vue-color',
  111 + label: '颜色',
  112 + name: 'fill',
  113 + required: false,
  114 + placeholder: '',
  115 + value: '#3de7c9'
  116 + },
  117 + {
  118 + type: 'el-input-number',
  119 + label: '字体大小',
  120 + name: 'fontSize',
  121 + required: false,
  122 + placeholder: '',
  123 + value: 30,
  124 + },
  125 + {
  126 + type: 'el-select',
  127 + label: '字体粗细',
  128 + name: 'fontWeight',
  129 + required: false,
  130 + placeholder: '',
  131 + selectOptions: [
  132 + {code: 'normal', name: '正常'},
  133 + {code: 'bold', name: '粗体'},
  134 + {code: 'bolder', name: '更粗'},
  135 + {code: 'lighter', name: '更细'},
  136 + ],
  137 + value: 'normal'
  138 + },
  139 + ],
  140 + }
  141 + ]
  142 +
  143 + ],
  144 + // 数据
  145 + // 数据
  146 + data: [
  147 + {
  148 + type: 'el-radio-group',
  149 + label: '数据类型',
  150 + name: 'dataType',
  151 + require: false,
  152 + placeholder: '',
  153 + selectValue: true,
  154 + selectOptions: [
  155 + {
  156 + code: 'staticData',
  157 + name: '静态数据',
  158 + },
  159 + {
  160 + code: 'dynamicData',
  161 + name: '动态数据',
  162 + },
  163 + ],
  164 + value: 'staticData',
  165 + },
  166 + {
  167 + type: 'el-input-number',
  168 + label: '刷新时间(毫秒)',
  169 + name: 'refreshTime',
  170 + relactiveDom: 'dataType',
  171 + relactiveDomValue: 'dynamicData',
  172 + value: 5000
  173 + },
  174 + {
  175 + type: 'el-button',
  176 + label: '静态数据',
  177 + name: 'staticData',
  178 + required: false,
  179 + placeholder: '',
  180 + relactiveDom: 'dataType',
  181 + relactiveDomValue: 'staticData',
  182 + value: [{ value: 1048, name: "引擎" }, { value: 735, name: "访问" }, { value: 580, name: "邮件" }, { value: 484, name: "广告" }, { value: 300, name: "视频" }]
  183 + },
  184 + {
  185 + type: 'dycustComponents',
  186 + label: '',
  187 + name: 'dynamicData',
  188 + required: false,
  189 + placeholder: '',
  190 + relactiveDom: 'dataType',
  191 + relactiveDomValue: 'dynamicData',
  192 + chartType: 'widget-active-ring-chart',
  193 + dictKey: 'TEXT_PROPERTIES',
  194 + value: '',
  195 + },
  196 + ],
  197 + // 坐标
  198 + position: [
  199 + {
  200 + type: 'el-input-number',
  201 + label: '左边距',
  202 + name: 'left',
  203 + required: false,
  204 + placeholder: '',
  205 + value: 10,
  206 + },
  207 + {
  208 + type: 'el-input-number',
  209 + label: '上边距',
  210 + name: 'top',
  211 + required: false,
  212 + placeholder: '',
  213 + value: 10,
  214 + },
  215 + {
  216 + type: 'el-input-number',
  217 + label: '宽度',
  218 + name: 'width',
  219 + required: false,
  220 + placeholder: '该容器在1920px大屏中的宽度',
  221 + value: 300,
  222 + },
  223 + {
  224 + type: 'el-input-number',
  225 + label: '高度',
  226 + name: 'height',
  227 + required: false,
  228 + placeholder: '该容器在1080px大屏中的高度',
  229 + value: 300,
  230 + },
  231 + ],
  232 + }
  233 +}
... ...
src/views/bigscreenDesigner/designer/tools/main.js
  View file @5afe5d3
... ... @@ -46,6 +46,7 @@ import { widgetProgress } from "./configure/percentCharts/widget-progress";
46 46 import {widgetWaterLevelPond} from "./configure/texts/widget-water-level-pond";
47 47 import {widgetDigitalFlop} from "./configure/texts/widget-digital-flop";
48 48 import {widgetScrollRankingBoard} from "./configure/texts/widget-scroll-ranking-board";
  49 +import {widgetActiveRingChart} from "./configure/percentCharts/widget-active-ring-chart";
49 50  
50 51  
51 52 export const widgetTool = [
... ... @@ -92,4 +93,5 @@ export const widgetTool = [
92 93 widgetRadar,
93 94 widgetBarLineStack,
94 95 widgetProgress,
  96 + widgetActiveRingChart
95 97 ]
... ...
src/views/bigscreenDesigner/designer/widget/percent/widgetActiveRingChart.vue 0 → 100644
  View file @5afe5d3
  1 +<!--
  2 +动态环图
  3 +-->
  4 +<template>
  5 +<!-- <div id="widget-active-ring-chart" :style="styleObj">-->
  6 + <dv-active-ring-chart :config="options" :style="styleObj"/>
  7 +<!-- </div>-->
  8 +</template>
  9 +<script>
  10 +import Vue from "vue";
  11 +import activeRingChart from "@jiaminghi/data-view/lib/components/activeRingChart";
  12 +Vue.use(activeRingChart)
  13 +export default {
  14 + name: "WidgetActiveRingChart",
  15 + props: {
  16 + value: Object,
  17 + ispreview: Boolean,
  18 + },
  19 + data() {
  20 + return {
  21 + //返回图标数据
  22 + options: {
  23 + radius:'50%',//环半径
  24 + activeRadius:'55%',//环半径（动态）
  25 + data:[],//环数据
  26 + lineWidth:20,//环数据
  27 + activeTimeGap:3000,//切换间隔(ms)
  28 + color:[],//环颜色
  29 + digitalFlopStyle: {
  30 + fontSize: 30,
  31 + fill: '#3de7c9'
  32 + },//数字翻牌器样式
  33 + digitalFlopToFixed :0,//数字翻牌器小数位数
  34 + digitalFlopUnit :'',//数字翻牌器单位
  35 + animationFrame :50,//动效帧数
  36 + showOriginValue :false//显示原始值
  37 + },
  38 + optionsStyle: {}, // 样式
  39 + optionsData: {}, // 数据
  40 + optionsCollapse: {}, // 图标属性
  41 + optionsSetup: {}
  42 + };
  43 + },
  44 + computed: {
  45 + styleObj() {
  46 + return {
  47 + position: this.ispreview ? "absolute" : "static",
  48 + width: this.optionsStyle.width + "px",
  49 + height: this.optionsStyle.height + "px",
  50 + left: this.optionsStyle.left + "px",
  51 + top: this.optionsStyle.top + "px",
  52 + background: this.optionsSetup.background
  53 + };
  54 + },
  55 + },
  56 + watch: {
  57 + value: {
  58 + handler(val) {
  59 + this.optionsStyle = val.position;
  60 + this.optionsData = val.data;
  61 + this.optionsSetup = val.setup;
  62 + this.editorOptions();
  63 + },
  64 + deep: true
  65 + }
  66 + },
  67 + created() {
  68 + this.optionsStyle = this.value.position;
  69 + this.optionsData = this.value.data;
  70 + this.optionsSetup = this.value.setup;
  71 + this.editorOptions();
  72 + },
  73 + methods: {
  74 + // 修改图标options属性
  75 + editorOptions() {
  76 + //数据修改
  77 + this.setOptionsData();
  78 + //环颜色修改
  79 + this.setOptionsColor();
  80 + //数字翻牌器样式
  81 + this.setFontStyle();
  82 + //基础数据修改
  83 + this.setOptionsConfig();
  84 + },
  85 + // 颜色修改
  86 + setOptionsColor() {
  87 + const optionsSetup = this.optionsSetup;
  88 + const customColor = optionsSetup.customColor;
  89 + if (!customColor) return;
  90 + const arrColor = [];
  91 + for (let i = 0; i < customColor.length; i++) {
  92 + arrColor.push(customColor[i].color);
  93 + }
  94 + this.options.color = arrColor;
  95 + },
  96 + //字体修改
  97 + setFontStyle() {
  98 + const optionsSetup = this.optionsSetup;
  99 + const fontStyle = {};
  100 + fontStyle.fill=optionsSetup.fill;
  101 + fontStyle.fontSize=optionsSetup.fontSize;
  102 + fontStyle.fontWeight=optionsSetup.fontWeight;
  103 + this.options.digitalFlopToFixed = fontStyle;
  104 + },
  105 + // 配置修改
  106 + setOptionsConfig() {
  107 + const optionsSetup = this.optionsSetup;
  108 + this.options.radius = optionsSetup.radius+"%";
  109 + this.options.activeRadius = optionsSetup.activeRadius+"%";
  110 + this.options.lineWidth = optionsSetup.lineWidth;
  111 + this.options.activeTimeGap = optionsSetup.activeTimeGap;
  112 + this.options.digitalFlopToFixed = optionsSetup.digitalFlopToFixed;
  113 + this.options.digitalFlopUnit = optionsSetup.digitalFlopUnit;
  114 + this.options.animationFrame = optionsSetup.animationFrame;
  115 + this.options.showOriginValue = optionsSetup.showOriginValue;
  116 + //改变options
  117 + this.options={...this.options};
  118 + },
  119 + //数据类型
  120 + setOptionsData() {
  121 + const optionsData = this.optionsData; // 数据类型 静态 or 动态
  122 + optionsData.dataType == "staticData"
  123 + ? this.staticDataFn(optionsData.staticData)
  124 + : this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);
  125 + },
  126 + staticDataFn(val) {
  127 + // console.log("设置静态数据",this.options)
  128 + const staticData = typeof val == "string" ? JSON.parse(val) : val;
  129 + this.options.data=staticData;
  130 + },
  131 + dynamicDataFn(val, refreshTime) {
  132 + if (!val) return;
  133 + if (this.ispreview) {
  134 + this.getEchartData(val);
  135 + this.flagInter = setInterval(() => {
  136 + this.getEchartData(val);
  137 + }, refreshTime);
  138 + } else {
  139 + this.getEchartData(val);
  140 + }
  141 + },
  142 + getEchartData(val) {
  143 + const data = this.queryEchartsData(val);
  144 + data.then(res => {
  145 + this.renderingFn(res);
  146 + });
  147 + },
  148 + renderingFn(val) {
  149 + this.options.data=val;
  150 + }
  151 +
  152 + }
  153 +};
  154 +
  155 +</script>
... ...
src/views/bigscreenDesigner/designer/widget/temp.vue
  View file @5afe5d3
... ... @@ -50,6 +50,7 @@ import widgetCapsuleChart from &quot;./bar/widgetCapsuleChart&quot;;
50 50 import widgetWaterLevelPond from "./text/widgetWaterLevelPond";
51 51 import widgetDigitalFlop from "./text/widgetDigitalFlop";
52 52 import widgetScrollRankingBoard from "./text/widgetScrollRankingBoard";
  53 +import widgetActiveRingChart from "./percent/widgetActiveRingChart";
53 54  
54 55  
55 56 export default {
... ... @@ -93,7 +94,8 @@ export default {
93 94 widgetProgress,
94 95 widgetWaterLevelPond,
95 96 widgetDigitalFlop,
96   - widgetScrollRankingBoard
  97 + widgetScrollRankingBoard,
  98 + widgetActiveRingChart
97 99 },
98 100 model: {
99 101 prop: "value",
... ...
src/views/bigscreenDesigner/designer/widget/text/widgetDigitalFlop.vue
  View file @5afe5d3
... ... @@ -2,9 +2,9 @@
2 2 数字翻牌器
3 3 -->
4 4 <template>
5   - <div id="widget-digital-flop" :style="styleObj">
  5 +<!-- <div id="widget-digital-flop" :style="styleObj">-->
6 6 <dv-digital-flop :config="options" :style="styleObj"/>
7   - </div>
  7 +<!-- </div>-->
8 8 </template>
9 9 <script>
10 10  
... ... @@ -75,21 +75,16 @@ export default {
75 75 methods: {
76 76 // 修改图标options属性
77 77 editorOptions() {
78   - //数据修改
79   - this.setOptionsData();
80 78 //显示内容
81 79 this.showText();
  80 +
  81 + //数据修改
  82 + this.setOptionsData();
  83 +
82 84 //字体样式
83 85 this.setFontStyle();
84 86 },
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   - },
  87 +
93 88 //显示的内容
94 89 showText() {
95 90 const {slectedDataType,numberText} = this.optionsSetup;
... ... @@ -134,11 +129,10 @@ export default {
134 129 this.options.toFixed=optionsSetup.toFixed;
135 130 this.options.textAlign=optionsSetup.textAlign;
136 131 this.options.animationFrame=optionsSetup.animationFrame;
137   - // this.options.rowGap=optionsSetup.rowGap;
138   - const optionsDeep =this.deepClone(this.options);
  132 + // const optionsDeep =this.deepClone(this.options);
139 133 // console.log("返回数据options",optionsDeep);
140   - this.options={};
141   - this.options=optionsDeep;
  134 + this.options={...this.options};
  135 + // this.options=optionsDeep;
142 136 },
143 137 }
144 138 };
... ...
src/views/bigscreenDesigner/designer/widget/text/widgetScrollRankingBoard.vue
  View file @5afe5d3
... ... @@ -2,9 +2,9 @@
2 2 排名轮播表
3 3 -->
4 4 <template>
5   - <div id="widget-scroll-ranking-board" :style="styleObj">
  5 +<!-- <div id="widget-scroll-ranking-board" :style="styleObj">-->
6 6 <dv-scroll-ranking-board :config="options" :style="styleObj"/>
7   - </div>
  7 +<!-- </div>-->
8 8 </template>
9 9 <script>
10 10 import Vue from "vue";
... ... @@ -69,10 +69,11 @@ export default {
69 69 methods: {
70 70 // 修改图标options属性
71 71 editorOptions() {
72   - //配置修改
73   - this.setOptionsConfig();
74 72 //数据修改
75 73 this.setOptionsData();
  74 +
  75 + //配置修改
  76 + this.setOptionsConfig();
76 77 },
77 78 // 配置修改
78 79 setOptionsConfig() {
... ... @@ -88,6 +89,7 @@ export default {
88 89 }else{
89 90 this.options.valueFormatter=undefined;
90 91 }
  92 + this.options={...this.options};
91 93 },
92 94 //数据类型
93 95 setOptionsData() {
... ...
src/views/bigscreenDesigner/designer/widget/text/widgetWaterLevelPond.vue
  View file @5afe5d3
... ... @@ -2,9 +2,9 @@
2 2 水位图
3 3 -->
4 4 <template>
5   - <div id="widget-water-pond-level" :style="styleObj">
  5 +<!-- <div id="widget-water-pond-level" :style="styleObj">-->
6 6 <dv-water-level-pond :config="options" :style="styleObj"/>
7   - </div>
  7 +<!-- </div>-->
8 8 </template>
9 9 <script>
10 10 import waterLevelPond from "@jiaminghi/data-view/lib/components/waterLevelPond";
... ... @@ -68,12 +68,13 @@ export default {
68 68 methods: {
69 69 // 修改图标options属性
70 70 editorOptions() {
  71 + //水位位置
  72 + this.showText();
71 73 //颜色值修改
72 74 this.setOptionsColor();
73 75 //数据修改
74 76 this.setOptionsData();
75   - //水位位置
76   - this.showText();
  77 +
77 78 },
78 79 // 颜色修改
79 80 setOptionsColor() {
... ... @@ -103,16 +104,17 @@ export default {
103 104 this.options.waveOpacity= waveOpacity/100;//波浪透明度
104 105 this.options.formatter = optionsSetup.formatter;
105 106 this.options.waveNum = optionsSetup.waveNum;//波浪数量
  107 + this.options={...this.options};
106 108 },
107 109  
108 110 }
109 111 };
110 112  
111 113 </script>
112   -<style scoped lang="scss">
113   -.echarts {
114   - width: 100%;
115   - height: 100%;
116   - overflow: hidden;
117   -}
118   -</style>
  114 +<!--<style scoped lang="scss">-->
  115 +<!--.echarts {-->
  116 +<!-- width: 100%;-->
  117 +<!-- height: 100%;-->
  118 +<!-- overflow: hidden;-->
  119 +<!--}-->
  120 +<!--</style>-->
... ...
src/views/bigscreenDesigner/designer/widget/widget.vue
  View file @5afe5d3
... ... @@ -55,7 +55,7 @@ import widgetProgress from &quot;./percent/widgetProgress&quot;;
55 55 import widgetWaterLevelPond from "./text/widgetWaterLevelPond";
56 56 import widgetDigitalFlop from "./text/widgetDigitalFlop";
57 57 import widgetScrollRankingBoard from "./text/widgetScrollRankingBoard";
58   -
  58 +import widgetActiveRingChart from "./percent/widgetActiveRingChart";
59 59 export default {
60 60 name: "Widget",
61 61 components: {
... ... @@ -97,7 +97,9 @@ export default {
97 97 widgetProgress,
98 98 widgetWaterLevelPond,
99 99 widgetDigitalFlop,
100   - widgetScrollRankingBoard
  100 + widgetScrollRankingBoard,
  101 + widgetActiveRingChart
  102 +
101 103 },
102 104 model: {
103 105 prop: "value",
... ...