From fee68de5515d8e3130ab89398f76f99de9870911 Mon Sep 17 00:00:00 2001
From: Raod <1130305001@qq.com>
Date: Mon, 28 Jun 2021 17:56:14 +0800
Subject: [PATCH 1/6] WidgetGradientColorBarchart

---
 .../views/report/bigscreen/designer/tools.js  | 550 ++++++------------
 .../bar/widgetGradientColorBarchart.vue       |  42 +-
 2 files changed, 208 insertions(+), 384 deletions(-)

diff --git a/report-ui/src/views/report/bigscreen/designer/tools.js b/report-ui/src/views/report/bigscreen/designer/tools.js
index 9442d7c8..2febb36f 100644
--- a/report-ui/src/views/report/bigscreen/designer/tools.js
+++ b/report-ui/src/views/report/bigscreen/designer/tools.js
@@ -1506,14 +1506,6 @@ const widgetTools = [
           placeholder: '',
           value: '柱状图',
         },
-        {
-          type: 'el-switch',
-          label: '竖展示',
-          name: 'verticalShow',
-          required: false,
-          placeholder: '',
-          value: false,
-        },
         {
           type: 'vue-color',
           label: '背景颜色',
@@ -1523,35 +1515,6 @@ const widgetTools = [
           value: ''
         },
         [
-          // {
-          //   name: '柱体设置',
-          //   list: [
-          //     {
-          //       type: 'el-slider',
-          //       label: '最大宽度',
-          //       name: 'maxWidth',
-          //       required: false,
-          //       placeholder: '',
-          //       value: 10,
-          //     },
-          //     {
-          //       type: 'el-slider',
-          //       label: '圆角',
-          //       name: 'radius',
-          //       require: false,
-          //       placeholder: '',
-          //       value: 5,
-          //     },
-          //     {
-          //       type: 'el-slider',
-          //       label: '最小高度',
-          //       name: 'minHeight',
-          //       require: false,
-          //       placeholder: '',
-          //       value: 0,
-          //     },
-          //   ],
-          // },
           {
             name: '标题设置',
             list: [
@@ -1654,325 +1617,200 @@ const widgetTools = [
               },
             ],
           },
-          // {
-          //   name: 'X轴设置',
-          //   list: [
-          //     {
-          //       type: 'el-input-text',
-          //       label: '名称',
-          //       name: 'xName',
-          //       required: false,
-          //       placeholder: '',
-          //       value: ''
-          //     },
-          //     {
-          //       type: 'el-switch',
-          //       label: '显示',
-          //       name: 'hideX',
-          //       required: false,
-          //       placeholder: '',
-          //       value: true,
-          //     },
-          //     {
-          //       type: 'vue-color',
-          //       label: '坐标名颜色',
-          //       name: 'xNameColor',
-          //       required: false,
-          //       placeholder: '',
-          //       value: '#fff'
-          //     },
-          //     {
-          //       type: 'el-input-number',
-          //       label: '字体大小',
-          //       name: 'xNameFontSize',
-          //       required: false,
-          //       placeholder: '',
-          //       value: 12
-          //     },
-          //     {
-          //       type: 'el-slider',
-          //       label: '文字角度',
-          //       name: 'textAngle',
-          //       required: false,
-          //       placeholder: '',
-          //       value: 0
-          //     },
-          //     {
-          //       type: 'el-input-number',
-          //       label: '文字间隔',
-          //       name: 'textInterval',
-          //       required: false,
-          //       placeholder: '',
-          //       value: ''
-          //     },
-          //     {
-          //       type: 'el-switch',
-          //       label: '轴反转',
-          //       name: 'reversalX',
-          //       required: false,
-          //       placeholder: '',
-          //       value: ''
-          //     },
-          //     {
-          //       type: 'vue-color',
-          //       label: '颜色',
-          //       name: 'Xcolor',
-          //       required: false,
-          //       placeholder: '',
-          //       value: '#fff',
-          //     },
-          //     {
-          //       type: 'el-input-number',
-          //       label: '字号',
-          //       name: 'fontSizeX',
-          //       required: false,
-          //       placeholder: '',
-          //       value: 12,
-          //     },
-          //   ],
-          // },
-          // {
-          //   name: 'Y轴设置',
-          //   list: [
-          //     {
-          //       type: 'el-input-text',
-          //       label: '名称',
-          //       name: 'textNameY',
-          //       require: false,
-          //       placeholder: '',
-          //       value: ''
-          //     },
-          //     {
-          //       type: 'el-switch',
-          //       label: '显示',
-          //       name: 'isShowY',
-          //       require: false,
-          //       placeholder: '',
-          //       value: true,
-          //     },
-          //     {
-          //       type: 'vue-color',
-          //       label: '坐标名颜色',
-          //       name: 'NameColorY',
-          //       required: false,
-          //       placeholder: '',
-          //       value: '#fff',
-          //     },
-          //     {
-          //       type: 'el-input-number',
-          //       label: '字体大小',
-          //       name: 'NameFontSizeY',
-          //       required: false,
-          //       placeholder: '',
-          //       value: 12,
-          //     },
-          //     {
-          //       type: 'el-switch',
-          //       label: '轴反转',
-          //       name: 'reversalY',
-          //       required: false,
-          //       placeholder: '',
-          //       value: false
-          //     },
-          //     {
-          //       type: 'vue-color',
-          //       label: '颜色',
-          //       name: 'colorY',
-          //       required: false,
-          //       placeholder: '',
-          //       value: '#fff',
-          //     },
-          //     {
-          //       type: 'el-input-number',
-          //       label: '字号',
-          //       name: 'fontSizeY',
-          //       required: false,
-          //       placeholder: '',
-          //       value: 12,
-          //     },
-          //   ],
-          // },
-          // {
-          //   name: '数值设定',
-          //   list: [
-          //     {
-          //       type: 'el-switch',
-          //       label: '显示',
-          //       name: 'isShow',
-          //       required: false,
-          //       placeholder: '',
-          //       value: false
-          //     },
-          //     {
-          //       type: 'el-input-number',
-          //       label: '字体大小',
-          //       name: 'fontSize',
-          //       required: false,
-          //       placeholder: '',
-          //       value: 14
-          //     },
-          //     {
-          //       type: 'vue-color',
-          //       label: '字体颜色',
-          //       name: 'subTextColor',
-          //       required: false,
-          //       placeholder: '',
-          //       value: '#fff'
-          //     },
-          //     {
-          //       type: 'el-select',
-          //       label: '字体粗细',
-          //       name: 'fontWeight',
-          //       required: false,
-          //       placeholder: '',
-          //       selectOptions: [
-          //         { code: 'normal', name: '正常' },
-          //         { code: 'bold', name: '粗体' },
-          //         { code: 'bolder', name: '特粗体' },
-          //         { code: 'lighter', name: '细体' }
-          //       ],
-          //       value: 'normal'
-          //     },
-          //   ],
-          // },
-          // {
-          //   name: '提示语设置',
-          //   list: [
-          //     {
-          //       type: 'el-input-number',
-          //       label: '字体大小',
-          //       name: 'fontSize',
-          //       required: false,
-          //       placeholder: '',
-          //     },
-          //     {
-          //       type: 'vue-color',
-          //       label: '字体颜色',
-          //       name: 'lineColor',
-          //       required: false,
-          //       placeholder: '',
-          //     },
-          //   ],
-          // },
-          // {
-          //   name: '坐标轴边距设置',
-          //   list: [
-          //     {
-          //       type: 'el-slider',
-          //       label: '左边距(像素)',
-          //       name: 'marginLeft',
-          //       required: false,
-          //       placeholder: '',
-          //       value: 10,
-          //     }, {
-          //       type: 'el-slider',
-          //       label: '顶边距(像素)',
-          //       name: 'marginTop',
-          //       required: false,
-          //       placeholder: '',
-          //       value: 50,
-          //     }, {
-          //       type: 'el-slider',
-          //       label: '右边距(像素)',
-          //       name: 'marginRight',
-          //       required: false,
-          //       placeholder: '',
-          //       value: 40,
-          //     }, {
-          //       type: 'el-slider',
-          //       label: '底边距(像素)',
-          //       name: 'marginBottom',
-          //       required: false,
-          //       placeholder: '',
-          //       value: 10,
-          //     },
-          //   ],
-          // },
-          // {
-          //   name: '图例操作',
-          //   list: [
-          //     {
-          //       type: 'el-switch',
-          //       label: '图例',
-          //       name: 'isShowLegend',
-          //       required: false,
-          //       placeholder: '',
-          //       value: true,
-          //     },
-          //     {
-          //       type: 'vue-color',
-          //       label: '字体颜色',
-          //       name: 'lengedColor',
-          //       required: false,
-          //       placeholder: '',
-          //       value: '#fff',
-          //     },
-          //     {
-          //       type: 'el-input-number',
-          //       label: '字体大小',
-          //       name: 'lengedFontSize',
-          //       required: false,
-          //       placeholder: '',
-          //       value: 16,
-          //     },
-          //     {
-          //       type: 'el-input-number',
-          //       label: '图例宽度',
-          //       name: 'lengedWidth',
-          //       required: false,
-          //       placeholder: '',
-          //       value: 15,
-          //     },
-          //     {
-          //       type: 'el-select',
-          //       label: '横向位置',
-          //       name: 'lateralPosition',
-          //       required: false,
-          //       placeholder: '',
-          //       selectOptions: [
-          //         { code: 'left', name: '左对齐' },
-          //         { code: 'right', name: '右对齐' },
-          //       ],
-          //       value: ''
-          //     },
-          //     {
-          //       type: 'el-select',
-          //       label: '纵向位置',
-          //       name: 'longitudinalPosition',
-          //       required: false,
-          //       placeholder: '',
-          //       selectOptions: [
-          //         { code: 'top', name: '顶部' },
-          //         { code: 'bottom', name: '底部' },
-          //       ],
-          //       value: ''
-          //     },
-          //     {
-          //       type: 'el-select',
-          //       label: '布局前置',
-          //       name: 'layoutFront',
-          //       required: false,
-          //       placeholder: '',
-          //       selectOptions: [
-          //         { code: 'vertical', name: '竖排' },
-          //         { code: 'horizontal', name: '横排' },
-          //       ],
-          //       value: ''
-          //     },
-          //   ],
-          // },
-          // {
-          //   name: '自定义配色',
-          //   list: [
-          //     {
-          //       type: 'customColor',
-          //       label: '',
-          //       name: 'customColor',
-          //       required: false,
-          //       value: [{ color: '#ff7f50' }, { color: '#87cefa' }, { color: '#da70d6' }, { color: '#32cd32' }, { color: '#6495ed' }],
-          //     },
-          //   ],
-          // },
+          {
+            name: 'X轴设置',
+            list: [
+              {
+                type: 'el-input-text',
+                label: '名称',
+                name: 'xName',
+                required: false,
+                placeholder: '',
+                value: ''
+              },
+              {
+                type: 'el-switch',
+                label: '显示',
+                name: 'hideX',
+                required: false,
+                placeholder: '',
+                value: true,
+              },
+              {
+                type: 'vue-color',
+                label: '坐标名颜色',
+                name: 'xNameColor',
+                required: false,
+                placeholder: '',
+                value: '#fff'
+              },
+              {
+                type: 'el-input-number',
+                label: '字体大小',
+                name: 'xNameFontSize',
+                required: false,
+                placeholder: '',
+                value: 12
+              },
+              {
+                type: 'el-slider',
+                label: '文字角度',
+                name: 'textAngle',
+                required: false,
+                placeholder: '',
+                value: 0
+              },
+              {
+                type: 'el-input-number',
+                label: '文字间隔',
+                name: 'textInterval',
+                required: false,
+                placeholder: '',
+                value: ''
+              },
+              {
+                type: 'el-switch',
+                label: '轴反转',
+                name: 'reversalX',
+                required: false,
+                placeholder: '',
+                value: ''
+              },
+              {
+                type: 'vue-color',
+                label: '颜色',
+                name: 'Xcolor',
+                required: false,
+                placeholder: '',
+                value: '#fff',
+              },
+              {
+                type: 'el-input-number',
+                label: '字号',
+                name: 'fontSizeX',
+                required: false,
+                placeholder: '',
+                value: 12,
+              },
+            ],
+          },
+          {
+            name: 'Y轴设置',
+            list: [
+              {
+                type: 'el-input-text',
+                label: '名称',
+                name: 'textNameY',
+                require: false,
+                placeholder: '',
+                value: ''
+              },
+              {
+                type: 'el-switch',
+                label: '显示',
+                name: 'isShowY',
+                require: false,
+                placeholder: '',
+                value: true,
+              },
+              {
+                type: 'vue-color',
+                label: '坐标名颜色',
+                name: 'NameColorY',
+                required: false,
+                placeholder: '',
+                value: '#fff',
+              },
+              {
+                type: 'el-input-number',
+                label: '字体大小',
+                name: 'NameFontSizeY',
+                required: false,
+                placeholder: '',
+                value: 12,
+              },
+              {
+                type: 'el-switch',
+                label: '轴反转',
+                name: 'reversalY',
+                required: false,
+                placeholder: '',
+                value: false
+              },
+              {
+                type: 'vue-color',
+                label: '颜色',
+                name: 'colorY',
+                required: false,
+                placeholder: '',
+                value: '#fff',
+              },
+              {
+                type: 'el-input-number',
+                label: '字号',
+                name: 'fontSizeY',
+                required: false,
+                placeholder: '',
+                value: 12,
+              },
+            ],
+          },
+          {
+            name: '坐标轴边距设置',
+            list: [
+              {
+                type: 'el-slider',
+                label: '左边距(像素)',
+                name: 'marginLeft',
+                required: false,
+                placeholder: '',
+                value: 10,
+              }, {
+                type: 'el-slider',
+                label: '顶边距(像素)',
+                name: 'marginTop',
+                required: false,
+                placeholder: '',
+                value: 50,
+              }, {
+                type: 'el-slider',
+                label: '右边距(像素)',
+                name: 'marginRight',
+                required: false,
+                placeholder: '',
+                value: 40,
+              }, {
+                type: 'el-slider',
+                label: '底边距(像素)',
+                name: 'marginBottom',
+                required: false,
+                placeholder: '',
+                value: 10,
+              },
+            ],
+          },
+          {
+            name: '渐变色',
+            list: [
+              {
+                type: 'vue-color',
+                label: '0%处',
+                name: 'barStart',
+                required: false,
+                placeholder: '',
+                value: '#00F4FFFF'
+              },
+              {
+                type: 'vue-color',
+                label: '100%处',
+                name: 'barEnd',
+                required: false,
+                placeholder: '',
+                value: '#004DA7FF'
+              },
+
+            ],
+          },
         ],
       ],
       // 数据
