qiangmj / report-ui

Commit ccd620a7c034ef378fabbabdd83ce009006bcf0c

Authored by zhangzzzz
1 parent 71ee4dc5

进度条新增渐变色；

Inline Side-by-side
Showing 2 changed files with 195 additions and 128 deletions
src/views/bigscreenDesigner/designer/tools/configure/percentCharts/widget-progress.js
  View file @ccd620a
1 1 /*
2 2 * @Descripttion: 进度条
3   - * @Author: qianlishi
  3 + * @Author: zhangzhen
4 4 */
5 5 export const widgetProgress = {
6   - code: 'widgetProgress',
7   - type: 'percent',
8   - tabName: '百分比',
9   - label: '进度条',
10   - icon: 'iconbaifenbi',
11   - options: {
12   - // 配置
13   - setup: [
  6 + code: "widgetProgress",
  7 + type: "percent",
  8 + tabName: "百分比",
  9 + label: "进度条",
  10 + icon: "iconbaifenbi",
  11 + options: {
  12 + // 配置
  13 + setup: [
  14 + {
  15 + type: "el-input-text",
  16 + label: "图层名称",
  17 + name: "layerName",
  18 + required: false,
  19 + placeholder: "",
  20 + value: "进度条"
  21 + },
  22 + {
  23 + type: "el-input-number",
  24 + label: "宽度",
  25 + name: "strokeWidth",
  26 + required: false,
  27 + placeholder: "",
  28 + value: 20
  29 + },
  30 + {
  31 + type: "el-select",
  32 + label: "是否显示百分比",
  33 + name: "showText",
  34 + required: false,
  35 + placeholder: "",
  36 + selectOptions: [
  37 + { code: true, name: "显示" },
  38 + { code: false, name: "隐藏" }
  39 + ],
  40 + value: true
  41 + },
  42 + {
  43 + type: "el-select",
  44 + label: "百分比显示位置",
  45 + name: "textInside",
  46 + required: false,
  47 + placeholder: "",
  48 + selectOptions: [
  49 + { code: true, name: "进度条内" },
  50 + { code: false, name: "进度条外" }
  51 + ],
  52 + value: true
  53 + },
  54 + {
  55 + type: "el-input-number",
  56 + label: "字体大小",
  57 + name: "percentFontSize",
  58 + required: false,
  59 + placeholder: "",
  60 + value: 16
  61 + },
  62 + {
  63 + type: "vue-color",
  64 + label: "字体颜色",
  65 + name: "percentColor",
  66 + required: false,
  67 + placeholder: "",
  68 + value: ""
  69 + },
  70 +
  71 + {
  72 + type: "el-select-static",
  73 + label: "静态数据选择",
  74 + name: "slectedDataType",
  75 + require: false,
  76 + placeholder: "",
  77 + selectOptions: [],
  78 + value: ""
  79 + },
  80 + {
  81 + type: "vue-color",
  82 + label: "底色",
  83 + name: "underColor",
  84 + required: false,
  85 + placeholder: "",
  86 + value: ""
  87 + },
  88 + {
  89 + type: "vue-color",
  90 + label: "进度条色",
  91 + name: "color",
  92 + required: false,
  93 + placeholder: "",
  94 + value: ""
  95 + },
  96 +
  97 + [
14 98 {
15   - type: 'el-input-text',
16   - label: '图层名称',
17   - name: 'layerName',
18   - required: false,
19   - placeholder: '',
20   - value: '进度条',
21   - },
22   - {
23   - type: 'el-input-number',
24   - label: '宽度',
25   - name: 'strokeWidth',
26   - required: false,
27   - placeholder: '',
28   - value: 20,
29   - },
30   - {
31   - type: 'el-select',
32   - label: '是否显示百分比',
33   - name: 'showText',
34   - required: false,
35   - placeholder: '',
36   - selectOptions: [
37   - {code: true, name: '显示'},
38   - {code: false, name: '隐藏'},
39   - ],
40   - value: true
41   - },
42   - {
43   - type: 'el-select',
44   - label: '百分比显示位置',
45   - name: 'textInside',
46   - required: false,
47   - placeholder: '',
48   - selectOptions: [
49   - {code: true, name: '进度条内'},
50   - {code: false, name: '进度条外'},
51   - ],
52   - value: true
53   - },
54   - {
55   - type: 'el-input-number',
56   - label: '字体大小',
57   - name: 'percentFontSize',
58   - required: false,
59   - placeholder: '',
60   - value: 16,
61   - },
62   - {
63   - type: 'vue-color',
64   - label: '字体颜色',
65   - name: 'percentColor',
66   - required: false,
67   - placeholder: '',
68   - value: '',
69   - },
70   - {
71   - type: 'vue-color',
72   - label: '进度条色',
73   - name: 'color',
74   - required: false,
75   - placeholder: '',
76   - value: '',
77   - },
78   - {
79   - type: 'vue-color',
80   - label: '底色',
81   - name: 'underColor',
82   - required: false,
83   - placeholder: '',
84   - value: '',
85   - },
86   - {
87   - type: 'el-select-static',
88   - label: '静态数据选择',
89   - name: 'slectedDataType',
90   - require: false,
91   - placeholder: '',
92   - selectOptions: [],
93   - value: '',
94   - },
95   - ],
96   - // 坐标
97   - position: [
98   - {
99   - type: 'el-input-number',
100   - label: '左边距',
101   - name: 'left',
102   - required: false,
103   - placeholder: '',
104   - value: 0,
105   - },
106   - {
107   - type: 'el-input-number',
108   - label: '上边距',
109   - name: 'top',
110   - required: false,
111   - placeholder: '',
112   - value: 0,
113   - },
114   - {
115   - type: 'el-input-number',
116   - label: '宽度',
117   - name: 'width',
118   - required: false,
119   - placeholder: '该容器在1920px大屏中的宽度',
120   - value: 400,
121   - },
122   - {
123   - type: 'el-input-number',
124   - label: '高度',
125   - name: 'height',
126   - required: false,
127   - placeholder: '该容器在1080px大屏中的高度',
128   - value: 100,
129   - },
130   - ],
131   - }
  99 + name: "进度条渐变色",
  100 + list: [
  101 + {
  102 + type: "vue-color",
  103 + label: "渐变色1",
  104 + name: "color1",
  105 + required: false,
  106 + placeholder: "",
  107 + value: ""
  108 + },
  109 + {
  110 + type: "vue-color",
  111 + label: "渐变色2",
  112 + name: "color2",
  113 + required: false,
  114 + placeholder: "",
  115 + value: ""
  116 + },
  117 + {
  118 + type: "vue-color",
  119 + label: "渐变色3",
  120 + name: "color3",
  121 + required: false,
  122 + placeholder: "",
  123 + value: ""
  124 + },
  125 + {
  126 + type: "vue-color",
  127 + label: "渐变色4",
  128 + name: "color4",
  129 + required: false,
  130 + placeholder: "",
  131 + value: ""
  132 + },
  133 + {
  134 + type: "vue-color",
  135 + label: "渐变色5",
  136 + name: "color5",
  137 + required: false,
  138 + placeholder: "",
  139 + value: ""
  140 + }
  141 + ]
  142 + }
  143 + ]
  144 + ],
  145 + // 坐标
  146 + position: [
  147 + {
  148 + type: "el-input-number",
  149 + label: "左边距",
  150 + name: "left",
  151 + required: false,
  152 + placeholder: "",
  153 + value: 0
  154 + },
  155 + {
  156 + type: "el-input-number",
  157 + label: "上边距",
  158 + name: "top",
  159 + required: false,
  160 + placeholder: "",
  161 + value: 0
  162 + },
  163 + {
  164 + type: "el-input-number",
  165 + label: "宽度",
  166 + name: "width",
  167 + required: false,
  168 + placeholder: "该容器在1920px大屏中的宽度",
  169 + value: 400
  170 + },
  171 + {
  172 + type: "el-input-number",
  173 + label: "高度",
  174 + name: "height",
  175 + required: false,
  176 + placeholder: "该容器在1080px大屏中的高度",
  177 + value: 100
  178 + }
  179 + ]
132 180 }
  181 +};
