From ccd620a7c034ef378fabbabdd83ce009006bcf0c Mon Sep 17 00:00:00 2001
From: zhangzhen <525765282@qq.com>
Date: Thu, 1 Dec 2022 17:51:27 +0800
Subject: [PATCH] 进度条新增渐变色；

---
 src/views/bigscreenDesigner/designer/tools/configure/percentCharts/widget-progress.js | 301 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++------------------------------------------------------------------------------------------------------------------------------
 src/views/bigscreenDesigner/designer/widget/percent/widgetProgress.vue                |  22 ++++++++++++++++++++--
 2 files changed, 195 insertions(+), 128 deletions(-)

diff --git a/src/views/bigscreenDesigner/designer/tools/configure/percentCharts/widget-progress.js b/src/views/bigscreenDesigner/designer/tools/configure/percentCharts/widget-progress.js
index a87919a..86dd542 100644
--- a/src/views/bigscreenDesigner/designer/tools/configure/percentCharts/widget-progress.js
+++ b/src/views/bigscreenDesigner/designer/tools/configure/percentCharts/widget-progress.js
@@ -1,132 +1,181 @@
 /*
  * @Descripttion: 进度条
- * @Author: qianlishi
+ * @Author: zhangzhen
  */
 export const widgetProgress = {
-    code: 'widgetProgress',
-    type: 'percent',
-    tabName: '百分比',
-    label: '进度条',
-    icon: 'iconbaifenbi',
-    options: {
-      // 配置
-      setup: [
+  code: "widgetProgress",
+  type: "percent",
+  tabName: "百分比",
+  label: "进度条",
+  icon: "iconbaifenbi",
+  options: {
+    // 配置
+    setup: [
+      {
+        type: "el-input-text",
+        label: "图层名称",
+        name: "layerName",
+        required: false,
+        placeholder: "",
+        value: "进度条"
+      },
+      {
+        type: "el-input-number",
+        label: "宽度",
+        name: "strokeWidth",
+        required: false,
+        placeholder: "",
+        value: 20
+      },
+      {
+        type: "el-select",
+        label: "是否显示百分比",
+        name: "showText",
+        required: false,
+        placeholder: "",
+        selectOptions: [
+          { code: true, name: "显示" },
+          { code: false, name: "隐藏" }
+        ],
+        value: true
+      },
+      {
+        type: "el-select",
+        label: "百分比显示位置",
+        name: "textInside",
+        required: false,
+        placeholder: "",
+        selectOptions: [
+          { code: true, name: "进度条内" },
+          { code: false, name: "进度条外" }
+        ],
+        value: true
+      },
+      {
+        type: "el-input-number",
+        label: "字体大小",
+        name: "percentFontSize",
+        required: false,
+        placeholder: "",
+        value: 16
+      },
+      {
+        type: "vue-color",
+        label: "字体颜色",
+        name: "percentColor",
+        required: false,
+        placeholder: "",
+        value: ""
+      },
+
+      {
+        type: "el-select-static",
+        label: "静态数据选择",
+        name: "slectedDataType",
+        require: false,
+        placeholder: "",
+        selectOptions: [],
+        value: ""
+      },
+      {
+        type: "vue-color",
+        label: "底色",
+        name: "underColor",
+        required: false,
+        placeholder: "",
+        value: ""
+      },
+      {
+        type: "vue-color",
+        label: "进度条色",
+        name: "color",
+        required: false,
+        placeholder: "",
+        value: ""
+      },
+
+      [
         {
-          type: 'el-input-text',
-          label: '图层名称',
-          name: 'layerName',
-          required: false,
-          placeholder: '',
-          value: '进度条',
-        },
-        {
-          type: 'el-input-number',
-          label: '宽度',
-          name: 'strokeWidth',
-          required: false,
-          placeholder: '',
-          value: 20,
-        },
-        {
-          type: 'el-select',
-          label: '是否显示百分比',
-          name: 'showText',
-          required: false,
-          placeholder: '',
-          selectOptions: [
-            {code: true, name: '显示'},
-            {code: false, name: '隐藏'},
-          ],
-          value: true
-        },
-        {
-          type: 'el-select',
-          label: '百分比显示位置',
-          name: 'textInside',
-          required: false,
-          placeholder: '',
-          selectOptions: [
-            {code: true, name: '进度条内'},
-            {code: false, name: '进度条外'},
-          ],
-          value: true
-        },
-        {
-          type: 'el-input-number',
-          label: '字体大小',
-          name: 'percentFontSize',
-          required: false,
-          placeholder: '',
-          value: 16,
-        },
-        {
-          type: 'vue-color',
-          label: '字体颜色',
-          name: 'percentColor',
-          required: false,
-          placeholder: '',
-          value: '',
-        },
-        {
-          type: 'vue-color',
-          label: '进度条色',
-          name: 'color',
-          required: false,
-          placeholder: '',
-          value: '',
-        },
-        {
-          type: 'vue-color',
-          label: '底色',
-          name: 'underColor',
-          required: false,
-          placeholder: '',
-          value: '',
-        },
-        {
-          type: 'el-select-static',
-          label: '静态数据选择',
-          name: 'slectedDataType',
-          require: false,
-          placeholder: '',
-          selectOptions: [],
-          value: '',
-        },
-      ],
-      // 坐标
-      position: [
-        {
-          type: 'el-input-number',
-          label: '左边距',
-          name: 'left',
-          required: false,
-          placeholder: '',
-          value: 0,
-        },
-        {
-          type: 'el-input-number',
-          label: '上边距',
-          name: 'top',
-          required: false,
-          placeholder: '',
-          value: 0,
-        },
-        {
-          type: 'el-input-number',
-          label: '宽度',
-          name: 'width',
-          required: false,
-          placeholder: '该容器在1920px大屏中的宽度',
-          value: 400,
-        },
-        {
-          type: 'el-input-number',
-          label: '高度',
-          name: 'height',
-          required: false,
-          placeholder: '该容器在1080px大屏中的高度',
-          value: 100,
-        },
-      ],
-    }
+          name: "进度条渐变色",
+          list: [
+            {
+              type: "vue-color",
+              label: "渐变色1",
+              name: "color1",
+              required: false,
+              placeholder: "",
+              value: ""
+            },
+            {
+              type: "vue-color",
+              label: "渐变色2",
+              name: "color2",
+              required: false,
+              placeholder: "",
+              value: ""
+            },
+            {
+              type: "vue-color",
+              label: "渐变色3",
+              name: "color3",
+              required: false,
+              placeholder: "",
+              value: ""
+            },
+            {
+              type: "vue-color",
+              label: "渐变色4",
+              name: "color4",
+              required: false,
+              placeholder: "",
+              value: ""
+            },
+            {
+              type: "vue-color",
+              label: "渐变色5",
+              name: "color5",
+              required: false,
+              placeholder: "",
+              value: ""
+            }
+          ]
+        }
+      ]
+    ],
+    // 坐标
+    position: [
+      {
+        type: "el-input-number",
+        label: "左边距",
+        name: "left",
+        required: false,
+        placeholder: "",
+        value: 0
+      },
+      {
+        type: "el-input-number",
+        label: "上边距",
+        name: "top",
+        required: false,
+        placeholder: "",
+        value: 0
+      },
+      {
+        type: "el-input-number",
+        label: "宽度",
+        name: "width",
+        required: false,
+        placeholder: "该容器在1920px大屏中的宽度",
+        value: 400
+      },
+      {
+        type: "el-input-number",
+        label: "高度",
+        name: "height",
+        required: false,
+        placeholder: "该容器在1080px大屏中的高度",
+        value: 100
+      }
+    ]
   }
