From 71ee4dc5e9f86df15ffb10780df5856799ce38c8 Mon Sep 17 00:00:00 2001
From: zhangzhen <525765282@qq.com>
Date: Thu, 1 Dec 2022 16:06:18 +0800
Subject: [PATCH] 新增进度条组件；

---
 src/views/bigscreenDesigner/designer/tools/configure/percentCharts/widget-progress.js | 132 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/views/bigscreenDesigner/designer/tools/main.js                                    |   4 +++-
 src/views/bigscreenDesigner/designer/widget/percent/widgetProgress.vue                |  95 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/views/bigscreenDesigner/designer/widget/temp.vue                                  |   4 +++-
 src/views/bigscreenDesigner/designer/widget/widget.vue                                |   4 +++-
 5 files changed, 236 insertions(+), 3 deletions(-)
 create mode 100644 src/views/bigscreenDesigner/designer/tools/configure/percentCharts/widget-progress.js
 create mode 100644 src/views/bigscreenDesigner/designer/widget/percent/widgetProgress.vue

diff --git a/src/views/bigscreenDesigner/designer/tools/configure/percentCharts/widget-progress.js b/src/views/bigscreenDesigner/designer/tools/configure/percentCharts/widget-progress.js
new file mode 100644
index 0000000..a87919a
--- /dev/null
+++ b/src/views/bigscreenDesigner/designer/tools/configure/percentCharts/widget-progress.js
@@ -0,0 +1,132 @@
+/*
+ * @Descripttion: 进度条
+ * @Author: qianlishi
+ */
+export const widgetProgress = {
+    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: '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,
+        },
+      ],
+    }
+  }
diff --git a/src/views/bigscreenDesigner/designer/tools/main.js b/src/views/bigscreenDesigner/designer/tools/main.js
index 3b6480f..2948ed2 100644
--- a/src/views/bigscreenDesigner/designer/tools/main.js
+++ b/src/views/bigscreenDesigner/designer/tools/main.js
@@ -40,6 +40,7 @@ import { widgetWordCloud } from "./configure/wordcloudCharts/widget-word-cloud";
 import { widgetHeatmap } from "./configure/heatmap/widget-heatmap";
 import { widgetRadar } from "./configure/radarCharts/widget-radar";
 import { widgetBarLineStack } from "./configure/barlineCharts/widget-bar-line-stack";
+import { widgetProgress } from "./configure/percentCharts/widget-progress";
 
 export const widgetTool = [
   //图层
@@ -78,5 +79,6 @@ export const widgetTool = [
   widgetWordCloud,
   widgetHeatmap,
   widgetRadar,
-  widgetBarLineStack
+  widgetBarLineStack,
+  widgetProgress
 ]
diff --git a/src/views/bigscreenDesigner/designer/widget/percent/widgetProgress.vue b/src/views/bigscreenDesigner/designer/widget/percent/widgetProgress.vue
new file mode 100644
index 0000000..abb2cfe
--- /dev/null
+++ b/src/views/bigscreenDesigner/designer/widget/percent/widgetProgress.vue
@@ -0,0 +1,95 @@
+<template>
+  <div class="progress" :style="styleColor">
+    <el-progress class="progress-content" :percentage="dataList.percentage" :strokeWidth="dataList.strokeWidth"
+      :showText="dataList.showText" :textInside="dataList.textInside" :color="dataList.color"></el-progress>
+  </div>
+</template>
+<script>
+import { mapState } from 'vuex';
+export default {
+  name: "WidgetProgress",
+  components: {},
+  props: {
+    value: Object,
+    ispreview: Boolean
+  },
+  data() {
+    return {
+      options: {}
+    };
+  },
+  computed: {
+    ...mapState('dataSource', ['staticData']),
+    transStyle() {
+      return this.objToOne(this.options);
+    },
+    styleColor() {
+      return {
+        position: this.ispreview ? "absolute" : "static",
+        background: this.transStyle.background,
+        "text-align": this.transStyle.textAlign,
+        width: this.transStyle.width + "px",
+        height: this.transStyle.height + "px",
+        left: this.transStyle.left + "px",
+        top: this.transStyle.top + "px",
+        right: this.transStyle.right + "px",
+        "border-radius": this.transStyle.borderRadius + 'px',
+        "--percent-font-size": this.transStyle.percentFontSize + 'px',
+        "--percent-color": this.transStyle.percentColor,
+        "--under-color": this.transStyle.underColor
+      };
+    },
+    dataList() {
+      let result = {
+        strokeWidth: this.transStyle.strokeWidth || 6,
+        showText: this.transStyle.showText,
+        textInside: this.transStyle.textInside,
+        color: this.transStyle.color,
+        percentage: 50
+      };
+      const percentage = this.staticData[this.transStyle.slectedDataType];
+      if (percentage && typeof percentage === 'number') {
+        result.percentage = percentage;
+      }
+      return result;
+    }
+  },
+  watch: {
+    value: {
+      handler(val) {
+        this.options = val;
+      },
+      deep: true
+    }
+  },
+  created() {
+    this.options = this.value;
+  },
+  mounted() { },
+  methods: {}
+};
+</script>
+
+<style scoped lang="scss">
+.progress {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  .progress-content {
+    display: flex;
+    align-items: center;
+    width: 100%;
+
+    /deep/ .el-progress-bar__outer{
+      background-color: var(--under-color, #EBEEF5);
+    }
+
+    /deep/ .el-progress-bar__innerText,
+    /deep/ .el-progress__text {
+      font-size: var(--percent-font-size, initial) !important;
+      color: var(--percent-color, initial);
+    }
+  }
+}
+</style>
diff --git a/src/views/bigscreenDesigner/designer/widget/temp.vue b/src/views/bigscreenDesigner/designer/widget/temp.vue
index 0aa6753..9efaac9 100644
--- a/src/views/bigscreenDesigner/designer/widget/temp.vue
+++ b/src/views/bigscreenDesigner/designer/widget/temp.vue
@@ -44,6 +44,7 @@ import widgetBarLineStackChart from "./barline/widgetBarLineStackChart";
 import widgetDecorate from "./decorate/decorate.vue";
 // import widgetDiv from "./div/widgetDiv.vue";
 import widgetBorderBox from "./div/widgetBorderBox.vue";
+import widgetProgress from "./percent/widgetProgress";
 
 export default {
   name: "WidgetTemp",
@@ -80,7 +81,8 @@ export default {
     widgetHeatmap,
     widgetRadar,
     widgetBarLineStackChart,
-    widgetBorderBox
+    widgetBorderBox,
+    widgetProgress
   },
   model: {
     prop: "value",
diff --git a/src/views/bigscreenDesigner/designer/widget/widget.vue b/src/views/bigscreenDesigner/designer/widget/widget.vue
index 16662b3..fe92cb8 100644
--- a/src/views/bigscreenDesigner/designer/widget/widget.vue
+++ b/src/views/bigscreenDesigner/designer/widget/widget.vue
@@ -49,6 +49,7 @@ import widgetDecorate from "./decorate/decorate.vue";
 import widgetImage from "./div/widgetImage.vue";
 import widgetSlider from "./div/widgetSlider.vue";
 import widgetBorderBox from "./div/widgetBorderBox.vue";
+import widgetProgress from "./percent/widgetProgress";
 
 export default {
   name: "Widget",
@@ -85,7 +86,8 @@ export default {
     widgetWordCloud,
     widgetHeatmap,
     widgetRadar,
-    widgetBarLineStackChart
+    widgetBarLineStackChart,
+    widgetProgress
   },
   model: {
     prop: "value",
--
libgit2 0.22.2