diff --git a/report-ui/src/views/report/bigscreen/designer/widget/bar/widgetGradientColorBarchart.vue b/report-ui/src/views/report/bigscreen/designer/widget/bar/widgetGradientColorBarchart.vue
index 195c5181..e88f76a2 100644
--- a/report-ui/src/views/report/bigscreen/designer/widget/bar/widgetGradientColorBarchart.vue
+++ b/report-ui/src/views/report/bigscreen/designer/widget/bar/widgetGradientColorBarchart.vue
@@ -16,7 +16,7 @@
     data() {
       return {
         options: {
-          backgroundColor: '#00265f',
+          // backgroundColor: '#00265f',
           "title": {
             "text": "政策补贴额度",
             x: "center",
@@ -176,13 +176,13 @@
       // 修改图标options属性
       editorOptions() {
         this.setOptionsTitle()
-        // this.setOptionsX()
-        // this.setOptionsY()
+        this.setOptionsX()
+        this.setOptionsY()
         // this.setOptionsTop()
         // this.setOptionsTooltip()
-        // this.setOptionsMargin()
+        this.setOptionsMargin()
         // this.setOptionsLegend()
-        // this.setOptionsColor()
+        this.setOptionsColor()
         this.setOptionsData()
       },
       // 标题修改
@@ -331,29 +331,17 @@
         }
         legend.itemWidth = optionsCollapse.lengedWidth
       },
-      // 图例颜色修改
+      // 渐变色
       setOptionsColor() {
         const optionsCollapse = this.optionsSetup
-        const customColor = optionsCollapse.customColor
-        if (!customColor) return
-        const arrColor = []
-        for (let i = 0; i < customColor.length; i++) {
-          arrColor.push(customColor[i].color)
-        }
-        const itemStyle = {
-          normal: {
-            color: (params) => {
-              return arrColor[params.dataIndex]
-            },
-            barBorderRadius: optionsCollapse.radius,
-          },
-        }
-        for (const key in this.options.series) {
-          if (this.options.series[key].type == 'bar') {
-            this.options.series[key].itemStyle = itemStyle
-          }
-        }
-        this.options = Object.assign({}, this.options)
+        const barStart = {}
+        barStart['offset'] = 0
+        barStart['color'] = optionsCollapse.barStart
+        const barEnd = {}
+        barStart['offset'] = 1
+        barStart['color'] = optionsCollapse.barEnd
+        // this.options.series[0].itemStyle.normal.color = new echarts.graphic.LinearGradient(0, 0, 0, 1,[ barStart, barEnd], false)
+
       },
       // 数据解析
       setOptionsData() {
@@ -419,8 +407,6 @@
   .echarts {
     width: 100%;
     height: 100%;
-    min-width: 200px;
-    min-height: 200px;
     overflow: hidden;
   }
 </style>

From 13b17e3b6eb1d1498c8458310cae350f2921a5f6 Mon Sep 17 00:00:00 2001
From: qianlishi <1432731663@qq.com>
Date: Mon, 28 Jun 2021 17:58:30 +0800
Subject: [PATCH 2/6] =?UTF-8?q?=E5=A4=A7=E5=B1=8F=20=E5=9B=BE=E5=B1=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 report-ui/src/components/Dictionary/index.vue |  55 ++--
 .../designer/form/customColorComponents.vue   |  15 +-
 .../designer/form/dynamicComponents.vue       | 246 ++++++++++--------
 .../bigscreen/designer/form/dynamicForm.vue   |   7 +-
 .../views/report/bigscreen/designer/index.vue |  61 +++--
 5 files changed, 220 insertions(+), 164 deletions(-)

diff --git a/report-ui/src/components/Dictionary/index.vue b/report-ui/src/components/Dictionary/index.vue
index 911775f2..4814d6f0 100644
--- a/report-ui/src/components/Dictionary/index.vue
+++ b/report-ui/src/components/Dictionary/index.vue
@@ -6,57 +6,68 @@
  */
 !-->
 <template>
-  <el-select v-model="dictionary" placeholder="请选择" clearable @change="selectChange">
-    <el-option v-for="item in dictionaryOptions" :key="item.id" :label="item.text" :value="item.id" />
+  <el-select
+    v-model="dictionary"
+    placeholder="请选择"
+    clearable
+    @change="selectChange"
+    size="mini"
+  >
+    <el-option
+      v-for="item in dictionaryOptions"
+      :key="item.id"
+      :label="item.text"
+      :value="item.id"
+    />
   </el-select>
 </template>
 
 <script>
-import { getDictList } from '@/api/dict-data' // 获取数据字典
+import { getDictList } from "@/api/dict-data"; // 获取数据字典
 export default {
-  name: 'GetDictionary',
+  name: "GetDictionary",
   props: {
     dictKey: String, // 字典code
-    updataDict: String, // 回显绑定的值
+    updataDict: String // 回显绑定的值
   },
   data() {
     return {
-      dictionary: '', // 绑定选中的值
-      dictionaryOptions: [], // 拉下字典选项
-    }
+      dictionary: "", // 绑定选中的值
+      dictionaryOptions: [] // 拉下字典选项
+    };
   },
   watch: {
     dictKey: {
       immediate: true,
       handler() {
-        this.getSystem()
-      },
+        this.getSystem();
+      }
     },
     updataDict: {
       immediate: true,
       handler() {
-        this.dictionary = this.updataDict
-      },
-    },
+        this.dictionary = this.updataDict;
+      }
+    }
   },
   created() {
-    this.getSystem()
+    this.getSystem();
   },
   mounted() {
-    this.dictionary = this.updataDict
+    this.dictionary = this.updataDict;
   },
   methods: {
     // 获取数据字典
     async getSystem() {
-      const { code, data } = await getDictList(this.dictKey)
-      if (code != '200') return
-      this.dictionaryOptions = data
+      const { code, data } = await getDictList(this.dictKey);
+      if (code != "200") return;
+      this.dictionaryOptions = data;
     },
     selectChange(val) {
-      this.$emit('input', val)
-    },
-  },
-}
+      this.$emit("input", val);
+    }
+  }
+};
 </script>
 
 <style lang="scss" scoped>