+};
diff --git a/src/views/bigscreenDesigner/designer/widget/percent/widgetProgress.vue b/src/views/bigscreenDesigner/designer/widget/percent/widgetProgress.vue
index abb2cfe..b5a0eab 100644
--- a/src/views/bigscreenDesigner/designer/widget/percent/widgetProgress.vue
+++ b/src/views/bigscreenDesigner/designer/widget/percent/widgetProgress.vue
@@ -24,7 +24,7 @@ export default {
       return this.objToOne(this.options);
     },
     styleColor() {
-      return {
+      let result = {
         position: this.ispreview ? "absolute" : "static",
         background: this.transStyle.background,
         "text-align": this.transStyle.textAlign,
@@ -38,6 +38,20 @@ export default {
         "--percent-color": this.transStyle.percentColor,
         "--under-color": this.transStyle.underColor
       };
+
+      const { color1, color2, color3, color4, color5 } = this.transStyle;
+      const gradientList = [color1, color2, color3, color4, color5];
+      const gradientList1 = [];
+      gradientList.forEach(item => {
+        item && gradientList1.push(item);
+      });
+      if (gradientList1.length) {
+        if (gradientList1.length === 1) {
+          gradientList1.push(gradientList1[0]);
+        }
+        result["--line-gradient"] = `linear-gradient(to right, ${gradientList1.toString()})`;
+      }
+      return result;
     },
     dataList() {
       let result = {
@@ -81,10 +95,14 @@ export default {
     align-items: center;
     width: 100%;
 
-    /deep/ .el-progress-bar__outer{
+    /deep/ .el-progress-bar__outer {
       background-color: var(--under-color, #EBEEF5);
     }
 
+    /deep/ .el-progress-bar__inner {
+      background: var(--line-gradient, initial);
+    }
+
     /deep/ .el-progress-bar__innerText,
     /deep/ .el-progress__text {
       font-size: var(--percent-font-size, initial) !important;
--
libgit2 0.22.2