From 5afe5d30944522939c9345de9e5e3224dd0e92a4 Mon Sep 17 00:00:00 2001
From: qianbao <qianbaoqianbao>
Date: Wed, 7 Dec 2022 20:29:01 +0800
Subject: [PATCH] 1、添加环形图。 2、一些已知问题修复

---
 src/views/bigscreenDesigner/designer/tools/configure/barCharts/widget-capsule-chart.js         |   2 +-
 src/views/bigscreenDesigner/designer/tools/configure/percentCharts/widget-active-ring-chart.js | 233 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/views/bigscreenDesigner/designer/tools/main.js                                             |   2 ++
 src/views/bigscreenDesigner/designer/widget/percent/widgetActiveRingChart.vue                  | 155 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/views/bigscreenDesigner/designer/widget/temp.vue                                           |   4 +++-
 src/views/bigscreenDesigner/designer/widget/text/widgetDigitalFlop.vue                         |  26 ++++++++++----------------
 src/views/bigscreenDesigner/designer/widget/text/widgetScrollRankingBoard.vue                  |  10 ++++++----
 src/views/bigscreenDesigner/designer/widget/text/widgetWaterLevelPond.vue                      |  24 +++++++++++++-----------
 src/views/bigscreenDesigner/designer/widget/widget.vue                                         |   6 ++++--
 9 files changed, 427 insertions(+), 35 deletions(-)
 create mode 100644 src/views/bigscreenDesigner/designer/tools/configure/percentCharts/widget-active-ring-chart.js
 create mode 100644 src/views/bigscreenDesigner/designer/widget/percent/widgetActiveRingChart.vue

diff --git a/src/views/bigscreenDesigner/designer/tools/configure/barCharts/widget-capsule-chart.js b/src/views/bigscreenDesigner/designer/tools/configure/barCharts/widget-capsule-chart.js
index 5403e54..56a702b 100644
--- a/src/views/bigscreenDesigner/designer/tools/configure/barCharts/widget-capsule-chart.js
+++ b/src/views/bigscreenDesigner/designer/tools/configure/barCharts/widget-capsule-chart.js
@@ -51,7 +51,7 @@ export const widgetCapsuleChart =  {
             name: 'customColor',
             required: false,
             //'#e062ae', '#fb7293', '#e690d1', '#32c5e9', '#96bfff'
-            value: [{ color: '#e062ae' }, { color: '#fb7293' }, { color: '#e690d1' }, { color: '#32c5e9' }, { color: '#96bfff' }],
+            value: [{ color: '#0044BB' }, { color: '#5500DD' }, { color: '#FF0088' }, { color: '#00AA00' }, { color: '#C63300' }],
           },
         ],
       }],
