epx-frame 3.5.0-shpgy.1

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

@@ -0,0 +1,2783 @@
+<template>
+  <div class="container" ref="container" :style="$component.style">
+    <div class="report-header">
+      <div class="report-title">
+        <i class="report-back el-icon-arrow-left" @click="backPage"></i>
+        <span class="report-name">
+          <span v-if="!editName">{{reportInfo.NAME}}</span>
+          <el-input v-else v-model="reportInfo.NAME" size="small" @change="setReportName"></el-input>
+          <i v-if="!editName" class="el-icon-edit-outline" @click="editName=!editName"></i>
+          <i v-else class="el-icon-circle-check" @click="setReportName"></i>
+        </span>
+        <!-- <el-button type="text" icon="el-icon-setting">设置</el-button> -->
+      </div>
+      <div class="report-operate">
+        <el-button type="text" @click="globalSetting=true">全局设置</el-button>
+        <el-button size="medium" @click="exportReport" :loading="exportLoading">{{exportLoading? '正在导出，请稍后...' : '导出'}}</el-button>
+        <el-button size="medium" type="primary" @click="previewChart=!previewChart">预览</el-button>
+      </div>
+    </div>
+
+    <div class="report-bar">
+      <span class="report-bar__item">
+        统计对象：{{reportInfo['OBJECT#']}}
+      </span>
+      <span class="report-bar__item" v-if="reportInfo['OBJECT_VIEW#']">
+        统计对象视图：{{reportInfo['OBJECT_VIEW#']}}
+      </span>
+      <span class="report-bar__item">
+        报表类型：
+        <el-popover
+          placement="top-start"
+          title=""
+          width="280"
+          trigger="click"
+         >
+          <ul class="report-type__list">
+            <li :class="{'report-type__item': true, active: reportInfo.TYPE===reportType.type && reportInfo.CHART_TYPE===reportType.chartType}" v-for="reportType in reportTypeList" :key="reportType.chartType" @click="setReportType(reportType)">
+              <i :class="reportType.icon"></i>
+              <span>{{reportType.text}}</span>
+            </li>
+          </ul>
+          <el-input class="reprot-bar__type" slot="reference" prefix-icon="el-icon-date" suffix-icon="el-icon-arrow-down" size="small" :value="reportInfo.TYPE==='1'? '统计表': reportInfo['CHART_TYPE#']" readonly></el-input>
+        </el-popover>
+      </span>
+      <span class="report-bar__item">
+        统计范围：
+        <span class="report-scope__text" :title="scopeText">{{scopeText}}</span>
+        <el-button type="text" @click="filterDrawer=!filterDrawer">设置</el-button>
+        <epx-scope-drawer :visible.sync="filterDrawer" v-model="scopeParams"  ref="filterDrawer" :modeType="['FIXED_VALUE', 'SYSTEM_VARIABLE', 'DYNAMIC_VALUE', 'DEFINED']" :metaId="reportInfo.OBJECT" />
+      </span>
+    </div>
+    <div class="report-design">
+      <div class="report-left-container" >
+        <i class="report-left__foldicon el-icon-s-unfold" v-show="foldFieldContainer" @click="foldFieldContainer=false"></i>
+        <div :class="['report-left__inner', { 'report-left__inner--fold': foldFieldContainer }]">
+          <div class="report-field">
+            <div class="report-field__title">
+              <span>字段</span>
+              <i class="report-left__foldicon el-icon-s-fold" @click="foldFieldContainer=true"></i>
+            </div>
+            <div class="report-field__container">
+              <el-button-group class="field-tab">
+                <el-button :type="showFieldType==='entity'? 'primary': 'default'" size="small" @click="showFieldType='entity'">对象字段</el-button>
+                <el-button :type="showFieldType==='custom'? 'primary': 'default'"  size="small" @click="showFieldType='custom'">自定义字段</el-button>
+              </el-button-group>
+              <template v-if="showFieldType==='entity'">
+                <div class="report-entity-field" v-if="reportStatisFields.entityFields">
+                  <ul class="report-field__list">
+                    <li :class="['report-field__item', {'report-field__item--meta': field.linkFlag }]" v-for="field in reportStatisFields.entityFields" :key="field.id" @dragstart="dragstart(field)" :draggable="!field.linkFlag? 'true' : 'false'">
+                      <p class="report-field__name">
+                        <i :class="['report-field__foldicon',  {'report-field__foldicon--open':openField[field.code] },'el-icon-caret-right']" v-if="field.children && field.children.length>0" @click="$set(openField, field.code, !openField[field.code])"></i>
+                        <span :title="field.text">{{field.text}}</span>
+                        <i class="report-field__handler el-icon-rank"></i>
+                      </p>
+                      <ul class="report-field__list" v-show="openField[field.code]" v-if="field.children && field.children.length>0">
+                          <li class="report-field__item report-field__subitem" v-for="child in field.children" :key="child.id"  @dragstart.stop="dragstart(child)" draggable="true">
+                            <p class="report-field__name">
+                              <i :class="['report-field__foldicon',  {'report-field__foldicon--open':openField[child.code] },'el-icon-caret-right']" v-if="child.children && child.children.length>0" @click="$set(openField, child.code, !openField[child.code])"></i>
+                              <span :title="child.text">{{child.text}}</span>
+                              <i class="report-field__handler el-icon-rank"></i>
+                            </p>
+                            <ul class="report-field__list" v-show="openField[child.code]" v-if="child.children && child.children.length>0">
+                              <li class="report-field__item report-field__subchild" v-for="subChild in child.children" :key="subChild.id"  @dragstart.stop="dragstart(subChild)" draggable="true">
+                                <p class="report-field__name">
+                                  <span :title="subChild.text">{{subChild.text}}</span>
+                                  <i class="report-field__handler el-icon-rank"></i>
+                                </p>
+                              </li>
+                            </ul>
+                        </li>
+                      </ul>
+                    </li>
+                  </ul>
+                  <!-- </draggable> -->
+                </div>
+              </template>
+              <template v-else>
+                <div class="report-custom-field">
+                  <ul class="report-field__list">
+                    <li class="report-field__item" v-for="field in reportStatisFields.customFields" :key="field.id" @dragstart="dragstart(field, 'custom')" draggable="true">
+                      <p class="report-field__name">
+                        <span :title="field.text">{{field.text }}</span>
+                         <span class="report-stat__operate">
+                            <el-button type="text" icon="el-icon-edit" @click="editCustomField(field)"></el-button>
+                            <el-popconfirm
+                              title="确认删除？"
+                              @confirm="deleteCustomField(field)"
+                            >
+                              <el-button class="delete-icon" slot="reference" type="text" icon="el-icon-delete"></el-button>
+                            </el-popconfirm>
+                          </span>
+                      </p>
+
+                    </li>
+                  </ul>
+                  <div class="report-field__operate">
+                    <el-button type="text" @click="addFieldDialog=true; addFieldForm={}">添加自定义字段</el-button>
+                  </div>
+                </div>
+              </template>
+            </div>
+          </div>
+          <div class="report-index">
+            <div class="report-field__title">
+              <span>指标</span>
+            </div>
+            <div class="report-index__content">
+              <template v-if="reportStatisFields.statisIndexFields">
+                <draggable
+                  tag="ul"
+                  class="report-field__list"
+                  :list="reportStatisFields.statisIndexFields"
+                  :sort="false"
+                  :group="{ name: 'stat', pull: 'clone', put: false }"
+                  :clone="el=>cloneField(el, '1')"
+                  filter=".report-field__item--meta"
+                >
+                  <li :class="['report-field__item', { 'report-field__item--meta': field.linkFlag }]" v-for="field in reportStatisFields.statisIndexFields" :key="field.id" >
+                    <p class="report-field__name">
+                      <i :class="['report-field__foldicon',  {'report-field__foldicon--open':openIndexField[field.code] },'el-icon-caret-right']" v-if="field.children && field.children.length>0" @click="$set(openIndexField, field.code, !openIndexField[field.code])"></i>
+                      <span :title="field.text">{{field.text}}</span>
+                      <i class="report-field__handler el-icon-rank"></i>
+                    </p>
+                    <draggable
+                      tag="ul"
+                      class="report-field__list"
+                      :list="field.children"
+                      :sort="false"
+                      :group="{ name: 'stat', pull: 'clone', put: false }"
+                      :clone="el=>cloneField(el, '1')"
+                      v-show="openIndexField[field.code]"
+                    >
+                     <li :class="['report-field__item', 'report-field__subitem']" v-for="child in field.children" :key="child.id" >
+                      <p class="report-field__name">
+                      <i :class="['report-field__foldicon',  {'report-field__foldicon--open':openIndexField[child.code] },'el-icon-caret-right']" v-if="child.children && child.children.length>0" @click="$set(openIndexField, child.code, !openIndexField[child.code])"></i>
+                        <span :title="child.text">{{child.text}}</span>
+                        <i class="report-field__handler el-icon-rank"></i>
+                      </p>
+                      <draggable
+                        tag="ul"
+                        class="report-field__list"
+                        :list="child.children"
+                        :sort="false"
+                        :group="{ name: 'stat', pull: 'clone', put: false }"
+                        :clone="el=>cloneField(el, '1')"
+                        v-show="openIndexField[child.code]"
+                      >
+                      <li :class="['report-field__item', 'report-field__subchild']" v-for="subChild in child.children" :key="subChild.id" >
+                        <p class="report-field__name">
+                          <span :title="subChild.text">{{subChild.text}}</span>
+                          <i class="report-field__handler el-icon-rank"></i>
+                        </p>
+                      </li>
+                      </draggable>
+                     </li>
+                    </draggable>
+                  </li>
+                </draggable>
+              </template>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="report-stat">
+        <div class="report-stat-container">
+          <div class="report-stat__title">
+            <span>横轴统计维度</span>
+            <el-button type="text" @click="showAddOptionDialog('1')">+ 添加统计项</el-button>
+          </div>
+          <div class="report-stat__content" ref="rowStat" v-if="rowList" @dragover="ev=>allowDrop(ev, '1')"  @drop="ev=>drop(ev, '1')">
+            <epx-report-stat-list
+              v-model="rowList"
+              position="1"
+              :dropType="dropType"
+              :reportId="$query.id"
+              :dropElementId="dropElementId"
+              @change="refreshData"
+              @dragstart="dragStatItem"
+              @add="addStatItem" @edit="editStatItem" @delete="deleteStatItem" />
+            <div class="drop-indicator" @dragover.stop :style="{display: dropPosition && dropType==='1'? 'block': 'none' ,top: dropPosition + 'px' }"></div>
+            <div class="stat-null-data" v-if="rowList.length===0">
+              <i class="epx-icon-color-kong"></i>
+              <p>您可以从左侧列表拖拽所需的统计字段， 也可以手动添加统计项</p>
+            </div>
+          </div>
+        </div>
+       <div class="report-stat-container"  v-if="reportInfo.CHART_TYPE!=='pie' && reportInfo.CHART_TYPE!=='circularPie' && reportInfo.CHART_TYPE!=='funnel'">
+          <div class="report-stat__title" >
+            <span>纵轴统计维度</span>
+            <el-button type="text" @click="showAddOptionDialog('2')">+ 添加统计项</el-button>
+          </div>
+          <div class="report-stat__content" ref="columnStat" v-if="columnList"  @dragover="e=>allowDrop(e, '2')"  @drop="e=>drop(e, '2')">
+            <epx-report-stat-list
+              v-model="columnList"
+              :dropElementId="dropElementId"
+              position="2"
+              :dropType="dropType"
+              @dragstart="dragStatItem"
+              :reportId="$query.id"
+              @change="refreshData"
+              @add="addStatItem"
+              @edit="editStatItem"
+              @delete="deleteStatItem"
+            />
+            <div class="stat-null-data" v-if="columnList.length===0">
+              <i class="epx-icon-color-kong"></i>
+              <p>您可以从左侧列表拖拽所需的统计字段， 也可以手动添加统计项</p>
+            </div>
+            <div class="drop-indicator" :style="{display: dropPosition && dropType==='2'? 'block': 'none' ,top: dropPosition + 'px' }"></div>
+          </div>
+        </div>
+        <div class="report-stat-container report-stat-index">
+          <div class="report-stat__title">
+            <span>统计指标</span>
+            <el-button type="text" @click="openAddStatIndexDialog">+ 添加指标</el-button>
+          </div>
+          <div class="report-stat__content">
+            <draggable
+              tag="ul"
+              class="report-stat__list"
+              :list="statisIndexList"
+              :group="{ name: 'stat', pull: false }"
+              @change="changeStatIndex"
+            >
+              <li :class="['report-stat__item']" v-for="index in statisIndexList" :key="index.ID">
+                <p class="report-stat__name">
+                  <span class="report-stat__text" :title="index.NAME || index.INDEX_NAME">{{index.NAME || index.INDEX_NAME}}</span>
+                  <span class="report-stat__operate">
+                    <el-button type="text" icon="el-icon-edit" @click="editStatIndex(index)"></el-button>
+                    <el-popconfirm
+                      title="确认删除？"
+                      @confirm="deleteStatIndex(index)"
+                    >
+                      <el-button class="delete-icon" slot="reference" type="text" icon="el-icon-delete"></el-button>
+                    </el-popconfirm>
+                  </span>
+                </p>
+              </li>
+            </draggable>
+          </div>
+        </div>
+      </div>
+      <div class="report-view">
+        <div class="null-data" v-if="rowList && columnList && rowList.length===0 && columnList.length===0 && statisIndexList.length===0">
+          <i class="epx-icon-color-kong"></i>
+          <span>请先设置统计维度</span>
+        </div>
+        <template v-else-if="chartComponent">
+          <!-- 统计图配置 -->
+          <epx-report-config :report="reportInfo" @change="refreshChart"></epx-report-config>
+          <div class="report-view__chart" v-if="showChart">
+            <epx-page  @refreshData="refreshData" @update="v=>updateCondition(v)" :designMode="true" :metaId="$metaId" :inline="true" :component="chartComponent" :init-config='chartConfig'></epx-page>
+          </div>
+        </template>
+      </div>
+    </div>
+    <!-- 全局设置 -->
+    <el-drawer
+        title="全局设置"
+        width="380px"
+        :visible.sync="globalSetting"
+        :append-to-body="true"
+        :modal-append-to-body="false"
+        direction="rtl"
+        >
+        <div class="attribute-pane__content" v-if="globalSetting">
+          <epx-table-form class="form-content" ref="form" :fieldsConfigs="fieldsConfigs" v-model="formData" :column="1" label-align="left"></epx-table-form>
+          <div :style="{textAlign: 'center'}">
+            <el-button size="medium" @click="globalSetting=false">取消</el-button>
+            <el-button type="primary" size="medium" @click="updateForm">保存</el-button>
+          </div>
+        </div>
+      </el-drawer>
+    <!-- 预览 -->
+    <el-dialog
+      title="报表预览"
+      :visible.sync="previewChart"
+      :append-to-body="true"
+      width="80%"
+    >
+      <epx-page v-if="chartComponent && showChart" @refreshData="refreshData" @update="v=>updateCondition(v)" :designMode="true" :metaId="$metaId" :inline="true" :component="chartComponent" :init-config='chartConfig'></epx-page>
+    </el-dialog>
+    <!-- 统计字段编辑 -->
+    <el-dialog
+      class="custom-dialog"
+      title="统计字段设置"
+      :visible.sync="editEntityFieldDialog"
+      :append-to-body="true"
+      destroy-on-close
+      width="560px"
+    >
+      <div class="custom-dialog__content" v-if="editEntityFieldDialog">
+        <el-tabs v-model="statFieldTabs" :class="{'hide-tabs': editFieldForm.POSITION!=='2' }">
+          <el-tab-pane label="统计字段" name="stat">
+        <div class="add-field-item">
+          <label for="">统计字段：</label>
+          <div class="add-field-input">
+            <span>{{editFieldForm['STA_FIELD#']}}</span>
+          </div>
+        </div>
+        <div class="add-field-item" v-if="reportInfo.TYPE==='1'">
+          <label for="">是否合计项：</label>
+          <div class="add-field-input">
+            <el-switch
+              v-model="editFieldForm.TOTAL_ITEM_FLAG"
+              active-value="1"
+              inactive-value="0"
+            >
+            </el-switch>
+          </div>
+        </div>
+        <template v-if="editFieldForm.INDEX_FLAG==='1'">
+          <div class="add-field-item" >
+            <label class="is-required" for="">标题：</label>
+            <div class="add-field-input">
+              <el-input size="small" v-model="editFieldForm.NAME"></el-input>
+            </div>
+          </div>
+          <div class="add-field-item" >
+            <label for="">计算方式：</label>
+            <div class="add-field-input">
+              <epx-radio v-model="editFieldForm.MODE" :fieldConfigs="{codeKey: 'FM_REPORT_TIME_MODE', state: 'EDIT'}"></epx-radio>
+            </div>
+          </div>
+        </template>
+        <template v-else-if="statField">
+          <div class="add-field-item" v-if="statField.dataType==='object' || statField.dataType==='user' || statField.dataType==='dept'">
+            <label for="">排序方式：</label>
+            <div class="add-field-input add-field-input__flex">
+              <el-select class="add-field__order" v-model="editFieldForm.ORDER_FIELD" size="small">
+                <el-option v-for="item in getMetaFields(statField.relatedEntity)" :key="item.attriName" :label="item.attriLabel" :value="item.attriName"></el-option>
+              </el-select>
+              <el-select class="add-field__order" v-model="editFieldForm.SORT" size="small" :style="{width: '100px'}">
+                <el-option label="升序" value="ASC"></el-option>
+                <el-option label="逆序" value="DESC"></el-option>
+              </el-select>
+            </div>
+          </div>
+          <div class="add-field-item" v-if="statField.dataType==='object' || statField.dataType==='user' || statField.dataType==='dept'">
+            <label for="">对象范围：</label>
+            <div class="add-field-input add-field-input__flex">
+              <epx-form-scope v-model="editFieldForm.OBJECT_FIELD_SCOPE" :metaId="statField.relatedEntity" :fieldConfigs="{attriName: statField.code, attriLabel: statField.text, state: 'EDIT'}"></epx-form-scope>
+            </div>
+          </div>
+          <div class="add-field-item" v-else-if="statField.dataType==='date'">
+            <label for="">分组方式：</label>
+            <div class="add-field-input">
+              <epx-radio v-model="editFieldForm.DATE_GROUP_TYPE" :fieldConfigs="{codeKey: 'DATE_GROUP_TYPE', state: 'EDIT'}"></epx-radio>
+            </div>
+          </div>
+          <template v-else-if="statField.dataType==='list' && statField.optionType==='treeList'">
+            <div class="add-field-item" >
+              <label for="">统计层级：</label>
+              <epx-radio v-model="editFieldForm.STATIS_FIELD_LEVEL" :fieldConfigs="{codeKey: 'STATIS_FIELD_LEVEL', state: 'EDIT'}" @change="statFieldTreeOptionSelectAll = false; $nextTick(()=>statFieldTreeOptionSelectAll = true)"></epx-radio>
+            </div>
+            <div class="add-field-item" >
+              <label for="">统计选项：</label>
+              <div class="add-field-input">
+                <el-checkbox class="add-field__checkall" v-model="statFieldTreeOptionSelectAll" >全选</el-checkbox>
+                 <el-tree v-if="editFieldForm.STATIS_FIELD_LEVEL==='all'" ref="fieldOptionTree" node-key="id" class="option-tree" :data="getTreeCodeById(statField.codeKey)" :check-strictly="true" @check-change="checkChange" show-checkbox :props="{label: 'name',children: 'children'}">
+                  </el-tree>
+                <el-checkbox-group v-else class="add-field__checkgroup" v-model="editFieldForm.STATIS_CUSTOM_OPTIONS">
+                  <el-checkbox v-for="option in statFieldTreeOptions" node-key="id" :label="option.id" :key="option.id">{{option.name}}</el-checkbox>
+                </el-checkbox-group>
+              </div>
+            </div>
+          </template>
+          <div class="add-field-item" v-else-if="statField.dataType==='list'">
+            <label for="">统计选项：</label>
+            <div class="add-field-input">
+              <el-checkbox class="add-field__checkall" v-model="statFieldOptionSelectAll" >全选</el-checkbox>
+              <el-checkbox-group class="add-field__checkgroup" v-model="editFieldForm.STATIS_CUSTOM_OPTIONS" >
+                <el-checkbox v-for="option in statFieldOptions" :label="option.id" :key="option.id">{{option.name}}</el-checkbox>
+              </el-checkbox-group>
+            </div>
+          </div>
+        </template>
+      </el-tab-pane>
+      <el-tab-pane label="统计指标" name="index">
+            <div class="add-field-item">
+              <label for="">指标类别：</label>
+              <div class="add-field-input">
+                <el-radio-group v-model="editFieldForm.STA_INDEX_TYPE">
+                  <el-radio label="default">默认</el-radio>
+                  <el-radio label="field">指标字段</el-radio>
+                  <el-radio label="custom">自定义</el-radio>
+                </el-radio-group>
+              </div>
+            </div>
+            <template v-if="editFieldForm.STA_INDEX_TYPE==='field'">
+              <div class="add-field-item">
+                <label for="">指标字段：</label>
+                <div class="add-field-input">
+                  <el-popover
+                    trigger="click"
+                    placement="bottom"
+                    width="160"
+                  >
+                    <el-input
+                    size="small"
+                      slot="reference"
+                      placeholder="请输入内容"
+                      suffix-icon="el-icon-search"
+                      :value="getLabel(editFieldForm.STA_INDEX_FIELD, reportStatisFields.statisIndexFields)"
+                      >
+                    </el-input>
+                    <el-tree class="field-tree" :data="reportStatisFields.statisIndexFields" :props="{label: 'text',value: 'id'}" @node-click="node=>{$set(editFieldForm,'STA_INDEX_FIELD', node.id); $set(editFieldForm,'STA_INDEX_FIELD_CODE', node.code)}"></el-tree>
+                  </el-popover>
+                </div>
+              </div>
+              <div class="add-field-item" >
+                <label class="add-field-item__label is-required" for="">计算方式：</label>
+                <div class="add-field-input">
+                  <epx-radio v-model="editFieldForm.MODE" :fieldConfigs="{codeKey: 'FM_REPORT_TIME_MODE', state: 'EDIT'}"></epx-radio>
+                </div>
+              </div>
+              </template>
+          </el-tab-pane>
+      </el-tabs>
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click.stop="editEntityFieldDialog = false">取 消</el-button>
+        <el-button type="primary" @click="saveEntityField">保 存</el-button>
+      </div>
+    </el-dialog>
+    <!-- 统计指标编辑 -->
+     <el-dialog
+     class="custom-dialog"
+      title="统计指标"
+      :visible.sync="editStatIndexDialog"
+      :append-to-body="true"
+      destroy-on-close
+      width="560px"
+    >
+      <div class="custom-dialog__content">
+        <div class="add-field-item" >
+          <label class="add-field-item__label is-required" for="">指标标题：</label>
+          <div class="add-field-input">
+            <el-input size="small" v-model="editStatIndexForm.INDEX_NAME"></el-input>
+          </div>
+        </div>
+        <!-- <div class="add-field-item">
+          <label for="">指标类别：</label>
+          <div class="add-field-input">
+            <epx-radio v-model="editStatIndexForm.INDEX_TYPE" :fieldConfigs="{codeKey: 'STATIS_INDEX_TYPE', state: 'EDIT'}"></epx-radio>
+          </div>
+        </div> -->
+        <template v-if="editStatIndexForm.INDEX_TYPE==='field'">
+          <div class="add-field-item">
+            <label for="">指标字段：</label>
+            <div class="add-field-input">
+              <el-popover
+                trigger="click"
+                placement="bottom"
+                width="160"
+              >
+                <el-input
+                size="small"
+                  slot="reference"
+                  placeholder="请输入内容"
+                  suffix-icon="el-icon-search"
+                  :value="getLabel(editStatIndexForm.INDEX_FIELD, reportStatisFields.statisIndexFields)"
+                  >
+                </el-input>
+                <el-tree class="field-tree" :data="reportStatisFields.statisIndexFields" :props="{label: 'text',value: 'id'}" @node-click="node=>$set(editStatIndexForm,'INDEX_FIELD', node.id)"></el-tree>
+              </el-popover>
+            </div>
+          </div>
+          <div class="add-field-item" >
+            <label class="add-field-item__label is-required" for="">计算方式：</label>
+            <div class="add-field-input">
+              <epx-radio v-model="editStatIndexForm.INDEX_CALCULATE_METHOD" :fieldConfigs="{codeKey: 'FM_REPORT_TIME_MODE', state: 'EDIT'}"></epx-radio>
+            </div>
+          </div>
+           <div class="add-field-item" >
+            <label class="add-field-item__label" for="">数值单位：</label>
+            <div class="add-field-input">
+              <epx-radio v-model="editStatIndexForm.NUM_UNIT" :fieldConfigs="{codeKey: 'report_num_nuit', state: 'EDIT'}"></epx-radio>
+            </div>
+          </div>
+          <div class="add-field-item" >
+            <label class="add-field-item__label" for="">单位后缀：</label>
+            <div class="add-field-input">
+               <el-input size="small" v-model="editStatIndexForm.UNIT_SUFFIX"></el-input>
+            </div>
+          </div>
+          <div class="add-field-item" >
+            <label class="add-field-item__label" for="">小数点位数：</label>
+            <div class="add-field-input">
+              <epx-select v-model="editStatIndexForm.DECIMAL_LENGTH" :fieldConfigs="{attriLabel: '小数点位数', codeKey: 'REPORT_DECIMAL_LENGTH', state: 'EDIT'}"></epx-select>
+            </div>
+          </div>
+           <div class="add-field-item" >
+            <label class="add-field-item__label" for="">千分符标识：</label>
+            <div class="add-field-input">
+               <el-switch
+                  v-model="editStatIndexForm.THOUSAND_CENTS_FLAG"
+                  active-value="1"
+                  inactive-value="0"
+                >
+                </el-switch>
+            </div>
+          </div>
+        </template>
+        <template v-else-if="editStatIndexForm.IS_RECORED_FLAG!=='1'">
+          <div class="add-field-item">
+            <label for="">计算公式：</label>
+            <div class="add-field-input">
+              <epx-rule v-model="editStatIndexForm.INDEX_FORMULA" :metaId="reportInfo.OBJECT" :fieldConfigs="{state: 'EDIT'}"></epx-rule>
+            </div>
+          </div>
+        </template>
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="editStatIndexDialog = false">取 消</el-button>
+        <el-button type="primary" @click="saveStatIndex">保 存</el-button>
+      </div>
+    </el-dialog>
+    <el-dialog
+     class="custom-dialog"
+      title="新增编辑自定义字段"
+      :visible.sync="addFieldDialog"
+      :append-to-body="true"
+      destroy-on-close
+      width="560px"
+    >
+      <div class="custom-dialog__content">
+        <div class="add-field-item">
+          <label class="is-required" for="">字段名称：</label>
+          <div class="add-field-input">
+            <el-input size="medium" v-model="addFieldForm.FIELD_NAME"></el-input>
+          </div>
+        </div>
+        <div  class="add-field-item">
+          <label class="is-required"  for="">统计项：</label>
+          <div class="add-field-input">
+            <draggable
+              tag="ul"
+              class="field-option__list"
+              :list="addFieldForm.options"
+            >
+              <li class="field-option__item" v-for="(option, index) in addFieldForm.options" :key="option.ID || option.NAME">
+                <i class="report-field__handler el-icon-rank"></i>
+                <span>{{option.NAME}}</span>
+                <span class="report-stat__operate">
+                  <el-button type="text" icon="el-icon-edit" @click="editFieldOption(option, index)"></el-button>
+                  <el-popconfirm
+                    title="确认删除？"
+                    @confirm="addFieldForm.options.splice(index, 1)"
+                  >
+                    <el-button class="delete-icon" slot="reference" type="text" icon="el-icon-delete"></el-button>
+                  </el-popconfirm>
+                </span>
+              </li>
+            </draggable>
+            <el-button type="text" @click="showAddOptionToField">+ 添加</el-button>
+          </div>
+        </div>
+        <div class="add-field-item">
+          <label for="">设为常用：</label>
+          <div class="add-field-input">
+            <el-switch
+              v-model="addFieldForm.IS_FAVORITE"
+              active-value="1"
+              inactive-value="0"
+            >
+            </el-switch>
+          </div>
+        </div>
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="addFieldDialog = false">取 消</el-button>
+        <el-button type="primary" @click="addCustomField">确 定</el-button>
+      </div>
+    </el-dialog>
+    <!-- 自定义选项 -->
+    <el-dialog
+      class="custom-dialog"
+      title="新增自定义统计项"
+      :visible.sync="addOptionDialog"
+      :append-to-body="true"
+      destroy-on-close
+      width="560px"
+    >
+      <div class="custom-dialog__content" v-if="addOptionDialog">
+        <el-tabs v-model="statFieldTabs" :class="{'hide-tabs': addOptionForm.POSITION!=='2' || addOptionForm.isToField }">
+          <el-tab-pane label="统计字段" name="stat">
+          <div class="add-field-item" v-if="addOptionForm.UP">
+              <label for="">上级：</label>
+              <div class="add-field-input">
+                <span>{{addOptionForm['UP#']}}</span>
+              </div>
+            </div>
+          <div class="add-field-item" v-if="addOptionForm.ID===undefined">
+            <label for="">添加方式：</label>
+            <div class="add-field-input">
+              <el-radio-group v-model="addOptionForm.ADD_TYPE">
+                <el-radio label="custom">自定义</el-radio>
+                <el-radio label="field">字段选项</el-radio>
+                <el-radio label="favorite_item">常用统计项</el-radio>
+              </el-radio-group>
+            </div>
+          </div>
+          <template v-if="addOptionForm.ADD_TYPE==='custom'">
+            <div class="add-field-item">
+              <label class="is-required" for="">标题：</label>
+              <div class="add-field-input">
+                <el-input size="small" v-model="addOptionForm.NAME"></el-input>
+              </div>
+            </div>
+            <div class="add-field-item" v-if="addOptionForm.IS_RECORED_FLAG!=='1'">
+              <label for="">统计范围：</label>
+              <div class="add-field-input">
+                <epx-form-scope v-if="addOptionDialog" v-model="addOptionForm.SCOPE" :metaId="reportInfo.OBJECT" :fieldConfigs="{state: 'EDIT'}" />
+              </div>
+            </div>
+          </template>
+          <template v-else-if="addOptionForm.ADD_TYPE==='field'">
+            <div class="add-field-item">
+              <label for="">统计字段：</label>
+              <el-popover
+                  trigger="click"
+                  placement="bottom"
+                  width="160"
+                >
+                  <el-input
+                    size="small"
+                    slot="reference"
+                    placeholder="请输入内容"
+                    suffix-icon="el-icon-search"
+                    :value="getLabel(addOptionForm.STA_FIELD, reportStatisFields.entityFields)">
+                  </el-input>
+                  <el-tree class="field-tree" :data="entityListFields" :props="{label: 'text',value: 'id'}" @node-click="node=>{(node.dataType==='list' || node.dataType==='treeList' || node.dataType==='object'|| node.dataType==='user'|| node.dataType==='dept')?  $set(addOptionForm,'STA_FIELD', node.id): $message.error('请选择选项类型的字段')}"></el-tree>
+                </el-popover>
+            </div>
+            <template v-if="statOptionField">
+              <template  v-if="statOptionField.dataType==='list' && statOptionField.optionType==='treeList'">
+                <div class="add-field-item" >
+                  <label for="">统计层级：</label>
+                  <epx-radio v-model="addOptionForm.STATIS_FIELD_LEVEL" :fieldConfigs="{codeKey: 'STATIS_FIELD_LEVEL', state: 'EDIT'}" @change="$set(addOptionForm, 'STATIS_CUSTOM_OPTIONS', [])"></epx-radio>
+                </div>
+                <div class="add-field-item" >
+                  <label for="">统计选项：</label>
+                  <div class="add-field-input">
+                    <el-checkbox class="add-field__checkall" v-model="statOptionFieldTreeOptionSelectAll" >全选</el-checkbox>
+                    <el-tree v-if="addOptionForm.STATIS_FIELD_LEVEL==='all'" ref="addOptionTree" node-key="id" class="option-tree" :data="getTreeCodeById(statOptionField.codeKey)" :check-strictly="true" @check-change="checkOptionChange" show-checkbox :props="{label: 'name',children: 'children'}">
+                    </el-tree>
+                    <el-checkbox-group v-else class="add-field__checkgroup" v-model="addOptionForm.STATIS_CUSTOM_OPTIONS">
+                      <el-checkbox v-for="option in statOptionFieldTreeOptions" :label="option.id" :key="option.id">{{option.name}}</el-checkbox>
+                    </el-checkbox-group>
+                  </div>
+                </div>
+              </template>
+              <div class="add-field-item" v-else-if="statOptionField.dataType==='list'">
+                <label for="">统计选项：</label>
+                <div class="add-field-input">
+                  <el-checkbox class="add-field__checkall" v-model="statOptionFieldOptionSelectAll" >全选</el-checkbox>
+                  <el-checkbox-group class="add-field__checkgroup" v-model="addOptionForm.STATIS_CUSTOM_OPTIONS" >
+                    <el-checkbox v-for="option in statOptionFieldOptions" :label="option.id" :key="option.id">{{option.name}}</el-checkbox>
+                  </el-checkbox-group>
+                </div>
+              </div>
+              <template v-if="statOptionField.dataType==='object' || statOptionField.dataType==='user' || statOptionField.dataType==='dept'">
+                <div class="add-field-item" >
+                  <label for="">统计范围：</label>
+                  <div class="add-field-input">
+                    <epx-form-scope v-model="addOptionForm.SCOPE" :metaId="statOptionField.relatedEntity" :fieldConfigs="{state: 'EDIT'}" />
+                  </div>
+                </div>
+                <div class="add-field-item">
+                  <label for="">统计选项：</label>
+                  <div class="add-field-input">
+                    <el-checkbox class="add-field__checkall" v-model="statOptionFieldOptionSelectAll" >全选</el-checkbox>
+                    <el-checkbox-group class="add-field__checkgroup" v-model="addOptionForm.STATIS_CUSTOM_OPTIONS" >
+                      <el-checkbox v-for="option in statOptionFieldData" :label="option.id" :key="option.id">{{option.text}}</el-checkbox>
+                    </el-checkbox-group>
+                  </div>
+                </div>
+              </template>
+            </template>
+          </template>
+          <template v-else-if="addOptionForm.ADD_TYPE==='favorite_item'">
+            <div class="add-field-item">
+              <label for="">常用统计项：</label>
+              <div class="add-field-input" >
+                <ul class="common-field__list">
+                  <li
+                    :class="['common-field__item', { 'fold': foldCommonField[field.id] }]"
+                    v-for="field in reportStatisFields.customFields"
+                    :key="field.id"
+                  >
+                    <p class="common-field__name">
+                      <el-checkbox v-model="checkfieldAllOptions[field.id]">{{field.text}}</el-checkbox>
+                      <i class="common-field__fold el-icon-arrow-up" @click="$set(foldCommonField, field.id, !foldCommonField[field.id])"></i>
+                    </p>
+                    <el-checkbox-group class="common-field-option__checkboxgroup" v-show="!foldCommonField[field.id]" v-model="addOptionForm.FAVORITE_ITEM">
+                      <el-checkbox v-for="option in field['children']" :label="option.id" :key="option.id">{{option.text}}</el-checkbox>
+                    </el-checkbox-group>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </template>
+        </el-tab-pane>
+        <el-tab-pane label="统计指标" name="index">
+            <div class="add-field-item">
+              <label for="">指标类别：</label>
+              <div class="add-field-input">
+                <el-radio-group v-model="addOptionForm.STA_INDEX_TYPE">
+                  <el-radio label="default">默认</el-radio>
+                  <el-radio label="field">指标字段</el-radio>
+                  <el-radio label="custom">自定义</el-radio>
+                </el-radio-group>
+              </div>
+            </div>
+            <template v-if="addOptionForm.STA_INDEX_TYPE==='field'">
+              <div class="add-field-item">
+                <label for="">指标字段：</label>
+                <div class="add-field-input">
+                  <el-popover
+                    trigger="click"
+                    placement="bottom"
+                    width="160"
+                  >
+                    <el-input
+                    size="small"
+                      slot="reference"
+                      placeholder="请输入内容"
+                      suffix-icon="el-icon-search"
+                      :value="getLabel(addOptionForm.STA_INDEX_FIELD, reportStatisFields.statisIndexFields)"
+                      >
+                    </el-input>
+                    <el-tree class="field-tree" :data="reportStatisFields.statisIndexFields" :props="{label: 'text',value: 'id'}" @node-click="node=>{$set(addOptionForm,'STA_INDEX_FIELD', node.id); $set(addOptionForm,'STA_INDEX_FIELD_CODE', node.code)}"></el-tree>
+                  </el-popover>
+                </div>
+              </div>
+              <div class="add-field-item" >
+                <label class="add-field-item__label is-required" for="">计算方式：</label>
+                <div class="add-field-input">
+                  <epx-radio v-model="addOptionForm.MODE" :fieldConfigs="{codeKey: 'FM_REPORT_TIME_MODE', state: 'EDIT'}"></epx-radio>
+                </div>
+              </div>
+              <div class="add-field-item" >
+                <label class="add-field-item__label is-required" for="">百分比列</label>
+                <div class="add-field-input">
+                  <el-input-number v-model="addOptionForm.POINT_PER_COL"></el-input-number>
+                </div>
+              </div>
+            </template>
+          </el-tab-pane>
+        </el-tabs>
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click.stop="addOptionDialog = false">取 消</el-button>
+        <el-button type="primary" @click="addStatOption">确 定</el-button>
+      </div>
+    </el-dialog>
+
+  </div>
+</template>
+
+<script>
+/* eslint-disable no-eval */
+import component from '@/utils/mixins/component'
+import draggable from 'vuedraggable'
+import { mapGetters } from 'vuex'
+export default {
+  name: 'epx-report-design',
+  mixins: [component],
+  components: {
+    draggable
+  },
+  style: {
+    margin: 0
+  },
+  data () {
+    return {
+      reportInfo: {},
+      editName: false,
+      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' }
+      ],
+      exportLoading: false,
+      previewChart: false,
+      filterDrawer: false,
+      rowList: null,
+      columnList: null,
+      reportStatisFields: {},
+      statisIndexList: [],
+      openField: {},
+      openIndexField: {},
+      addFieldForm: {},
+      editFieldForm: {},
+      foldFieldContainer: false,
+      showFieldType: 'entity',
+      addFieldDialog: false,
+      addOptionDialog: false,
+      showStatScope: false,
+      editEntityFieldDialog: false,
+      addOptionForm: {
+        ADD_TYPE: 'custom'
+      },
+      statOptionFieldData: [],
+      editStatIndexDialog: false,
+      editStatIndexForm: {},
+      checkedOption: [],
+      showChart: true,
+      checkfieldAllOptions: {},
+      dropPosition: {},
+      dropType: null,
+      dropElementId: null,
+      foldCommonField: {},
+      globalSetting: false,
+      formData: {},
+      fieldsConfigs: [],
+      statFieldTabs: 'stat'
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'getCodeById',
+      'getTreeCodeById',
+      'getMeta'
+    ]),
+    scopeParams: {
+      get () {
+        const { SCOPE } = this.reportInfo
+        if (SCOPE) {
+          try {
+            const scope = JSON.parse(SCOPE)
+            return scope.scopeParams || []
+          } catch (error) {
+            return []
+          }
+        }
+        return []
+      },
+      set (v) {
+        this.setReportScope(v)
+      }
+    },
+    scopeText () {
+      const length = this.scopeParams.length
+      if (length > 0) {
+        return this.scopeParams.reduce((str, item, index) => str + item.text + (index === length - 1 ? '' : item.link === 'or' ? ' 或者 ' : ' 并且 '), '')
+      } else {
+        return '全部'
+      }
+    },
+    allFieldsConfigs () {
+      const meta = this.getMeta(this.reportInfo.OBJECT)
+      if (meta) {
+        return meta.getAllFieldConfigs()
+      }
+      return []
+    },
+    entityFields () {
+      const { entityFields } = this.reportStatisFields
+      return JSON.parse(JSON.stringify(entityFields || [])).map(item => {
+        if (item.relationMeta) {
+          item.children = item.relationMeta.children || []
+        }
+        return item
+      })
+    },
+    entityListFields () {
+      const formatList = (arr) => {
+        return arr.filter(item => {
+          if (item.children) item.children = formatList(item.children)
+          return item.dataType === 'list' || item.dataType === 'treeList' || item.dataType === 'object' || (item.children && item.children.length > 0)
+        })
+      }
+      return formatList(this.entityFields)
+    },
+    getMetaFields () {
+      return metaId => {
+        if (metaId) {
+          const meta = this.getMeta(metaId)
+          if (!meta) {
+            this.$store.dispatch({
+              type: 'ADD_META',
+              metaId
+            })
+            return []
+          } else {
+            return meta.getAllFieldConfigs()
+          }
+        }
+        return []
+      }
+    },
+    statField () {
+      const { STA_FIELD } = this.editFieldForm
+      if (STA_FIELD) {
+        const field = this.findField(STA_FIELD, this.entityFields)
+        return field
+      }
+      return null
+    },
+    statFieldOptions () {
+      const { codeKey } = this.statField || {}
+      if (!codeKey) return []
+      return this.getCodeById(codeKey) || []
+    },
+    statFieldTreeOptions () {
+      const { codeKey } = this.statField || {}
+      const { STATIS_FIELD_LEVEL } = this.editFieldForm
+      const limit = STATIS_FIELD_LEVEL === 'all' ? null : STATIS_FIELD_LEVEL
+      if (!codeKey) return []
+      const list = []
+      const treeList = this.getTreeCodeById(codeKey) || []
+      const getList = (treeList, level = 1) => {
+        for (const item of treeList) {
+          list.push(item)
+          if (item.children) {
+            if (!limit || level + 1 <= limit) {
+              getList(item.children, level + 1)
+            }
+          }
+        }
+      }
+      getList(treeList)
+      return list
+    },
+    statFieldTreeOptionSelectAll: {
+      get () {
+        const { STATIS_CUSTOM_OPTIONS = [] } = this.editFieldForm
+        return STATIS_CUSTOM_OPTIONS.length === this.statFieldTreeOptions.length
+      },
+      set (v) {
+        const { STATIS_FIELD_LEVEL } = this.editFieldForm
+        if (STATIS_FIELD_LEVEL === 'all') {
+          this.$nextTick(() => {
+            if (v) {
+              this.$refs.fieldOptionTree.setCheckedKeys(this.statFieldTreeOptions.map(item => item.id))
+            } else {
+              this.$refs.fieldOptionTree.setCheckedKeys([])
+            }
+          })
+        } else {
+          if (v) {
+            this.$set(this.editFieldForm, 'STATIS_CUSTOM_OPTIONS', this.statFieldTreeOptions.map(item => item.id))
+          } else {
+            this.$set(this.editFieldForm, 'STATIS_CUSTOM_OPTIONS', [])
+          }
+        }
+      }
+    },
+    statFieldOptionSelectAll: {
+      get () {
+        const { STATIS_CUSTOM_OPTIONS = [] } = this.editFieldForm
+        return STATIS_CUSTOM_OPTIONS.length === this.statFieldOptions.length
+      },
+      set (v) {
+        if (v) {
+          this.$set(this.editFieldForm, 'STATIS_CUSTOM_OPTIONS', this.statFieldOptions.map(item => item.id))
+        } else {
+          this.$set(this.editFieldForm, 'STATIS_CUSTOM_OPTIONS', [])
+        }
+      }
+    },
+    statOptionField () {
+      const { STA_FIELD } = this.addOptionForm
+      if (STA_FIELD) {
+        const field = this.findField(STA_FIELD, this.entityFields)
+        return field
+      }
+      return null
+    },
+    statOptionFieldOptions () {
+      const { codeKey } = this.statOptionField || {}
+      if (!codeKey) return []
+      const codes = this.getCodeById(codeKey)
+      if (!codes) {
+        this.$store.dispatch({
+          type: 'ADD_LIST',
+          key: codeKey,
+          dataType: 'list'
+        })
+      }
+      return codes || []
+    },
+    statOptionFieldTreeOptions () {
+      const { codeKey } = this.statOptionField || {}
+      const { STATIS_FIELD_LEVEL } = this.addOptionForm
+      const limit = STATIS_FIELD_LEVEL === 'all' ? null : STATIS_FIELD_LEVEL
+      if (!codeKey) return []
+      const list = []
+      const treeList = this.getTreeCodeById(codeKey)
+      if (!treeList) {
+        this.$store.dispatch({
+          type: 'ADD_LIST',
+          key: codeKey,
+          dataType: 'treeList'
+        })
+      }
+      const getList = (treeList, level = 1) => {
+        for (const item of treeList) {
+          list.push(item)
+          if (item.children) {
+            if (!limit || level + 1 <= limit) {
+              getList(item.children, level + 1)
+            }
+          }
+        }
+      }
+      getList(treeList || [])
+      return list
+    },
+    statOptionFieldTreeOptionSelectAll: {
+      get () {
+        const { STATIS_CUSTOM_OPTIONS = [] } = this.addOptionForm
+        return STATIS_CUSTOM_OPTIONS.length === this.statOptionFieldTreeOptions.length
+      },
+      set (v) {
+        const { STATIS_FIELD_LEVEL } = this.addOptionForm
+        if (STATIS_FIELD_LEVEL === 'all') {
+          this.$nextTick(() => {
+            if (v) {
+              this.$refs.addOptionTree.setCheckedKeys(this.statOptionFieldTreeOptions.map(item => item.id))
+              this.$set(this.addOptionForm, 'STATIS_OPTION', 'all')
+            } else {
+              this.$refs.addOptionTree.setCheckedKeys([])
+              this.$set(this.addOptionForm, 'STATIS_OPTION', 'custom')
+            }
+          })
+        } else {
+          if (v) {
+            this.$set(this.addOptionForm, 'STATIS_CUSTOM_OPTIONS', this.statOptionFieldTreeOptions.map(item => item.id))
+            this.$set(this.addOptionForm, 'STATIS_OPTION', 'all')
+          } else {
+            this.$set(this.addOptionForm, 'STATIS_CUSTOM_OPTIONS', [])
+            this.$set(this.addOptionForm, 'STATIS_OPTION', 'custom')
+          }
+        }
+      }
+    },
+    statOptionFieldOptionSelectAll: {
+      get () {
+        const { dataType } = this.statOptionField
+        const data = (dataType === 'object' || dataType === 'user' || dataType === 'dept') ? this.statOptionFieldData : this.statOptionFieldOptions
+        const { STATIS_CUSTOM_OPTIONS = [] } = this.addOptionForm
+        return STATIS_CUSTOM_OPTIONS.length === data.length
+      },
+      set (v) {
+        const { dataType } = this.statOptionField
+        const data = (dataType === 'object' || dataType === 'user' || dataType === 'dept') ? this.statOptionFieldData : this.statOptionFieldOptions
+        if (v) {
+          this.$set(this.addOptionForm, 'STATIS_CUSTOM_OPTIONS', data.map(item => item.id))
+          this.$set(this.addOptionForm, 'STATIS_OPTION', 'all')
+        } else {
+          this.$set(this.addOptionForm, 'STATIS_CUSTOM_OPTIONS', [])
+          this.$set(this.addOptionForm, 'STATIS_OPTION', 'custom')
+        }
+      }
+    },
+    fieldOptions () {
+      const { codeKey } = this.statOptionField || {}
+      if (!codeKey) return []
+      return this.getCodeById(codeKey) || []
+    },
+    fieldTreeOptions () {
+      const { codeKey } = this.statOptionField || {}
+      if (!codeKey) return []
+      const list = []
+      const treeList = this.getTreeCodeById(codeKey) || []
+      const getList = (treeList) => {
+        for (const item in treeList) {
+          list.push(item)
+          if (item.children) getList(item.chidlren)
+        }
+      }
+      getList(treeList)
+      return list
+    },
+    chartComponent () {
+      const { TYPE, CHART_TYPE } = this.reportInfo
+      if (TYPE === '1') {
+        return 'design-report-table'
+      } else if (CHART_TYPE === 'pie' || CHART_TYPE === 'circularPie') {
+        return 'design-chart-pie'
+      } else if (CHART_TYPE === 'column' || CHART_TYPE === 'horiColumn') {
+        return 'design-chart-column'
+      } else if (CHART_TYPE === 'line') {
+        return 'design-chart-line'
+      } else if (CHART_TYPE === 'funnel') {
+        return 'design-chart-funnel'
+      }
+      return ''
+    },
+    chartConfig () {
+      const { ID, TYPE, CHART_TYPE, OBJECT, NAME } = this.reportInfo
+      return { ...this.$query, reportId: ID, reportType: TYPE, staObject: OBJECT, reportName: NAME, chartType: CHART_TYPE }
+    },
+    getLabel () {
+      return (v, arr) => {
+        const item = this.getItemById(v, arr)
+        if (item) return item.text || v
+        return v
+      }
+    }
+  },
+  watch: {
+    'addOptionForm.FAVORITE_ITEM' (v) {
+      for (const field of this.reportStatisFields.customFields) {
+        if (field.children) {
+          const isCheckAll = field.children.every(item => v.includes(item.id))
+          if (this.checkfieldAllOptions[field.id] !== isCheckAll) {
+            this.$set(this.checkfieldAllOptions, field.id, isCheckAll)
+          }
+        }
+      }
+    },
+    checkfieldAllOptions: {
+      handler (v) {
+        const { FAVORITE_ITEM } = this.addOptionForm
+        for (const key in v) {
+          if (!this.lastCheckfieldAllOptions || v[key] !== this.lastCheckfieldAllOptions[key]) {
+          // 更新字段选值
+            const field = this.reportStatisFields.customFields.find(item => item.id === key)
+            if (v[key]) {
+              for (const option of field.children) {
+                if (!FAVORITE_ITEM.includes(option.id)) FAVORITE_ITEM.push(option.id)
+              }
+            } else {
+              for (const option of field.children) {
+                const index = FAVORITE_ITEM.findIndex(id => id === option.id)
+                if (index !== -1) {
+                  FAVORITE_ITEM.splice(index, 1)
+                }
+              }
+            }
+          }
+        }
+        this.lastCheckfieldAllOptions = { ...v }
+        this.$set(this.addOptionForm, 'FAVORITE_ITEM', FAVORITE_ITEM)
+      },
+      deep: true
+    },
+    'addOptionForm.STA_FIELD' (v) {
+      const { dataType } = this.statOptionField
+      if (dataType === 'object' || dataType === 'user' || dataType === 'dept') {
+        this.getObjectDataById()
+      }
+    },
+    'addOptionForm.SCOPE' (v) {
+      const { dataType } = this.statOptionField
+      if (dataType === 'object' || dataType === 'user' || dataType === 'dept') {
+        this.getObjectDataById()
+      }
+    }
+  },
+  methods: {
+    getReportInfo () {
+      this.$http.get({
+        entityId: 'FM_REPORT_BASE',
+        id: this.$query.id
+      })
+        .then(data => {
+          this.reportInfo = data.data
+          this.formData = { ...data.data }
+          this.getEntityMeta()
+          this.getReportStatisFields()
+        })
+    },
+    getEntityMeta () {
+      const { OBJECT } = this.reportInfo
+      this.$store.dispatch({
+        type: 'ADD_META',
+        metaId: OBJECT
+      })
+    },
+    getFieldConfigs () {
+      this.$FieldFactory.createFields({
+        meta: this.$meta,
+        metaId: this.$metaId,
+        pageType: 'EDIT',
+        fields: ['CELL_PAGE']
+      })
+        .then(data => {
+          this.fieldsConfigs = [...data]
+        })
+    },
+    updateForm () {
+      const params = {}
+      for (const key in this.formData) {
+        if (!key.includes('#')) {
+          params[`bean.${key}`] = this.formData[key]
+        }
+      }
+      this.$http.update({
+        entityId: 'FM_REPORT_BASE',
+        ...params
+      })
+        .then(() => {
+          this.globalSetting = false
+          this.$message.success('保存成功')
+        })
+        .catch(err => {
+          this.$message.error(err.errorText)
+        })
+    },
+    getItemById (id, arr) {
+      let item = null;
+      (function poll (arr, leval) {
+        for (let i = 0; i < arr.length; i++) {
+          if (arr[i].id === id) {
+            item = arr[i]
+          } else if (arr[i].id !== id && arr[i].children && arr[i].children.length > 0) {
+            poll(arr[i].children, leval + 1)
+          }
+        }
+      })(arr, 0)
+      return item
+    },
+    getReportStatisFields () {
+      this.$http.get({
+        action: 'reportStatisFields',
+        entityId: 'FM_REPORT_BASE',
+        metaId: this.reportInfo.OBJECT,
+        reportId: this.reportInfo.ID
+      })
+        .then(data => {
+          let { customFields, entityFields = '{}', statisIndexFields = '{}' } = data
+          customFields = eval(`(${customFields})`)
+          entityFields = eval(`(${entityFields})`)
+          statisIndexFields = eval(`(${statisIndexFields})`)
+          const formatField = (arr) => {
+            return arr.map(item => {
+              if (item.linkCode) {
+                item.code = item.linkCode.replace(/\|/g, '.')
+              }
+              if (item.children) {
+                item.children = formatField(item.children)
+              }
+              return item
+            })
+          }
+          if (entityFields) {
+            if (entityFields[0]) this.$set(this.openField, entityFields[0].code, true)
+          }
+          if (statisIndexFields) {
+            if (statisIndexFields[0]) this.$set(this.openField, 'index-' + statisIndexFields[0].code, true)
+
+            statisIndexFields.unshift({
+              id: 'record',
+              text: '记录数',
+              isRecoredFlag: '1'
+            })
+          }
+          // .filter(item => item.children.length > 0)
+          this.reportStatisFields = {
+            customFields: formatField(customFields),
+            entityFields: formatField(entityFields),
+            statisIndexFields: formatField(statisIndexFields)
+          }
+        })
+    },
+    getStatList () {
+      const params = {
+        entityId: 'FM_REPORT_ITEM',
+        reportId: this.$query.id,
+        up_field: 'UP',
+        showEntity: '1',
+        multiFlag: true,
+        dir: 'ASC',
+        mysort: 'ORDER_NUM',
+        node: 'root'
+      }
+      this.$http.getTree({
+        ...params,
+        position: '1'
+      })
+        .then(data => {
+          this.rowList = data
+        })
+      this.$http.getTree({
+        ...params,
+        position: '2'
+      })
+        .then(data => {
+          this.columnList = data
+        })
+    },
+    getStatisIndex () {
+      this.$http.list({
+        entityId: 'FM_REPORT_STATIS_INDEX',
+        'scope.REPORT': this.$query.id
+      })
+        .then(data => {
+          this.statisIndexList = data.entitys
+        })
+    },
+    getCommonReportStatisFields () {
+      this.$http.get({
+        action: 'reportStatisFields',
+        entityId: 'FM_REPORT_BASE',
+        metaId: this.reportInfo.OBJECT,
+        onlyCustomFieldFlag: '1'
+      })
+        .then(data => {
+          let { customFields } = data
+          customFields = eval(`(${customFields})`)
+          this.commonStatisFields = customFields
+        })
+    },
+    checkChange (v, isCheck) {
+      if (isCheck) {
+        if (v.parent) this.$refs.fieldOptionTree.setChecked(v.parent, true)
+      }
+      this.$set(this.editFieldForm, 'STATIS_CUSTOM_OPTIONS', this.$refs.fieldOptionTree.getCheckedKeys())
+    },
+    checkOptionChange (v, isCheck) {
+      if (isCheck) {
+        if (v.parent) this.$refs.addOptionTree.setChecked(v.parent, true)
+      }
+      this.$set(this.addOptionForm, 'STATIS_CUSTOM_OPTIONS', this.$refs.addOptionTree.getCheckedKeys())
+    },
+    setReportName () {
+      this.$http.update({
+        entityId: 'FM_REPORT_BASE',
+        'bean.ID': this.reportInfo.ID,
+        'bean.NAME': this.reportInfo.NAME
+      })
+        .then(() => {
+          this.editName = false
+        })
+        .catch(err => {
+          this.$message.error(err.errorText)
+        })
+    },
+    setReportScope (scopeParams) {
+      const scope = JSON.stringify({ scopeParams })
+      this.$http.update({
+        entityId: 'FM_REPORT_BASE',
+        'bean.ID': this.reportInfo.ID,
+        'bean.SCOPE': scope
+      })
+        .then(() => {
+          this.$set(this.reportInfo, 'SCOPE', scope)
+          this.refreshData()
+        })
+        .catch(err => {
+          this.$message.error(err.errorText)
+        })
+    },
+    setReportType (reportType) {
+      const { TYPE, CHART_TYPE } = this.reportInfo
+      const setFn = () => {
+        this.$http.update({
+          entityId: 'FM_REPORT_BASE',
+          'bean.ID': this.reportInfo.ID,
+          'bean.TYPE': reportType.type,
+          'bean.CHART_TYPE': reportType.type === '1' ? '' : reportType.chartType
+        })
+          .then(data => {
+            this.$set(this.reportInfo, 'TYPE', reportType.type)
+            this.$set(this.reportInfo, 'CHART_TYPE', reportType.chartType)
+            this.$set(this.reportInfo, 'CHART_TYPE#', reportType.text)
+            this.refreshData()
+          })
+          .catch(err => {
+            this.$message.error(err.errorText)
+          })
+      }
+      if (TYPE !== reportType.type) {
+        // 提示
+        this.$confirm(`切换为${reportType.type === '1' ? '统计表' : '统计图'}将清空统计项，是否切换?`, '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          this.$http.$post({
+            action: 'removeReportItems',
+            entityId: 'FM_REPORT_BASE',
+            reportId: this.$query.id
+          })
+          setFn()
+        })
+      } else if (CHART_TYPE !== reportType.chartType) {
+        setFn()
+      }
+    },
+    exportReport () {
+      const staObject = this.reportInfo.OBJECT
+      this.exportLoading = true
+      this.$http.$post({
+        action: 'getReportData',
+        entityId: staObject,
+        reportId: this.reportInfo.ID,
+        reportType: 'toExcel'
+      }, {
+        responseType: 'blob'
+      })
+        .then(({ blob, filename }) => {
+          const objectUrl = URL.createObjectURL(blob)
+          var a = document.createElement('a')
+          document.body.appendChild(a)
+          a.href = objectUrl
+          a.download = filename || new Date().getTime() + '.xlsx'
+          a.click()
+          window.URL.revokeObjectURL(objectUrl)
+          document.body.removeChild(a)
+          this.exportLoading = false
+        })
+        .catch(err => {
+          this.exportLoading = false
+          this.$message.error(err.message)
+        })
+    },
+    cloneField (el, INDEX_FLAG = '0') {
+      if (el.isRecoredFlag) {
+        return {
+          NAME: el.text,
+          IS_RECORED_FLAG: '1'
+        }
+      }
+      const object = {
+        NAME: el.text,
+        REPORT: this.$query.id,
+        STA_FIELD: el.id,
+        'STA_FIELD#': el.text,
+        STA_FIELD_CODE: el.code,
+        STATIS_FIELD_TYPE: 'field',
+        STATIS_OPTION: 'all',
+        STATIS_FIELD_LEVEL: 'all',
+        MODEL: '2',
+        INDEX_FLAG,
+        IS_META: el.type === 'meta',
+        children: []
+      }
+      if (INDEX_FLAG === '1') {
+        object.MODE = 'COUNT'
+        object.MODEL = '1'
+        this.dragEvt = {
+          name: 'index',
+          element: object
+        }
+      }
+      return object
+    },
+    dragstart (field, type) {
+      let element = null
+      if (type === 'custom') {
+        element = this.cloneCustomField(field)
+      } else {
+        element = this.cloneField(field)
+      }
+      this.dragEvt = {
+        name: 'field',
+        element
+      }
+    },
+    allowDrop (ev, position) {
+      if (!this.dragEvt) return
+      const { element } = this.dragEvt
+      if (position === '1' && element.INDEX_FLAG === '1') return
+      let dropElem = ev.target
+      while (dropElem && !(dropElem.className && (dropElem.className.includes('report-stat__list') || dropElem.className.includes('report-stat__item') || dropElem.className.includes('report-stat__content')))) {
+        dropElem = dropElem.parentNode
+      }
+      if (!dropElem) return
+      this.dropType = position
+      const el = position === '2' ? this.$refs.columnStat : this.$refs.rowStat
+      const { top: elTop } = el.getBoundingClientRect()
+      this.dropElementId = null
+      const key = dropElem.getAttribute('data-key')
+      const { top, bottom } = dropElem.getBoundingClientRect()
+      if (ev.clientY < top + 8) {
+        this.dropPosition = top - elTop
+        this.dropData = {
+          elem: dropElem,
+          key,
+          type: 'before'
+        }
+      } else if (ev.clientY > top + 24) {
+        this.dropPosition = bottom - elTop
+        this.dropData = {
+          elem: dropElem,
+          key,
+          type: 'after'
+        }
+      } else {
+        this.dropElementId = key
+        this.dropPosition = null
+        const indexFlag = dropElem.getAttribute('data-index-flag')
+        if (indexFlag === '1') return
+        this.dropData = {
+          elem: dropElem,
+          key,
+          type: 'inner'
+        }
+      }
+      // 获取插入元素位置
+      // 如果是在li上 则添加到元素末尾  li高亮
+      // 如果是在ul上 则添加到具体位置
+      ev.preventDefault()
+    },
+
+    dragStatItem (statItem) {
+      this.dragEvt = {
+        name: 'stat',
+        element: statItem
+      }
+    },
+    getStatItem (id, statList = []) {
+      for (let i = 0; i < statList.length; i++) {
+        const item = statList[i]
+        if (item.id === id) {
+          return { item, index: i, arr: statList }
+        } else if (item.children) {
+          const child = this.getStatItem(id, item.children)
+          if (child) return child
+        }
+      }
+    },
+    drop (ev, position) {
+      const { TYPE, CHART_TYPE } = this.reportInfo
+      if (position === '2' && TYPE !== '1') {
+        if (this.statisIndexList.length > 1) {
+          this.$message.error('统计图设置了多个统计维度不允许设置纵轴')
+          return
+        }
+      }
+      if (this.dragEvt) {
+        const { key, type } = this.dropData
+        const { element, name } = this.dragEvt
+        if (element.IS_META) {
+          this.$message.error('不允许拖拽对象')
+          return
+        }
+        const { item: dropElem = {}, index, arr } = this.getStatItem(key, position === '2' ? this.columnList : this.rowList) || {}
+        if (type === 'inner' && CHART_TYPE === 'funnel') {
+          this.$message.error('漏斗图只允许设置一级维度')
+          return
+        }
+        if (name === 'stat') {
+          const evt = { element, type, dropElem, index, dropArr: [...arr] }
+          this.moveStatItem(evt)
+        } else if (name === 'field' || name === 'index') {
+          this.addStatElement({ element, parent: type === 'inner' ? dropElem.id : dropElem.parent, position, newIndex: index })
+        }
+      }
+      this.dragField = null
+      this.dropData = null
+      this.dropPosition = null
+      this.dropElem = null
+      // ev.target.appendChild(document.getElementById(data))
+      ev.preventDefault()
+    },
+    moveStatItem (moved) {
+      const { element, dropElem, type, index, dropArr } = moved
+      let str = ''; let parent = ''
+      let arr = []
+      if (type === 'inner') {
+        arr = [...dropElem.children, { ...element, isNew: true }]
+        parent = dropElem.id
+      } else if (type === 'before') {
+        arr = [...dropArr]
+        arr.splice(index, 0, { ...element, isNew: true })
+        parent = dropElem.parent
+      } else if (type === 'after') {
+        arr = [...dropArr]
+        arr.splice(index + 1, 0, { ...element, isNew: true })
+        parent = dropElem.parent
+      }
+      str = arr.filter(item => item.id !== element.id || item.isNew).reduce((str, item, index) => (str += item.id + ':' + index + ','), '')
+      this.$http.$request({
+        action: 'moveTree',
+        entityId: 'FM_REPORT_ITEM',
+        id: element.id,
+        selfAttriName: 'ID',
+        newParentId: parent || 'root',
+        orderString: str,
+        orderAtrriName: 'ORDER_NUM'
+      })
+        .then(data => {
+          this.refreshData()
+        })
+    },
+    addStatElement (added) {
+      const { element, parent, position, newIndex } = added
+      const formData = {
+        'bean.REPORT': this.reportId
+      }
+      for (const key in element) {
+        if (key !== 'children') formData[`bean.${key}`] = element[key]
+      }
+      formData['bean.POSITION'] = position
+      formData['bean.ORDER_NUM'] = newIndex
+      if (parent) formData['bean.UP'] = parent
+      this.$http.save({
+        entityId: 'FM_REPORT_ITEM',
+        ...formData
+      })
+        .then(data => {
+          this.refreshData()
+        })
+    },
+    cloneCustomField (el) {
+      const object = {
+        NAME: el.text,
+        REPORT: this.$query.id,
+        NEW_STA_FIELD: el.id,
+        STATIS_FIELD_TYPE: 'custom',
+        MODEL: '2',
+        children: []
+      }
+      return object
+    },
+    singleAdd (position) {
+      this.position = position
+      this.singleDrawar = false
+      this.$nextTick(() => {
+        setTimeout(() => {
+          this.singleDrawar = true
+        }, 0)
+      })
+      this.singleInitCondition = []
+      this.singleFilterFields = []
+      this.singleSearchParams = []
+      // this.$store.commit(SET_ROUTER_QUERY, { position: position })
+      // this.$store.commit(SET_TAB_QUERY, { key: this.$tab.key, query: { position: position } })
+      const obj = { POSITION: position }
+      if (position === '1') {
+        obj['POSITION#'] = '横向'
+      } else if (position === '2') {
+        obj['POSITION#'] = '纵向'
+      }
+      this.pageTypes = 'ADD'
+      this.dialogSingleAddVisible = true
+      this.defaultValue = { CLIENT: this.$tab.CLIENT, SYSTEM: this.$tab.SYSTEM, REPORT: this.reportId, 'REPORT#': this.reportData.NAME, MODE: 'COUNT', 'MODE#': '数量', MODEL: '1', 'MODEL#': '固定', ...obj }
+    },
+    findField (id, fields) {
+      for (const item of fields) {
+        if (item.id === id) return item
+        else if (item.children) {
+          const child = this.findField(id, item.children)
+          if (child) return child
+        }
+      }
+    },
+    selectOptionField (data) {
+      this.$set(this.addOptionForm, 'STA_FIELD', data.id)
+      this.$set(this.addOptionForm, 'STA_FIELD#', data.text)
+      if (data.dataType === 'list') {
+        this.$store.dispatch({
+          type: 'ADD_LIST',
+          key: data.codeKey,
+          dataType: data.optionType || data.dataType
+        })
+      }
+    },
+    getObjectDataById () {
+      const { SCOPE } = this.addOptionForm
+      const scopeParams = JSON.parse(SCOPE || '{}').scopeParams || []
+      const { relatedEntity } = this.statOptionField
+      if (relatedEntity) {
+        this.$http.$post({
+          action: 'getTree',
+          entityId: relatedEntity,
+          scopeParams: JSON.stringify(scopeParams)
+        })
+          .then(data => {
+            this.statOptionFieldData = data
+          })
+      }
+    },
+    refreshData () {
+      this.getStatList()
+      this.showChart = false
+      this.$nextTick(() => {
+        this.showChart = true
+      })
+    },
+    refreshChart () {
+      this.showChart = false
+      this.$nextTick(() => {
+        this.showChart = true
+      })
+    },
+    addStatItem (position, item) {
+      const { CHART_TYPE } = this.reportInfo
+      if (CHART_TYPE === 'funnel') {
+        this.$message.error('漏斗图只允许设置一级维度')
+        return
+      }
+      this.addOptionForm = {
+        ADD_TYPE: 'custom',
+        REPORT: this.$query.id,
+        MODEL: '1',
+        STATIS_CUSTOM_OPTIONS: [],
+        POSITION: position,
+        UP: item.id,
+        'UP#': item.text,
+        FAVORITE_ITEM: [],
+        STA_INDEX_TYPE: 'default'
+      }
+      this.addOptionDialog = true
+      this.statFieldTabs = 'stat'
+    },
+    async editStatItem (item) {
+      this.$http.get({
+        entityId: 'FM_REPORT_ITEM',
+        id: item.id
+      })
+        .then(async data => {
+          let { ID, NAME, INDEX_FLAG, MODEL, MODE, STATIS_FIELD_TYPE, NEW_STA_FIELD, STA_FIELD, 'STA_FIELD#': fieldName, TOTAL_ITEM_FLAG, ORDER_FIELD, OBJECT_FIELD_SCOPE, SORT, DATE_GROUP_TYPE, STATIS_OPTION, STATIS_FIELD_LEVEL, STATIS_CUSTOM_OPTIONS = '', SCOPE, IS_RECORED_FLAG, STA_INDEX_TYPE = 'default', ...otherData } = data.data
+          if (MODEL === '2') {
+            // 自定义字段
+            if (STATIS_FIELD_TYPE === 'custom') {
+              const field = this.reportStatisFields.customFields.find(item => item.id === NEW_STA_FIELD)
+              this.editCustomField(field)
+              return
+            }
+            if (STATIS_CUSTOM_OPTIONS) {
+              STATIS_CUSTOM_OPTIONS = STATIS_CUSTOM_OPTIONS.split(',')
+            } else {
+              STATIS_CUSTOM_OPTIONS = []
+            }
+
+            this.editFieldForm = {
+              ID,
+              NAME,
+              STA_FIELD,
+              'STA_FIELD#': fieldName,
+              TOTAL_ITEM_FLAG,
+              ORDER_FIELD,
+              OBJECT_FIELD_SCOPE,
+              SORT,
+              DATE_GROUP_TYPE,
+              STATIS_OPTION,
+              STATIS_FIELD_LEVEL,
+              STATIS_CUSTOM_OPTIONS,
+              INDEX_FLAG,
+              MODEL,
+              MODE,
+              IS_RECORED_FLAG,
+              STA_INDEX_TYPE: STA_INDEX_TYPE || 'default',
+              ...otherData
+            }
+            this.editEntityFieldDialog = true
+            const { codeKey, dataType, optionType } = this.statField || {}
+            if (dataType === 'list') {
+              if (this.statFieldOptions.length === 0) {
+                await this.$store.dispatch({
+                  type: 'ADD_LIST',
+                  key: codeKey,
+                  dataType: optionType || dataType
+                })
+              }
+              if (!STATIS_OPTION || STATIS_OPTION === 'all') {
+                if ((optionType || dataType) === 'treeList') {
+                  if (STATIS_FIELD_LEVEL === 'all') {
+                    this.$nextTick(() => {
+                      this.$refs.fieldOptionTree.setCheckedKeys(this.statFieldTreeOptions.map(item => item.id))
+                    })
+                  } else {
+                    this.editFieldForm.STATIS_CUSTOM_OPTIONS = this.statFieldTreeOptions.map(item => item.id)
+                  }
+                } else {
+                  this.editFieldForm.STATIS_CUSTOM_OPTIONS = this.statFieldOptions.map(item => item.id)
+                }
+              } else {
+                this.$nextTick(() => {
+                  this.$refs.fieldOptionTree.setCheckedKeys(this.editFieldForm.STATIS_CUSTOM_OPTIONS)
+                })
+              }
+            }
+          } else {
+            this.addOptionForm = {
+              ADD_TYPE: 'custom',
+              ID,
+              NAME,
+              SCOPE,
+              IS_RECORED_FLAG,
+              FAVORITE_ITEM: [],
+              STA_INDEX_TYPE: STA_INDEX_TYPE || 'default',
+              ...otherData
+            }
+            this.addOptionDialog = true
+            this.statFieldTabs = 'stat'
+          }
+        })
+    },
+    deleteStatItem (item) {
+      this.$http.removeMulti({
+        entityId: 'FM_REPORT_ITEM',
+        ids: item.id
+      })
+        .then(data => {
+          this.$message.success('删除成功')
+          this.refreshData()
+        })
+        .catch(err => {
+          this.$message.error(err.errorText)
+        })
+    },
+    saveEntityField () {
+      const { dataType, optionType } = this.statField || {}
+      const formData = {}
+      for (const key in this.editFieldForm) {
+        if (key === 'STATIS_CUSTOM_OPTIONS' && this.editFieldForm[key]) {
+          formData[`bean.${key}`] = this.editFieldForm[key].join(',')
+        } else if (!key.includes('#')) {
+          formData[`bean.${key}`] = this.editFieldForm[key]
+        }
+      }
+      if (dataType === 'list' || dataType === 'treeList') {
+        if ((optionType || dataType) === 'treeList') {
+          if (this.statFieldTreeOptionSelectAll) {
+            formData['bean.STATIS_OPTION'] = 'all'
+            formData['bean.STATIS_CUSTOM_OPTIONS'] = ''
+          } else {
+            formData['bean.STATIS_OPTION'] = 'custom'
+          }
+        } else {
+          if (this.statFieldOptionSelectAll) {
+            formData['bean.STATIS_OPTION'] = 'all'
+            formData['bean.STATIS_CUSTOM_OPTIONS'] = ''
+          } else {
+            formData['bean.STATIS_OPTION'] = 'custom'
+          }
+        }
+      }
+      this.$http.update({
+        entityId: 'FM_REPORT_ITEM',
+        ...formData
+      })
+        .then(data => {
+          this.$message.success('设置成功')
+          this.editFieldForm = {}
+          this.editEntityFieldDialog = false
+          this.refreshData()
+        })
+    },
+    changeStatIndex (evt) {
+      if (evt.added) {
+        const { TYPE, CHART_TYPE } = this.reportInfo
+        if (TYPE !== '1') {
+          if (this.statisIndexList.length > 1) {
+            if (CHART_TYPE === 'pie' || CHART_TYPE === 'circularPie' || CHART_TYPE === 'funnel') {
+              this.$message.error(`${CHART_TYPE === 'funnel' ? '漏斗图' : '饼图'}只允许设置一个统计维度`)
+              return this.getStatisIndex()
+            } else if (this.columnList.length > 0) {
+              this.$message.error('统计图设置了纵轴不允许添加多个统计维度')
+              return this.getStatisIndex()
+            }
+          }
+        }
+        this.addStatIndex(evt.added)
+      } else if (evt.moved) {
+        this.moveStatIndex(evt.moved)
+      }
+    },
+    addStatIndex (added) {
+      const { element, newIndex } = added
+      let form = {
+        'bean.REPORT': this.$query.id,
+        'bean.INDEX_NAME': element.NAME,
+        'bean.INDEX_TYPE': 'field',
+        'bean.INDEX_FIELD': element.STA_FIELD,
+        'bean.INDEX_FIELD_CODE': element.STA_FIELD_CODE,
+        'bean.INDEX_CALCULATE_METHOD': 'SUM',
+        'bean.ORDER_NUM': newIndex + 1
+
+      }
+      if (element.IS_RECORED_FLAG) {
+        form = {
+          'bean.REPORT': this.$query.id,
+          'bean.INDEX_NAME': element.NAME,
+          'bean.IS_RECORED_FLAG': '1',
+          'bean.ORDER_NUM': newIndex + 1
+        }
+      }
+
+      this.$http.save({
+        entityId: 'FM_REPORT_STATIS_INDEX',
+        ...form
+      })
+        .then(() => {
+          this.getStatisIndex()
+          this.refreshData()
+        })
+        .catch(err => {
+          this.$message.error(err.errorText)
+        })
+    },
+    openAddStatIndexDialog () {
+      this.editStatIndexDialog = true
+      this.editStatIndexForm = {
+        REPORT: this.$query.id,
+        INDEX_TYPE: 'custom',
+        ORDER_NUM: this.statisIndexList.length
+      }
+    },
+    editStatIndex (index) {
+      this.editStatIndexDialog = true
+      this.editStatIndexForm = index
+    },
+    deleteStatIndex (index) {
+      this.$http.removeMulti({
+        entityId: 'FM_REPORT_STATIS_INDEX',
+        ids: index.ID
+      })
+        .then(() => {
+          this.$message.success('删除成功')
+          this.getStatisIndex()
+          this.refreshData()
+        })
+        .catch(err => {
+          this.$message.error(err.errorText)
+        })
+    },
+    saveStatIndex () {
+      const params = {
+        entityId: 'FM_REPORT_STATIS_INDEX'
+      }
+      if (this.editStatIndexForm.ID) {
+        params.action = 'update'
+      } else {
+        const { TYPE, CHART_TYPE } = this.reportInfo
+        if (TYPE !== '1') {
+          if (this.statisIndexList.length > 0) {
+            if (CHART_TYPE === 'pie' || CHART_TYPE === 'circularPie' || CHART_TYPE === 'funnel') {
+              this.$message.error(`${CHART_TYPE === 'funnel' ? '漏斗图' : '饼图'}只允许设置一个统计维度`)
+              return
+            } else if (this.columnList.length > 0) {
+              this.$message.error('统计图设置了纵轴不允许添加多个统计维度')
+              return
+            }
+          }
+        }
+      }
+      if (!this.editStatIndexForm.INDEX_NAME) {
+        this.$message.error('请输入指标标题')
+        return
+      }
+      for (const key in this.editStatIndexForm) {
+        if (!key.includes('#')) params[`bean.${key}`] = this.editStatIndexForm[key]
+      }
+      const field = this.reportStatisFields.statisIndexFields.find(item => item.id === this.editStatIndexForm.INDEX_FIELD)
+      if (field) {
+        params['bean.INDEX_FIELD_CODE'] = field.code
+      }
+      if (this.isSaveStatIndex) return
+      this.isSaveStatIndex = true
+      this.$http.save({
+        ...params
+      })
+        .then(data => {
+          this.$message.success('修改成功')
+          this.editStatIndexForm = {}
+          this.editStatIndexDialog = false
+          this.isSaveStatIndex = false
+          this.getStatisIndex()
+          this.refreshData()
+        })
+        .catch(err => {
+          this.isSaveStatIndex = false
+          this.$message.error(err.errorText)
+        })
+    },
+    moveStatIndex (moved) {
+      const { element } = moved
+      const str = this.statisIndexList.reduce((str, item, index) => (str += item.ID + ':' + index + ','), '')
+      this.$http.$request({
+        action: 'moveTree',
+        entityId: 'FM_REPORT_STATIS_INDEX',
+        id: element.ID,
+        selfAttriName: 'ID',
+        newParentId: 'root',
+        orderString: str,
+        orderAtrriName: 'ORDER_NUM'
+      })
+        .then(data => {
+          this.getStatisIndex()
+          this.refreshData()
+        })
+    },
+    showAddOptionDialog (POSITION) {
+      this.addOptionForm = {
+        ADD_TYPE: 'custom',
+        REPORT: this.$query.id,
+        MODEL: '1',
+        STATIS_CUSTOM_OPTIONS: [],
+        POSITION,
+        FAVORITE_ITEM: []
+      }
+      this.addOptionDialog = true
+    },
+    addStatOption () {
+      const { isToField, UP, ADD_TYPE, STATIS_CUSTOM_OPTIONS, POSITION, FAVORITE_ITEM, ...otherForm } = this.addOptionForm
+      if (isToField) {
+        this.addOptionToField()
+        return
+      }
+      const { TYPE } = this.reportInfo
+      if (POSITION === '2' && TYPE !== '1') {
+        if (this.statisIndexList.length > 1) {
+          this.$message.error('统计图设置了多个统计维度不允许设置纵轴')
+          return
+        }
+      }
+      if (ADD_TYPE === 'field') {
+        if (STATIS_CUSTOM_OPTIONS.length === 0) {
+          this.$message.error('请选择统计选项')
+          return
+        }
+        if (this.isSaveStatOption) return
+        this.isSaveStatOption = true
+        for (const item of STATIS_CUSTOM_OPTIONS) {
+          const { code, text, dataType, optionType } = this.statOptionField
+          let list = this.statOptionFieldOptions
+          if ((optionType || dataType) === 'treeList') {
+            list = this.statOptionFieldTreeOptions
+          } else if (dataType === 'object' || dataType === 'user' || dataType === 'dept') {
+            list = this.statOptionFieldData
+          }
+          const codeItem = list.find(option => option.id === item)
+
+          this.$http.save({
+            'bean.REPORT': this.$query.id,
+            entityId: 'FM_REPORT_ITEM',
+            'bean.ADD_TYPE': 'custom',
+            'bean.MODEL': '1',
+            'bean.UP': UP,
+            'bean.ORDER_NUM': POSITION === '1' ? this.rowList.length : this.columnList.length,
+            'bean.POSITION': POSITION,
+            'bean.NAME': codeItem.name || codeItem.text,
+            'bean.SCOPE': JSON.stringify({ scopeParams: [{ field: code.replace(/\./g, '|'), mode: 'equal', values: codeItem.code || codeItem.id, text: `${text} 等于 ${codeItem.name || codeItem.text}` }] })
+          })
+            .then(() => {
+              this.addOptionForm = {}
+              this.addOptionDialog = false
+              this.refreshData()
+              this.isSaveStatOption = false
+            })
+            .catch(err => {
+              this.$message.error(err.message)
+              this.isSaveStatOption = false
+            })
+        }
+      } else if (ADD_TYPE === 'favorite_item') {
+        // 获取统计项
+        if (this.isSaveStatOption) return
+        this.isSaveStatOption = true
+        this.$http.save({
+          action: 'saveCustomItem',
+          entityId: 'FM_REPORT_ITEM',
+          reportId: this.$query.id,
+          position: POSITION,
+          reportObject: this.reportInfo.OBJECT,
+          upItemId: UP,
+          'bean.ADD_TYPE': ADD_TYPE,
+          'bean.FAVORITE_ITEM': FAVORITE_ITEM.join(',')
+        })
+          .then(() => {
+            this.$message.success('添加成功')
+            this.addOptionForm = {}
+            this.addOptionDialog = false
+            this.refreshData()
+            this.isSaveStatOption = false
+          })
+          .catch(err => {
+            this.$message.error(err.message)
+            this.isSaveStatOption = false
+          })
+      } else {
+        if (!this.addOptionForm.NAME) {
+          this.$message.error('请输入标题')
+          return
+        }
+        const form = {}
+        if (this.addOptionForm.ID) form.action = 'update'
+        for (const key in otherForm) {
+          if (!key.includes('#')) form[`bean.${key}`] = otherForm[key]
+        }
+        if (this.isSaveStatOption) return
+        this.isSaveStatOption = true
+        this.$http.save({
+          entityId: 'FM_REPORT_ITEM',
+          'bean.REPORT': this.$query.id,
+          'bean.POSITION': POSITION,
+          ...form
+        })
+          .then(() => {
+            this.$message.success(this.addOptionForm.ID ? '修改成功' : '添加成功')
+            this.addOptionForm = {}
+            this.addOptionDialog = false
+            this.isSaveStatOption = false
+            this.refreshData()
+          })
+          .catch(err => {
+            this.$message.error(err.message)
+            this.isSaveStatOption = false
+          })
+      }
+    },
+    showAddOptionToField () {
+      this.addOptionForm = {
+        isToField: true,
+        ADD_TYPE: 'custom',
+        MODEL: '1',
+        STATIS_CUSTOM_OPTIONS: [],
+        FAVORITE_ITEM: []
+      }
+      this.addOptionDialog = true
+      this.statFieldTabs = 'stat'
+    },
+    addOptionToField () {
+      const { ID, ADD_TYPE, STATIS_CUSTOM_OPTIONS, FAVORITE_ITEM, NAME, SCOPE } = this.addOptionForm
+      if (!this.addFieldForm.options) this.$set(this.addFieldForm, 'options', [])
+      if (ID !== undefined) {
+        this.addFieldForm.options.splice(ID, 1, { ADD_TYPE: 'custom', NAME, STATIS_SCOPE: SCOPE })
+      } else {
+        if (ADD_TYPE === 'field') {
+          for (const item of STATIS_CUSTOM_OPTIONS) {
+            const { code, text, dataType, optionType } = this.statOptionField
+            let list = this.statOptionFieldOptions
+            if ((optionType || dataType) === 'treeList') {
+              list = this.statOptionFieldTreeOptions
+            } else if (dataType === 'object' || dataType === 'user' || dataType === 'dept') {
+              list = this.statOptionFieldData
+            }
+            const codeItem = list.find(option => option.id === item)
+            this.addFieldForm.options.push({
+              ADD_TYPE: 'custom',
+              NAME: codeItem.name || codeItem.text,
+              STATIS_SCOPE: JSON.stringify({ scopeParams: [{ field: code.replace(/\./g, '|'), mode: 'equal', values: codeItem.code || codeItem.id, text: `${text} 等于 ${codeItem.name || codeItem.text}` }] })
+            })
+          }
+        } else if (ADD_TYPE === 'favorite_item') {
+          const allOptions = this.reportStatisFields.customFields.reduce((arr, item) => [...arr, ...item.children], [])
+          FAVORITE_ITEM.forEach(item => {
+            const option = allOptions.find(option => option.id === item)
+            this.addFieldForm.options.push({
+              ADD_TYPE: 'custom',
+              NAME: option.data.NAME,
+              STATIS_SCOPE: option.data.STATIS_SCOPE
+            })
+          })
+        } else {
+          this.addFieldForm.options.push({
+            ADD_TYPE: 'custom',
+            NAME: NAME,
+            STATIS_SCOPE: SCOPE
+          })
+        }
+      }
+
+      this.addOptionDialog = false
+      this.addOptionForm = {}
+    },
+    editFieldOption (option, index) {
+      this.addOptionForm = {
+        ID: index,
+        isToField: true,
+        ADD_TYPE: 'custom',
+        NAME: option.NAME,
+        SCOPE: option.STATIS_SCOPE,
+        FAVORITE_ITEM: []
+      }
+      this.addOptionDialog = true
+      this.statFieldTabs = 'stat'
+    },
+    addCustomField () {
+      const { ID, options, FIELD_NAME, IS_FAVORITE } = this.addFieldForm
+      if (!FIELD_NAME) {
+        this.$message.error('请输入字段名称')
+        return
+      }
+      if (!options || options.length === 0) {
+        this.$message.error('请添加统计项')
+        return
+      }
+      const form = {
+        action: 'saveFavoriteField',
+        entityId: 'FM_REPORT_FIELD_FAVORITE',
+        'bean.FIELD_NAME': FIELD_NAME,
+        'bean.IS_FAVORITE': IS_FAVORITE,
+        staObject: this.reportInfo.OBJECT,
+        subData: JSON.stringify(options.map((item, index) => ({ ...item, ORDER_NUM: index + 1 })))
+      }
+      if (ID) {
+        form['bean.ID'] = ID
+      }
+      if (IS_FAVORITE) {
+        form['bean.ENTITY_ID'] = this.reportInfo.OBJECT
+        form['bean.REPORT'] = null
+      } else {
+        form['bean.ENTITY_ID'] = null
+        form['bean.REPORT'] = this.$query.id
+      }
+      if (this.isSaveCustomField) return
+      this.isSaveCustomField = true
+      this.$http.$post(form)
+        .then(() => {
+          this.$message.success(ID ? '修改成功' : '添加成功')
+          this.getReportStatisFields()
+          this.addFieldForm = {}
+          this.addFieldDialog = false
+          this.isSaveCustomField = false
+        })
+        .catch(err => {
+          this.isSaveCustomField = false
+          this.$message.error(err.message)
+        })
+    },
+    editCustomField (field) {
+      this.addFieldForm = {
+        ID: field.id,
+        FIELD_NAME: field.text,
+        IS_FAVORITE: field.isFavoriteFlag,
+        options: field.children.map(item => ({ ADD_TYPE: item.data.ADD_TYPE, NAME: item.data.NAME, STATIS_SCOPE: item.data.STATIS_SCOPE }))
+      }
+      this.addFieldDialog = true
+    },
+    deleteCustomField (field) {
+      this.$http.removeMulti({
+        entityId: 'FM_REPORT_FIELD_FAVORITE',
+        ids: field.id
+      })
+        .then(() => {
+          this.$message.success('删除成功')
+          this.getReportStatisFields()
+        })
+        .catch(err => {
+          this.$message.error(err.message)
+        })
+    }
+  },
+  created () {
+    this.$store.commit('SWITCH_MENU_SHOW', false)
+    this.$store.commit('SWITCH_APP_NAV_SHOW', false)
+    this.getReportInfo()
+    this.getStatList()
+    this.getStatisIndex()
+    this.getCommonReportStatisFields()
+    this.getFieldConfigs()
+  },
+  mounted () {
+    const { openType } = this.$query
+    if (openType === '2') {
+      this.$refs.container.style.position = 'static'
+    }
+  },
+  beforeDestroy () {
+    this.$store.commit('SWITCH_MENU_SHOW', true)
+    this.$store.commit('SWITCH_APP_NAV_SHOW', true)
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.container {
+  position: fixed;
+  top: -0;
+  left: -0;
+  width: 100%;
+  height: 100%;
+  background: #F3F5FA;
+}
+.report-header {
+  height: 56px;
+  background: #fff;
+  padding: 0 20px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid #E8E8E8;
+}
+.report-title {
+  display: flex;
+  align-items: center;
+}
+.report-back {
+  font-size: 20px;
+  cursor: pointer;
+  position: relative;
+  top: 1px
+}
+.report-name {
+  color: #222;
+  font-size: 16px;
+  margin: 0 12px 0 6px;
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+  i {
+    font-size: 18px;
+    color: #444;
+    cursor: pointer;
+    margin-left: 8px;
+  }
+}
+.report-bar {
+  padding: 4px 20px;
+  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.15);
+  background: #fff;
+  margin-bottom: 2px;
+}
+.report-bar__item {
+  margin-right: 40px;
+}
+.reprot-bar__type {
+  width: 140px;
+  cursor: pointer;
+  &::v-deep {
+    .el-input__inner {
+      cursor: pointer;
+    }
+  }
+}
+.report-type__list {
+  width: 280px;
+  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: 12px;
+    color: #444
+  }
+}
+.report-scope__text {
+  display: inline-block;
+  max-width: 500px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  position: relative;
+  top: 6px;
+  margin-right: 6px;
+}
+.report-design {
+  display: flex;
+  height: calc(100% - 107px);
+}
+.report-left-container {
+  height: 100%;
+}
+.report-left__inner {
+  width: 220px;
+  height: 100%;
+  overflow: hidden;
+}
+.report-left__inner--fold {
+  width: 0
+}
+
+.report-field {
+  width: 220px;
+  height: 70%;
+  background: #fff;
+}
+.report-field__title {
+  height: 40px;
+  background: #F5F7FA;
+  padding: 0 14px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  span {
+    color: #222;
+  }
+  i {
+    color: #888;
+    cursor: pointer;
+    font-size: 18px;
+  }
+}
+.report-left__foldicon {
+  color: #888;
+  cursor: pointer;
+  font-size: 18px;
+  line-height: 40px;
+  margin: 0 10px;
+}
+.report-field__container {
+  height: 100%;
+}
+.report-field__container, .report-index {
+  height: calc(100% - 40px);
+}
+.report-index {
+  width: 220px;
+  height: 30%;
+  overflow: auto;
+  background: #fff;
+}
+.report-index__content {
+  height: calc(100% - 40px);
+  overflow: auto;
+}
+.field-tab {
+  text-align: center;
+  margin: 10px 0 10px 24px;
+}
+
+.report-entity-field, .report-custom-field  {
+  height: calc(100% - 52px);
+  overflow: auto;
+}
+.report-field__name {
+  height: 32px;
+  padding: 0 20px 0 30px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  cursor: pointer;
+  position: relative;
+  >span:first-child {
+    flex: 1;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  i {
+    color: #888;
+  }
+  &:hover {
+    background: #E6F6FF;
+    .report-field__handler {
+      display: inline;
+    }
+    .report-stat__operate {
+       display: inline;
+    }
+  }
+}
+.report-field__handler {
+  display: none;
+}
+.report-field__subitem {
+  .report-field__name  {
+    padding-left: 50px;
+    >i:first-child {
+      left: 30px;
+   }
+  }
+}
+.report-field__subchild {
+  .report-field__name  {
+    padding-left: 70px;
+
+  }
+
+}
+.report-field__foldicon {
+  position: absolute;
+  left: 10px;
+  transition: all .5s;
+}
+.report-field__foldicon--open {
+  transform: rotate(90deg);
+}
+.report-custom-field {
+  display: flex;
+  flex-direction: column;
+  .report-field__list {
+    flex: 1;
+    overflow: auto;
+  }
+}
+.report-field__item--meta {
+  >.report-field__name {
+    color: red;
+  }
+}
+.report-field__operate {
+  text-align: center;
+  height: 40px;
+  line-height: 40px;
+  border-top: 1px solid #e3e3e3;
+}
+.common-field-option__checkboxgroup {
+  padding: 0 30px;
+  &::v-deep {
+    .el-checkbox {
+      display: block;
+    }
+  }
+}
+/***统计维度 */
+.report-stat {
+  height: 100%;
+  width: 280px;
+  flex-shrink: 0;
+  margin: 0 10px;
+  display: flex;
+  flex-direction: column;
+}
+.report-stat-container {
+  flex: 2;
+  background: #FFFFFF;
+  margin-top: 10px;
+  overflow: hidden;
+}
+.report-stat__title {
+  height: 40px;
+  border-bottom: 1px solid #DCDFE6;
+  padding: 0 12px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  >span {
+    color: #222
+  }
+}
+.report-stat-index {
+  flex: 1;
+  margin-bottom: 10px;
+}
+.report-stat__content {
+  height: calc(100% - 40px);
+  position: relative
+}
+.drop-indicator {
+  position: absolute;
+  width: 100%;
+  height: 2px;
+  @include bg_color_primary;
+}
+.report-stat__list {
+  height: 100%;
+  overflow: auto;
+}
+.report-stat__item {
+  &::v-deep {
+    .ghost {
+      background: #E6F6FF;
+    }
+  }
+}
+
+.report-stat__name {
+  padding: 0 16px;
+  height: 32px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  cursor: pointer;
+  .report-stat__text {
+    flex: 1;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  &:hover {
+    background: #E6F6FF;
+    .report-stat__operate {
+       display: inline;
+    }
+  }
+}
+.report-stat__operate {
+  display: none;
+}
+.delete-icon {
+  margin-left: 8px;
+  &::v-deep {
+    &.el-button--text {
+      color: red;
+    }
+  }
+}
+
+/*** 显示区域 */
+.report-view {
+  position: relative;
+  margin: 10px;
+  margin-left: 0;
+  flex: 1;
+  height: calc(100% - 20px);
+  overflow: auto;
+}
+.null-data {
+  background: #fff;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  >i {
+    margin-top: 100px;
+    font-size: 120px;
+  }
+  >span {
+    color: #666;
+  }
+}
+/***新增字段弹窗 */
+.add-field-item {
+  display: flex;
+  align-items: center;
+  margin: 24px 0;
+  >label {
+    width: 100px;
+    margin-right: 8px;
+    flex-shrink: 0;
+    position: relative;
+    &.is-required::before {
+      position: absolute;
+      left: -8px;
+      content: '*';
+      color: red
+    }
+  }
+}
+.add-field-input__flex {
+  display: flex;
+}
+.add-field-input {
+  &::v-deep {
+    .el-input {
+      width: 200px;
+    }
+  }
+}
+.add-field__order {
+   &::v-deep {
+    .el-input {
+      width: 120px;
+      margin-right: 8px;
+    }
+  }
+}
+.add-field__checkall {
+  &::v-deep {
+    &.el-checkbox {
+      margin-right: 30px;
+    }
+  }
+}
+.add-field__checkgroup {
+  display: inline;
+}
+.field-option__item {
+  width: 300px;
+  height: 32px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: #F2F3F7;
+  margin-bottom: 10px;
+  padding: 0 12px 0 6px;
+  color: #444;
+  cursor: pointer;
+  &:hover {
+    @include bg_color_primary(.1);
+    .report-stat__operate {
+      display: inline;
+    }
+  }
+
+}
+.common-field__fold {
+  display: inline-block;
+  transition: all .5s;
+  cursor: pointer;
+}
+.common-field__item {
+  &.fold {
+    .common-field__fold {
+      transform: rotate(180deg);
+    }
+  }
+}
+.common-field__name {
+  width: 300px;
+  display: flex;
+  justify-content: space-between;
+}
+.custom-dialog {
+  &::v-deep {
+    .el-dialog__footer {
+      text-align: center;
+      border-top: 1px solid #DCDFE6;
+      padding-bottom: 10px;
+    }
+  }
+}
+.custom-dialog__content {
+  padding: 0 20px;
+}
+.stat-null-data {
+  width: 100%;
+  padding: 20px;
+  box-sizing: border-box;
+  position: absolute;
+  top: 40%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  text-align: center;
+  >i {
+    font-size: 80px;
+  }
+  >p {
+    color: #666;
+    font-size: 12px;
+    line-height: 20px;
+  }
+}
+.field-tree {
+  max-height: 400px;
+  overflow: auto;
+}
+.attribute-pane__content {
+  padding: 0 10px;
+  height: 100%;
+}
+.form__label {
+  margin: 10px 0;
+}
+.form-content {
+  height: calc(100% - 76px);
+  padding-bottom: 20px;
+  overflow: auto;
+  &::v-deep {
+    .table-form-item__label  {
+      width: 90px;
+      padding-left: 0;
+    }
+    .table-form-item__content {
+      .el-input,  .el-input-number--medium {
+        width: 200px;
+      }
+    }
+  }
+}
+.report-view__chart {
+  height: calc(100% - 40px);
+  background: #fff;
+}
+</style>