qiangmj / report-ui

Commit 4bad9ea327fd14c21d8a84ce470d69a39f57f381

Authored by qianbao
1 parent c05b85a6

1、上下移动问题处理 

2、datav饼图处理
3、动态地址打包问题处理
4、折线图处理
5、添加echar空心饼图（自动悬浮，待开发）
Inline Side-by-side
Showing 14 changed files with 1197 additions and 136 deletions
config/dev.env.js
  View file @4bad9ea
@@ -4,8 +4,8 @@ const prodEnv = require('./prod.env') @@ -4,8 +4,8 @@ const prodEnv = require('./prod.env')
4 //是否开发状态 4 //是否开发状态
5 const isDev = true; 5 const isDev = true;
6 //开发API地址 6 //开发API地址
7 - const devAdrress='"http://weberp.xlyprint.cn/xlyReport"';  
8 -//const devAdrress='"http://127.0.0.1:8080/xlyReport"'; 7 +const devAdrress='"http://weberp.xlyprint.cn/xlyReport"';
  8 +// const devAdrress='"http://127.0.0.1:8080/xlyReport"';
9 //正式打包API地址 9 //正式打包API地址
10 const ipAdrress='"http://"+location.host+"/xlyReport"'; 10 const ipAdrress='"http://"+location.host+"/xlyReport"';
11 11
package.json
  View file @4bad9ea
@@ -13,6 +13,7 @@ @@ -13,6 +13,7 @@
13 }, 13 },
14 "dependencies": { 14 "dependencies": {
15 "@ckeditor/ckeditor5-build-decoupled-document": "^23.1.0", 15 "@ckeditor/ckeditor5-build-decoupled-document": "^23.1.0",
  16 + "@jiaminghi/c-render": "^0.4.3",
16 "@jiaminghi/data-view": "^2.10.0", 17 "@jiaminghi/data-view": "^2.10.0",
17 "@smallwei/avue": "^2.8.23", 18 "@smallwei/avue": "^2.8.23",
18 "axios": "0.18.0", 19 "axios": "0.18.0",
@@ -48,6 +49,7 @@ @@ -48,6 +49,7 @@
48 "vuex": "3.0.1" 49 "vuex": "3.0.1"
49 }, 50 },
50 "devDependencies": { 51 "devDependencies": {
  52 + "@jiaminghi/charts": "^0.2.18",
51 "autoprefixer": "8.5.0", 53 "autoprefixer": "8.5.0",
52 "babel-core": "6.26.0", 54 "babel-core": "6.26.0",
53 "babel-helper-vue-jsx-merge-props": "2.0.3", 55 "babel-helper-vue-jsx-merge-props": "2.0.3",
src/views/bigscreenDesigner/designer/components/LabelTag.vue 0 → 100644
  View file @4bad9ea
  1 +<template>
  2 + <div class="label-tag">
  3 + <template v-if="mergedConfig">
  4 + <div class="label-item" v-for="(label, i) in mergedConfig.data" :key="label" :style="mergedConfig.labelStyle">
  5 + <div :style="`background-color: ${mergedConfig.colors[i % mergedConfig.colors.length]};margin-right:5px`" />{{ label }}
  6 + </div>
  7 + </template>
  8 + </div>
  9 +</template>
  10 +
  11 +<script>
  12 +import { deepMerge } from '@jiaminghi/charts/lib/util/index'
  13 +
  14 +import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
  15 +
  16 +export default {
  17 + name: 'LabelTag',
  18 + props: {
  19 + config: {
  20 + type: Object,
  21 + default: () => ([])
  22 + }
  23 + },
  24 + data () {
  25 + return {
  26 + defaultConfig: {
  27 + /**
  28 + * @description Label data
  29 + * @type {Array<String>}
  30 + * @default data = []
  31 + * @example data = ['label1', 'label2']
  32 + */
  33 + data: [],
  34 + /**
  35 + * @description Label color (Hex|Rgb|Rgba|color keywords)
  36 + * @type {Array<String>}
  37 + * @default colors = ['#00baff', '#3de7c9', '#fff', '#ffc530', '#469f4b']
  38 + * @example colors = ['#666', 'rgb(0, 0, 0)', 'rgba(0, 0, 0, 1)', 'red']
  39 + */
  40 + colors: ['#00baff', '#3de7c9', '#fff', '#ffc530', '#469f4b']
  41 + },
  42 +
  43 + mergedConfig: null
  44 + }
  45 + },
  46 + watch: {
  47 + config () {
  48 + const { mergeConfig } = this
  49 +
  50 + mergeConfig()
  51 + }
  52 + },
  53 + methods: {
  54 + mergeConfig () {
  55 + let { config, defaultConfig } = this
  56 +
  57 + this.mergedConfig = deepMerge(deepClone(defaultConfig, true), config || {})
  58 + }
  59 + },
  60 + mounted () {
  61 + const { mergeConfig } = this
  62 +
  63 + mergeConfig()
  64 + }
  65 +}
  66 +</script>
  67 +
  68 +<style scoped lang="scss">
  69 +.label-tag {
  70 + display: flex;
  71 + justify-content: center;
  72 + align-items: center;
  73 +
  74 + .label-item {
  75 + margin: 5px;
  76 + font-size: 25px;
  77 + display: flex;
  78 + align-items: center;
  79 + div {
  80 + width: 12px;
  81 + height: 12px;
  82 + margin-left: 5px;
  83 + }
  84 + }
  85 +}
  86 +</style>
src/views/bigscreenDesigner/designer/tools/configure/lineCharts/widget-line-stack.js
  View file @4bad9ea
@@ -794,8 +794,8 @@ export const widgetLineStack = { @@ -794,8 +794,8 @@ export const widgetLineStack = {
794 placeholder: '', 794 placeholder: '',
795 relactiveDom: 'dataType', 795 relactiveDom: 'dataType',
796 relactiveDomValue: 'dynamicData', 796 relactiveDomValue: 'dynamicData',
797 - chartType: 'widget-stackchart',  
798 - dictKey: 'STACK_PROPERTIES', 797 + chartType: 'widget-linechart_stack',
  798 + dictKey: 'LINE_STACK_PROPERTIES',
799 value: '', 799 value: '',
800 }, 800 },
801 ], 801 ],
src/views/bigscreenDesigner/designer/tools/configure/pieCharts/widget-active-ring-chart.js
  View file @4bad9ea