diff --git a/src/views/bigscreenDesigner/designer/tools/configure/percentCharts/widget-active-ring-chart.js b/src/views/bigscreenDesigner/designer/tools/configure/percentCharts/widget-active-ring-chart.js
new file mode 100644
index 0000000..075c2b3
--- /dev/null
+++ b/src/views/bigscreenDesigner/designer/tools/configure/percentCharts/widget-active-ring-chart.js
@@ -0,0 +1,233 @@
+/*
+ * @Descripttion: 动态环图
+ */
+export const widgetActiveRingChart=  {
+  code: 'widget-active-ring-chart',
+  type: 'percent',
+  tabName: '百分比',
+  label: '动态环图',
+  icon: 'iconicon_tubiao_bingtu',
+  options: {
+    // 配置
+    setup: [
+      {
+        type: 'el-input-text',
+        label: '图层名称',
+        name: 'layerName',
+        required: false,
+        placeholder: '',
+        value: '动态环图',
+      },
+      {
+        type: 'el-slider',
+        label: '环半径(%)',
+        name: 'radius',
+        required: false,
+        placeholder: '',
+        value: 50,
+      },
+      {
+        type: 'el-slider',
+        label: '环半径(动态)(%)',
+        name: 'activeRadius',
+        required: false,
+        placeholder: '',
+        value: 55,
+      },
+      {
+        type: 'el-input-number',
+        label: '环线条宽度',
+        name: 'lineWidth',
+        required: false,
+        placeholder: '',
+        value: 20,
+      },
+      {
+        type: 'el-input-number',
+        label: '切换间隔(ms)',
+        name: 'activeTimeGap',
+        required: false,
+        placeholder: '',
+        value: 3000,
+      },
+      {
+        type: 'el-input-number',
+        label: '小数位数',
+        name: 'digitalFlopToFixed',
+        required: false,
+        placeholder: '',
+        value: 0,
+      },
+      {
+        type: 'el-input-text',
+        label: '数字翻牌器单位',
+        name: 'digitalFlopUnit',
+        required: false,
+        placeholder: '单位',
+        value: '',
+      },
+      {
+        type: 'el-input-number',
+        label: '动画帧数',
+        name: 'animationFrame',
+        required: false,
+        placeholder: '',
+        value: 50,
+      },
+      {
+        type: 'el-switch',
+        label: '显示原始值',
+        name: 'showOriginValue',
+        required: false,
+        placeholder: '',
+        value: false,
+      },
+      {
+        type: 'vue-color',
+        label: '背景颜色',
+        name: 'background',
+        required: false,
+        placeholder: '',
+        value: ''
+      },
+      [{
+        name: '环颜色',
+        list: [
+          {
+            type: 'customColor',
+            label: '',
+            name: 'customColor',
+            required: false,
+            value: [{ color: '#1E90FF'},{ color: '#77FF00' },{ color: '#7700BB' },{ color: '#FF0088' },{ color: '#CC00CC' }],
+          },
+        ],
+      }],
+      [
+        {
+          name: '数字翻牌器样式',
+          list: [
+            {
+              type: 'vue-color',
+              label: '颜色',
+              name: 'fill',
+              required: false,
+              placeholder: '',
+              value: '#3de7c9'
+            },
+            {
+              type: 'el-input-number',
+              label: '字体大小',
+              name: 'fontSize',
+              required: false,
+              placeholder: '',
+              value: 30,
+            },
+            {
+              type: 'el-select',
+              label: '字体粗细',
+              name: 'fontWeight',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                {code: 'normal', name: '正常'},
+                {code: 'bold', name: '粗体'},
+                {code: 'bolder', name: '更粗'},
+                {code: 'lighter', name: '更细'},
+              ],
+              value: 'normal'
+            },
+          ],
+        }
+      ]
+
+    ],
+    // 数据
+    // 数据
+    data: [
+      {
+        type: 'el-radio-group',
+        label: '数据类型',
+        name: 'dataType',
+        require: false,
+        placeholder: '',
+        selectValue: true,
+        selectOptions: [
+          {
+            code: 'staticData',
+            name: '静态数据',
+          },
+          {
+            code: 'dynamicData',
+            name: '动态数据',
+          },
+        ],
+        value: 'staticData',
+      },
+      {
+        type: 'el-input-number',
+        label: '刷新时间(毫秒)',
+        name: 'refreshTime',
+        relactiveDom: 'dataType',
+        relactiveDomValue: 'dynamicData',
+        value: 5000
+      },
+      {
+        type: 'el-button',
+        label: '静态数据',
+        name: 'staticData',
+        required: false,
+        placeholder: '',
+        relactiveDom: 'dataType',
+        relactiveDomValue: 'staticData',
+        value: [{ value: 1048, name: "引擎" }, { value: 735, name: "访问" }, { value: 580, name: "邮件" }, { value: 484, name: "广告" }, { value: 300, name: "视频" }]
+      },
+      {
+        type: 'dycustComponents',
+        label: '',
+        name: 'dynamicData',
+        required: false,
+        placeholder: '',
+        relactiveDom: 'dataType',
+        relactiveDomValue: 'dynamicData',
+        chartType: 'widget-active-ring-chart',
+        dictKey: 'TEXT_PROPERTIES',
+        value: '',
+      },
+    ],
+    // 坐标
+    position: [
+      {
+        type: 'el-input-number',
+        label: '左边距',
+        name: 'left',
+        required: false,
+        placeholder: '',
+        value: 10,
+      },
+      {
+        type: 'el-input-number',
+        label: '上边距',
+        name: 'top',
+        required: false,
+        placeholder: '',
+        value: 10,
+      },
+      {
+        type: 'el-input-number',
+        label: '宽度',
+        name: 'width',
+        required: false,
+        placeholder: '该容器在1920px大屏中的宽度',
+        value: 300,
+      },
+      {
+        type: 'el-input-number',
+        label: '高度',
+        name: 'height',
+        required: false,
+        placeholder: '该容器在1080px大屏中的高度',
+        value: 300,
+      },
+    ],
+  }
+}
diff --git a/src/views/bigscreenDesigner/designer/tools/main.js b/src/views/bigscreenDesigner/designer/tools/main.js
index d7f4502..1b06b2a 100644
--- a/src/views/bigscreenDesigner/designer/tools/main.js
+++ b/src/views/bigscreenDesigner/designer/tools/main.js
@@ -46,6 +46,7 @@ import { widgetProgress } from "./configure/percentCharts/widget-progress";
 import {widgetWaterLevelPond} from "./configure/texts/widget-water-level-pond";
 import {widgetDigitalFlop} from "./configure/texts/widget-digital-flop";
 import {widgetScrollRankingBoard} from "./configure/texts/widget-scroll-ranking-board";
