Commit 71ee4dc5e9f86df15ffb10780df5856799ce38c8
1 parent
70a61a90
新增进度条组件；
Showing
5 changed files
with
236 additions
and
3 deletions
src/views/bigscreenDesigner/designer/tools/configure/percentCharts/widget-progress.js
0 → 100644
| 1 | +/* | ||
| 2 | + * @Descripttion: 进度条 | ||
| 3 | + * @Author: qianlishi | ||
| 4 | + */ | ||
| 5 | +export const widgetProgress = { | ||
| 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 | + 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 | + } | ||
| 132 | + } |
src/views/bigscreenDesigner/designer/tools/main.js
| @@ -40,6 +40,7 @@ import { widgetWordCloud } from "./configure/wordcloudCharts/widget-word-cloud"; | @@ -40,6 +40,7 @@ import { widgetWordCloud } from "./configure/wordcloudCharts/widget-word-cloud"; | ||
| 40 | import { widgetHeatmap } from "./configure/heatmap/widget-heatmap"; | 40 | import { widgetHeatmap } from "./configure/heatmap/widget-heatmap"; |
| 41 | import { widgetRadar } from "./configure/radarCharts/widget-radar"; | 41 | import { widgetRadar } from "./configure/radarCharts/widget-radar"; |
| 42 | import { widgetBarLineStack } from "./configure/barlineCharts/widget-bar-line-stack"; | 42 | import { widgetBarLineStack } from "./configure/barlineCharts/widget-bar-line-stack"; |
| 43 | +import { widgetProgress } from "./configure/percentCharts/widget-progress"; | ||
| 43 | 44 | ||
| 44 | export const widgetTool = [ | 45 | export const widgetTool = [ |
| 45 | //图层 | 46 | //图层 |
| @@ -78,5 +79,6 @@ export const widgetTool = [ | @@ -78,5 +79,6 @@ export const widgetTool = [ | ||
| 78 | widgetWordCloud, | 79 | widgetWordCloud, |
| 79 | widgetHeatmap, | 80 | widgetHeatmap, |
| 80 | widgetRadar, | 81 | widgetRadar, |
| 81 | - widgetBarLineStack | 82 | + widgetBarLineStack, |
| 83 | + widgetProgress | ||
| 82 | ] | 84 | ] |
src/views/bigscreenDesigner/designer/widget/percent/widgetProgress.vue
0 → 100644
| 1 | +<template> | ||
| 2 | + <div class="progress" :style="styleColor"> | ||
| 3 | + <el-progress class="progress-content" :percentage="dataList.percentage" :strokeWidth="dataList.strokeWidth" | ||
| 4 | + :showText="dataList.showText" :textInside="dataList.textInside" :color="dataList.color"></el-progress> | ||
| 5 | + </div> | ||
| 6 | +</template> | ||
| 7 | +<script> | ||
| 8 | +import { mapState } from 'vuex'; | ||
| 9 | +export default { | ||
| 10 | + name: "WidgetProgress", | ||
| 11 | + components: {}, | ||
| 12 | + props: { | ||
| 13 | + value: Object, | ||
| 14 | + ispreview: Boolean | ||
| 15 | + }, | ||
| 16 | + data() { | ||
| 17 | + return { | ||
| 18 | + options: {} | ||
| 19 | + }; | ||
| 20 | + }, | ||
| 21 | + computed: { | ||
| 22 | + ...mapState('dataSource', ['staticData']), | ||
| 23 | + transStyle() { | ||
| 24 | + return this.objToOne(this.options); | ||
| 25 | + }, | ||
| 26 | + styleColor() { | ||
| 27 | + return { | ||
| 28 | + position: this.ispreview ? "absolute" : "static", | ||
| 29 | + background: this.transStyle.background, | ||
| 30 | + "text-align": this.transStyle.textAlign, | ||
| 31 | + width: this.transStyle.width + "px", | ||
| 32 | + height: this.transStyle.height + "px", | ||
| 33 | + left: this.transStyle.left + "px", | ||
| 34 | + top: this.transStyle.top + "px", | ||
| 35 | + right: this.transStyle.right + "px", | ||
| 36 | + "border-radius": this.transStyle.borderRadius + 'px', | ||
| 37 | + "--percent-font-size": this.transStyle.percentFontSize + 'px', | ||
| 38 | + "--percent-color": this.transStyle.percentColor, | ||
| 39 | + "--under-color": this.transStyle.underColor | ||
| 40 | + }; | ||
| 41 | + }, | ||
| 42 | + dataList() { | ||
| 43 | + let result = { | ||
| 44 | + strokeWidth: this.transStyle.strokeWidth || 6, | ||
| 45 | + showText: this.transStyle.showText, | ||
| 46 | + textInside: this.transStyle.textInside, | ||
| 47 | + color: this.transStyle.color, | ||
| 48 | + percentage: 50 | ||
| 49 | + }; | ||
| 50 | + const percentage = this.staticData[this.transStyle.slectedDataType]; | ||
| 51 | + if (percentage && typeof percentage === 'number') { | ||
| 52 | + result.percentage = percentage; | ||
| 53 | + } | ||
| 54 | + return result; | ||
| 55 | + } | ||
| 56 | + }, | ||
| 57 | + watch: { | ||
| 58 | + value: { | ||
| 59 | + handler(val) { | ||
| 60 | + this.options = val; | ||
| 61 | + }, | ||
| 62 | + deep: true | ||
| 63 | + } | ||
| 64 | + }, | ||
| 65 | + created() { | ||
| 66 | + this.options = this.value; | ||
| 67 | + }, | ||
| 68 | + mounted() { }, | ||
| 69 | + methods: {} | ||
| 70 | +}; | ||
| 71 | +</script> | ||
| 72 | + | ||
| 73 | +<style scoped lang="scss"> | ||
| 74 | +.progress { | ||
| 75 | + display: flex; | ||
| 76 | + align-items: center; | ||
| 77 | + justify-content: center; | ||
| 78 | + | ||
| 79 | + .progress-content { | ||
| 80 | + display: flex; | ||
| 81 | + align-items: center; | ||
| 82 | + width: 100%; | ||
| 83 | + | ||
| 84 | + /deep/ .el-progress-bar__outer{ | ||
| 85 | + background-color: var(--under-color, #EBEEF5); | ||
| 86 | + } | ||
| 87 | + | ||
| 88 | + /deep/ .el-progress-bar__innerText, | ||
| 89 | + /deep/ .el-progress__text { | ||
| 90 | + font-size: var(--percent-font-size, initial) !important; | ||
| 91 | + color: var(--percent-color, initial); | ||
| 92 | + } | ||
| 93 | + } | ||
| 94 | +} | ||
| 95 | +</style> |
src/views/bigscreenDesigner/designer/widget/temp.vue
| @@ -44,6 +44,7 @@ import widgetBarLineStackChart from "./barline/widgetBarLineStackChart"; | @@ -44,6 +44,7 @@ import widgetBarLineStackChart from "./barline/widgetBarLineStackChart"; | ||
| 44 | import widgetDecorate from "./decorate/decorate.vue"; | 44 | import widgetDecorate from "./decorate/decorate.vue"; |
| 45 | // import widgetDiv from "./div/widgetDiv.vue"; | 45 | // import widgetDiv from "./div/widgetDiv.vue"; |
| 46 | import widgetBorderBox from "./div/widgetBorderBox.vue"; | 46 | import widgetBorderBox from "./div/widgetBorderBox.vue"; |
| 47 | +import widgetProgress from "./percent/widgetProgress"; | ||
| 47 | 48 | ||
| 48 | export default { | 49 | export default { |
| 49 | name: "WidgetTemp", | 50 | name: "WidgetTemp", |
| @@ -80,7 +81,8 @@ export default { | @@ -80,7 +81,8 @@ export default { | ||
| 80 | widgetHeatmap, | 81 | widgetHeatmap, |
| 81 | widgetRadar, | 82 | widgetRadar, |
| 82 | widgetBarLineStackChart, | 83 | widgetBarLineStackChart, |
| 83 | - widgetBorderBox | 84 | + widgetBorderBox, |
| 85 | + widgetProgress | ||
| 84 | }, | 86 | }, |
| 85 | model: { | 87 | model: { |
| 86 | prop: "value", | 88 | prop: "value", |
src/views/bigscreenDesigner/designer/widget/widget.vue
| @@ -49,6 +49,7 @@ import widgetDecorate from "./decorate/decorate.vue"; | @@ -49,6 +49,7 @@ import widgetDecorate from "./decorate/decorate.vue"; | ||
| 49 | import widgetImage from "./div/widgetImage.vue"; | 49 | import widgetImage from "./div/widgetImage.vue"; |
| 50 | import widgetSlider from "./div/widgetSlider.vue"; | 50 | import widgetSlider from "./div/widgetSlider.vue"; |
| 51 | import widgetBorderBox from "./div/widgetBorderBox.vue"; | 51 | import widgetBorderBox from "./div/widgetBorderBox.vue"; |
| 52 | +import widgetProgress from "./percent/widgetProgress"; | ||
| 52 | 53 | ||
| 53 | export default { | 54 | export default { |
| 54 | name: "Widget", | 55 | name: "Widget", |
| @@ -85,7 +86,8 @@ export default { | @@ -85,7 +86,8 @@ export default { | ||
| 85 | widgetWordCloud, | 86 | widgetWordCloud, |
| 86 | widgetHeatmap, | 87 | widgetHeatmap, |
| 87 | widgetRadar, | 88 | widgetRadar, |
| 88 | - widgetBarLineStackChart | 89 | + widgetBarLineStackChart, |
| 90 | + widgetProgress | ||
| 89 | }, | 91 | }, |
| 90 | model: { | 92 | model: { |
| 91 | prop: "value", | 93 | prop: "value", |