@epxing/business 0.0.0-stage → 5.3.0-beta.2

package/src/components/report/Config.vue

@@ -0,0 +1,1654 @@
+<template>
+  <div class="report-config">
+    <div class="fold-setting fr" v-show="fold" @click="fold=!fold">
+      <i class="el-icon-s-fold" ></i>
+      <span>图表配置</span>
+    </div>
+    <div class="config-panel" v-show="!fold">
+      <div class="config-header fold-setting">
+        <i class="el-icon-s-unfold" @click="fold=!fold"></i>
+        <span>图表配置</span>
+      </div>
+      <div class="config-content">
+        <el-tabs v-model="activeTab" :stretch="true">
+          <el-tab-pane label="基本设置" name="base">
+            <div class="config-container">
+              <div class="config-block" v-for="item in showReportConfigs" :key="item.key">
+                <div class="config-block__header">
+                  <p class="config-block__title">
+                    <i :class="{'el-icon-caret-bottom': true, 'fold': foldArea[item.key]}" @click="foldArea[item.key] = !foldArea[item.key]"></i>
+                    <span>{{item.label}}</span>
+                  </p>
+                  <el-switch
+                    v-if="item.config"
+                    v-model="data[item.config.key]"
+                  >
+                  </el-switch>
+                </div>
+                <div class="config-block__content" v-show="!foldArea[item.key]" v-if="item.children">
+                  <ul class="config-list">
+                    <li :class="['config-item', 'config-item__'+ config.labelAlign]" v-for="config in item.children" :key="config.key">
+                      <label class="config-item__label" for="">{{config.label}}</label>
+                      <div class="config-item__input">
+                        <!-- 开关 -->
+                        <el-switch v-if="config.type==='switch'" v-model="data[config.key]"></el-switch>
+                        <!-- 单选按钮 -->
+                        <el-radio-group v-else-if="config.type==='radio-button'" v-model="data[config.key]" size="small">
+                          <el-radio-button v-for="option in config.options" :label="option.value" :value="option.value" :key="option.key">
+                            <i v-if="option.showLabel==='icon'" :class="option.icon"></i>
+                            <span v-else>{{option.label}}</span>
+                         </el-radio-button>
+                        </el-radio-group>
+                        <!-- 下拉选项 -->
+                        <el-select v-else-if="config.type==='select'" v-model="data[config.key]" size="small">
+                          <el-option v-for="option in config.options" :label="option.label" :key="option.value" :value="option.value">
+                         </el-option>
+                        </el-select>
+                        <!-- 数字 -->
+                        <el-input-number v-else-if="config.type==='num'" size="small" v-model="data[config.key]" controls-position="right" :min="config.min || -Infinity" :max="config.max || Infinity"></el-input-number>
+                        <!-- 颜色 -->
+                        <el-color-picker v-else-if="config.type==='color'" size="small" v-model="data[config.key]" show-alpha></el-color-picker>
+                        <!-- 颜色组 -->
+                        <ul class="color-list" v-else-if="config.type==='color-list'">
+                            <li class="color-item" v-for="color in (data[config.key]||[])" :key="color" :style="{background: color}">
+                              <i class="color-delete el-icon-error" @click="deleteColor(config.key)"></i>
+                            </li>
+                            <li class="color-item color-item-plus">
+                              <i class="el-icon-plus"></i>
+                              <el-color-picker ref="addColorPicker" v-model="color" size="mini" @change="v=>addColor(config.key, v)"></el-color-picker>
+                            </li>
+                          </ul>
+                        <!-- 主题 -->
+                        <template v-else-if="config.type==='theme'">
+                          <el-radio-group size="default" v-model="themeType" >
+                            <el-radio-button label="default" value="default" @click="colorList=[]">内置</el-radio-button>
+                            <el-radio-button label="custom" value="custom" @click="colorList=[]">自定义</el-radio-button>
+                          </el-radio-group>
+                          <el-select class="color-theme" v-if="themeType==='default'" v-model="data[config.key]" size="default" placeholder="请选择">
+                            <el-option
+                              v-for="item in themeList"
+                              :key="item.value"
+                              :label="item.label"
+                              :value="item.value">
+                            </el-option>
+                          </el-select>
+                          <ul class="color-list">
+                            <li class="color-item" v-for="color in colorList" :key="color" :style="{background: color}">
+                              <i class="color-delete el-icon-error" v-show="themeType==='custom'"></i>
+                            </li>
+                            <li class="color-item color-item-plus" v-show="themeType==='custom'">
+                              <i class="el-icon-plus"></i>
+                              <el-color-picker ref="addColorPicker" v-model="themeColor" size="mini" @change="addThemeColor"></el-color-picker>
+                            </li>
+                          </ul>
+                        </template>
+                        <!-- 范围   -->
+                        <el-slider
+                          v-else-if="config.type==='slider'"
+                          size="small"
+                          v-model="data[config.key]"
+                          :max="config.max || 100"
+                          @change="v=>changeValue({[config.key]:v}, config)"
+                        >
+                        </el-slider>
+                        <!-- 范围   -->
+                        <el-slider
+                          v-else-if="config.type==='range'"
+                          size="small"
+                          v-model="data[config.key]"
+                          range
+                          :min="config.min || 0"
+                          :max="config.max || 100"
+                          @change="v=>changeValue({[config.key]:v})"
+                        >
+                        </el-slider>
+                        <!-- 文本 -->
+                        <el-input
+                          v-else
+                          size="small"
+                          v-model="data[config.key]"
+                          :placeholder="config.placeHolder || ''"
+                          clearable>
+                        </el-input>
+                      </div>
+                    </li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+          </el-tab-pane>
+          <el-tab-pane label="高级设置" name="advance">
+          </el-tab-pane>
+        </el-tabs>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import component from '@epxing/core/src/mixins/component'
+import { evalWith } from '@epxing/utils/src/eval-with'
+let timer = null
+export default {
+  name: 'epx-report-config',
+  mixins: [component],
+  props: {
+    report: {
+      type: Object,
+      default () {
+        return {}
+      }
+    }
+  },
+  data () {
+    return {
+      fold: true,
+      activeTab: 'base',
+      reportConfigs: [],
+      showReportConfigs: [],
+      oldData: {},
+      data: {},
+      foldArea: {},
+      color: '',
+      themeType: 'default',
+      themeColor: '',
+      themeList: [
+        {
+          label: '蓝绿渐变',
+          value: '#0083DE,#00A6F1,#00C0F3,#6DD4EF,#A7DBFF,#46D4C7,#00BCAA,#26A69A,#1291B0,#0063C5'
+        },
+        {
+          label: '明亮',
+          value: '#1976D2,#14ADF2,#0ACDE6,#06A697,#F7C353,#FA8356,#F35754,#F36897,#C763D9,#4C60CE'
+        },
+        {
+          label: '经典',
+          value: '#C1232B,#27727B,#FCCE10,#E87C25,#B5C334,#FE8463,#9BCA63,#FAD860,#F3A43B,#60C0DD'
+        }
+      ]
+    }
+  },
+  computed: {
+    colorList: {
+      get () {
+        const { color } = this.data
+        if (color) return color.split(',')
+        return []
+      },
+      set (v) {
+        this.data.color = v.join(',')
+      }
+    }
+  },
+  watch: {
+    data: {
+      handler (v) {
+        this.getShowReportConfigs()
+        if (this.watchData) {
+          // 监听变化值
+          const params = {}
+          let changeFlag = false
+          for (const key in this.data) {
+            if (key !== 'series-pie.radius' && this.data[key] !== this.oldData[key]) {
+              let value = this.data[key]
+              const config = this.findReportConfig(key)
+              if (config && config.type === 'slider' && config.percent) {
+                if (typeof value === 'number' || !value.includes('%')) {
+                  value = value + '%'
+                }
+              }
+              params[key] = value
+              changeFlag = true
+            }
+          }
+          if (changeFlag) {
+            if (timer) {
+              clearTimeout(timer)
+              timer = null
+            }
+            timer = setTimeout(() => {
+              this.changeValue(params)
+              clearTimeout(timer)
+              timer = null
+            }, 1000)
+          }
+        }
+        if (v.color) {
+          if (!this.watchColor) {
+            this.themeType = 'default'
+            const item = this.themeList.find(item => item.value === v.color)
+            this.watchColor = true
+            if (!item) {
+              this.themeType = 'custom'
+            }
+          }
+        }
+        this.oldData = { ...this.data }
+      },
+      deep: true
+    },
+    'report.ID': {
+      handler (v) {
+        if (v) this.getConfigData()
+      },
+      immediate: true
+    },
+    'report.CHART_TYPE' (v) {
+      if (v) this.getShowReportConfigs()
+    }
+
+  },
+  methods: {
+    getReportConfig () {
+      this.reportConfigs = [
+        {
+          key: 'title',
+          label: '标题',
+          type: 'area',
+          showHiddenFlag: true,
+          config: {
+            key: 'title.show',
+            type: 'switch',
+            defaultValue: true
+          },
+          children: [
+            {
+              key: 'title.text',
+              label: '标题名称',
+              type: 'text',
+              placeHolder: '默认为报表名称'
+            },
+            {
+              key: 'title.textStyle.fontSize',
+              label: '字体大小',
+              type: 'num',
+              defaultValue: 18
+            }
+          ]
+        },
+
+        {
+          key: 'xAxis',
+          label: '分类轴',
+          type: 'area',
+          showFlag: {
+            'report.CHART_TYPE': ['column', 'horiColumn', 'line', 'columnAndLine']
+          },
+          children: [
+            {
+              key: 'xAxis.position',
+              label: '位置',
+              type: 'radio-button',
+              options: [
+                {
+                  label: '上方',
+                  icon: 'epx-icon-chuizhi-shang',
+                  value: 'top',
+                  showLabel: 'icon'
+                },
+                {
+                  label: '下方',
+                  icon: 'epx-icon-chuizhi-xia',
+                  value: 'bottom',
+                  showLabel: 'icon'
+                }
+              ],
+              defaultValue: 'bottom'
+            },
+            {
+              key: 'xAxis.axisLabel.fontSize',
+              label: '标签字体大小',
+              type: 'num',
+              defaultValue: 12
+            },
+            {
+              key: 'xAxis.axisLabel.color',
+              label: '标签文字颜色',
+              type: 'color'
+            },
+            {
+              key: 'xAxis.axisLabel.fontWeight',
+              label: '标签文字粗细',
+              type: 'radio-button',
+              options: [
+                {
+                  label: '正常',
+                  value: 'normal'
+                },
+                {
+                  label: '加粗',
+                  value: 'bold'
+                }
+              ],
+              defaultValue: 'normal'
+            },
+            {
+              key: 'xAxis.axisLabel.rotate',
+              label: '标签旋转角度',
+              type: 'num',
+              defaultValue: 0
+            },
+            {
+              key: 'xAxis.axisLabel.interval',
+              label: '标签显示间隔',
+              type: 'num'
+            },
+            {
+              key: 'xAxis.type',
+              label: '坐标轴类型',
+              type: 'radio-button',
+              options: [
+                {
+                  label: '横轴',
+                  value: 'category'
+                },
+                {
+                  label: '纵轴',
+                  value: 'value'
+                }
+              ],
+              defaultValue: 'category'
+            },
+            {
+              key: 'xAxis.boundaryGap',
+              label: '坐标轴留白',
+              type: 'switch',
+              defaultValue: false
+            }
+          ]
+        },
+        {
+          key: 'yAxis',
+          label: '值轴',
+          type: 'area',
+          showFlag: {
+            'report.CHART_TYPE': ['column', 'horiColumn', 'line', 'columnAndLine']
+          },
+          children: [
+            {
+              key: 'yAxis.position',
+              label: '位置',
+              type: 'radio-button',
+              options: [
+                {
+                  label: '左边',
+                  value: 'left'
+                },
+                {
+                  label: '右边',
+                  value: 'right'
+                }
+              ],
+              defaultValue: 'right'
+            },
+            {
+              key: 'yAxis.splitNumber',
+              label: '坐标轴分割段数',
+              type: 'num'
+            },
+            {
+              key: 'yAxis.type',
+              label: '坐标轴类型',
+              type: 'radio-button',
+              options: [
+                {
+                  label: '数值轴',
+                  value: 'value'
+                },
+                {
+                  label: '对数轴',
+                  value: 'log'
+                }
+              ],
+              defaultValue: 'value'
+            },
+            {
+              key: 'yAxis.axisLabel.fontSize',
+              label: '标签字体大小',
+              type: 'num',
+              defaultValue: 12
+            },
+            {
+              key: 'yAxis.axisLabel.color',
+              label: '标签文字颜色',
+              type: 'color'
+            },
+            {
+              key: 'yAxis.axisLabel.fontWeight',
+              label: '标签文字粗细',
+              type: 'radio-button',
+              options: [
+                {
+                  label: '正常',
+                  value: 'normal'
+                },
+                {
+                  label: '加粗',
+                  value: 'bold'
+                }
+              ],
+              defaultValue: 'normal'
+            },
+            {
+              key: 'yAxis.axisLabel.rotate',
+              label: '标签旋转角度',
+              type: 'num',
+              defaultValue: 0
+            },
+            {
+              key: 'yAxis.axisLabel.interval',
+              label: '标签显示间隔',
+              type: 'num'
+            },
+            {
+              key: 'yAxis.boundaryGap',
+              label: '坐标轴留白',
+              type: 'switch',
+              defaultValue: false
+            }
+          ]
+        },
+        {
+          key: 'legend',
+          label: '图例',
+          type: 'area',
+          showHiddenFlag: true,
+          config: {
+            key: 'legend.show',
+            type: 'switch',
+            defaultValue: true
+          },
+          children: [
+            {
+              key: 'legend._orient',
+              label: '方位',
+              type: 'radio-button',
+              options: [
+                {
+                  label: '上方',
+                  icon: 'epx-icon-shang',
+                  value: 'top',
+                  showLabel: 'icon'
+                },
+                {
+                  label: '右方',
+                  icon: 'epx-icon-you',
+                  value: 'right',
+                  showLabel: 'icon'
+                },
+                {
+                  label: '下方',
+                  icon: 'epx-icon-xia',
+                  value: 'bottom',
+                  showLabel: 'icon'
+                },
+                {
+                  label: '左方',
+                  icon: 'epx-icon-zuo',
+                  value: 'left',
+                  showLabel: 'icon'
+                }
+              ],
+              defaultValue: 'bottom'
+            },
+            {
+              key: 'legend._orient.horizontal',
+              label: '水平位置',
+              type: 'radio-button',
+              showFlag: {
+                'config.legend._orient': ['top', 'bottom']
+              },
+              options: [
+                {
+                  label: '左方',
+                  icon: 'epx-icon-shuiping-zuo',
+                  value: 'left',
+                  showLabel: 'icon'
+                },
+                {
+                  label: '中间',
+                  icon: 'epx-icon-shuiping-zhong',
+                  value: 'center',
+                  showLabel: 'icon'
+                },
+                {
+                  label: '右方',
+                  icon: 'epx-icon-shuiping-you',
+                  value: 'right',
+                  showLabel: 'icon'
+                }
+              ],
+              defaultValue: 'center'
+            },
+            {
+              key: 'legend._orient.vertical',
+              label: '垂直位置',
+              type: 'radio-button',
+              showFlag: {
+                'config.legend._orient': ['left', 'right']
+              },
+              options: [
+                {
+                  label: '上方',
+                  icon: 'epx-icon-chuizhi-shang',
+                  value: 'top',
+                  showLabel: 'icon'
+                },
+                {
+                  label: '中间',
+                  icon: 'epx-icon-chuizhi-zhong',
+                  value: 'center',
+                  showLabel: 'icon'
+                },
+                {
+                  label: '下方',
+                  icon: 'epx-icon-chuizhi-xia',
+                  value: 'bottom',
+                  showLabel: 'icon'
+                }
+              ],
+              defaultValue: 'center'
+            },
+            {
+              key: 'legend.textStyle.fontSize',
+              label: '字体大小',
+              type: 'num',
+              defaultValue: 12
+            }
+          ]
+        },
+        {
+          key: 'series-pie',
+          label: '饼图',
+          showFlag: {
+            'report.CHART_TYPE': ['pie', 'circularPie']
+          },
+          children: [
+            {
+              key: 'series-pie.roseType',
+              label: '对比方式',
+              type: 'radio-button',
+              options: [{
+                label: '扇形角度',
+                value: ''
+              }, {
+                label: '扇形面积',
+                value: 'area'
+              }],
+              defaultValue: ''
+            },
+            {
+              key: 'series-pie.avoidLabelOverlap',
+              label: '防止标签重叠',
+              type: 'switch',
+              labelAlign: 'left',
+              defaultValue: true
+            },
+            {
+              key: 'series-pie.stillShowZeroSum',
+              label: '数据为0是否显示扇区',
+              type: 'switch',
+              labelAlign: 'left',
+              defaultValue: true
+            },
+            {
+              key: 'series-pie.label.show',
+              label: '是否显示标签',
+              type: 'switch',
+              labelAlign: 'left',
+              defaultValue: false
+            },
+            {
+              key: 'series-pie.label.position',
+              label: '标签位置',
+              type: 'radio-button',
+              options: [{
+                label: '外侧',
+                value: 'outside'
+              }, {
+                label: '内部',
+                value: 'inside'
+              }, {
+                label: '中间',
+                value: 'center'
+              }],
+              defaultValue: 'outside'
+            },
+            {
+              key: 'series-pie.label.overflow',
+              label: '超出换行',
+              type: 'radio-button',
+              options: [{
+                label: '超出隐藏',
+                value: 'truncate'
+              }, {
+                label: '换行',
+                value: 'breakAll'
+              }],
+              defaultValue: 'truncate'
+            },
+            {
+              key: 'series-pie.label.formatter',
+              label: '标签格式',
+              type: 'radio-button',
+              options: [{
+                label: '名称',
+                value: '{b}'
+              }, {
+                label: '名称数值',
+                value: '{b} {c}'
+              }, {
+                label: '名称（占比）',
+                value: '{b}：（{d}%）'
+              }],
+              defaultValue: '{b}'
+            },
+            {
+              key: 'series-pie.radius',
+              label: '内径和外径',
+              type: 'range',
+              defaultValue: [0, 75]
+            },
+            {
+              key: 'series-pie.total',
+              label: '是否显示合计',
+              type: 'switch',
+              defaultValue: false
+            },
+            {
+              key: 'series-pie.totalText',
+              label: '合计文字',
+              defaultValue: '合计'
+            }
+          ]
+        },
+        {
+          key: 'series-funnel',
+          label: '漏斗图',
+          showFlag: {
+            'report.CHART_TYPE': ['funnel']
+          },
+          children: [
+            {
+              key: 'series-funnel.total',
+              label: '是否显示合计',
+              type: 'switch',
+              defaultValue: false
+            },
+            {
+              key: 'series-funnel.totalText',
+              label: '合计文字',
+              defaultValue: '合计'
+            }
+          ]
+        },
+        {
+          key: 'series-bar',
+          label: '柱状图',
+          showFlag: {
+            'report.CHART_TYPE': ['column', 'horiColumn']
+          },
+          children: [
+            {
+              key: 'series-bar.barType',
+              label: '展现方式',
+              type: 'radio-button',
+              options: [
+                {
+                  label: '多系列',
+                  value: null
+                },
+                {
+                  label: '堆叠',
+                  value: 'stack'
+                },
+                {
+                  label: '分区',
+                  value: 'area'
+                },
+                {
+                  label: '左右对比',
+                  value: 'comparison'
+                },
+                {
+                  label: '瀑布式',
+                  value: 'waterfull'
+                }
+              ]
+            },
+            {
+              key: 'series-bar.totalFlag',
+              label: '显示合计',
+              type: 'switch',
+              defaultValue: false
+            },
+            {
+              key: 'series-bar.barCategoryGap',
+              label: '柱间距离',
+              type: 'slider',
+              percent: true
+            },
+            {
+              key: 'series-bar.barGap',
+              label: '系列柱间距离',
+              type: 'slider',
+              percent: true
+            },
+
+            {
+              key: 'series-bar.colorBy',
+              label: '颜色策略',
+              type: 'radio-button',
+              options: [
+                {
+                  label: '单一色',
+                  value: 'series'
+                },
+                {
+                  label: '不同色',
+                  value: 'data'
+                }
+              ],
+              defaultValue: 'series'
+            },
+            {
+              key: 'series-bar.stack',
+              label: '数据堆叠',
+              type: 'switch',
+              defaultValue: false
+            },
+            {
+              key: 'series-bar.label.show',
+              label: '是否显示标签',
+              type: 'switch',
+              defaultValue: false
+            },
+            {
+              key: 'series-bar.label.color',
+              label: '标签颜色',
+              type: 'color',
+              defaultValue: ''
+            },
+            {
+              key: 'series-bar.label.position',
+              label: '标签位置',
+              type: 'radio-button',
+              options: [{
+                label: '上方',
+                value: 'top'
+              },
+              {
+                label: '里面',
+                value: 'inside'
+              }],
+              defaultValue: 'inside'
+            }
+          ]
+        },
+        {
+          key: 'series-line',
+          label: '线状图',
+          showFlag: {
+            'report.CHART_TYPE': ['line']
+          },
+          children: [
+            {
+              key: 'series-line.lineType',
+              label: '展现方式',
+              type: 'radio-button',
+              options: [
+                {
+                  label: '多系列',
+                  value: null
+                },
+                {
+                  label: '分区',
+                  value: 'area'
+                }
+              ]
+            },
+            {
+              key: 'series-line.totalFlag',
+              label: '显示合计',
+              type: 'switch',
+              defaultValue: false
+            },
+            {
+              key: 'series-line.label.show',
+              label: '是否显示标签',
+              type: 'switch',
+              labelAlign: 'left',
+              defaultValue: false
+            },
+            {
+              key: 'series-line.label.position',
+              label: '标签位置',
+              type: 'radio-button',
+              options: [{
+                label: '上方',
+                value: 'top'
+              },
+              {
+                label: '下方',
+                value: 'bottom'
+              }, {
+                label: '左侧',
+                value: 'left'
+              },
+              {
+                label: '右侧',
+                value: 'right'
+              }, {
+                label: '中间',
+                value: 'inside '
+              }],
+              defaultValue: 'top'
+            },
+            {
+              key: 'series-line.showArea',
+              label: '区域填充',
+              type: 'switch',
+              defaultValue: false
+            },
+            {
+              key: 'series-line.smooth',
+              label: '平滑曲线',
+              type: 'switch',
+              defaultValue: false
+            }
+          ]
+        }, {
+          key: 'series-wordcloud',
+          label: '词云',
+          showFlag: {
+            'report.CHART_TYPE': ['wordcloud']
+          },
+          children: [
+            {
+              key: 'series-wordcloud.shape',
+              label: '形状',
+              type: 'radio-button',
+              options: [
+                {
+                  label: '圆形',
+                  value: null
+                },
+                {
+                  label: '心形',
+                  value: 'cardioid'
+                },
+                {
+                  label: '菱形',
+                  value: 'diamond'
+                },
+                {
+                  label: '三角形',
+                  value: 'triangle'
+                },
+                {
+                  label: '星形',
+                  value: 'star'
+                },
+                {
+                  label: '五边形',
+                  value: 'pentagon'
+                }
+              ]
+            },
+            {
+              key: 'series-wordcloud.sizeRange',
+              label: '文字字号范围',
+              type: 'range',
+              defaultValue: [12, 60]
+            },
+            {
+              key: 'series-wordcloud.rotationRange',
+              label: '文字旋转范围',
+              type: 'range',
+              min: -180,
+              max: 180,
+              defaultValue: [-90, 90]
+            },
+            {
+              key: 'series-wordcloud.textStyle.fontFamily',
+              label: '字体',
+              type: 'select',
+              options: [
+                { label: 'Arial, Helvetica, 微软雅黑', value: 'arial, helvetica, microsoft yahei' },
+                { label: 'Arial, Helvetica, 黑体', value: 'arial, helvetica, simhei' },
+                { label: 'Comic Sans MS, 微软雅黑', value: 'comic sans ms, microsoft yahei' },
+                { label: 'Comic Sans MS, 黑体', value: 'comic sans ms, simhei' },
+                { label: 'Impact, 微软雅黑', value: 'impact, microsoft yahei' },
+                { label: 'Impact, 黑体', value: 'impact, simhei' },
+                { label: 'Lucida Sans Unicode, 微软雅黑', value: 'lucida sans unicode, microsoft yahei' },
+                { label: 'Lucida Sans Unicode, 黑体', value: 'lucida sans unicode, simhei' },
+                { label: 'Trebuchet MS, 微软雅黑', value: 'trebuchet ms, microsoft yahei' },
+                { label: 'Trebuchet MS, 黑体', value: 'trebuchet ms, simhei' },
+                { label: 'Verdana, 微软雅黑', value: 'verdana, microsoft yahei' },
+                { label: 'Verdana, 黑体', value: 'verdana, simhei' },
+                { label: 'Georgia, 微软雅黑', value: 'georgia, microsoft yahei' },
+                { label: 'Georgia, 黑体', value: 'georgia, simhei' },
+                { label: 'Palatino Linotype, 微软雅黑', value: 'palatino linotype, microsoft yahei' },
+                { label: 'Palatino Linotype, 黑体', value: 'palatino linotype, simhei' },
+                { label: 'Times New Roman, 微软雅黑', value: 'times new roman, microsoft yahei' },
+                { label: 'Times New Roman, 黑体', value: 'times new roman, simhei' },
+                { label: 'Courier New, 微软雅黑', value: 'courier new, microsoft yahei' },
+                { label: 'Courier New, 黑体', value: 'courier new, simhei' },
+                { label: 'Lucida Console, 微软雅黑', value: 'lucida console, microsoft yahei' },
+                { label: 'Lucida Console, 黑体', value: 'lucida console, simhei' }
+              ]
+            }
+          ]
+        },
+        {
+          key: 'series-bar',
+          label: '柱状图',
+          showFlag: {
+            'report.CHART_TYPE': ['columnAndLine']
+          },
+          children: [
+            {
+              key: 'series-bar.barType',
+              label: '展现方式',
+              type: 'radio-button',
+              options: [
+                {
+                  label: '多系列',
+                  value: null
+                },
+                {
+                  label: '堆叠',
+                  value: 'stack'
+                }
+              ]
+            },
+            {
+              key: 'series-bar.totalFlag',
+              label: '显示合计',
+              type: 'switch',
+              defaultValue: false
+            },
+            {
+              key: 'series-bar.label.show',
+              label: '是否显示标签',
+              type: 'switch',
+              defaultValue: false
+            },
+            {
+              key: 'series-bar.label.color',
+              label: '标签颜色',
+              type: 'color',
+              defaultValue: ''
+            },
+            {
+              key: 'series-bar.label.position',
+              label: '标签位置',
+              type: 'radio-button',
+              options: [{
+                label: '上方',
+                value: 'top'
+              },
+              {
+                label: '里面',
+                value: 'inside'
+              }],
+              defaultValue: 'inside'
+            },
+            {
+              key: 'series-bar.barCategoryGap',
+              label: '柱间距离',
+              type: 'slider',
+              percent: true
+            },
+            {
+              key: 'series-bar.barGap',
+              label: '系列柱间距离',
+              type: 'slider',
+              percent: true
+            }
+          ]
+        },
+        {
+          key: 'series-line',
+          label: '线状图',
+          showFlag: {
+            'report.CHART_TYPE': ['columnAndLine']
+          },
+          children: [
+            {
+              key: 'series-line.label.show',
+              label: '是否显示标签',
+              type: 'switch',
+              labelAlign: 'left',
+              defaultValue: false
+            },
+            {
+              key: 'series-line.label.position',
+              label: '标签位置',
+              type: 'radio-button',
+              options: [{
+                label: '上方',
+                value: 'top'
+              },
+              {
+                label: '下方',
+                value: 'bottom'
+              }, {
+                label: '左侧',
+                value: 'left'
+              },
+              {
+                label: '右侧',
+                value: 'right'
+              }, {
+                label: '中间',
+                value: 'inside '
+              }],
+              defaultValue: 'top'
+            },
+            {
+              key: 'series-line.label.color',
+              label: '标签颜色',
+              type: 'color',
+              defaultValue: ''
+            },
+            {
+              key: 'series-line.smooth',
+              label: '平滑曲线',
+              type: 'switch',
+              defaultValue: false
+            }
+          ]
+        },
+        {
+          key: 'radar',
+          label: '雷达图',
+          showFlag: {
+            'report.CHART_TYPE': ['radar']
+          },
+          children: [
+            {
+              key: 'radar.shape',
+              label: '形状',
+              type: 'radio-button',
+              options: [
+                {
+                  label: '多边形',
+                  value: null
+                },
+                {
+                  label: '圆形',
+                  value: 'circle'
+                }
+              ],
+              defaultValue: null
+            },
+            {
+              key: 'series-radar.label.show',
+              label: '数据标签',
+              type: 'switch',
+              defaultValue: false
+            },
+            {
+              key: 'radar.splitArea.areaStyle.color',
+              label: '分隔区域背景色',
+              type: 'color-list'
+            }
+          ]
+        },
+        {
+          key: 'scatter',
+          label: '散点图',
+          showFlag: {
+            'report.CHART_TYPE': ['scatter']
+          },
+          children: [
+            {
+              key: 'scatterType',
+              label: '散点图类型',
+
+              type: 'radio-button',
+              options: [
+                {
+                  label: '普通',
+                  value: null
+                },
+                {
+                  label: '线性',
+                  value: 'linear'
+                },
+                {
+                  label: '指数',
+                  value: 'exponential'
+                }
+              ]
+            }
+          ]
+        },
+        {
+          key: 'series.map',
+          label: '地图',
+          showFlag: {
+            'report.CHART_TYPE': ['map']
+          },
+          children: [
+            {
+              key: 'series-map.zoom',
+              label: '放大倍数',
+              type: 'num',
+              min: 0,
+              max: 3,
+              defaultValue: 1
+            },
+            {
+              key: 'series-map.top',
+              label: '上侧的距离',
+              type: 'num',
+              defaultValue: null
+            },
+            {
+              key: 'series-map.right',
+              label: '右侧的距离',
+              type: 'num',
+              defaultValue: null
+            },
+            {
+              key: 'series-map.bottom',
+              label: '下侧的距离',
+              type: 'num',
+              defaultValue: null
+            },
+            {
+              key: 'series-map.left',
+              label: '左侧的距离',
+              type: 'num',
+              defaultValue: null
+            },
+            {
+              key: 'series-map.label.show',
+              label: '是否显示标签',
+              type: 'switch',
+              labelAlign: 'left',
+              defaultValue: true
+            }
+          ]
+        },
+        {
+          key: 'visualMap',
+          label: '视觉映射',
+          type: 'area',
+          showFlag: {
+            'report.CHART_TYPE': ['map']
+          },
+          children: [
+            {
+              key: 'visualMap.show',
+              label: '显示',
+              type: 'switch',
+              defaultValue: true
+            }
+          ]
+        },
+        {
+          key: 'dataZoom',
+          label: '滚动缩放',
+          type: 'area',
+          showFlag: {
+            'report.CHART_TYPE': ['column', 'horiColumn']
+          },
+          config: {
+            key: 'dataZoom.show',
+            type: 'switch',
+            defaultValue: false
+          },
+          children: [
+            {
+              key: 'dataZoom.endValue',
+              label: '显示数量',
+              type: 'num',
+              defaultValue: 5
+            }
+          ]
+        },
+        {
+          key: 'grid',
+          label: '网格',
+          type: 'area',
+          showFlag: {
+            'report.CHART_TYPE': ['column', 'horiColumn', 'line', 'columnAndLine', 'scatter']
+          },
+          config: {
+            key: 'grid.show',
+            type: 'switch',
+            defaultValue: false
+          },
+          children: [
+            {
+              key: 'grid.top',
+              label: '容器上侧距离',
+              type: 'num'
+            },
+            {
+              key: 'grid.right',
+              label: '容器右侧距离',
+              type: 'num'
+            },
+
+            {
+              key: 'grid.bottom',
+              label: '容器下侧距离',
+              type: 'num'
+            },
+            {
+              key: 'grid.left',
+              label: '容器左侧距离',
+              type: 'num'
+            }
+          ]
+        },
+        {
+          key: 'tooltip',
+          label: '提示框',
+          children: [
+            {
+              key: 'tooltip.axisPointer.type',
+              label: '指示器类型',
+              type: 'radio-button',
+              options: [
+                {
+                  label: '直线指示器',
+                  value: 'line'
+                },
+                {
+                  label: '阴影指示器',
+                  value: 'shadow'
+                }, {
+                  label: '无指示器',
+                  value: 'none'
+                },
+                {
+                  label: '十字准星指示器',
+                  value: 'cross'
+                }
+              ]
+            },
+            {
+              key: 'tooltip.order',
+              label: '提示框浮层排列',
+              type: 'radio-button',
+              options: [
+                {
+                  label: '按系列升序',
+                  value: 'seriesAsc'
+                },
+                {
+                  label: '按系列降序',
+                  value: 'seriesDesc'
+                }
+              ],
+              defaultValue: 'seriesAsc'
+            }
+          ]
+        },
+        {
+          key: 'toolbox',
+          label: '工具栏',
+          config: {
+            key: 'toolbox.show',
+            type: 'switch',
+            defaultValue: true
+          }
+        },
+        {
+          key: 'series-bar.itemStyle',
+          showFlag: {
+            'report.CHART_TYPE': ['column']
+          },
+          label: '图形样式',
+          children: [
+            {
+              key: 'series-bar.itemStyle.borderWidth',
+              label: '边框宽度',
+              type: 'num',
+              defaultValue: 0
+            },
+            {
+              key: 'series-bar.itemStyle.borderColor',
+              label: '边框颜色',
+              type: 'color',
+              defaultValue: '#000'
+            },
+            {
+              key: 'series-bar.itemStyle.borderType',
+              label: '边框类型',
+              type: 'radio-button',
+              options: [
+                {
+                  label: '实线',
+                  value: 'solid'
+                },
+                {
+                  label: '虚线',
+                  value: 'dashed'
+                },
+                {
+                  label: '点状线',
+                  value: 'dotted'
+                }
+              ],
+              defaultValue: 'solid'
+            }
+          ]
+        },
+        {
+          key: 'series-pie.itemStyle',
+          showFlag: {
+            'report.CHART_TYPE': ['pie']
+          },
+          label: '图形样式',
+          children: [
+            {
+              key: 'series-pie.itemStyle.borderWidth',
+              label: '边框宽度',
+              type: 'num',
+              defaultValue: 0
+            },
+            {
+              key: 'series-pie.itemStyle.borderColor',
+              label: '边框颜色',
+              type: 'color',
+              defaultValue: '#000'
+            },
+            {
+              key: 'series-pie.itemStyle.borderType',
+              label: '边框类型',
+              type: 'radio-button',
+              options: [
+                {
+                  label: '实线',
+                  value: 'solid'
+                },
+                {
+                  label: '虚线',
+                  value: 'dashed'
+                },
+                {
+                  label: '点状线',
+                  value: 'dotted'
+                }
+              ],
+              defaultValue: 'solid'
+            }
+          ]
+        },
+        {
+          key: 'theme',
+          label: '配色设置',
+          children: [
+            {
+              key: 'color',
+              label: '颜色主题',
+              type: 'theme'
+            }
+
+          ]
+        }
+      ]
+      this.initData()
+    },
+    initData () {
+      this.reportConfigs.forEach(item => {
+        if (item.config) {
+          this.data[item.config.key] = item.config.defaultValue !== undefined ? item.config.defaultValue : ''
+        }
+        if (item.children) {
+          item.children.forEach(child => {
+            this.data[child.key] = child.defaultValue !== undefined ? child.defaultValue : ''
+          })
+        }
+      })
+    },
+    getShowReportConfigs () {
+      const config = this.data
+      const report = this.report
+      const getShowConfigs = (arr) => {
+        return arr.filter(item => {
+          if (item.showFlag) {
+            for (const key in item.showFlag) {
+              let value = ''
+              if (key.includes('config.')) {
+                value = config[key.replace('config.', '')]
+              } else {
+                value = evalWith(key, { report, config }, this)
+              }
+              const condition = item.showFlag[key]
+              if (!condition.includes(value)) return false
+            }
+          }
+          if (item.children) item.children = getShowConfigs(item.children)
+          return true
+        })
+      }
+      this.showReportConfigs = getShowConfigs(JSON.parse(JSON.stringify(this.reportConfigs)))
+    },
+    findReportConfig (key, arr = this.reportConfigs) {
+      if (arr && arr.length > 0) {
+        for (const item of arr) {
+          if (item.key === key) {
+            return item
+          } else if (item.children) {
+            const child = this.findReportConfig(key, item.children)
+            if (child) return child
+          }
+        }
+      }
+    },
+    getConfigData () {
+      this.configIdMap = {}
+      this.$http.list({
+        entityId: 'FM_REPORT_PARAM',
+        'scope.REPORT': this.report.ID
+      })
+        .then(data => {
+          data.entitys.forEach(item => {
+            // eslint-disable-next-line no-eval
+            let value = item.VALUE === 'true' || item.VALUE === 'false' ? eval(item.VALUE) : item.VALUE
+            this.configIdMap[item.NAME] = item.ID
+            if (/^\[.*\]$/.test(value) || /^{.*}$/.test(value)) {
+              value = JSON.parse(value)
+            }
+            // 获取配置
+            const config = this.findReportConfig(item.NAME)
+            if (config && config.type === 'slider' && config.percent) {
+              if (value && value.includes('%')) {
+                value = Number(value.replace('%', ''))
+              }
+            }
+            this.data[item.NAME] = value
+          })
+          this.$nextTick(() => {
+            this.watchData = true
+          })
+        })
+    },
+    addColor (key, color) {
+      const colorList = this.data[key] || []
+      this.data[key] = [...colorList, color]
+    },
+    deleteColor (key) {
+      const colorList = [...this.data[key]]
+      colorList.pop()
+      this.data[key] = colorList
+    },
+    addThemeColor (color) {
+      this.colorList = [...this.colorList, color]
+    },
+    changeValue (params, config) {
+      for (const key in params) {
+        let value = params[key]
+        if (value && typeof value === 'object') {
+          value = JSON.stringify(value)
+        }
+        if (config && config.type === 'slider' && config.percent) {
+          if (typeof value === 'number' || !value.includes('%')) {
+            value = value + '%'
+          }
+        }
+        this.$http.save({
+          action: 'saveReportParam',
+          entityId: 'FM_REPORT_PARAM',
+          'bean.CLIENT': this.CLIENT,
+          'bean.SYSTEM': this.SYSTEM,
+          'bean.ID': this.configIdMap[key],
+          'bean.REPORT': this.report.ID,
+          'bean.NAME': key,
+          'bean.VALUE': value
+        })
+          .then((data) => {
+            this.configIdMap[key] = data
+            this.$emit('change', this.data)
+          })
+          .catch(err => {
+            this.$message.error(err.message)
+          })
+      }
+    }
+  },
+  created () {
+    this.getReportConfig()
+  }
+
+}
+</script>
+
+<style lang="scss" scoped>
+.report-config {
+  overflow: hidden;
+  background: var(--epx-bg-card);
+  height: 40px;
+}
+.fold-setting {
+  background: #EBECF0;
+  height: 40px;
+  line-height: 40px;
+  color: var(--epx-text);
+  padding: 0 10px;
+  cursor: pointer;
+  >i {
+    color: var(--epx-text-secondary);
+    margin-right: 8px;
+    font-size: var(--epx-font-size-l);
+  }
+}
+.config-panel {
+  width: 260px;
+  background: var(--epx-bg-card);
+  height: 100%;
+  position: absolute;
+  right: 0;
+  z-index: 10;
+  border-left: 1px solid var(--epx-border);
+  overflow: auto;
+}
+.config-container {
+  padding: 0 12px;
+}
+.config-block {
+  padding: 10px 0;
+  border-bottom: 1px dashed var(--epx-border);
+}
+.config-block__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.config-block__title {
+  color: var(--epx-text);
+  font-size: var(--epx-font-size-l);
+  i {
+    margin-right: 8px;
+    cursor: pointer;
+    transition: all .3s;
+    &.fold {
+      transform: rotate(-90deg);
+    }
+  }
+}
+.config-item {
+  margin: 16px 0;
+}
+.config-item__left {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.config-item__label {
+  color: var(--epx-text);
+}
+.config-item__input {
+  margin-top: 6px;
+
+    :deep(.el-input-number--small) {
+      width: 100%;
+    }
+    :deep(.el-radio-button__inner) {
+      i {
+        font-size: var(--epx-font-size-base);
+      }
+    }
+
+}
+.color-theme {
+  margin-top: 10px;
+}
+.color-list {
+  display: flex;
+  flex-wrap: wrap;
+}
+.color-item {
+  width: 20px;
+  height: 20px;
+  margin-top: 10px;
+  margin-right: 10px;
+  position: relative;
+  &:hover {
+    .color-delete{
+      display: inline;
+    }
+  }
+}
+.color-delete {
+  width: 12px;
+  height: 12px;
+  line-height: 1;
+  background: var(--epx-bg-card);
+  border-radius: 50%;
+  @include font_color_primary;
+  font-size: var(--epx-font-size-s);
+  position: absolute;
+  right: -6px;
+  top: -6px;
+  z-index: 1;
+  cursor: pointer;
+  display: none
+}
+
+.color-item-plus {
+  @include bg_color_primary(.2);
+  text-align: center;
+  line-height: 20px;
+  cursor: pointer;
+  @include font_color_primary;
+  font-size: var(--epx-font-size-base);
+
+    :deep(.el-color-picker) {
+      position: absolute;
+      top: 0;
+      left:0;
+      width: 100%;
+      height: 100%;
+      opacity: 0;
+    }
+
+}
+</style>