Commit ccd620a7c034ef378fabbabdd83ce009006bcf0c
1 parent
71ee4dc5
进度条新增渐变色；
Showing
2 changed files
with
195 additions
and
128 deletions
src/views/bigscreenDesigner/designer/tools/configure/percentCharts/widget-progress.js
| 1 | /* | 1 | /* |
| 2 | * @Descripttion: 进度条 | 2 | * @Descripttion: 进度条 |
| 3 | - * @Author: qianlishi | 3 | + * @Author: zhangzhen |
| 4 | */ | 4 | */ |
| 5 | export const widgetProgress = { | 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
| @@ -24,7 +24,7 @@ export default { | @@ -24,7 +24,7 @@ export default { | ||
| 24 | return this.objToOne(this.options); | 24 | return this.objToOne(this.options); |
| 25 | }, | 25 | }, |
| 26 | styleColor() { | 26 | styleColor() { |
| 27 | - return { | 27 | + let result = { |
| 28 | position: this.ispreview ? "absolute" : "static", | 28 | position: this.ispreview ? "absolute" : "static", |
| 29 | background: this.transStyle.background, | 29 | background: this.transStyle.background, |
| 30 | "text-align": this.transStyle.textAlign, | 30 | "text-align": this.transStyle.textAlign, |
| @@ -38,6 +38,20 @@ export default { | @@ -38,6 +38,20 @@ export default { | ||
| 38 | "--percent-color": this.transStyle.percentColor, | 38 | "--percent-color": this.transStyle.percentColor, |
| 39 | "--under-color": this.transStyle.underColor | 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 | dataList() { | 56 | dataList() { |
| 43 | let result = { | 57 | let result = { |
| @@ -81,10 +95,14 @@ export default { | @@ -81,10 +95,14 @@ export default { | ||
| 81 | align-items: center; | 95 | align-items: center; |
| 82 | width: 100%; | 96 | width: 100%; |
| 83 | 97 | ||
| 84 | - /deep/ .el-progress-bar__outer{ | 98 | + /deep/ .el-progress-bar__outer { |
| 85 | background-color: var(--under-color, #EBEEF5); | 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 | /deep/ .el-progress-bar__innerText, | 106 | /deep/ .el-progress-bar__innerText, |
| 89 | /deep/ .el-progress__text { | 107 | /deep/ .el-progress__text { |
| 90 | font-size: var(--percent-font-size, initial) !important; | 108 | font-size: var(--percent-font-size, initial) !important; |