qiangmj / report-ui

Commit 71ee4dc5e9f86df15ffb10780df5856799ce38c8

Authored by zhangzzzz
1 parent 70a61a90

新增进度条组件；

Inline Side-by-side
Showing 5 changed files with 236 additions and 3 deletions
src/views/bigscreenDesigner/designer/tools/configure/percentCharts/widget-progress.js 0 → 100644
  View file @71ee4dc
  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
  View file @71ee4dc
... ... @@ -40,6 +40,7 @@ import { widgetWordCloud } from "./configure/wordcloudCharts/widget-word-cloud";
40 40 import { widgetHeatmap } from "./configure/heatmap/widget-heatmap";
41 41 import { widgetRadar } from "./configure/radarCharts/widget-radar";
42 42 import { widgetBarLineStack } from "./configure/barlineCharts/widget-bar-line-stack";
  43 +import { widgetProgress } from "./configure/percentCharts/widget-progress";
43 44  
44 45 export const widgetTool = [
45 46 //图层
... ... @@ -78,5 +79,6 @@ export const widgetTool = [
78 79 widgetWordCloud,
79 80 widgetHeatmap,
80 81 widgetRadar,
81   - widgetBarLineStack
  82 + widgetBarLineStack,
  83 + widgetProgress
82 84 ]
... ...
src/views/bigscreenDesigner/designer/widget/percent/widgetProgress.vue 0 → 100644
  View file @71ee4dc
  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
  View file @71ee4dc
... ... @@ -44,6 +44,7 @@ import widgetBarLineStackChart from &quot;./barline/widgetBarLineStackChart&quot;;
44 44 import widgetDecorate from "./decorate/decorate.vue";
45 45 // import widgetDiv from "./div/widgetDiv.vue";
46 46 import widgetBorderBox from "./div/widgetBorderBox.vue";
  47 +import widgetProgress from "./percent/widgetProgress";
47 48  
48 49 export default {
49 50 name: "WidgetTemp",
... ... @@ -80,7 +81,8 @@ export default {
80 81 widgetHeatmap,
81 82 widgetRadar,
82 83 widgetBarLineStackChart,
83   - widgetBorderBox
  84 + widgetBorderBox,
  85 + widgetProgress
84 86 },
85 87 model: {
86 88 prop: "value",
... ...
src/views/bigscreenDesigner/designer/widget/widget.vue
  View file @71ee4dc
... ... @@ -49,6 +49,7 @@ import widgetDecorate from &quot;./decorate/decorate.vue&quot;;
49 49 import widgetImage from "./div/widgetImage.vue";
50 50 import widgetSlider from "./div/widgetSlider.vue";
51 51 import widgetBorderBox from "./div/widgetBorderBox.vue";
  52 +import widgetProgress from "./percent/widgetProgress";
52 53  
53 54 export default {
54 55 name: "Widget",
... ... @@ -85,7 +86,8 @@ export default {
85 86 widgetWordCloud,
86 87 widgetHeatmap,
87 88 widgetRadar,
88   - widgetBarLineStackChart
  89 + widgetBarLineStackChart,
  90 + widgetProgress
89 91 },
90 92 model: {
91 93 prop: "value",
... ...