diff --git a/report-ui/src/views/report/bigscreen/designer/form/customColorComponents.vue b/report-ui/src/views/report/bigscreen/designer/form/customColorComponents.vue
index 2dc7afb6..00191efb 100644
--- a/report-ui/src/views/report/bigscreen/designer/form/customColorComponents.vue
+++ b/report-ui/src/views/report/bigscreen/designer/form/customColorComponents.vue
@@ -1,6 +1,11 @@
 <template>
   <div>
-    <el-button type="primary" icon="el-icon-plus" plain @click="handleAddClick"
+    <el-button
+      type="primary"
+      size="mini"
+      icon="el-icon-plus"
+      plain
+      @click="handleAddClick"
       >新增</el-button
     >
     <el-table :data="formData" style="width: 100%">
@@ -43,19 +48,23 @@
             v-model="colorValue"
             style="width: 200px"
             placeholder="请输入颜色"
+            size="mini"
           >
             <template slot="append">
               <el-color-picker
                 v-model="colorValue"
                 :predefine="predefineColors"
+                size="mini"
               />
             </template>
           </el-input>
         </el-form-item>
       </el-form>
       <span slot="footer" class="dialog-footer">
-        <el-button @click="dialogVisible = false">取 消</el-button>
-        <el-button type="primary" @click="handleSaveClick">确 定</el-button>
+        <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
+        <el-button size="mini" type="primary" @click="handleSaveClick"
+          >确 定</el-button
+        >
       </span>
     </el-dialog>
   </div>
