epx-frame 3.5.0-shpgy.1

package/src/frame/packages/chart/ChartFormItem.vue

@@ -0,0 +1,241 @@
+<script>
+import AddFormItem from '../add-form-item'
+export default {
+  name: 'epx-chart-form-item',
+  extends: AddFormItem,
+  data () {
+    return {
+      reportTypeList: [
+        { icon: 'epx-icon-tongjibiao', text: '统计表', type: '1', chartType: '' },
+        { icon: 'epx-icon-bingzhuangtu', text: '饼状图', type: '2', chartType: 'pie' },
+        { icon: 'epx-icon-huanxingtu', text: '空心饼状图', type: '2', chartType: 'circularPie' },
+        { icon: 'epx-icon-zhexiantu', text: '折线图', type: '2', chartType: 'line' },
+        { icon: 'epx-icon-zhuzhuangtu', text: '柱状图', type: '2', chartType: 'column' },
+        { icon: 'epx-icon-tiaoxingtu', text: '横向柱状图', type: '2', chartType: 'horiColumn' },
+        { icon: 'epx-icon-loudoutu', text: '漏斗图', type: '2', chartType: 'funnel' }
+      ]
+    }
+  },
+  methods: {
+    setReportType (reportType) {
+      this.$set(this.data, 'TYPE', reportType.type)
+      if (reportType.type === '1') {
+        this.$set(this.data, 'CHART_TYPE', null)
+      } else {
+        this.$set(this.data, 'CHART_TYPE', reportType.chartType)
+      }
+    },
+    renderForm () {
+      if (this.fieldsConfigs.length > 0) {
+        return (
+          <epx-table-form class="form-content" ref="form" metaId={this.$metaId} fieldsConfigs={this.fieldsConfigs} pageType={this.componentType} vModel={this.data} column={this.column} labelAlign={this.$configs.labelAlign}
+            scopedSlots={{
+              default: ({ showLabel, fieldConfigs, metaId, ruleMetaId }) => {
+                return fieldConfigs.attriName === 'TYPE' ? (
+                  <epx-table-form-item
+                    show-label={showLabel}
+                    label={fieldConfigs.attriLabel}
+                    metaId={metaId}
+                    ruleMetaId={ruleMetaId}
+                    fieldConfigs={fieldConfigs}
+                  >
+                    <ul class="report-type__list">
+                      {
+                        this.reportTypeList.map(reportType => (
+                          <li class={{ 'report-type__item': true, active: this.data.TYPE === reportType.type && (this.data.CHART_TYPE === reportType.chartType || this.data.TYPE === '1') }} key={reportType.chartType} onClick={this.setReportType.bind(this, reportType)}>
+                            <i class={reportType.icon}></i>
+                            <span>{reportType.text}</span>
+                          </li>
+                        ))
+                      }
+                    </ul>
+                  </epx-table-form-item>
+                ) : (
+                  <epx-table-form-item
+                    show-label={showLabel}
+                    label={fieldConfigs.attriLabel}
+                    metaId={metaId}
+                    ruleMetaId={ruleMetaId}
+                    fieldConfigs={fieldConfigs}
+                  >
+                  </epx-table-form-item>
+                )
+              }
+            }}
+          >
+          </epx-table-form>
+        )
+      }
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.container {
+  background: #fff;
+  &.fold {
+    .form-title-fold__icon {
+      transform: rotate(180deg);
+    }
+    .form-content {
+      height: 0;
+      overflow: hidden;
+    }
+  }
+}
+
+.button-group {
+  text-align: center;
+  padding-bottom: 12px;
+}
+.form-title {
+  padding: 6px 24px;
+  position: relative;
+  overflow: hidden;
+  font-size: 18px;
+  line-height: 36px;
+  background: #fff;
+  white-space: pre-wrap;
+  &::after {
+    content: '';
+    position: absolute;
+    left: -24px;
+    bottom: 0;
+    width: calc(100% + 48px);
+    height: 1px;
+    background: #e3e3e3;
+  }
+  .form-title-fold__icon {
+    @include font_color_primary;
+    font-size: 20px;
+    cursor: pointer;
+    transition: all .5s;
+    line-height: 36px;
+    margin-left: 10px;
+  }
+}
+
+.form-tilte__simple {
+  margin-bottom: -20px;
+  padding: 6px 12px 0;
+  &::after {
+    display: none;
+  }
+  .form-title-border {
+    border: 0;
+    padding-left: 0;
+  }
+  .form-title__operate {
+    display: none;
+  }
+  .form-title-fold__icon {
+    display: none;
+  }
+}
+.form-title-border{
+  border-left: 3px solid;
+  @include border_color_primary;
+  padding-left: 6px;
+}
+
+.form-title-edit {
+  font-size: 16px;
+  line-height: 36px;
+  cursor: pointer;
+  @include font_color_primary;
+  i {
+    margin-right: 4px;
+  }
+}
+.form-content {
+  transition: all .3s;
+  padding: 10px;
+}
+.form-note {
+  @include bg_color_primary(.2);
+  @include border_color_primary;
+  @include font_color_primary;
+  border: 1px dashed;
+  padding: 8px 12px;
+  border-radius: 4px;
+  white-space: pre-wrap;
+  margin: 0 0 12px;
+  display: flex;
+  align-items: center;
+  >i {
+    margin-right: 8px;
+    font-size: 16px;
+    flex-shrink: 0;
+  }
+}
+.button-group {
+  margin: 16px 0;
+  display: flex;
+  justify-content: center;
+  &::v-deep {
+    .el-button {
+      padding: 12px 42px;
+      margin: 0 12px;
+    }
+  }
+}
+@media screen and (max-width: 992px) {
+  .form-title {
+    padding: 6px 12px;
+  }
+  .form-content {
+    padding: 0;
+  }
+}
+</style>
+<style lang="scss">
+.add-form-edit__drawer {
+  .el-drawer__header {
+    padding: 0;
+    margin:0;
+  }
+  .el-drawer__close-btn {
+    display: none;
+  }
+  .el-drawer__body {
+    overflow: auto;
+  }
+}
+</style>
+
+<style lang="scss" scoped>
+.report-type__list {
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+}
+.report-type__item {
+  width: 70px;
+  height: 70px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  line-height: 20px;
+  &:hover {
+    background: #F2F3F7;
+    border-radius: 4px;
+  }
+  &.active {
+    i, span {
+      @include font_color_primary;
+    }
+  }
+  i {
+    font-size: 18px;
+    color: #666;
+    margin-bottom: 8px;
+  }
+  span {
+    font-size: 14px;
+    color: #444
+  }
+}
+</style>

package/src/frame/packages/chart/ChartLine.vue

@@ -0,0 +1,317 @@
+<template>
+  <div class="container" v-loading="loading" :style="{height:itemHeight}" v-if="hasData">
+    <p class="header" v-if="showTitle && title">
+      <!-- <epx-icon v-if="iconCls" class="icon" :name="iconCls" ></epx-icon> -->
+      <span class="title">{{title}}</span>
+    </p>
+    <div ref="main" class="main">
+      <div class="error" v-if="error">
+        <i class="epx-icon-color-a-500"></i>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { cool, light } from '@/utils/chartTheme.js'
+
+export default {
+  name: 'epx-design-chart-line',
+  props: {
+    config: {
+      type: Object,
+      default () {
+        return {}
+      }
+    },
+    initConfig: {
+      type: Object,
+      default () {
+        return {}
+      }
+    },
+    scopeParams: Array
+  },
+  computed: {
+    detailPage () {
+      const { detailPage = 'v_report_list' } = this.data
+      return detailPage
+    },
+    detailPageMeta () {
+      const { detailPageMeta = '' } = this.data
+      return detailPageMeta
+    },
+    iconCls () {
+      const { iconCls = 'el-icon-data-line' } = this.data
+      return iconCls
+    },
+    showTitle () {
+      const { showTitle = true } = this.data
+      return showTitle
+    },
+    title () {
+      const { title = '' } = this.data
+      return title
+    },
+    itemHeight () {
+      const { height = '' } = this.data
+      return height
+    },
+    reportScope () {
+      const { reportScope = {} } = this.data
+      return this.$formatParams(reportScope)
+    },
+    theme () {
+      const { theme = 'light' } = this.data
+      return theme
+    }
+  },
+  data () {
+    return {
+      chartParams: {},
+      data: {},
+      reportId: '',
+      chartType: '',
+      hasData: true,
+      loading: true,
+      error: false
+    }
+  },
+  watch: {
+    scopeParams () {
+      this.setChart()
+    }
+  },
+  methods: {
+    onLoad () {
+      this.$http.find({
+        ...this.chartParams
+      })
+        .then(data => {
+          this.reportId = data.data.ID
+          this.chartType = data.data.CHART_TYPE
+          this.setChart()
+        })
+    },
+    getReportConfig () {
+      const configs = {
+        tooltip: {
+          trigger: 'axis'
+        },
+        grid: {
+          y: 30
+        },
+        legend: {
+          bottom: 0,
+          left: 'center'
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false
+        },
+        yAxis: {
+          type: 'value'
+        }
+      }
+      return this.$http.list({
+        entityId: 'FM_REPORT_PARAM',
+        'scope.REPORT': this.reportId
+      })
+        .then(data => {
+          const _configs = {}
+          data.entitys.forEach(item => {
+            const key = item.NAME
+            // eslint-disable-next-line no-eval
+            let value = item.VALUE === 'true' || item.VALUE === 'false' ? eval(item.VALUE) : item.VALUE
+            if (/^\[.*\]$/.test(value) || /^{.*}$/.test(value)) {
+              value = JSON.parse(value)
+            }
+            _configs[key] = value
+            // this.$set(this.data, item.NAME, item.VALUE)
+          })
+          for (const key in _configs) {
+            const value = _configs[key]
+            if (key === 'legend._orient' || key === 'legend._orient.horizontal' || key === 'legend._orient.vertical') {
+              const { 'legend._orient': legendOrient = 'bottom', 'legend._orient.horizontal': legendOrientH = 'center', 'legend._orient.vertical': legendOrientV = 'center' } = _configs
+              if (!configs.legend) configs.legend = {}
+              if (legendOrient === 'top' || legendOrient === 'bottom') {
+                configs.legend.orient = 'horizontal'
+                configs.legend.top = legendOrient === 'top' ? '20px' : 'auto'
+                configs.legend.bottom = legendOrient === 'bottom' ? '20px' : 'auto'
+                configs.legend.left = legendOrientH === 'left' ? '20px' : legendOrientH === 'center' ? 'center' : 'auto'
+                configs.legend.right = legendOrientH === 'right' ? '20px' : 'auto'
+              } else {
+                configs.legend.orient = 'vertical'
+                configs.legend.top = legendOrientV === 'top' ? '20px' : legendOrientV === 'center' ? 'center' : 'auto'
+                configs.legend.bottom = legendOrientV === 'bottom' ? '20px' : 'auto'
+                configs.legend.left = legendOrient === 'left' ? '20px' : 'auto'
+                configs.legend.right = legendOrient === 'right' ? '20px' : 'auto'
+              }
+              delete _configs['legend._orient']
+              delete _configs['legend._orient.horizontal']
+              delete _configs['legend._orient.vertical']
+            } else if (key.includes('series-pie.')) {
+              if (key === 'series-line.radius') {
+                if (value) configs.series[0].radius = [value[0] + '%', value[1] + '%']
+              } else {
+                const keys = key.replace(/series-pie./, '').split('.')
+                let object = configs.series[0]
+                keys.forEach((item, index) => {
+                  if (index === keys.length - 1) {
+                    object[item] = value
+                  } else {
+                    if (!object[item]) object[item] = {}
+                    object = object[item]
+                  }
+                })
+              }
+            } else if (key && key.includes('.')) {
+              const keys = key.split('.')
+              let object = configs
+              keys.forEach((item, index) => {
+                if (index === keys.length - 1) {
+                  object[item] = value
+                } else {
+                  if (!object[item]) object[item] = {}
+                  object = object[item]
+                }
+              })
+            }
+          }
+          this.reportConfigs = configs
+          return configs
+        })
+    },
+    getColumnsOrLineChartData () {
+      this.loading = true
+      const { reportInfo = {} } = this.data
+      const params = {
+        action: reportInfo.REPORT_ACTION || 'getReportData',
+        reportType: 'line',
+        entityId: this.data.staObject,
+        reportId: this.reportId,
+        ...this.reportScope
+
+      }
+      if (this.scopeParams) {
+        params.scopeParams = JSON.stringify(this.scopeParams)
+      }
+      return this.$http.save(params)
+        .then(data => {
+          this.loading = false
+          // eslint-disable-next-line no-eval
+          var categories = eval('(' + data.categories + ')')
+          let series = []
+          // const num = 0
+          if (data.colItemSize === 0) {
+          // eslint-disable-next-line no-eval
+            const arr = eval('(' + data.onlyRowData + ')')
+            series = [{ data: arr, type: 'line' }]
+          } else {
+          // eslint-disable-next-line no-eval
+            const arr = eval('(' + data.series + ')')
+            series = arr.map(item => ({ name: item.name, data: item.data.map((item, index) => ({ name: categories[index], value: item })), type: 'line' }))
+          }
+          return { series, legend: data.colItemSize === 0 ? [] : series.map(item => item.name), categories }
+        })
+        .catch(err => {
+          this.loading = false
+          this.error = true
+          this.$message.error(err.message)
+        })
+    },
+    setChart () {
+      Promise.all([this.getReportConfig(), this.getColumnsOrLineChartData()])
+        .then(([configs, { legend, series, categories }]) => {
+          const _this = this
+          // 基于准备好的dom，初始化echarts实例
+          this.myChart = this.echarts.init(this.$refs.main, this.theme)
+          // 绘制图表
+          configs.legend.data = legend
+          configs.xAxis.data = categories
+          configs.series = series
+          this.myChart.setOption(configs)
+          this.myChart.on('click', function (params) {
+            const { reportInfo = {} } = _this.data
+            const { id = {} } = params.data
+            if (!id.rowId && !id.colId) return
+            if (_this.designMode || _this.data.clickFlag === false) return
+            const query = {
+              flag: _this.detailPage,
+              metaId: _this.detailPageMeta || _this.data.staObject || 'FM_REPORT_BASE',
+              pageType: 'DETAIL',
+              reportId: _this.reportId,
+              staObject: _this.data.staObject,
+              component: 'report-form-list-page',
+              row: id.rowId,
+              col: id.colId,
+              pageId: reportInfo.CELL_PAGE,
+              queryParams: _this.reportScope,
+              scopeParams: this.scopeParams
+            }
+            _this.$createPage({
+              ...query
+            })
+          })
+        })
+    }
+  },
+  created () {
+    import('echarts')
+      .then(echarts => {
+        this.echarts = echarts
+        echarts.registerTheme('light', light)
+        echarts.registerTheme('cool', cool)
+        this.data = { ...this.initConfig, ...this.config }
+        if (this.initConfig.reportId) {
+          this.reportId = this.initConfig.reportId
+          this.chartType = this.initConfig.chartType
+          this.setChart()
+        } else {
+          this.chartParams = this.config.queryParams
+          this.onLoad()
+        }
+      })
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 360px;
+  box-sizing: border-box;
+  padding: 16px 0;
+  background-color: #fff;
+  overflow: auto;
+}
+.main{
+  flex: 1;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  position: relative;
+}
+.error {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  > i {
+    font-size: 120px;
+  }
+}
+.header{
+  flex-shrink: 0;
+  color: #666;
+  font-size: 18px;
+  font-weight: 600;
+  font-family: 'MicrosoftYaHei-Bold';
+  line-height: 1;
+}
+.title{
+  margin-left: 10px;
+}
+</style>