... ...
src/views/bigscreenDesigner/designer/widget/percent/widgetProgress.vue
  View file @ccd620a
... ... @@ -24,7 +24,7 @@ export default {
24 24 return this.objToOne(this.options);
25 25 },
26 26 styleColor() {
27   - return {
  27 + let result = {
28 28 position: this.ispreview ? "absolute" : "static",
29 29 background: this.transStyle.background,
30 30 "text-align": this.transStyle.textAlign,
... ... @@ -38,6 +38,20 @@ export default {
38 38 "--percent-color": this.transStyle.percentColor,
39 39 "--under-color": this.transStyle.underColor
40 40 };
  41 +
  42 + const { color1, color2, color3, color4, color5 } = this.transStyle;
  43 + const gradientList = [color1, color2, color3, color4, color5];
  44 + const gradientList1 = [];
  45 + gradientList.forEach(item => {
  46 + item && gradientList1.push(item);
  47 + });
  48 + if (gradientList1.length) {
  49 + if (gradientList1.length === 1) {
  50 + gradientList1.push(gradientList1[0]);
  51 + }
  52 + result["--line-gradient"] = `linear-gradient(to right, ${gradientList1.toString()})`;
  53 + }
  54 + return result;
41 55 },
42 56 dataList() {
43 57 let result = {
... ... @@ -81,10 +95,14 @@ export default {
81 95 align-items: center;
82 96 width: 100%;
83 97  
84   - /deep/ .el-progress-bar__outer{
  98 + /deep/ .el-progress-bar__outer {
85 99 background-color: var(--under-color, #EBEEF5);
86 100 }
87 101  
  102 + /deep/ .el-progress-bar__inner {
  103 + background: var(--line-gradient, initial);
  104 + }
  105 +
88 106 /deep/ .el-progress-bar__innerText,
89 107 /deep/ .el-progress__text {
90 108 font-size: var(--percent-font-size, initial) !important;
... ...