diff --git a/report-ui/src/views/report/bigscreen/designer/form/dynamicComponents.vue b/report-ui/src/views/report/bigscreen/designer/form/dynamicComponents.vue
index d16aea59..0944b6d7 100644
--- a/report-ui/src/views/report/bigscreen/designer/form/dynamicComponents.vue
+++ b/report-ui/src/views/report/bigscreen/designer/form/dynamicComponents.vue
@@ -1,193 +1,213 @@
 <template>
   <div>
-    <el-form label-width="80px"
-             label-position="left">
+    <el-form label-width="80px" label-position="left">
       <el-form-item label="数据集">
-        <el-select v-model="dataSetValue"
-                   clearable
-                   placeholder="请选择"
-                   @change="selectDataSet">
-          <el-option v-for="item in dataSet"
-                     :key="item.code"
-                     :label="item.setName"
-                     :value="item.id" />
+        <el-select
+          size="mini"
+          v-model="dataSetValue"
+          clearable
+          placeholder="请选择"
+          @change="selectDataSet"
+        >
+          <el-option
+            v-for="item in dataSet"
+            :key="item.code"
+            :label="item.setName"
+            :value="item.id"
+          />
         </el-select>
       </el-form-item>
-      <el-form-item v-for="(item, index) in userNameList"
-                    :key="index"
-                    :label="item.paramName">
-        <el-input v-model="item.sampleItem" />
+      <el-form-item
+        v-for="(item, index) in userNameList"
+        :key="index"
+        :label="item.paramName"
+      >
+        <el-input v-model="item.sampleItem" size="mini" />
       </el-form-item>