+import {widgetActiveRingChart} from "./configure/percentCharts/widget-active-ring-chart";
 
 
 export const widgetTool = [
@@ -92,4 +93,5 @@ export const widgetTool = [
   widgetRadar,
   widgetBarLineStack,
   widgetProgress,
+  widgetActiveRingChart
 ]
diff --git a/src/views/bigscreenDesigner/designer/widget/percent/widgetActiveRingChart.vue b/src/views/bigscreenDesigner/designer/widget/percent/widgetActiveRingChart.vue
new file mode 100644
index 0000000..e47528a
--- /dev/null
+++ b/src/views/bigscreenDesigner/designer/widget/percent/widgetActiveRingChart.vue
@@ -0,0 +1,155 @@
+<!--
+动态环图
+-->
+<template>
+<!--  <div id="widget-active-ring-chart" :style="styleObj">-->
+    <dv-active-ring-chart :config="options" :style="styleObj"/>
+<!--  </div>-->
+</template>
+<script>
+import Vue from "vue";
+import activeRingChart from "@jiaminghi/data-view/lib/components/activeRingChart";
+Vue.use(activeRingChart)
+export default {
+  name: "WidgetActiveRingChart",
+  props: {
+    value: Object,
+    ispreview: Boolean,
+  },
+  data() {
+    return {
+      //返回图标数据
+      options: {
+        radius:'50%',//环半径
+        activeRadius:'55%',//环半径（动态）
+        data:[],//环数据
+        lineWidth:20,//环数据
+        activeTimeGap:3000,//切换间隔(ms)
+        color:[],//环颜色
+        digitalFlopStyle: {
+            fontSize: 30,
+            fill: '#3de7c9'
+        },//数字翻牌器样式
+        digitalFlopToFixed	:0,//数字翻牌器小数位数
+        digitalFlopUnit	:'',//数字翻牌器单位
+        animationFrame	:50,//动效帧数
+        showOriginValue	:false//显示原始值
+      },
+      optionsStyle: {}, // 样式
+      optionsData: {}, // 数据
+      optionsCollapse: {}, // 图标属性
+      optionsSetup: {}
+    };
+  },
+  computed: {
+    styleObj() {
+      return {
+        position: this.ispreview ? "absolute" : "static",
+        width: this.optionsStyle.width + "px",
+        height: this.optionsStyle.height + "px",
+        left: this.optionsStyle.left + "px",
+        top: this.optionsStyle.top + "px",
+        background: this.optionsSetup.background
+      };
+    },
+  },
+  watch: {
+    value: {
+      handler(val) {
+        this.optionsStyle = val.position;
+        this.optionsData = val.data;
+        this.optionsSetup = val.setup;
+        this.editorOptions();
+      },
+      deep: true
+    }
+  },
+  created() {
+    this.optionsStyle = this.value.position;
+    this.optionsData = this.value.data;
+    this.optionsSetup = this.value.setup;
+    this.editorOptions();
+  },
+  methods: {
+    // 修改图标options属性
+    editorOptions() {
+      //数据修改
+      this.setOptionsData();
+      //环颜色修改
+      this.setOptionsColor();
+      //数字翻牌器样式
+      this.setFontStyle();
+      //基础数据修改
+      this.setOptionsConfig();
+    },
+    // 颜色修改
+    setOptionsColor() {
+      const optionsSetup = this.optionsSetup;
+      const customColor = optionsSetup.customColor;
+      if (!customColor) return;
+      const arrColor = [];
+      for (let i = 0; i < customColor.length; i++) {
+        arrColor.push(customColor[i].color);
+      }
+      this.options.color = arrColor;
+    },
+    //字体修改
+    setFontStyle() {
+      const optionsSetup = this.optionsSetup;
+      const fontStyle = {};
+      fontStyle.fill=optionsSetup.fill;
+      fontStyle.fontSize=optionsSetup.fontSize;
+      fontStyle.fontWeight=optionsSetup.fontWeight;
+      this.options.digitalFlopToFixed = fontStyle;
+    },
+    // 配置修改
+    setOptionsConfig() {
+      const optionsSetup = this.optionsSetup;
+      this.options.radius = optionsSetup.radius+"%";
+      this.options.activeRadius = optionsSetup.activeRadius+"%";
+      this.options.lineWidth = optionsSetup.lineWidth;
+      this.options.activeTimeGap = optionsSetup.activeTimeGap;
+      this.options.digitalFlopToFixed = optionsSetup.digitalFlopToFixed;
+      this.options.digitalFlopUnit = optionsSetup.digitalFlopUnit;
+      this.options.animationFrame = optionsSetup.animationFrame;
+      this.options.showOriginValue = optionsSetup.showOriginValue;
+      //改变options
+      this.options={...this.options};
+    },
+    //数据类型
+    setOptionsData() {
+      const optionsData = this.optionsData; // 数据类型 静态 or 动态
+      optionsData.dataType == "staticData"
+        ? this.staticDataFn(optionsData.staticData)
+        : this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);
+    },
+    staticDataFn(val) {
+      // console.log("设置静态数据",this.options)
+      const staticData = typeof val == "string" ? JSON.parse(val) : val;
+      this.options.data=staticData;
+    },
+    dynamicDataFn(val, refreshTime) {
+      if (!val) return;
+      if (this.ispreview) {
+        this.getEchartData(val);
+        this.flagInter = setInterval(() => {
+          this.getEchartData(val);
+        }, refreshTime);
+      } else {
+        this.getEchartData(val);
+      }
+    },
+    getEchartData(val) {
+      const data = this.queryEchartsData(val);
+      data.then(res => {
+        this.renderingFn(res);
+      });
+    },
+    renderingFn(val) {
+      this.options.data=val;
+    }
+
+  }
+};
+
+</script>
diff --git a/src/views/bigscreenDesigner/designer/widget/temp.vue b/src/views/bigscreenDesigner/designer/widget/temp.vue
index 4d1138e..48aab90 100644
--- a/src/views/bigscreenDesigner/designer/widget/temp.vue
+++ b/src/views/bigscreenDesigner/designer/widget/temp.vue
@@ -50,6 +50,7 @@ import widgetCapsuleChart from "./bar/widgetCapsuleChart";
 import widgetWaterLevelPond from "./text/widgetWaterLevelPond";
 import widgetDigitalFlop from "./text/widgetDigitalFlop";
 import widgetScrollRankingBoard from "./text/widgetScrollRankingBoard";
