epx-frame 3.5.0-shpgy.1

package/src/frame/components/report/Config.vue

@@ -0,0 +1,709 @@
+<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="$set(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="mini">
+                          <el-radio-button v-for="option in config.options" :label="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-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-slider
+                          v-else-if="config.type==='range'"
+                          size="small"
+                          v-model="data[config.key]"
+                          range
+                          @change="v=>changeValue({ [config.key]: v })"
+                          :max="config.max || 100">
+                        </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 '@/utils/mixins/component'
+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: {}
+    }
+  },
+  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]) {
+              params[key] = this.data[key]
+              changeFlag = true
+            }
+          }
+          if (changeFlag) {
+            this.changeValue(params)
+          }
+        }
+        this.oldData = { ...this.data }
+      },
+      deep: true
+    },
+    'report.ID': {
+      handler (v) {
+        if (v) this.getConfigData()
+      },
+      immediate: true
+    }
+
+  },
+  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: '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: 'xAxis',
+          label: '横轴',
+          type: 'area',
+          showFlag: {
+            'report.CHART_TYPE': ['column', 'horiColumn', 'line']
+          },
+          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.rotate',
+              label: '标签旋转角度',
+              type: 'num',
+              defaultValue: 0
+            },
+            {
+              key: 'xAxis.type',
+              label: '坐标轴类型',
+              type: 'radio-button',
+              options: [
+                {
+                  label: '类目轴',
+                  value: 'category'
+                },
+                {
+                  label: '数值轴',
+                  value: 'value'
+                }
+              ],
+              defaultValue: 'category'
+            }
+          ]
+        },
+        {
+          key: 'yAxis',
+          label: '纵轴',
+          type: 'area',
+          showFlag: {
+            'report.CHART_TYPE': ['column', 'horiColumn', 'line']
+          },
+          children: [
+            {
+              key: 'yAxis.position',
+              label: '位置',
+              type: 'radio-button',
+              options: [
+                {
+                  label: '左边',
+                  value: 'left'
+                },
+                {
+                  label: '右边',
+                  value: 'right'
+                }
+              ],
+              defaultValue: 'right'
+            },
+            {
+              key: 'yAxis.axisLabel.rotate',
+              label: '标签旋转角度',
+              type: 'num',
+              defaultValue: 0
+            },
+            {
+              key: 'yAxis.type',
+              label: '坐标轴类型',
+              type: 'radio-button',
+              options: [
+                {
+                  label: '类目轴',
+                  value: 'category'
+                },
+                {
+                  label: '数值轴',
+                  value: 'value'
+                }
+              ],
+              defaultValue: 'value'
+            }
+          ]
+        },
+        {
+          key: 'grid',
+          label: '网格',
+          type: 'area',
+          showFlag: {
+            'report.CHART_TYPE': ['column', 'horiColumn', 'line']
+          },
+          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: 'toolbox',
+          label: '工具栏',
+          config: {
+            key: 'toolbox.show',
+            type: 'switch',
+            defaultValue: true
+          }
+        },
+        {
+          key: 'series-pie',
+          label: '饼图',
+          showFlag: {
+            'report.CHART_TYPE': ['pie', 'circularPie']
+          },
+          children: [
+            {
+              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: true
+            },
+            {
+              key: 'series-pie.label.position',
+              label: '标签位置',
+              type: 'radio-button',
+              options: [{
+                label: '外侧',
+                value: 'outside'
+              }, {
+                label: '内部',
+                value: 'inside'
+              }, {
+                label: '中间',
+                value: 'center'
+              }],
+              defaultValue: 'outside'
+            },
+            {
+              key: 'series-pie.radius',
+              label: '内径和外径',
+              type: 'range',
+              defaultValue: [0, 75]
+            }
+          ]
+        },
+        {
+          key: 'series-bar',
+          label: '柱状图',
+          showFlag: {
+            'report.CHART_TYPE': ['column', 'horiColumn']
+          },
+          children: [
+            {
+              key: 'series-bar.colorBy',
+              label: '颜色策略',
+              type: 'radio-button',
+              options: [
+                {
+                  label: '单一色',
+                  value: 'series'
+                },
+                {
+                  label: '不同色',
+                  value: 'data'
+                }
+              ],
+              defaultValue: 'series'
+            },
+            {
+              key: 'series-bar.label.show',
+              label: '是否显示标签',
+              type: 'switch',
+              defaultValue: true
+            },
+            {
+              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.label.show',
+              label: '是否显示标签',
+              type: 'switch',
+              labelAlign: 'left',
+              defaultValue: true
+            },
+            {
+              key: 'series-line.label.position',
+              label: '标签位置',
+              type: 'radio-button',
+              options: [{
+                label: '上方',
+                value: 'top'
+              },
+              {
+                label: '下方',
+                value: 'bottom'
+              }],
+              defaultValue: 'top'
+            }
+          ]
+        }
+      ]
+      this.initData()
+    },
+    initData () {
+      this.reportConfigs.forEach(item => {
+        if (item.config) {
+          this.$set(this.data, item.config.key, item.config.defaultValue !== undefined ? item.config.defaultValue : '')
+        }
+        if (item.children) {
+          item.children.forEach(child => {
+            this.$set(this.data, child.key, child.defaultValue !== undefined ? child.defaultValue : '')
+          })
+        }
+      })
+    },
+    getShowReportConfigs () {
+      const config = this.data
+      // eslint-disable-next-line no-unused-vars
+      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 {
+                // eslint-disable-next-line no-eval
+                value = eval(key)
+              }
+              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)))
+    },
+    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)
+            }
+            this.$set(this.data, item.NAME, value)
+          })
+          this.$nextTick(() => {
+            this.watchData = true
+          })
+        })
+    },
+    changeValue (params) {
+      for (const key in params) {
+        let value = params[key]
+        if (typeof value === 'object') {
+          value = JSON.stringify(value)
+        }
+        this.$http.save({
+          action: 'saveReportParam',
+          entityId: 'FM_REPORT_PARAM',
+          '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: #fff;
+  height: 40px;
+}
+.fold-setting {
+  background: #EBECF0;
+  height: 40px;
+  line-height: 40px;
+  color: #222;
+  padding: 0 10px;
+  cursor: pointer;
+  >i {
+    color: #888888;
+    margin-right: 8px;
+    font-size: 16px;
+  }
+}
+.config-panel {
+  width: 260px;
+  background: #fff;
+  height: 100%;
+  position: absolute;
+  right: 0;
+  z-index: 1;
+  border-left: 1px solid #E8E8E8;
+  overflow: auto;
+}
+.config-container {
+  padding: 0 12px;
+}
+.config-block {
+  padding: 10px 0;
+  border-bottom: 1px dashed #DCDFE6;
+}
+.config-block__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.config-block__title {
+  color: #222222;
+  font-size: 16px;
+  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: #666;
+}
+.config-item__input {
+  margin-top: 6px;
+  &::v-deep {
+    .el-input-number--small{
+      width: 100%;
+    }
+    .el-radio-button__inner {
+      i {
+        font-size: 14px;
+      }
+    }
+  }
+}
+
+</style>