-      <el-form-item v-for="item in setParamList"
-                    :key="item"
-                    :label="item">
-        <Dictionary v-model="params"
-                    :dict-key="'CHART_PROPERTIES'"
-                    @input="selectParams($event, item)" />
+      <el-form-item v-for="item in setParamList" :key="item" :label="item">
+        <Dictionary
+          v-model="params"
+          :dict-key="'CHART_PROPERTIES'"
+          @input="selectParams($event, item)"
+        />
       </el-form-item>
-      <el-button style="width: 100%"
-                 type="primary"
-                 plain
-                 @click="saveDataBtn">刷新</el-button>
+      <el-button
+        style="width: 100%"
+        type="primary"
+        plain
+        size="mini"
+        @click="saveDataBtn"
+        >刷新</el-button
+      >
     </el-form>
   </div>
 </template>
 <script>
-import { queryAllDataSet, detailBysetId, getData } from '@/api/bigscreen'
-import Dictionary from '@/components/Dictionary/index'
+import { queryAllDataSet, detailBysetId, getData } from "@/api/bigscreen";
+import Dictionary from "@/components/Dictionary/index";
 
 export default {
-  name: 'DynamicComponents',
+  name: "DynamicComponents",
   components: {
-    Dictionary,
+    Dictionary
   },
   model: {
-    prop: 'formData',
-    event: 'input',
+    prop: "formData",
+    event: "input"
   },
   props: {
     chartType: String,
-    props: ['formData'],
+    props: ["formData"]
   },
-  data () {
+  data() {
     return {
-      dataSetValue: '',
+      dataSetValue: "",
       dataSet: [], // 数据集
       userNameList: [], // 用户
       setParamList: [], // 对应的不同的图形数据参数
       params: {},
-      chartProperties: {},
-    }
+      chartProperties: {}
+    };
   },
   computed: {
-    setCode () {
-      let code = ''
-      this.dataSet.forEach((el) => {
+    setCode() {
+      let code = "";
+      this.dataSet.forEach(el => {
         if (el.id == this.dataSetValue) {
-          code = el.setCode
+          code = el.setCode;
         }
-      })
-      return code
-    },
+      });
+      return code;
+    }
   },
-  mounted () {
-    this.loadDataSet()
+  mounted() {
+    this.loadDataSet();
   },
   methods: {
-    async loadDataSet () {
-      const { code, data } = await queryAllDataSet()
-      this.dataSet = data
-      if (code != '200') return
+    async loadDataSet() {
+      const { code, data } = await queryAllDataSet();
+      this.dataSet = data;
+      if (code != "200") return;
     },
-    async selectDataSet () {
-      const { code, data } = await detailBysetId(this.dataSetValue)
-      this.userNameList = data.dataSetParamDtoList
-      this.setParamList = data.setParamList
-      if (code != '200') return
+    async selectDataSet() {
+      const { code, data } = await detailBysetId(this.dataSetValue);
+      this.userNameList = data.dataSetParamDtoList;
+      this.setParamList = data.setParamList;
+      if (code != "200") return;
     },
-    async saveDataBtn () {
-      const contextData = {}
+    async saveDataBtn() {
+      const contextData = {};
       for (let i = 0; i < this.userNameList.length; i++) {
-        contextData[this.userNameList[i].paramName] = this.userNameList[i].sampleItem
+        contextData[this.userNameList[i].paramName] = this.userNameList[
+          i
+        ].sampleItem;
       }
       const params = {
         chartType: this.chartType,
         setCode: this.setCode,
         chartProperties: this.chartProperties,
-        contextData,
-      }
-      const { code, data } = await getData(params)
-      const analysisData = this.analysisChartsData(data)
-      console.log(analysisData)
-      this.$emit('input', analysisData)
-      if (code != '200') return
+        contextData
+      };
+      const { code, data } = await getData(params);
+      const analysisData = this.analysisChartsData(data);
+      console.log(analysisData);
+      this.$emit("input", analysisData);
+      if (code != "200") return;
     },
-    selectParams (val, key) {
-      this.chartProperties[key] = val
+    selectParams(val, key) {
+      this.chartProperties[key] = val;
     },
     // 解析不同图标的数据
-    analysisChartsData (data) {
+    analysisChartsData(data) {
       // widget-barchart 柱线图、widget-linechart 折线图、 widget-barlinechart 柱线图、widget-piechart 饼图、widget-hollow-piechart 空心饼图
       // widget-funnel 漏斗图  widget-gauge 仪表盘
-      const chartType = this.chartType
-      if (chartType == 'widget-barchart' || chartType == 'widget-linechart' || chartType == 'widget-barlinechart') {
-        return this.barOrLineChartFn(data)
-      } else if (chartType == 'widget-piechart' || chartType == 'widget-hollow-piechart' || chartType == 'widget-funnel') {
-        return this.piechartFn(data)
-      } else if (chartType == 'widget-gauge') {
-        return this.gaugeFn(data)
+      const chartType = this.chartType;
+      if (
+        chartType == "widget-barchart" ||
+        chartType == "widget-linechart" ||
+        chartType == "widget-barlinechart"
+      ) {
+        return this.barOrLineChartFn(data);
+      } else if (
+        chartType == "widget-piechart" ||
+        chartType == "widget-hollow-piechart" ||
+        chartType == "widget-funnel"
+      ) {
+        return this.piechartFn(data);
+      } else if (chartType == "widget-gauge") {
+        return this.gaugeFn(data);
       } else {
       }
     },
     // 柱状图、折线图、折柱图
-    barOrLineChartFn (data) {
-      const ananysicData = {}
-      const xAxisList = []
-      const series = []
+    barOrLineChartFn(data) {
+      const ananysicData = {};
+      const xAxisList = [];
+      const series = [];
       for (const key in this.chartProperties) {
-        const obj = {}
-        const seriesData = []
-        const value = this.chartProperties[key]
-        obj['type'] = value
+        const obj = {};
+        const seriesData = [];
+        const value = this.chartProperties[key];
+        obj["type"] = value;
         for (let i = 0; i < data.length; i++) {
-          if (value.startsWith('xAxis')) {
+          if (value.startsWith("xAxis")) {
             // 代表为x轴
-            xAxisList[i] = data[i][key]
+            xAxisList[i] = data[i][key];
           } else {
             // 其他的均为series展示数据
-            seriesData[i] = data[i][key]
+            seriesData[i] = data[i][key];
           }
         }
-        obj['data'] = seriesData
-        if (!obj['type'].startsWith('xAxis')) {
-          series.push(obj)
+        obj["data"] = seriesData;
+        if (!obj["type"].startsWith("xAxis")) {
+          series.push(obj);
         }
       }
-      ananysicData['xAxis'] = xAxisList
-      ananysicData['series'] = series
+      ananysicData["xAxis"] = xAxisList;
+      ananysicData["series"] = series;
       // console.log(ananysicData, '结果数据')
-      return ananysicData
+      return ananysicData;
     },
 
     // 饼图或者空心饼图或者漏斗图
-    piechartFn (data) {
-      const ananysicData = []
+    piechartFn(data) {
+      const ananysicData = [];
       for (let i = 0; i < data.length; i++) {
-        const obj = {}
+        const obj = {};
         for (const key in this.chartProperties) {
-          const value = this.chartProperties[key]
-          if (value === 'name') {
-            obj['name'] = data[i][key]
+          const value = this.chartProperties[key];
+          if (value === "name") {
+            obj["name"] = data[i][key];
           } else {
-            obj['value'] = data[i][key]
+            obj["value"] = data[i][key];
           }
         }
-        ananysicData.push(obj)
+        ananysicData.push(obj);
       }
       // console.log(ananysicData, '结果数据')
-      return ananysicData
+      return ananysicData;
     },
-    gaugeFn (data) {
-      const ananysicData = []
+    gaugeFn(data) {
+      const ananysicData = [];
       for (let i = 0; i < data.length; i++) {
-        const obj = {}
+        const obj = {};
         for (const key in this.chartProperties) {
-          const value = this.chartProperties[key]
-          if (value === 'name') {
-            obj['name'] = data[i][key]
+          const value = this.chartProperties[key];
+          if (value === "name") {
+            obj["name"] = data[i][key];
           } else {
-            obj['value'] = data[i][key]
+            obj["value"] = data[i][key];
           }
         }
-        if (!obj['unit']) {
-          obj['unit'] = '%'
+        if (!obj["unit"]) {
+          obj["unit"] = "%";
         }
-        ananysicData.push(obj)
+        ananysicData.push(obj);
       }
       // console.log(ananysicData, '结果数据')
-      return ananysicData[0]
-    },
-  },
-}
+      return ananysicData[0];
+    }
+  }
+};
 </script>
 <style lang="sass" scoped></style>
diff --git a/report-ui/src/views/report/bigscreen/designer/form/dynamicForm.vue b/report-ui/src/views/report/bigscreen/designer/form/dynamicForm.vue
index ddc80007..da137c85 100644
--- a/report-ui/src/views/report/bigscreen/designer/form/dynamicForm.vue
+++ b/report-ui/src/views/report/bigscreen/designer/form/dynamicForm.vue
@@ -104,6 +104,7 @@
             <el-button
               v-if="item.type == 'el-button'"
               type="primary"
+              size="mini"
               plain
               @click="addStaticData"
               >编辑</el-button
@@ -311,12 +312,6 @@ export default {
       this.setDefaultValue();
       this.isShowData();
     }
-    // formData: {
-    //   handler () {
-    //     this.$emit('onChanged', this.formData)
-    //   },
-    //   deep: true,
-    // },
   },
   created() {
     this.isShowData();
diff --git a/report-ui/src/views/report/bigscreen/designer/index.vue b/report-ui/src/views/report/bigscreen/designer/index.vue
index 3ca35b33..2a9d602c 100644
--- a/report-ui/src/views/report/bigscreen/designer/index.vue
+++ b/report-ui/src/views/report/bigscreen/designer/index.vue
@@ -34,6 +34,8 @@
             v-for="(item, index) in layerWidget"
             :key="index"
             class="tools-item"
+            :class="widgetIndex == index ? 'is-active' : ''"
+            @click="layerClick(index)"
           >
             <span class="tools-item-icon">
               <i class="iconfont" :class="item.icon"></i>
@@ -123,7 +125,7 @@
               :bigscreen="{ bigscreenWidth, bigscreenHeight }"
               @onActivated="setOptionsOnClickWidget"
               @contextmenu.prevent.native="rightClick($event, index)"
-              @click.prevent.native="widgetsClick(index)"
+              @mousedown.prevent.native="widgetsClick(index)"
             />
           </div>
         </vue-ruler-tool>
@@ -197,6 +199,7 @@ export default {
   },
   data() {
     return {
+      layerWidget: [],
       widgetTools: widgetTools, // 左侧工具栏的组件图标，将js变量加入到当前作用域
       widthLeftForTools: 200, // 左侧工具栏宽度
       widthLeftForToolsHideButton: 15, // 左侧工具栏折叠按钮宽度
@@ -292,13 +295,14 @@ export default {
     },
     bigscreenHeightInWorkbench() {
       return this.getPXUnderScale(this.bigscreenHeight);
-    },
-    layerWidget() {
-      const layerWidgetArr = [];
-      for (let i = 0; i < this.widgets.length; i++) {
-        layerWidgetArr.push(getToolByCode(this.widgets[i].type));
-      }
-      return layerWidgetArr;
+    }
+  },
+  watch: {
+    widgets: {
+      handler(val) {
+        this.handlerLayerWidget(val);
+      },
+      deep: true
     }
   },
   mounted() {
@@ -310,6 +314,22 @@ export default {
     this.widgets = [];
   },
   methods: {
+    handlerLayerWidget(val) {
+      const layerWidgetArr = [];
+      for (let i = 0; i < val.length; i++) {
+        console.log(getToolByCode(val[i].type));
+        const obj = {};
+        obj.icon = getToolByCode(val[i].type).icon;
+        const options = val[i].options["setup"];
+        options.forEach(el => {
+          if (el.name == "layerName") {
+            obj.label = el.value;
+          }
+        });
+        layerWidgetArr.push(obj);
+      }
+      this.layerWidget = layerWidgetArr;
+    },
     async initEchartData() {
       const reportCode = this.$route.query.reportCode;
       const { code, data } = await detailDashboard(reportCode);
@@ -512,7 +532,10 @@ export default {
       }
       return widgetJson;
     },
-
+    layerClick(index) {
+      this.widgetIndex = index;
+      this.widgetsClick(index);
+    },
     // 如果是点击大屏设计器中的底层，加载大屏底层属性
     setOptionsOnClickScreen() {
       this.screenCode = "screen";
@@ -523,6 +546,10 @@ export default {
 
     // 如果是点击某个组件，获取该组件的配置项
     setOptionsOnClickWidget(obj) {
+      if (typeof obj == "number") {
+        this.widgetOptions = this.deepClone(this.widgets[obj]["options"]);
+        return;
+      }
       if (obj.index < 0 || obj.index >= this.widgets.length) {
         return;
       }
@@ -536,7 +563,6 @@ export default {
           }
         }
       });
-      console.log(this.widgets);
     },
     widgetsClick(index) {
       const draggableArr = this.$refs.widgets;
@@ -547,9 +573,9 @@ export default {
           this.$refs.widgets[i].$refs.draggable.setActive(false);
         }
       }
+      this.setOptionsOnClickWidget(index);
     },
     handleMouseDown() {
-      console.log(1);
       const draggableArr = this.$refs.widgets;
       for (let i = 0; i < draggableArr.length; i++) {
         this.$refs.widgets[i].$refs.draggable.setActive(false);
@@ -557,15 +583,6 @@ export default {
     },
     // 将当前选中的组件，右侧属性值更新
     widgetValueChanged(key, val) {
-      /* 更新指定 this.widgets 中第 this.widgetIndex 个组件的value
-      widgets: [{
-        type: 'widget-text',
-        value: {
-          setup:{},
-          data: {},
-          position: {}
-        }
-      }]*/
       if (this.screenCode == "screen") {
         this.dashboard = this.deepClone(val);
       }
@@ -624,6 +641,10 @@ export default {
 </script>
 
 <style scoped lang="scss">
+.is-active {
+  background: #409eff !important;
+  color: #373d41 !important;
+}
 .layout {
   display: -webkit-box;
   display: -ms-flexbox;

From 8c105a30fac50817cf32e51906f6299ed14b9eea Mon Sep 17 00:00:00 2001
From: Raod <1130305001@qq.com>
Date: Tue, 29 Jun 2021 09:30:05 +0800
Subject: [PATCH 3/6] login

---
 report-ui/src/utils/request.js | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/report-ui/src/utils/request.js b/report-ui/src/utils/request.js
index 81b3eae8..d31ab113 100644
--- a/report-ui/src/utils/request.js
+++ b/report-ui/src/utils/request.js
@@ -1,6 +1,7 @@
 import axios from 'axios'
 import { Message, MessageBox } from 'element-ui'
 import store from '../store'
+import { delItem } from "@/utils/storage"
 import { getToken } from '@/utils/auth'
 // 创建axios实例
 const service = axios.create({
@@ -38,11 +39,9 @@ service.interceptors.response.use(
           type: 'warning'
         }
       ).then(() => {
-        // store.dispatch('FedLogOut').then(() => {
-        //   // location.reload() // 为了重新实例化vue-router对象 避免bug
-        //   window.location.href = "/";
-        // })
-        location.reload();
+        delItem('token')
+        sessionStorage.clear()
+        localStorage.clear()
         window.location.href = "/";
       })
     }

From 1e392b7bfd6341f5eee0ed77dca17a8217ada0a9 Mon Sep 17 00:00:00 2001
From: qianlishi <1432731663@qq.com>
Date: Tue, 29 Jun 2021 09:45:39 +0800
Subject: [PATCH 4/6] update bug

---
 report-ui/src/views/report/bigscreen/designer/index.vue       | 3 +--
 .../src/views/report/bigscreen/designer/widget/widget.vue     | 4 +---
 2 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/report-ui/src/views/report/bigscreen/designer/index.vue b/report-ui/src/views/report/bigscreen/designer/index.vue
index 2a9d602c..2f8dc327 100644
--- a/report-ui/src/views/report/bigscreen/designer/index.vue
+++ b/report-ui/src/views/report/bigscreen/designer/index.vue
@@ -317,7 +317,6 @@ export default {
     handlerLayerWidget(val) {
       const layerWidgetArr = [];
       for (let i = 0; i < val.length; i++) {
-        console.log(getToolByCode(val[i].type));
         const obj = {};
         obj.icon = getToolByCode(val[i].type).icon;
         const options = val[i].options["setup"];
@@ -554,7 +553,6 @@ export default {
         return;
       }
       this.widgetIndex = obj.index;
-      this.widgetOptions = this.deepClone(this.widgets[obj.index]["options"]);
       this.widgets[obj.index].value.position = obj;
       this.widgets[obj.index].options.position.forEach(el => {
         for (const key in obj) {
@@ -563,6 +561,7 @@ export default {
           }
         }
       });
+      this.widgetOptions = this.deepClone(this.widgets[obj.index]["options"]);
     },
     widgetsClick(index) {
       const draggableArr = this.$refs.widgets;
diff --git a/report-ui/src/views/report/bigscreen/designer/widget/widget.vue b/report-ui/src/views/report/bigscreen/designer/widget/widget.vue
index a0d37ee2..bdfd65f9 100644
--- a/report-ui/src/views/report/bigscreen/designer/widget/widget.vue
+++ b/report-ui/src/views/report/bigscreen/designer/widget/widget.vue
@@ -103,9 +103,7 @@ export default {
   },
   mounted() {},
   methods: {
-    handleFocus({ index, left, top, width, height }) {
-      // console.log(index, left, top, width, height);
-    },
+    handleFocus({ index, left, top, width, height }) {},
     handleBlur({ index, left, top, width, height }) {
       this.$emit("onActivated", { index, left, top, width, height });
       this.$refs.draggable.setActive(true);

From b43937dfaa0e3ca589a453f6be6a4d8a2d456776 Mon Sep 17 00:00:00 2001
From: qianlishi <1432731663@qq.com>
Date: Tue, 29 Jun 2021 09:53:11 +0800
Subject: [PATCH 5/6] =?UTF-8?q?update=20=E5=A4=A7=E5=B1=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 report-ui/src/views/report/bigscreen/designer/index.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/report-ui/src/views/report/bigscreen/designer/index.vue b/report-ui/src/views/report/bigscreen/designer/index.vue
index 2f8dc327..3ad9e2e6 100644
--- a/report-ui/src/views/report/bigscreen/designer/index.vue
+++ b/report-ui/src/views/report/bigscreen/designer/index.vue
@@ -545,6 +545,7 @@ export default {
 
     // 如果是点击某个组件，获取该组件的配置项
     setOptionsOnClickWidget(obj) {
+      this.screenCode = "";
       if (typeof obj == "number") {
         this.widgetOptions = this.deepClone(this.widgets[obj]["options"]);
         return;
@@ -609,7 +610,6 @@ export default {
     },
     deletelayer() {
       this.widgets.splice(this.rightClickIndex, 1);
-      // console.log(this.widgets);
     },
     setDefaultValue(options, val) {
       for (let i = 0; i < options.length; i++) {

From 21e5626fcc8dcf5d546ac0d275f8673cefc43c08 Mon Sep 17 00:00:00 2001
From: qianming <qianming@anji-plus.com>
Date: Tue, 29 Jun 2021 10:18:48 +0800
Subject: [PATCH 6/6] =?UTF-8?q?=E5=8D=97=E4=B8=81=E6=A0=BC=E5=B0=94?=
 =?UTF-8?q?=E7=8E=AB=E7=91=B0=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../designer/widget/pie/widgetPieNightingaleRoseArea.vue | 9 ++-------
 1 file changed, 2 insertions(+), 7 deletions(-)

diff --git a/report-ui/src/views/report/bigscreen/designer/widget/pie/widgetPieNightingaleRoseArea.vue b/report-ui/src/views/report/bigscreen/designer/widget/pie/widgetPieNightingaleRoseArea.vue
index dc1bf8e7..d88c1916 100644
--- a/report-ui/src/views/report/bigscreen/designer/widget/pie/widgetPieNightingaleRoseArea.vue
+++ b/report-ui/src/views/report/bigscreen/designer/widget/pie/widgetPieNightingaleRoseArea.vue
@@ -22,17 +22,14 @@ export default {
         toolbox: {
           show: true,
           feature: {
-            mark: {show: true},
-            dataView: {show: true, readOnly: false},
-            restore: {show: true},
-            saveAsImage: {show: true}
+            mark: {show: true}
           }
         },
         series: [
           {
             name: '面积模式',
             type: 'pie',
-            radius: [50, 250],
+            radius: ["10%", "50%"],
             center: ['50%', '50%'],
             roseType: 'area',
             itemStyle: {
@@ -335,8 +332,6 @@ export default {
 .echarts {
   width: 100%;
   height: 100%;
-  min-width: 200px;
-  min-height: 200px;
   overflow: hidden;
 }
 </style>