@@ -90,20 +90,127 @@ export const widgetActiveRingChart= { @@ -90,20 +90,127 @@ export const widgetActiveRingChart= {
90 placeholder: '', 90 placeholder: '',
91 value: '' 91 value: ''
92 }, 92 },
93 - [{  
94 - name: '环颜色',  
95 - list: [  
96 - {  
97 - type: 'customColor',  
98 - label: '',  
99 - name: 'customColor',  
100 - required: false,  
101 - value: [{ color: '#0CD2E6' }, { color: '#00BFA5' }, { color: '#FFC722' }, { color: '#886EFF' }, { color: '#008DEC' }],  
102 - },  
103 - ],  
104 - }],  
105 [ 93 [
106 { 94 {
  95 + name: '标题设置',
  96 + list: [
  97 + {
  98 + type: 'el-switch',
  99 + label: '标题显示',
  100 + name: 'isNoTitle',
  101 + required: false,
  102 + placeholder: '',
  103 + value: false,
  104 + },
  105 + {
  106 + type: 'el-input-text',
  107 + label: '标题名',
  108 + name: 'titleText',
  109 + required: false,
  110 + placeholder: '',
  111 + value: '标题名',
  112 + },
  113 + {
  114 + type: 'vue-color',
  115 + label: '字体颜色',
  116 + name: 'textColor',
  117 + required: false,
  118 + placeholder: '',
  119 + value: '#FFD700'
  120 + },
  121 + {
  122 + type: 'el-input-number',
  123 + label: '字体字号',
  124 + name: 'textFontSize',
  125 + required: false,
  126 + placeholder: '',
  127 + value: 20
  128 + },
  129 + {
  130 + type: 'el-select',
  131 + label: '字体粗细',
  132 + name: 'textFontWeight',
  133 + required: false,
  134 + placeholder: '',
  135 + selectOptions: [
  136 + { code: 'normal', name: '正常' },
  137 + { code: 'bold', name: '粗体' },
  138 + { code: 'bolder', name: '特粗体' },
  139 + { code: 'lighter', name: '细体' }
  140 + ],
  141 + value: 'normal'
  142 + },
  143 + {
  144 + type: 'el-select',
  145 + label: '字体风格',
  146 + name: 'textFontStyle',
  147 + required: false,
  148 + placeholder: '',
  149 + selectOptions: [
  150 + { code: 'normal', name: '正常' },
  151 + { code: 'italic', name: 'italic斜体' },
  152 + { code: 'oblique', name: 'oblique斜体' },
  153 + ],
  154 + value: 'normal'
  155 + },
  156 + {
  157 + type: 'el-select',
  158 + label: '字体位置',
  159 + name: 'textAlign',
  160 + required: false,
  161 + placeholder: '',
  162 + selectOptions: [
  163 + { code: 'center', name: '居中' },
  164 + { code: 'left', name: '左对齐' },
  165 + { code: 'right', name: '右对齐' },
  166 + ],
  167 + value: 'center'
  168 + }
  169 + ],
  170 + },
  171 + {
  172 + name: '提示语设置',
  173 + list: [
  174 + {
  175 + type: 'el-switch',
  176 + label: '提示语显示',
  177 + name: 'isNoTipTitle',
  178 + required: false,
  179 + placeholder: '',
  180 + value: false,
  181 + },
  182 + {
  183 + type: 'el-input-number',
  184 + label: '字体字号',
  185 + name: 'tipFontSize',
  186 + required: false,
  187 + placeholder: '',
  188 + value: 16
  189 + },
  190 + {
  191 + type: 'vue-color',
  192 + label: '字体颜色',
  193 + name: 'tipsColor',
  194 + required: false,
  195 + placeholder: '',
  196 + value: '#00FEFF'
  197 + },
  198 + {
  199 + type: 'el-select',
  200 + label: '字体位置',
  201 + name: 'tipsAlign',
  202 + required: false,
  203 + placeholder: '',
  204 + selectOptions: [
  205 + { code: 'up', name: '头部' },
  206 + { code: 'down', name: '底部' }
  207 +
  208 + ],
  209 + value: 'down'
  210 + }
  211 + ],
  212 + },
  213 + {
107 name: '数字翻牌器样式', 214 name: '数字翻牌器样式',
108 list: [ 215 list: [
109 { 216 {
@@ -137,12 +244,22 @@ export const widgetActiveRingChart= { @@ -137,12 +244,22 @@ export const widgetActiveRingChart= {
137 value: 'normal' 244 value: 'normal'
138 }, 245 },
139 ], 246 ],
  247 + },
  248 + {
  249 + name: '环颜色',
  250 + list: [
  251 + {
  252 + type: 'customColor',
  253 + label: '',
  254 + name: 'customColor',
  255 + required: false,
  256 + value: [{ color: '#0CD2E6' }, { color: '#00BFA5' }, { color: '#FFC722' }, { color: '#886EFF' }, { color: '#008DEC' }],
  257 + },
  258 + ],
140 } 259 }
141 ] 260 ]
142 -  
143 ], 261 ],
144 // 数据 262 // 数据
145 - // 数据  
146 data: [ 263 data: [
147 { 264 {
148 type: 'el-radio-group', 265 type: 'el-radio-group',
src/views/bigscreenDesigner/designer/tools/configure/pieCharts/widget-radio-piechart.js 0 → 100644
  View file @4bad9ea
  1 +/*
  2 + * @Descripttion: 空心饼图
  3 + */
  4 +export const widgetRadioPiechart= {
  5 + code: 'widget-radio-piechart',
  6 + type: 'pieChart',
  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: 'vue-color',
  23 + label: '背景颜色',
  24 + name: 'background',
  25 + required: false,
  26 + placeholder: '',
  27 + value: ''
  28 + },
  29 + {
  30 + type: 'el-select',
  31 + label: '饼图样式',
  32 + name: 'piechartStyle',
  33 + required: false,
  34 + placeholder: '',
  35 + selectOptions: [
  36 + { code: 'shixin', name: '实心饼图' },
  37 + { code: 'kongxin', name: '空心饼图' },
  38 + ],
  39 + value: 'shixin'
  40 + },
  41 + [
  42 + {
  43 + name: '标题设置',
  44 + list: [
  45 + {
  46 + type: 'el-switch',
  47 + label: '标题显示',
  48 + name: 'isNoTitle',
  49 + required: false,
  50 + placeholder: '',
  51 + value: true,
  52 + },
  53 + {
  54 + type: 'el-input-text',
  55 + label: '标题名',
  56 + name: 'titleText',
  57 + required: false,
  58 + placeholder: '',
  59 + value: '',
  60 + },
  61 + {
  62 + type: 'vue-color',
  63 + label: '字体颜色',
  64 + name: 'textColor',
  65 + required: false,
  66 + placeholder: '',
  67 + value: '#FFD700'
  68 + },
  69 + {
  70 + type: 'el-input-number',
  71 + label: '字体字号',
  72 + name: 'textFontSize',
  73 + required: false,
  74 + placeholder: '',
  75 + value: 20
  76 + },
  77 + {
  78 + type: 'el-select',
  79 + label: '字体粗细',
  80 + name: 'textFontWeight',
  81 + required: false,
  82 + placeholder: '',
  83 + selectOptions: [
  84 + { code: 'normal', name: '正常' },
  85 + { code: 'bold', name: '粗体' },
  86 + { code: 'bolder', name: '特粗体' },
  87 + { code: 'lighter', name: '细体' }
  88 + ],
  89 + value: 'normal'
  90 + },
  91 + {
  92 + type: 'el-select',
  93 + label: '字体风格',
  94 + name: 'textFontStyle',
  95 + required: false,
  96 + placeholder: '',
  97 + selectOptions: [
  98 + { code: 'normal', name: '正常' },
  99 + { code: 'italic', name: 'italic斜体' },
  100 + { code: 'oblique', name: 'oblique斜体' },
  101 + ],
  102 + value: 'normal'
  103 + },
  104 + {
  105 + type: 'el-select',
  106 + label: '字体位置',
  107 + name: 'textAlign',
  108 + required: false,
  109 + placeholder: '',
  110 + selectOptions: [
  111 + { code: 'center', name: '居中' },
  112 + { code: 'left', name: '左对齐' },
  113 + { code: 'right', name: '右对齐' },
  114 + ],
  115 + value: 'center'
  116 + },
  117 + {
  118 + type: 'el-input-text',
  119 + label: '副标题名',
  120 + name: 'subText',
  121 + required: false,
  122 + placeholder: '',
  123 + value: ''
  124 + },
  125 + {
  126 + type: 'vue-color',
  127 + label: '字体颜色',
  128 + name: 'subTextColor',
  129 + required: false,
  130 + placeholder: '',
  131 + value: 'rgba(30, 144, 255, 1)'
  132 + },
  133 + {
  134 + type: 'el-input-number',
  135 + label: '字体字号',
  136 + name: 'subTextFontSize',
  137 + required: false,
  138 + placeholder: '',
  139 + value: 20
  140 + },
  141 + {
  142 + type: 'el-select',
  143 + label: '字体粗细',
  144 + name: 'subTextFontWeight',
  145 + required: false,
  146 + placeholder: '',
  147 + selectOptions: [
  148 + { code: 'normal', name: '正常' },
  149 + { code: 'bold', name: '粗体' },
  150 + { code: 'bolder', name: '特粗体' },
  151 + { code: 'lighter', name: '细体' }
  152 + ],
  153 + value: 'normal'
  154 + },
  155 + {
  156 + type: 'el-select',
  157 + label: '字体风格',
  158 + name: 'subTextFontStyle',
  159 + required: false,
  160 + placeholder: '',
  161 + selectOptions: [
  162 + { code: 'normal', name: '正常' },
  163 + { code: 'italic', name: 'italic斜体' },
  164 + { code: 'oblique', name: 'oblique斜体' },
  165 + ],
  166 + value: 'normal'
  167 + },
  168 + ],
  169 + },
  170 + {
  171 + name: '数值设定',
  172 + list: [
  173 + {
  174 + type: 'el-switch',
  175 + label: '显示',
  176 + name: 'isShow',
  177 + required: false,
  178 + placeholder: '',
  179 + value: true,
  180 + },
  181 + {
  182 + type: 'el-switch',
  183 + label: '标题',
  184 + name: 'isShowTitle',
  185 + require: false,
  186 + placeholder: '',
  187 + value: true,
  188 + },
  189 + {
  190 + type: 'el-switch',
  191 + label: '数值',
  192 + name: 'numberValue',
  193 + require: false,
  194 + placeholder: '',
  195 + value: true,
  196 + },
  197 + {
  198 + type: 'el-switch',
  199 + label: '百分比',
  200 + name: 'percentage',
  201 + require: false,
  202 + placeholder: '',
  203 + value: false,
  204 + },
  205 + {
  206 + type: 'el-input-number',
  207 + label: '字体字号',
  208 + name: 'fontSize',
  209 + required: false,
  210 + placeholder: '',
  211 + value: 12,
  212 + },
  213 + {
  214 + type: 'vue-color',
  215 + label: '字体颜色',
  216 + name: 'subTextColor',
  217 + required: false,
  218 + placeholder: '',
  219 + value: ''
  220 + },
  221 + {
  222 + type: 'el-select',
  223 + label: '字体粗细',
  224 + name: 'fontWeight',
  225 + required: false,
  226 + placeholder: '',
  227 + selectOptions: [
  228 + { code: 'normal', name: '正常' },
  229 + { code: 'bold', name: '粗体' },
  230 + { code: 'bolder', name: '特粗体' },
  231 + { code: 'lighter', name: '细体' }
  232 + ],
  233 + value: 'normal'
  234 + },
  235 + ],
  236 + },
  237 + {
  238 + name: '提示语设置',
  239 + list: [
  240 + {
  241 + type: 'el-input-number',
  242 + label: '字体字号',
  243 + name: 'tipFontSize',
  244 + required: false,
  245 + placeholder: '',
  246 + value: 16
  247 + },
  248 + {
  249 + type: 'vue-color',
  250 + label: '字体颜色',
  251 + name: 'tipsColor',
  252 + required: false,
  253 + placeholder: '',
  254 + value: '#00FEFF'
  255 + },
  256 + ],
  257 + },
  258 + {
  259 + name: '图例操作',
  260 + list: [
  261 + {
  262 + type: 'el-switch',
  263 + label: '图例',
  264 + name: 'isShowLegend',
  265 + required: false,
  266 + placeholder: '',
  267 + value: true,
  268 + },
  269 + {
  270 + type: 'el-slider',
  271 + label: '图例占比',
  272 + name: 'piechartSize',
  273 + required: false,
  274 + placeholder: '',
  275 + value: 70,
  276 + },
  277 + {
  278 + type: 'el-slider',
  279 + label: '环形宽度',
  280 + name: 'randWidth',
  281 + required: false,
  282 + placeholder: '',
  283 + value: 40,
  284 + },
  285 + {
  286 + type: 'vue-color',
  287 + label: '字体颜色',
  288 + name: 'legendColor',
  289 + required: false,
  290 + placeholder: '',
  291 + value: '#fff',
  292 + },
  293 + {
  294 + type: 'el-input-number',
  295 + label: '字体字号',
  296 + name: 'legendFontSize',
  297 + required: false,
  298 + placeholder: '',
  299 + value: 16,
  300 + },
  301 + {
  302 + type: 'el-input-number',
  303 + label: '图例宽度',
  304 + name: 'legendWidth',
  305 + required: false,
  306 + placeholder: '',
  307 + value: 15,
  308 + },
  309 + {
  310 + type: 'el-select',
  311 + label: '横向位置',
  312 + name: 'lateralPosition',
  313 + required: false,
  314 + placeholder: '',
  315 + selectOptions: [
  316 + { code: 'center', name: '居中' },
  317 + { code: 'left', name: '左对齐' },
  318 + { code: 'right', name: '右对齐' },
  319 + ],
  320 + value: 'center'
  321 + },
  322 + {
  323 + type: 'el-select',
  324 + label: '纵向位置',
  325 + name: 'longitudinalPosition',
  326 + required: false,
  327 + placeholder: '',
  328 + selectOptions: [
  329 + { code: 'top', name: '顶部' },
  330 + { code: 'center', name: '居中' },
  331 + { code: 'bottom', name: '底部' },
  332 + ],
  333 + value: 'top'
  334 + },
  335 + {
  336 + type: 'el-select',
  337 + label: '布局前置',
  338 + name: 'layoutFront',
  339 + required: false,
  340 + placeholder: '',
  341 + selectOptions: [
  342 + { code: 'vertical', name: '竖排' },
  343 + { code: 'horizontal', name: '横排' },
  344 + ],
  345 + value: 'horizontal'
  346 + },
  347 + ],
  348 + },
  349 + {
  350 + name: '自定义配色',
  351 + list: [
  352 + {
  353 + type: 'customColor',
  354 + label: '',
  355 + name: 'customColor',
  356 + required: false,
  357 + value: [{ color: '#0CD2E6' }, { color: '#00BFA5' }, { color: '#FFC722' }, { color: '#886EFF' }, { color: '#008DEC' }],
  358 + },
  359 + ],
  360 + },
  361 + ],
  362 + ],
  363 + // 数据
  364 + data: [
  365 + {
  366 + type: 'el-radio-group',
  367 + label: '数据类型',
  368 + name: 'dataType',
  369 + require: false,
  370 + placeholder: '',
  371 + selectValue: true,
  372 + selectOptions: [
  373 + {
  374 + code: 'staticData',
  375 + name: '静态数据',
  376 + },
  377 + {
  378 + code: 'dynamicData',
  379 + name: '动态数据',
  380 + },
  381 + ],
  382 + value: 'staticData',
  383 + },
  384 + {
  385 + type: 'el-input-number',
  386 + label: '刷新时间(毫秒)',
  387 + name: 'refreshTime',
  388 + relactiveDom: 'dataType',
  389 + relactiveDomValue: 'dynamicData',
  390 + value: 3600000
  391 + },
  392 + {
  393 + type: 'el-button',
  394 + label: '静态数据',
  395 + name: 'staticData',
  396 + required: false,
  397 + placeholder: '',
  398 + relactiveDom: 'dataType',
  399 + relactiveDomValue: 'staticData',
  400 + value: [{ "value": 1048, "name": "搜索引擎" }, { "value": 735, "name": "直接访问" }, { "value": 580, "name": "邮件营销" }, { "value": 484, "name": "联盟广告" }, { "value": 300, "name": "视频广告" }]
  401 + },
  402 + {
  403 + type: 'dycustComponents',
  404 + label: '',
  405 + name: 'dynamicData',
  406 + required: false,
  407 + placeholder: '',
  408 + relactiveDom: 'dataType',
  409 + chartType: 'widget-piechart',
  410 + relactiveDomValue: 'dynamicData',
  411 + dictKey: 'PIE_PROPERTIES',
  412 + value: '',
  413 + },
  414 + ],
  415 + // 坐标
  416 + position: [
  417 + {
  418 + type: 'el-input-number',
  419 + label: '左边距',
  420 + name: 'left',
  421 + required: false,
  422 + placeholder: '',
  423 + value: 0,
  424 + },
  425 + {
  426 + type: 'el-input-number',
  427 + label: '上边距',
  428 + name: 'top',
  429 + required: false,
  430 + placeholder: '',
  431 + value: 0,
  432 + },
  433 + {
  434 + type: 'el-input-number',
  435 + label: '宽度',
  436 + name: 'width',
  437 + required: false,
  438 + placeholder: '该容器在1920px大屏中的宽度',
  439 + value: 400,
  440 + },
  441 + {
  442 + type: 'el-input-number',
  443 + label: '高度',
  444 + name: 'height',
  445 + required: false,
  446 + placeholder: '该容器在1080px大屏中的高度',
  447 + value: 200,
  448 + },
  449 + ],
  450 + }
  451 +}
src/views/bigscreenDesigner/designer/tools/configure/texts/widget-digital-flop-single.js
  View file @4bad9ea
@@ -36,14 +36,6 @@ export const widgetDigitalFlopSingle= { @@ -36,14 +36,6 @@ export const widgetDigitalFlopSingle= {
36 value: '', 36 value: '',
37 }, 37 },
38 { 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', 39 type: 'el-switch',
48 label: '千位符显示', 40 label: '千位符显示',
49 name: 'isFormatterNum', 41 name: 'isFormatterNum',
@@ -54,31 +46,38 @@ export const widgetDigitalFlopSingle= { @@ -54,31 +46,38 @@ export const widgetDigitalFlopSingle= {
54 { 46 {
55 type: 'el-input-number', 47 type: 'el-input-number',
56 label: '小数位数', 48 label: '小数位数',
57 - name: 'toFixed', 49 + name: 'decimals',
58 required: false, 50 required: false,
59 placeholder: '', 51 placeholder: '',
60 - value: 0, 52 + value: 2,
61 }, 53 },
62 { 54 {
63 - type: 'el-select',  
64 - label: '水平对齐方式',  
65 - name: 'textAlign', 55 + type: 'el-input-number',
  56 + label: '动效帧数',
  57 + name: 'duration',
66 required: false, 58 required: false,
67 placeholder: '', 59 placeholder: '',
68 - selectOptions: [  
69 - {code: 'center', name: '居中'},  
70 - {code: 'left', name: '左对齐'},  
71 - {code: 'right', name: '右对齐'}  
72 - ],  
73 - value: 'center' 60 + value: 3000,
74 }, 61 },
75 { 62 {
76 - type: 'el-input-number',  
77 - label: '动效帧数',  
78 - name: 'animationFrame', 63 + type: 'el-input-text',
  64 + label: '文本',
  65 + name: 'numberText',
79 required: false, 66 required: false,
80 placeholder: '', 67 placeholder: '',
81 - value: 100, 68 + value: '',
  69 + },
  70 + {
  71 + type: 'el-select',
  72 + label: '文本位置',
  73 + name: 'numberTextFix',
  74 + required: false,
  75 + placeholder: '',
  76 + selectOptions: [
  77 + {code: 'prefix', name: '前缀'},
  78 + {code: 'suffix', name: '后缀'}
  79 + ],
  80 + value: 'prefix'
82 }, 81 },
83 [ 82 [
84 { 83 {
@@ -87,7 +86,7 @@ export const widgetDigitalFlopSingle= { @@ -87,7 +86,7 @@ export const widgetDigitalFlopSingle= {
87 { 86 {
88 type: 'vue-color', 87 type: 'vue-color',
89 label: '颜色', 88 label: '颜色',
90 - name: 'fill', 89 + name: 'color',
91 required: false, 90 required: false,
92 placeholder: '', 91 placeholder: '',
93 value: '#3de7c9' 92 value: '#3de7c9'
src/views/bigscreenDesigner/designer/tools/main.js
  View file @4bad9ea
@@ -17,6 +17,7 @@ import { widgetGradientBarchart } from &quot;./configure/barCharts/widget-gradient-ba @@ -17,6 +17,7 @@ import { widgetGradientBarchart } from &quot;./configure/barCharts/widget-gradient-ba
17 import { widgetLinechart } from "./configure/lineCharts/widget-linechart" 17 import { widgetLinechart } from "./configure/lineCharts/widget-linechart"
18 import { widgetBarlinechart } from "./configure/barlineCharts/widget-barlinechart" 18 import { widgetBarlinechart } from "./configure/barlineCharts/widget-barlinechart"
19 import { widgetPiechart } from "./configure/pieCharts/widget-piechart" 19 import { widgetPiechart } from "./configure/pieCharts/widget-piechart"
  20 +import {widgetRadioPiechart} from "./configure/pieCharts/widget-radio-piechart"
20 import { widgetFunnel } from "./configure/funnelCharts/widget-funnel" 21 import { widgetFunnel } from "./configure/funnelCharts/widget-funnel"
21 import { widgetGauge } from "./configure/percentCharts/widget-gauge" 22 import { widgetGauge } from "./configure/percentCharts/widget-gauge"
22 import { widgetLineMap } from "./configure/mapCharts/widget-line-map" 23 import { widgetLineMap } from "./configure/mapCharts/widget-line-map"
@@ -93,5 +94,6 @@ export const widgetTool = [ @@ -93,5 +94,6 @@ export const widgetTool = [
93 widgetBorderBoxFloat, 94 widgetBorderBoxFloat,
94 widgetDigitalFlopSingle, 95 widgetDigitalFlopSingle,
95 widgetSvg, 96 widgetSvg,
96 - widgetRotateRanking 97 + widgetRotateRanking,
  98 + widgetRadioPiechart
97 ] 99 ]
src/views/bigscreenDesigner/designer/widget/line/widgetLineStackChart.vue
  View file @4bad9ea
@@ -276,20 +276,24 @@ export default { @@ -276,20 +276,24 @@ export default {
276 const optionsSetup = this.optionsSetup; 276 const optionsSetup = this.optionsSetup;
277 const dataZoom ={}; 277 const dataZoom ={};
278 const dataZoomList =[]; 278 const dataZoomList =[];
279 - dataZoom.type= 'slider';  
280 - dataZoom.show= optionsSetup.isShowZoom;//显示滚动条  
281 - dataZoom.zoomLock=false;//锁定滚动条缩放，（固定滚动条长度）  
282 - dataZoom.left=optionsSetup.bottomLeft+'%';//离左边的百分比距离  
283 - dataZoom.bottom=optionsSetup.bottomZoom;//距离底部距离  
284 - dataZoom.start=optionsSetup.startZoom;//开始位置  
285 - dataZoom.end=optionsSetup.endZoom;//结束位置  
286 - dataZoom.showDataShadow=true; //屏蔽折线图，true为显示折线图  
287 - // dataZoom.barBorderRadius=optionsSetup.borderRadiusZoom;  
288 - dataZoom.borderColor=optionsSetup.borderColorZoom;  
289 - dataZoom.height=optionsSetup.heightZoom;  
290 - dataZoom.backgroundColor=optionsSetup.backgroundColorZoom;  
291 - dataZoomList.push(dataZoom);  
292 - this.options.dataZoom=dataZoomList; 279 + if(this.isNotBlank(optionsSetup.isShowZoom) && optionsSetup.isShowZoom){
  280 + dataZoom.type= 'slider';
  281 + dataZoom.show= optionsSetup.isShowZoom;//显示滚动条
  282 + dataZoom.zoomLock=false;//锁定滚动条缩放，（固定滚动条长度）
  283 + dataZoom.left=optionsSetup.bottomLeft+'%';//离左边的百分比距离
  284 + dataZoom.bottom=optionsSetup.bottomZoom;//距离底部距离
  285 + dataZoom.start=optionsSetup.startZoom;//开始位置
  286 + dataZoom.end=optionsSetup.endZoom;//结束位置
  287 + dataZoom.showDataShadow=true; //屏蔽折线图，true为显示折线图
  288 + // dataZoom.barBorderRadius=optionsSetup.borderRadiusZoom;
  289 + dataZoom.borderColor=optionsSetup.borderColorZoom;
  290 + dataZoom.height=optionsSetup.heightZoom;
  291 + dataZoom.backgroundColor=optionsSetup.backgroundColorZoom;
  292 + dataZoomList.push(dataZoom);
  293 + this.options.dataZoom=dataZoomList;
  294 + }else{
  295 + this.options.dataZoom=null;
  296 + }
293 this.options={...this.options}; 297 this.options={...this.options};
294 }, 298 },
295 // 图例名称设置 299 // 图例名称设置
@@ -440,64 +444,65 @@ export default { @@ -440,64 +444,65 @@ export default {
440 }); 444 });
441 }, 445 },
442 renderingFn(optionsSetup, val) { 446 renderingFn(optionsSetup, val) {
  447 + this.staticDataFn(val);
443 //颜色 448 //颜色
444 - const customColor = optionsSetup.customColor;  
445 - const arrColor = [];  
446 - for (let i = 0; i < customColor.length; i++) {  
447 - arrColor.push(customColor[i].color);  
448 - }  
449 - // x轴  
450 - if (optionsSetup.verticalShow) {  
451 - this.options.xAxis.data = [];  
452 - this.options.yAxis.data = val.xAxis;  
453 - this.options.xAxis.type = "value";  
454 - this.options.yAxis.type = "category";  
455 - } else {  
456 - this.options.xAxis.data = val.xAxis;  
457 - this.options.yAxis.data = [];  
458 - this.options.xAxis.type = "category";  
459 - this.options.yAxis.type = "value";  
460 - }  
461 - const series = [];  
462 - const legendName = [];  
463 - for (const i in val.series) {  
464 - if (val.series[i].type == "line") {  
465 - series.push({  
466 - name: val.series[i].name,  
467 - type: "line",  
468 - data: val.series[i].data,  
469 - width: optionsSetup.lineWidth,  
470 - symbol: optionsSetup.symbol,  
471 - showSymbol: optionsSetup.markPoint,  
472 - symbolSize: optionsSetup.pointSize,  
473 - symbolColor: arrColor[i],  
474 - smooth: optionsSetup.smoothCurve,  
475 - // 线条  
476 - lineStyle: {  
477 - color: arrColor[i],  
478 - width: optionsSetup.lineWidth,  
479 - },  
480 - //点  
481 - itemStyle: {  
482 - color: arrColor[i],  
483 - },  
484 - areaStyle: this.getOptionArea(),  
485 - // 标题部分  
486 - label: {  
487 - show: optionsSetup.isShow,  
488 - position: "top",  
489 - distance: 10,  
490 - fontSize: optionsSetup.fontSize,  
491 - color: optionsSetup.subTextColor,  
492 - fontWeight: optionsSetup.fontWeight,  
493 - },  
494 - })  
495 - }  
496 - legendName.push(val.series[i].name);  
497 - }  
498 - this.options.series = series;  
499 - this.options.legend['data'] = legendName;  
500 - this.setOptionsLegendName(legendName); 449 + // const customColor = optionsSetup.customColor;
  450 + // const arrColor = [];
  451 + // for (let i = 0; i < customColor.length; i++) {
  452 + // arrColor.push(customColor[i].color);
  453 + // }
  454 + // // x轴
  455 + // if (optionsSetup.verticalShow) {
  456 + // this.options.xAxis.data = [];
  457 + // this.options.yAxis.data = val.xAxis;
  458 + // this.options.xAxis.type = "value";
  459 + // this.options.yAxis.type = "category";
  460 + // } else {
  461 + // this.options.xAxis.data = val.xAxis;
  462 + // this.options.yAxis.data = [];
  463 + // this.options.xAxis.type = "category";
  464 + // this.options.yAxis.type = "value";
  465 + // }
  466 + // const series = [];
  467 + // const legendName = [];
  468 + // for (const i in val.series) {
  469 + // if (val.series[i].type == "line") {
  470 + // series.push({
  471 + // name: val.series[i].name,
  472 + // type: "line",
  473 + // data: val.series[i].data,
  474 + // width: optionsSetup.lineWidth,
  475 + // symbol: optionsSetup.symbol,
  476 + // showSymbol: optionsSetup.markPoint,
  477 + // symbolSize: optionsSetup.pointSize,
  478 + // symbolColor: arrColor[i],
  479 + // smooth: optionsSetup.smoothCurve,
  480 + // // 线条
  481 + // lineStyle: {
  482 + // color: arrColor[i],
  483 + // width: optionsSetup.lineWidth,
  484 + // },
  485 + // //点
  486 + // itemStyle: {
  487 + // color: arrColor[i],
  488 + // },
  489 + // areaStyle: this.getOptionArea(),
  490 + // // 标题部分
  491 + // label: {
  492 + // show: optionsSetup.isShow,
  493 + // position: "top",
  494 + // distance: 10,
  495 + // fontSize: optionsSetup.fontSize,
  496 + // color: optionsSetup.subTextColor,
  497 + // fontWeight: optionsSetup.fontWeight,
  498 + // },
  499 + // })
  500 + // }
  501 + // legendName.push(val.series[i].name);
  502 + // }
  503 + // this.options.series = series;
  504 + // this.options.legend['data'] = legendName;
  505 + // this.setOptionsLegendName(legendName);
501 } 506 }
502 } 507 }
503 }; 508 };
src/views/bigscreenDesigner/designer/widget/pie/widgetActiveRingChart.vue
  View file @4bad9ea
@@ -2,23 +2,29 @@ @@ -2,23 +2,29 @@
2 动态环图 2 动态环图
3 --> 3 -->
4 <template> 4 <template>
5 -<!-- <div id="widget-active-ring-chart" :style="styleObj">-->  
6 - <dv-active-ring-chart :config="options" :style="styleObj"/>  
7 -<!-- </div>--> 5 + <div class="bc-chart-item" :style="styleObj" v-if="isRouterAlive" >
  6 + <div class="bcci-header" :style="titleConfig.titleStyle" v-if="titleConfig.isNoTitle" >{{titleConfig.titleText}}</div>
  7 + <Label-Tag :config="labelConfig" v-if="labelConfig.isNoTipTitle && labelConfig.tipsAlign=='up'"/>
  8 + <dv-active-ring-chart :config="options" :style="styleRingChart"/>
  9 + <Label-Tag :config="labelConfig" v-if="labelConfig.isNoTipTitle && labelConfig.tipsAlign=='down'"/>
  10 + </div>
8 </template> 11 </template>
9 <script> 12 <script>
10 import Vue from "vue"; 13 import Vue from "vue";
  14 +import LabelTag from '../../components/LabelTag'
11 import activeRingChart from "@jiaminghi/data-view/lib/components/activeRingChart"; 15 import activeRingChart from "@jiaminghi/data-view/lib/components/activeRingChart";
12 Vue.use(activeRingChart) 16 Vue.use(activeRingChart)
13 export default { 17 export default {
14 - name: "WidgetActiveRingChart", 18 + name: "widgetActiveRingChart",
15 props: { 19 props: {
16 value: Object, 20 value: Object,
17 ispreview: Boolean, 21 ispreview: Boolean,
18 }, 22 },
  23 + components: {
  24 + LabelTag
  25 + },
19 data() { 26 data() {
20 return { 27 return {
21 - //返回图标数据  
22 options: { 28 options: {
23 radius:'75%',//环半径 29 radius:'75%',//环半径
24 activeRadius:'85%',//环半径（动态） 30 activeRadius:'85%',//环半径（动态）
@@ -27,8 +33,8 @@ export default { @@ -27,8 +33,8 @@ export default {
27 activeTimeGap:3000,//切换间隔(ms) 33 activeTimeGap:3000,//切换间隔(ms)
28 color:[],//环颜色 34 color:[],//环颜色
29 digitalFlopStyle: { 35 digitalFlopStyle: {
30 - fontSize: 30,  
31 - fill: '#3de7c9' 36 + fontSize: 30,
  37 + fill: '#3de7c9'
32 },//数字翻牌器样式 38 },//数字翻牌器样式
33 digitalFlopToFixed :0,//数字翻牌器小数位数 39 digitalFlopToFixed :0,//数字翻牌器小数位数
34 digitalFlopUnit :'',//数字翻牌器单位 40 digitalFlopUnit :'',//数字翻牌器单位
@@ -38,8 +44,30 @@ export default { @@ -38,8 +44,30 @@ export default {
38 optionsStyle: {}, // 样式 44 optionsStyle: {}, // 样式
39 optionsData: {}, // 数据 45 optionsData: {}, // 数据
40 optionsCollapse: {}, // 图标属性 46 optionsCollapse: {}, // 图标属性
41 - optionsSetup: {}  
42 - }; 47 + optionsSetup: {},
  48 + labelConfig: {
  49 + data: [],
  50 + colors:[],
  51 + labelStyle:{},
  52 + isNoTipTitle:false,
  53 + tipsAlign:'down',
  54 + },
  55 + titleConfig:{
  56 + titleStyle:{},
  57 + isNoTitle:false,
  58 + titleText:"测试标题"
  59 + },
  60 + flagInter: null,
  61 + isRouterAlive:true,
  62 + }
  63 + },
  64 + provide(){
  65 + return{
  66 + reload:this.reload
  67 + }
  68 + },
  69 + beforeDestroy() {
  70 + clearInterval(this.flagInter);
43 }, 71 },
44 computed: { 72 computed: {
45 styleObj() { 73 styleObj() {
@@ -53,6 +81,17 @@ export default { @@ -53,6 +81,17 @@ export default {
53 }; 81 };
54 return style; 82 return style;
55 }, 83 },
  84 + styleRingChart() {
  85 + const style ={
  86 + width: this.optionsStyle.width + "px",
  87 + height: this.optionsStyle.height+ "px",
  88 + left: this.optionsStyle.left + "px",
  89 + top: this.optionsStyle.top-20 + "px",
  90 + position: "static",
  91 + display: 'flex'
  92 + };
  93 + return style;
  94 + }
56 }, 95 },
57 watch: { 96 watch: {
58 value: { 97 value: {
@@ -61,6 +100,7 @@ export default { @@ -61,6 +100,7 @@ export default {
61 this.optionsData = val.data; 100 this.optionsData = val.data;
62 this.optionsSetup = val.setup; 101 this.optionsSetup = val.setup;
63 this.editorOptions(); 102 this.editorOptions();
  103 + this.reload();
64 }, 104 },
65 deep: true 105 deep: true
66 } 106 }
@@ -80,8 +120,44 @@ export default { @@ -80,8 +120,44 @@ export default {
80 this.setOptionsColor(); 120 this.setOptionsColor();
81 //数字翻牌器样式 121 //数字翻牌器样式
82 this.setFontStyle(); 122 this.setFontStyle();
  123 + //设置提示语
  124 + this.setLabelConfig();
  125 + //标题设置
  126 + this.setTitleConfig();
83 //基础数据修改 127 //基础数据修改
84 this.setOptionsConfig(); 128 this.setOptionsConfig();
  129 +
  130 + },
  131 + //提示语设置
  132 + setLabelConfig(){
  133 + const optionsSetup = this.optionsSetup;
  134 + let labelStyle = {};
  135 + if(optionsSetup.isNoTipTitle){
  136 + this.labelConfig.isNoTipTitle = optionsSetup.isNoTipTitle;
  137 + this.labelConfig.tipsAlign = optionsSetup.tipsAlign;
  138 + labelStyle.color = optionsSetup.tipsColor;
  139 + labelStyle['font-size'] = optionsSetup.tipFontSize+'px';
  140 + this.labelConfig.labelStyle = labelStyle;
  141 + }else{
  142 + this.labelConfig.isNoTipTitle = false;
  143 + }
  144 + },
  145 + //标题设置
  146 + setTitleConfig(){
  147 + const optionsSetup = this.optionsSetup;
  148 + let titleStyle = {};
  149 + if(optionsSetup.isNoTitle){
  150 + this.titleConfig.isNoTitle = optionsSetup.isNoTitle;
  151 + this.titleConfig.titleText = optionsSetup.titleText;
  152 + titleStyle.color = optionsSetup.textColor;
  153 + titleStyle['font-size'] = optionsSetup.textFontSize+'px';
  154 + titleStyle['font-style'] = optionsSetup.textFontStyle;
  155 + titleStyle['font-weight'] = optionsSetup.textFontWeight;
  156 + titleStyle['text-align'] = optionsSetup.textAlign;
  157 + this.titleConfig.titleStyle = titleStyle;
  158 + }else{
  159 + this.titleConfig.isNoTitle = false;
  160 + }
85 }, 161 },
86 // 颜色修改 162 // 颜色修改
87 setOptionsColor() { 163 setOptionsColor() {
@@ -93,6 +169,7 @@ export default { @@ -93,6 +169,7 @@ export default {
93 arrColor.push(customColor[i].color); 169 arrColor.push(customColor[i].color);
94 } 170 }
95 this.options.color = arrColor; 171 this.options.color = arrColor;
  172 + this.labelConfig.colors = arrColor;
96 }, 173 },
97 //字体修改 174 //字体修改
98 setFontStyle() { 175 setFontStyle() {
@@ -116,7 +193,7 @@ export default { @@ -116,7 +193,7 @@ export default {
116 this.options.showOriginValue = optionsSetup.showOriginValue; 193 this.options.showOriginValue = optionsSetup.showOriginValue;
117 //改变options 194 //改变options
118 // console.log("配置修改：",this.styleObj); 195 // console.log("配置修改：",this.styleObj);
119 - this.options={...this.options}; 196 + // this.options={...this.options};
120 }, 197 },
121 //数据类型 198 //数据类型
122 setOptionsData() { 199 setOptionsData() {
@@ -129,6 +206,7 @@ export default { @@ -129,6 +206,7 @@ export default {
129 // console.log("设置静态数据",this.options) 206 // console.log("设置静态数据",this.options)
130 const staticData = typeof val == "string" ? JSON.parse(val) : val; 207 const staticData = typeof val == "string" ? JSON.parse(val) : val;
131 this.options.data=staticData; 208 this.options.data=staticData;
  209 + this.setLabelConfigData(val);
132 }, 210 },
133 dynamicDataFn(val, refreshTime) { 211 dynamicDataFn(val, refreshTime) {
134 if (!val) return; 212 if (!val) return;
@@ -150,17 +228,62 @@ export default { @@ -150,17 +228,62 @@ export default {
150 renderingFn(val) { 228 renderingFn(val) {
151 // console.log("设置静态数据",val) 229 // console.log("设置静态数据",val)
152 this.options.data=val; 230 this.options.data=val;
153 - this.options={...this.options};  
154 - } 231 + this.setLabelConfigData(val);
  232 + this.reload();
  233 + },
  234 + setLabelConfigData(val){
  235 + const data = [];
  236 + if(this.isNotBlankArray(val)){
  237 + for(let i = 0;i<val.length;i++){
  238 + const oneVal = val[i];
  239 + data.push(oneVal['name']);
  240 + }
  241 + this.labelConfig.data = data;
  242 + }
  243 + },
  244 + // vue hack 之强制刷新组件
  245 + reload(){
  246 + this.isRouterAlive=false;
  247 + this.$nextTick(function(){
  248 + this.isRouterAlive=true;
  249 + })
  250 + },
155 251
156 } 252 }
157 }; 253 };
158 254
159 </script> 255 </script>
160 <style scoped lang="scss"> 256 <style scoped lang="scss">
161 -.echarts { 257 +.bottom-charts {
162 width: 100%; 258 width: 100%;
163 height: 100%; 259 height: 100%;
164 - overflow: hidden; 260 + position: absolute;
  261 +
  262 + .bc-chart-item {
  263 + //width: 25%;
  264 + //height: 100%;
  265 + //padding-top: 20px;
  266 + //box-sizing: border-box;
  267 + position: absolute;
  268 + }
  269 + .ringChart{
  270 + width: 100%;
  271 + height: 95%;
  272 + position: absolute;
  273 + }
  274 + //.bcci-header {
  275 + // height: 50px;
  276 + // text-align: center;
  277 + // line-height: 50px;
  278 + // font-size: 20px;
  279 + //}
  280 + //
  281 + //.label-tag {
  282 + // height: 30px;
  283 + //}
  284 + //.active-ring-info{ position: absolute;}
  285 + .active-ring-name {
  286 + font-size: 18px!important;
  287 + }
165 } 288 }
166 </style> 289 </style>
src/views/bigscreenDesigner/designer/widget/pie/widgetRadioPiechart.vue 0 → 100644
  View file @4bad9ea
  1 +<template>
  2 + <div :style="styleObj">
  3 + <v-chart :options="options" autoresize/>
  4 + </div>
  5 +</template>
  6 +
  7 +<script>
  8 +export default {
  9 + name: "widgetRadioPiechart",
  10 + components: {},
  11 + props: {
  12 + value: Object,
  13 + ispreview: Boolean
  14 + },
  15 + data() {
  16 + return {
  17 + options: {
  18 + tooltip: {
  19 + trigger: 'item'
  20 + },
  21 + legend: {
  22 + top: '5%',
  23 + left: 'center'
  24 + },
  25 + series: [
  26 + {
  27 + name: 'Access From',
  28 + type: 'pie',
  29 + radius: ['40%', '70%'],
  30 + avoidLabelOverlap: false,
  31 + label: {
  32 + show: false,
  33 + position: 'center'
  34 + },
  35 + emphasis: {
  36 + label: {
  37 + show: true,
  38 + fontSize: 10,
  39 + fontWeight: 'bold'
  40 + },
  41 + scale: true,
  42 + scaleSize: 5
  43 + },
  44 + labelLine: {
  45 + show: false
  46 + },
  47 + data: [
  48 + { value: 1048, name: 'Search Engine' },
  49 + { value: 735, name: 'Direct' },
  50 + { value: 580, name: 'Email' },
  51 + { value: 484, name: 'Union Ads' },
  52 + { value: 300, name: 'Video Ads' }
  53 + ]
  54 + }
  55 + ]
  56 + },
  57 + optionsStyle: {}, // 样式
  58 + optionsData: {}, // 数据
  59 + optionsCollapse: {}, // 图标属性
  60 + optionsSetup: {}
  61 + };
  62 + },
  63 + computed: {
  64 + styleObj() {
  65 + return {
  66 + position: this.ispreview ? "absolute" : "static",
  67 + width: this.optionsStyle.width + "px",
  68 + height: this.optionsStyle.height + "px",
  69 + left: this.optionsStyle.left + "px",
  70 + top: this.optionsStyle.top + "px",
  71 + background: this.optionsSetup.background
  72 + };
  73 + }
  74 + },
  75 + watch: {
  76 + value: {
  77 + handler(val) {
  78 + this.optionsStyle = val.position;
  79 + this.optionsData = val.data;
  80 + this.optionsCollapse = val.collapse;
  81 + this.optionsSetup = val.setup;
  82 + this.editorOptions();
  83 + },
  84 + deep: true
  85 + }
  86 + },
  87 + created() {
  88 + this.optionsStyle = this.value.position;
  89 + this.optionsData = this.value.data;
  90 + this.optionsCollapse = this.value.collapse;
  91 + this.optionsSetup = this.value.setup;
  92 + this.editorOptions();
  93 + },
  94 + methods: {
  95 + // 修改图标options属性
  96 + editorOptions() {
  97 + // this.setOptionsTitle();
  98 + // this.setOptionsValue();
  99 + // this.setOptionsTooltip();
  100 + // this.setOptionsLegend();
  101 + // this.setOptionsColor();
  102 + // this.setOptionsData();
  103 + // this.setOptionsPiechartStyle();
  104 + },
  105 + // 饼图样式
  106 + setOptionsPiechartStyle() {
  107 + const piechartSize = this.optionsSetup.piechartSize;
  108 + const randWidth = this.optionsSetup.randWidth;
  109 + if (this.optionsSetup.piechartStyle == "shixin") {
  110 + this.options.series[0]["radius"] = piechartSize+"%";
  111 + } else if (this.optionsSetup.piechartStyle == "kongxin") {
  112 + this.options.series[0]["radius"] = [randWidth+"%", piechartSize+"%"];
  113 + } else {
  114 +
  115 + }
  116 + },
  117 + // 标题设置
  118 + setOptionsTitle() {
  119 + const optionsSetup = this.optionsSetup;
  120 + const title = {};
  121 + title.text = optionsSetup.titleText;
  122 + title.show = optionsSetup.isNoTitle;
  123 + title.left = optionsSetup.textAlign;
  124 + title.textStyle = {
  125 + color: optionsSetup.textColor,
  126 + fontSize: optionsSetup.textFontSize,
  127 + fontWeight: optionsSetup.textFontWeight,
  128 + fontStyle: optionsSetup.textFontStyle,
  129 + };
  130 + title.subtext = optionsSetup.subText;
  131 + title.subtextStyle = {
  132 + color: optionsSetup.subTextColor,
  133 + fontWeight: optionsSetup.subTextFontWeight,
  134 + fontSize: optionsSetup.subTextFontSize,
  135 + fontStyle: optionsSetup.subTextFontStyle,
  136 + };
  137 + this.options.title = title;
  138 + },
  139 + // 数值设定
  140 + setOptionsValue() {
  141 + const optionsSetup = this.optionsSetup;
  142 + const series = this.options.series;
  143 + const numberValue = optionsSetup.numberValue ? "{c}" : "";
  144 + const percentage = optionsSetup.percentage ? "({d})%" : "";
  145 + const formatterVaue
  146 + = optionsSetup.isShowTitle ?`{a|{b}：${numberValue} ${percentage}}`:`${numberValue} ${percentage}`;
  147 + const label = {
  148 + show: optionsSetup.isShow,
  149 + formatter: formatterVaue,
  150 + rich: {
  151 + a: {
  152 + padding: [-30, 15, -20, 15],
  153 + color: optionsSetup.subTextColor,
  154 + fontSize: optionsSetup.fontSize,
  155 + fontWeight: optionsSetup.fontWeight
  156 + }
  157 + },
  158 + fontSize: optionsSetup.fontSize,
  159 +
  160 + fontWeight: optionsSetup.optionsSetup
  161 + };
  162 + for (const key in series) {
  163 + if (series[key].type == "pie") {
  164 + series[key].label = label;
  165 + series[key].labelLine = {show: optionsSetup.isShow};
  166 + }
  167 + }
  168 + },
  169 + // 提示语设置 tooltip
  170 + setOptionsTooltip() {
  171 + const optionsSetup = this.optionsSetup;
  172 + const tooltip = {
  173 + trigger: "item",
  174 + show: true,
  175 + textStyle: {
  176 + color: optionsSetup.lineColor,
  177 + fontSize: optionsSetup.tipFontSize
  178 + }
  179 + };
  180 + this.options.tooltip = tooltip;
  181 + },
  182 + // 图例操作 legend
  183 + setOptionsLegend() {
  184 + const optionsSetup = this.optionsSetup;
  185 + const legend = this.options.legend;
  186 + legend.show = optionsSetup.isShowLegend;
  187 + if(optionsSetup.longitudinalPosition == "center"){
  188 + legend.left = optionsSetup.lateralPosition == "left" ? 0 : "auto";
  189 + legend.right = optionsSetup.lateralPosition == "right" ? 0 : "auto";
  190 + legend.top = '10%';
  191 + legend.marginTop = '-150px';
  192 + }else{
  193 + legend.left = optionsSetup.lateralPosition == "left" ? 0 : "auto";
  194 + legend.right = optionsSetup.lateralPosition == "right" ? 0 : "auto";
  195 + legend.top = optionsSetup.longitudinalPosition == "top" ? 0 :"auto";
  196 + legend.bottom =
  197 + optionsSetup.longitudinalPosition == "bottom" ? 0 : "auto";
  198 + }
  199 + legend.orient = optionsSetup.layoutFront;
  200 + legend.textStyle = {
  201 + color: optionsSetup.legendColor,
  202 + fontSize: optionsSetup.legendFontSize
  203 + };
  204 + legend.itemWidth = optionsSetup.legendWidth;
  205 + },
  206 + // 图例颜色修改
  207 + setOptionsColor() {
  208 + const optionsSetup = this.optionsSetup;
  209 + const customColor = optionsSetup.customColor;
  210 + if (!customColor) return;
  211 + const arrColor = [];
  212 + for (let i = 0; i < customColor.length; i++) {
  213 + arrColor.push(customColor[i].color);
  214 + }
  215 + this.options.color = arrColor;
  216 + this.options = Object.assign({}, this.options);
  217 + },
  218 + setOptionsData() {
  219 + const optionsData = this.optionsData; // 数据类型 静态 or 动态
  220 + optionsData.dataType == "staticData"
  221 + ? this.staticDataFn(optionsData.staticData)
  222 + : this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);
  223 + },
  224 + staticDataFn(val) {
  225 + const staticData = typeof val == "string" ? JSON.parse(val) : val;
  226 + for (const key in this.options.series) {
  227 + if (this.options.series[key].type == "pie") {
  228 + this.options.series[key].data = staticData;
  229 + }
  230 + }
  231 + },
  232 + dynamicDataFn(val, refreshTime) {
  233 + if (!val) return;
  234 + if (this.ispreview) {
  235 + this.getEchartData(val);
  236 + this.flagInter = setInterval(() => {
  237 + this.getEchartData(val);
  238 + }, refreshTime);
  239 + } else {
  240 + this.getEchartData(val);
  241 + }
  242 + },
  243 + getEchartData(val) {
  244 + const data = this.queryEchartsData(val);
  245 + data.then(res => {
  246 + this.renderingFn(res);
  247 + });
  248 + },
  249 + renderingFn(val) {
  250 + for (const key in this.options.series) {
  251 + if (this.options.series[key].type == "pie") {
  252 + this.options.series[key].data = val;
  253 + }
  254 + }
  255 + }
  256 + }
  257 +};
  258 +</script>
  259 +
  260 +<style scoped lang="scss">
  261 +.echarts {
  262 + width: 100%;
  263 + height: 100%;
  264 + overflow: hidden;
  265 +}
  266 +</style>
src/views/bigscreenDesigner/designer/widget/temp.vue
  View file @4bad9ea
@@ -48,6 +48,7 @@ import widgetActiveRingChart from &quot;./pie/widgetActiveRingChart&quot;; @@ -48,6 +48,7 @@ import widgetActiveRingChart from &quot;./pie/widgetActiveRingChart&quot;;
48 import widgetConicalColumnChart from "./funnel/widgetConicalColumnChart"; 48 import widgetConicalColumnChart from "./funnel/widgetConicalColumnChart";
49 import widgetDigitalFlopSingle from "./text/widgetDigitalFlopSingle"; 49 import widgetDigitalFlopSingle from "./text/widgetDigitalFlopSingle";
50 import widgetSvg from "./div/widgetSvg"; 50 import widgetSvg from "./div/widgetSvg";
  51 +import widgetRadioPiechart from "./pie/widgetRadioPiechart";
51 52
52 export default { 53 export default {
53 name: "WidgetTemp", 54 name: "WidgetTemp",
@@ -65,6 +66,7 @@ export default { @@ -65,6 +66,7 @@ export default {
65 widgetLinechart, 66 widgetLinechart,
66 widgetBarlinechart, 67 widgetBarlinechart,
67 WidgetPiechart, 68 WidgetPiechart,
  69 + widgetRadioPiechart,
68 WidgetFunnel, 70 WidgetFunnel,
69 WidgetGauge, 71 WidgetGauge,
70 WidgetPieNightingaleRoseArea, 72 WidgetPieNightingaleRoseArea,
src/views/bigscreenDesigner/designer/widget/text/widgetDigitalFlopSingle.vue
  View file @4bad9ea
1 <template> 1 <template>
2 <div class="center-cmp" :style="styleObj"> 2 <div class="center-cmp" :style="styleObj">
3 <div class="cc-details" :style="detailsClass"> 3 <div class="cc-details" :style="detailsClass">
4 - <div class="textStyle" >设备总数</div> 4 +<!-- <div class="textStyle">设备总数</div>-->
5 <div 5 <div
6 v-for="(dataValue, index) in options.data" 6 v-for="(dataValue, index) in options.data"
7 - :style="cardClass()"  
8 :key="index" 7 :key="index"
  8 + :style="cardClass()"
9 > 9 >
10 - <dv-digital-flop :config="dataValue"></dv-digital-flop> 10 + <animate-number
  11 + :from="dataValue.from"
  12 + :to="dataValue.to"
  13 + :duration="dataValue.duration"
  14 + easing="easeOutQuad"
  15 + v-if="dataValue.type=='number'"
  16 + ></animate-number>
  17 + <div v-html="dataValue.value" v-if="dataValue.type=='text'"></div>
11 </div> 18 </div>
12 </div> 19 </div>
13 </div> 20 </div>
14 </template> 21 </template>
15 <script> 22 <script>
16 -import Vue from "vue";  
17 -import digitalFlop from "@jiaminghi/data-view/lib/components/digitalFlop";  
18 -import {mapState} from "vuex";  
19 -Vue.use(digitalFlop); 23 +import Vue from 'vue'
  24 +import VueAnimateNumber from 'vue-animate-number'
  25 +Vue.use(VueAnimateNumber)
20 export default { 26 export default {
21 name: "WidgetDigitalFlopSingle", 27 name: "WidgetDigitalFlopSingle",
22 props: { 28 props: {
src/views/bigscreenDesigner/designer/widget/widget.vue
  View file @4bad9ea
@@ -27,6 +27,7 @@ import widgetGradientColorBarchart from &quot;./bar/widgetGradientColorBarchart.vue&quot;; @@ -27,6 +27,7 @@ import widgetGradientColorBarchart from &quot;./bar/widgetGradientColorBarchart.vue&quot;;
27 import widgetLinechart from "./line/widgetLinechart.vue"; 27 import widgetLinechart from "./line/widgetLinechart.vue";
28 import widgetBarlinechart from "./barline/widgetBarlinechart"; 28 import widgetBarlinechart from "./barline/widgetBarlinechart";
29 import WidgetPiechart from "./pie/widgetPiechart.vue"; 29 import WidgetPiechart from "./pie/widgetPiechart.vue";
  30 +import widgetRadioPiechart from "./pie/widgetRadioPiechart";
30 import WidgetFunnel from "./funnel/widgetFunnel.vue"; 31 import WidgetFunnel from "./funnel/widgetFunnel.vue";
31 import WidgetGauge from "./percent/widgetGauge.vue"; 32 import WidgetGauge from "./percent/widgetGauge.vue";
32 import WidgetPieNightingaleRoseArea from "./pie/widgetPieNightingaleRose"; 33 import WidgetPieNightingaleRoseArea from "./pie/widgetPieNightingaleRose";
@@ -105,7 +106,8 @@ export default { @@ -105,7 +106,8 @@ export default {
105 widgetBorderBoxFloat, 106 widgetBorderBoxFloat,
106 widgetDigitalFlopSingle, 107 widgetDigitalFlopSingle,
107 widgetSvg, 108 widgetSvg,
108 - widgetRotateRanking 109 + widgetRotateRanking,
  110 + widgetRadioPiechart,
109 }, 111 },
110 model: { 112 model: {
111 prop: "value", 113 prop: "value",