+import widgetActiveRingChart from "./percent/widgetActiveRingChart";
 
 
 export default {
@@ -93,7 +94,8 @@ export default {
     widgetProgress,
     widgetWaterLevelPond,
     widgetDigitalFlop,
-    widgetScrollRankingBoard
+    widgetScrollRankingBoard,
+    widgetActiveRingChart
   },
   model: {
     prop: "value",
diff --git a/src/views/bigscreenDesigner/designer/widget/text/widgetDigitalFlop.vue b/src/views/bigscreenDesigner/designer/widget/text/widgetDigitalFlop.vue
index 84d50ee..dceb107 100644
--- a/src/views/bigscreenDesigner/designer/widget/text/widgetDigitalFlop.vue
+++ b/src/views/bigscreenDesigner/designer/widget/text/widgetDigitalFlop.vue
@@ -2,9 +2,9 @@
 数字翻牌器
 -->
 <template>
-  <div id="widget-digital-flop" :style="styleObj">
+<!--  <div id="widget-digital-flop" :style="styleObj">-->
     <dv-digital-flop :config="options" :style="styleObj"/>
-  </div>
+<!--  </div>-->
 </template>
 <script>
 
@@ -75,21 +75,16 @@ export default {
   methods: {
     // 修改图标options属性
     editorOptions() {
-      //数据修改
-      this.setOptionsData();
       //显示内容
       this.showText();
+
+      //数据修改
+      this.setOptionsData();
+
       //字体样式
       this.setFontStyle();
     },
-    /*中间随机数量**/
-    randomExtend (minNum, maxNum) {
-      if (arguments.length === 1) {
-        return parseInt(Math.random() * minNum + 1, 10)
-      } else {
-        return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10)
-      }
-    },
+
     //显示的内容
     showText() {
       const {slectedDataType,numberText} = this.optionsSetup;
@@ -134,11 +129,10 @@ export default {
       this.options.toFixed=optionsSetup.toFixed;
       this.options.textAlign=optionsSetup.textAlign;
       this.options.animationFrame=optionsSetup.animationFrame;
-      // this.options.rowGap=optionsSetup.rowGap;
-      const optionsDeep =this.deepClone(this.options);
+     // const optionsDeep =this.deepClone(this.options);
       // console.log("返回数据options",optionsDeep);
-      this.options={};
-      this.options=optionsDeep;
+      this.options={...this.options};
+     // this.options=optionsDeep;
     },
   }
 };
diff --git a/src/views/bigscreenDesigner/designer/widget/text/widgetScrollRankingBoard.vue b/src/views/bigscreenDesigner/designer/widget/text/widgetScrollRankingBoard.vue
index 987dd80..546b0bc 100644
--- a/src/views/bigscreenDesigner/designer/widget/text/widgetScrollRankingBoard.vue
+++ b/src/views/bigscreenDesigner/designer/widget/text/widgetScrollRankingBoard.vue
@@ -2,9 +2,9 @@
 排名轮播表
 -->
 <template>
-  <div id="widget-scroll-ranking-board" :style="styleObj">
+<!--  <div id="widget-scroll-ranking-board" :style="styleObj">-->
     <dv-scroll-ranking-board :config="options" :style="styleObj"/>
-  </div>
+<!--  </div>-->
 </template>
 <script>
 import Vue from "vue";
@@ -69,10 +69,11 @@ export default {
   methods: {
     // 修改图标options属性
     editorOptions() {
-      //配置修改
-      this.setOptionsConfig();
       //数据修改
       this.setOptionsData();
+
+      //配置修改
+      this.setOptionsConfig();
     },
     // 配置修改
     setOptionsConfig() {
@@ -88,6 +89,7 @@ export default {
       }else{
         this.options.valueFormatter=undefined;
       }
+      this.options={...this.options};
     },
     //数据类型
     setOptionsData() {
diff --git a/src/views/bigscreenDesigner/designer/widget/text/widgetWaterLevelPond.vue b/src/views/bigscreenDesigner/designer/widget/text/widgetWaterLevelPond.vue
index fdbbacb..72eaa3a 100644
--- a/src/views/bigscreenDesigner/designer/widget/text/widgetWaterLevelPond.vue
+++ b/src/views/bigscreenDesigner/designer/widget/text/widgetWaterLevelPond.vue
@@ -2,9 +2,9 @@
   水位图
 -->
 <template>
-  <div id="widget-water-pond-level" :style="styleObj">
+<!--  <div id="widget-water-pond-level" :style="styleObj">-->
     <dv-water-level-pond :config="options" :style="styleObj"/>
-  </div>
+<!--  </div>-->
 </template>
 <script>
 import waterLevelPond from "@jiaminghi/data-view/lib/components/waterLevelPond";
@@ -68,12 +68,13 @@ export default {
   methods: {
     // 修改图标options属性
     editorOptions() {
+      //水位位置
+      this.showText();
       //颜色值修改
       this.setOptionsColor();
       //数据修改
       this.setOptionsData();
-      //水位位置
-      this.showText();
+
     },
     // 颜色修改
     setOptionsColor() {
@@ -103,16 +104,17 @@ export default {
       this.options.waveOpacity= waveOpacity/100;//波浪透明度
       this.options.formatter = optionsSetup.formatter;
       this.options.waveNum = optionsSetup.waveNum;//波浪数量
+      this.options={...this.options};
     },
 
   }
 };
 
 </script>
-<style scoped lang="scss">
-.echarts {
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-}
-</style>
+<!--<style scoped lang="scss">-->
+<!--.echarts {-->
+<!--  width: 100%;-->
+<!--  height: 100%;-->
+<!--  overflow: hidden;-->
+<!--}-->
+<!--</style>-->
diff --git a/src/views/bigscreenDesigner/designer/widget/widget.vue b/src/views/bigscreenDesigner/designer/widget/widget.vue
index 92feee3..61394fe 100644
--- a/src/views/bigscreenDesigner/designer/widget/widget.vue
+++ b/src/views/bigscreenDesigner/designer/widget/widget.vue
@@ -55,7 +55,7 @@ import widgetProgress from "./percent/widgetProgress";
 import widgetWaterLevelPond from "./text/widgetWaterLevelPond";
 import widgetDigitalFlop from "./text/widgetDigitalFlop";
 import widgetScrollRankingBoard from "./text/widgetScrollRankingBoard";
-
+import widgetActiveRingChart from "./percent/widgetActiveRingChart";
 export default {
   name: "Widget",
   components: {
@@ -97,7 +97,9 @@ export default {
     widgetProgress,
     widgetWaterLevelPond,
     widgetDigitalFlop,
-    widgetScrollRankingBoard
+    widgetScrollRankingBoard,
+    widgetActiveRingChart
+
   },
   model: {
     prop: "value",
--
libgit2 0.22.2