统计分析图表添加自定义扩展配置

08335 / hivui-platform-template

hivui平台项目模板

Browse code 统计分析图表添加自定义扩展配置 master
1 parent 78eb625 commit dd9447ededdc1f8273b3a5a76ae2c6e909abb4e9 04297 authored 3 days ago

Showing 2 changed files

Ignore Space Show notes View project/hivuiSam/components/analysisSam/Index.vue
<template> <div class="container"> <!-- 工具条 --> <div class="btn-toolbar"> <!-- 后退 --> <el-dropdown split-button :size="size" :class="{ disabled: backDisabled }" :disabled="backDisabled" @command="backCommand" @click="backClick"> <i class="el-icon-back"></i>{{ $t && $t("hivuiSam_btn_back") \|\| '后退' }} <el-dropdown-menu slot="dropdown"> <el-dropdown-item v-for="(item, index) in deepArr" :key="item.prop" :command="index" v-if="index < curIndex">{{ item.label }}</el-dropdown-item> </el-dropdown-menu> </el-dropdown> <!-- 前进 --> <el-dropdown split-button :size="size" :class="{ disabled: goDisabled }" :disabled="goDisabled" @command="goCommand" @click="goClick"> <i class="el-icon-right"></i>{{ $t && $t("hivuiSam_btn_go") \|\| '前进' }} <el-dropdown-menu slot="dropdown"> <el-dropdown-item v-for="(item, index) in deepArr" :key="item.prop" :command="index" v-if="index > curIndex">{{ item.label }}</el-dropdown-item> </el-dropdown-menu> </el-dropdown> <!-- 排序 --> <el-dropdown split-button :size="size" class="sort" @command="sortClick"> <i class="el-icon-sort"></i>{{ $t && $t("hivuiSam_btn_sort") \|\| '排序' }} <el-dropdown-menu slot="dropdown"> <el-dropdown-item :command="-1">{{ $t && $t("hivuiSam_btn_noSort") \|\| '不排序' }}</el-dropdown-item> <el-dropdown-item v-for="(item, index) in sortArr" :key="item.prop" :command="index">{{ item.label }} <i class="el-icon-sort-down" :class="{ sortActive: index == sortIndex && sortType == 'desc' }" @click="sortDown"></i> <i class="el-icon-sort-up" :class="{ sortActive: index == sortIndex && sortType == 'asc' }" @click="sortUp"></i> </el-dropdown-item> </el-dropdown-menu> </el-dropdown> <!-- 列设置 --> <el-button icon="el-icon-setting" :size="size" @click="analysisClick">{{ $t && $t("hivuiSam_btn_columnSet") \|\| '列设置' }}</el-button> <!-- 图表 --> <el-dropdown :size="size" @command="chartTypeChange"> <el-button :size="size"> <i class="el-icon-s-data"></i> {{ $t && $t("hivuiSam_btn_chart") \|\| '图表' }}<i class="el-icon-arrow-down el-icon--right"></i> </el-button> <el-dropdown-menu slot="dropdown"> <el-dropdown-item :class="{ active: chartType == 'table' }" command="table">{{ $t && $t("hivuiSam_dropdown_table") \|\| '表格' }}</el-dropdown-item> <el-dropdown-item :class="{ active: chartType == 'pie' }" command="pie">{{ $t && $t("hivuiSam_dropdown_pie") \|\| '饼图' }}</el-dropdown-item> <el-dropdown-item :class="{ active: chartType == 'bar' }" command="bar">{{ $t && $t("hivuiSam_dropdown_bar") \|\| '柱图' }}</el-dropdown-item> <el-dropdown-item :class="{ active: chartType == 'line' }" command="line">{{ $t && $t("hivuiSam_dropdown_line") \|\| '线图' }}</el-dropdown-item> <el-dropdown-item :class="{ active: chartType == 'area' }" command="area">{{ $t && $t("hivuiSam_dropdown_area") \|\| '区域图' }}</el-dropdown-item> <el-dropdown-item :class="{ active: chartType == 'stack' }" command="stack">{{ $t && $t("hivuiSam_dropdown_stack") \|\| '叠加柱图' }}</el-dropdown-item> </el-dropdown-menu> </el-dropdown> <!-- 刷新 --> <el-button icon="el-icon-refresh" :size="size" @click="refresh">{{ $t && $t("hivuiSam_btn_refresh") \|\| '刷新' }}</el-button> <!-- 分析记录 --> <el-popover placement="bottom" popper-class="recordPop" v-model="recordVisible"> <el-table :data="recordData" @row-dblclick="recordDblClick" @selection-change="handleSelectionChange"> <el-table-column type="selection" width="55"> </el-table-column> <el-table-column min-width="150" prop="name" :label="schemeLabel"> <template slot-scope="scope"> <el-input v-if="scope.row && scope.row.isEdit" v-model="scope.row.name"></el-input> <span v-else>{{ scope.row.name }}</span> </template> </el-table-column> <el-table-column width="100" prop="simple" :label="abbreviationLabel"> <template slot-scope="scope"> <el-input v-model="scope.row.simple"></el-input> </template> </el-table-column> <el-table-column :label="operateLabel" width="150"> <template slot-scope="scope"> <el-button size="mini" type="text" v-if="!(scope.row && scope.row.isEdit)" @click="handleEdit(scope.$index, scope.row)">{{ editLabel }}</el-button> <el-button size="mini" type="text" v-else @click="handleConfirm(scope.$index, scope.row)">{{ confirmLabel }}</el-button> <el-button size="mini" type="text" style="color:red;" @click.stop="handleDelete(scope.$index, scope.row)">{{ removeLabel }}</el-button> </template> </el-table-column> </el-table> <el-button type="primary" size="mini" icon="el-icon-check" style="margin: 10px 0 0;" @click.stop="doClick" :disabled="btnDisabled">{{ executeOverlayLabel }}</el-button> <el-button slot="reference" icon="el-icon-edit-outline" :size="size">{{ analysisRecordLabel }}</el-button> </el-popover> <!-- 统计方案 --> <el-popover placement="bottom" v-model="schemeVisible"> <el-table size="mini" :data="schemeData" @row-click="schemeRowClick"> <el-table-column width="150" prop="FSCHEMENAME" :label="schemeListLabel"></el-table-column> <el-table-column :label="operateLabel" width="150"> <template slot-scope="scope"> <el-button size="mini" type="text" style="color:red;" @click.stop="handleSchemeDelete(scope.$index, scope.row)">{{ removeLabel }}</el-button> </template> </el-table-column> </el-table> <el-button slot="reference" icon="el-icon-edit-outline" :size="size" @click="showSchemeData">{{ $t && $t("hivuiSam_btn_schemeList") \|\| '方案列表' }}</el-button> </el-popover> <!-- 叠加 --> <el-checkbox v-model="superposition" border :size="size">{{ $t && $t("hivuiSam_check_overlay") \|\| '叠加' }}</el-checkbox> <!-- 透视 --> <el-checkbox v-model="perspective" border :size="size">{{ $t && $t("hivuiSam_check_directPerspective") \|\| '直接透视' }}</el-checkbox> <el-button icon="el-icon-download" :size="size" :disabled="this.data && this.data.length == 0" :loading="exportLoading" @click="exportExcel">{{ $t && $t("hivuiSam_btn_export") \|\| '导出excel' }}</el-button> <el-button icon="el-icon-save" :size="size" :loading="schemeLoading" @click="saveScheme">{{ $t && $t("hivuiSam_btn_schemeSave") \|\| '保存方案' }}</el-button> </div> <!-- 内容区 --> <hi-layout :is-fit="true" style="heiht: 100%;"> <!-- 右侧查询面板 --> <hi-layout-right size="300" :title="panelTitle"> <el-tabs v-model="activeName" class="right-tabs" type="border-card" @tab-click="handleClick"> <el-tab-pane :label="conditionPanel" name="condition"> <div style="height: calc( 100% - 342px );overflow: auto;border:none; min-height: 150px;"> <birt-work-book style="min-height: calc( 100% - 342px );" :conf="birtModelRight" :ref="birtModelRight.controlId" class="birtModelRight"></birt-work-book> </div> <el-divider>{{ $t && $t("hivuiSam_layout_summary") \|\| '汇总条件' }}</el-divider> <div style="height: 150px;overflow:auto;"> <el-form @submit.native.prevent ref="havingForm" style="padding: 10px 10px 0 0;" :model="havingForm" label-width="80px"> <el-form-item v-for="(val, name, index) in havingForm" :key="name"> <span slot="label" :title="val.label"> {{ val.label }} </span> <el-col :span="10"> <el-input type="number" v-model="havingForm[name].value" size="mini" controls-position="right" @change="handleChange" :min="0"></el-input> </el-col> <el-col class="line" :span="2">-</el-col> <el-col :span="10"> <el-input type="number" v-model="havingForm[name].value2" size="mini" controls-position="right" @change="handleChange" :min="0"></el-input> </el-col> <el-col class="line" :span="2" style="text-align:center;"> <el-button v-if="val.sign == 'inRange'" size="mini" type="text" @click="signChange(name, 'outRange')">{{ $t && $t("hivuiSam_btn_inRange") \|\| '内' }}</el-button> <el-button v-else size="mini" type="text" @click="signChange(name, 'inRange')">{{ $t && $t("hivuiSam_btn_outRange") \|\| '外' }}</el-button> </el-col> </el-form-item> </el-form> </div> <el-form @submit.native.prevent ref="groupForm" style="padding: 10px 10px 0 0;" :model="groupForm" label-width="80px"> <el-form-item :label="formGroup"> <i class="el-icon-edit" @click="showtransfer"></i> <el-select v-model="groupForm.prop" style="width: 100%;"> <el-option v-for="item in groupFields" :label="item.label" :value="item.prop" :key="item.prop"></el-option> </el-select> </el-form-item> <el-form-item> <el-button type="primary" size="mini" :loading="loading" @click="doCount">{{ $t && $t("hivuiSam_btn_doQuery") \|\| '执行查询' }}</el-button> <el-button size="mini" @click="reset">{{ $t && $t("hivuiSam_btn_reset") \|\| '重置' }}</el-button> </el-form-item> </el-form> </el-tab-pane> <el-tab-pane :label="setPanel" name="setting"> <el-form @submit.native.prevent ref="settingForm" style="padding: 10px 10px 0 0;" :model="settingForm" label-width="90px"> <el-form-item :label="formXInverse"> <el-checkbox v-model="settingForm.xInverse" label=""></el-checkbox> </el-form-item> <el-form-item :label="formToolbox"> <el-checkbox v-model="settingForm.toolbox" label=""></el-checkbox> </el-form-item> <el-form-item :label="formAxisMarking"> <el-select v-model="showType" style="width: 100%;"> <el-option v-for="item in axisMarkOptions" :label="item.label" :value="item.value" :key="item.value"></el-option> </el-select> </el-form-item> <el-form-item :label="formLegend"> <el-select v-model="settingForm.legend" style="width: 100%;"> <el-option v-for="item in legendOptions" :label="item.label" :value="item.value" :key="item.value"></el-option> </el-select> </el-form-item> <el-form-item :label="formTipStyle"> <el-select v-model="settingForm.tipStyle" style="width: 100%;"> <el-option v-for="item in tipStyleOptions" :label="item.label" :value="item.value" :key="item.value"></el-option> </el-select> </el-form-item> <el-form-item :label="formStaField"> <el-select v-model="settingForm.staField" style="width: 100%;" @change="changeShowAnalyseList"> <el-option :label="labelNone" value="none"></el-option> <el-option v-for="item in analyseFields" :label="item.label" :value="item.prop" :key="item.prop"></el-option> </el-select> </el-form-item> <el-form-item :label="formTitle"> <el-checkbox v-model="settingForm.title" label=""></el-checkbox> </el-form-item> <el-form-item v-if="settingForm.title" :label="formMainTitle"> <el-input v-model="settingForm.mainTitle" /> </el-form-item> <el-form-item v-if="settingForm.title" :label="formSubTitle"> <el-input v-model="settingForm.subTitle" /> </el-form-item> <el-form-item :label="formWeekColumns"> <el-checkbox v-model="settingForm.weekColumns" label=""></el-checkbox> </el-form-item> <el-form-item v-if="settingForm.weekColumns" :label="formColumn"> <el-input v-model="settingForm.column" /> </el-form-item> <el-form-item v-if="settingForm.weekColumns" :label="formWeek"> <el-input v-model="settingForm.week" /> </el-form-item> </el-form> </el-tab-pane> </el-tabs> </hi-layout-right> <!-- 图表展示区 --> <hi-layout-center style="heiht: 100%;"> <!-- 图表工具栏 --> <div class="chart-tool"> <i v-if="!showChartMenu" @click="showChartMenu = true" class="el-icon-menu" /> <div v-else class="content"> <i class="iconfont icon-num item" :class="{ active: showType == 'num' }" title="显示数值" @click="onChangeShowType('num')" /> <i class="iconfont icon-percentage item" :class="{ active: showType == 'percent' }" title="显示百分比" @click="onChangeShowType('percent')" /> <el-dropdown placement="bottom" @command="changeShowAnalyseList"> <i class="el-icon-s-unfold"></i> <el-dropdown-menu slot="dropdown"> <el-dropdown-item command="none">{{ $t && $t("hivuiSam_label_none") \|\| '不显示' }}</el-dropdown-item> <el-dropdown-item :class="{ active: analyseListChecked == item.prop }" v-for="item in analyseFields" :command="item.prop">{{ item.label }}</el-dropdown-item> </el-dropdown-menu> </el-dropdown> <i class="el-icon-close" @click="showChartMenu = false" /> </div> </div> <!-- 深度分析显示区 --> <div class="depth-analysis"> <span>{{ $t && $t('hivuiSam_label_depthAnalysis') \|\| '深度分析:' }}</span> <el-breadcrumb separator-class="el-icon-arrow-right" style="padding: 0 0 0 10px;"> <el-breadcrumb-item v-for="(item, index) in deepArr" :key="item.prop"> <span v-if="item.label.includes(',') && item.selectVal" @click="breadcrumbClick(item.prop)" :class="{ deepActive: index == curIndex }" style="cursor: pointer;"> <span v-for="(it, i) in item.label.split(',')"> {{ it }} <span style="color: rgb(255, 102, 0);margin-left:2px;" v-if="index < curIndex">{{ item.selectVal.split(',')[i] }}<span v-if="i < item.label.split(',').length - 1">,</span></span> </span> </span> <span v-else @click="breadcrumbClick(item.prop)" :class="{ deepActive: index == curIndex }" style="cursor: pointer;"> {{ item.label }} <span style="color: rgb(255, 102, 0);margin-left:2px;" v-if="index < curIndex">{{ item.selectVal }}</span> </span> </el-breadcrumb-item> </el-breadcrumb> </div> <div v-if="showDetail" style="height: calc( 100% - 80px )"> <el-table :data="data" ref="table" height="100%" border stripe :show-summary="showSummary" :summary-method="getSummaries" header-row-class-name="tableHeader" style="width: 100%"> <el-table-column v-if="showIndex" width=50 type="index"> </el-table-column> <el-table-column v-for="item in tableColumns" :key="item.prop" :prop="item.prop" :label="item.label" :formatter="formatter"> </el-table-column> </el-table> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination> </div> <div v-if="!showDetail && chartType == 'table'" style="height: calc( 100% - 80px )"> <el-table :data="data" ref="table" height="100%" border stripe @row-dblclick="rowDblclick" :show-summary="showSummary" :summary-method="getSummaries" header-row-class-name="tableHeader" style="width: 100%"> <el-table-column v-if="showIndex" width=50 type="index"> </el-table-column> <el-table-column v-for="item in tableColumns" :key="item.prop" :prop="item.prop" :label="item.label" :formatter="formatter"> </el-table-column> </el-table> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="pageSizes" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination> </div> <Pie-chart style="height: calc( 100% - 100px )" v-else-if="!showDetail && chartType == 'pie'" ref="chartConf" :conf="chartConf"></Pie-chart> <Bar-chart style="height: calc( 100% - 100px )" v-else-if="!showDetail && (chartType == 'bar' \|\| chartType == 'stack')" ref="chartConf" :conf="chartConf"></Bar-chart> <Line-chart style="height: calc( 100% - 100px )" v-else-if="!showDetail && chartType == 'line'" ref="chartConf" :conf="chartConf"></Line-chart> <Line-chart style="height: calc( 100% - 100px )" v-else-if="!showDetail && chartType == 'area'" ref="chartConf" :conf="chartConf"></Line-chart> <!-- 分析列表数据展示区 --> <div class="analyseList" v-show="showAnalyseList"> <div class="analyseList-title"> {{ analyseList_title }} </div> <ul class="analyseList-ul"> <li v-for="(item, index) in data"> <a @click="analyseListOnClick(item, index)">{{ item[curGroupField] }}</a> <span>{{ item[analyseListChecked + '_per'] + '%' }}</span> </li> </ul> </div> </hi-layout-center> </hi-layout> <!-- 分析列 --> <el-dialog :visible.sync="analysisVisible" :height="500"> <el-table :data="analysisData" size="small" :height="400"> <el-table-column prop="countField" :label="countFieldLabel"> </el-table-column> <el-table-column prop="tableColumn" :label="tableColumnLabel" align="center"> <template slot="header" slot-scope="{row}"> <el-checkbox v-model="tableColumnCheck" @change="handelCheckAll('tableColumn')" :label="tableColumnLabel"></el-checkbox> </template> <template slot-scope="{row}"> <el-checkbox v-model="row.tableColumn"></el-checkbox> </template> </el-table-column> <el-table-column prop="tableColumnCount" :label="tableColumnCountLabel" align="center"> <template slot="header" slot-scope="{row}"> <el-checkbox v-model="tableColumnCountCheck" @change="handelCheckAll('tableColumnCount')" :label="tableColumnCountLabel"></el-checkbox> </template> <template slot-scope="{row}"> <el-checkbox v-model="row.tableColumnCount"></el-checkbox> </template> </el-table-column> <el-table-column prop="chartColumn" :label="chartColumnLabel" align="center"> <template slot="header" slot-scope="{row}"> <el-checkbox v-model="chartColumnCheck" @change="handelCheckAll('chartColumn')" :label="chartColumnLabel"></el-checkbox> </template> <template slot-scope="{row}"> <el-checkbox v-model="row.chartColumn"></el-checkbox> </template> </el-table-column> <el-table-column prop="chartColumnCount" :label="chartColumnCountLabel" align="center"> <template slot="header" slot-scope="{row}"> <el-checkbox v-model="chartColumnCountCheck" @change="handelCheckAll('chartColumnCount')" :label="chartColumnCountLabel"></el-checkbox> </template> <template slot-scope="{row}"> <el-checkbox v-model="row.chartColumnCount"></el-checkbox> </template> </el-table-column> <el-table-column :label="operateLabel" width="150"> <template slot-scope="scope"> <el-button size="mini" type="text" @click="columnUp(scope.$index, scope.row)">{{ upLabel }}</el-button> <el-button size="mini" type="text" @click="columnDown(scope.$index, scope.row)">{{ downLabel }}</el-button> </template> </el-table-column> </el-table> <div slot="title" style="height: 20px;"></div> </el-dialog> <!-- 分析字段 --> <el-dialog :visible.sync="analysisFieldsVisible" :height="500"> <Pie-chart style="height: 400px;" ref="analysisChart" :conf="analysisChartConf"></Pie-chart> <div slot="title" style="height: 20px;"></div> </el-dialog> <!-- 穿梭框(修改分组字段) --> <el-dialog :visible.sync="transferVisible" :height="500" width="640px" center @close="transferClose"> <el-transfer class="sam" v-model="groupFieldsEdit" :data="conf.groupFields" :titles="[$t('hivuiSam_trans_source'), $t('hivuiSam_trans_target')]" target-order="push" :props="{ key: 'prop', label: 'label' }" style="width: 100%;padding: 20px;"> <span slot-scope="{ option }">{{ option.label }} <el-button style="margin-left: 10px;" icon="el-icon-top" type="primary" size="mini" circle @click.stop="transferUp(option)"></el-button> <el-button icon="el-icon-bottom" type="primary" size="mini" circle @click.stop="transferDown(option)"></el-button> </span> </el-transfer> <div slot="title" style="height: 20px;"></div> <span slot="footer" class="dialog-footer"> <el-button @click="transferClose" size="small">取消</el-button> <el-button type="primary" size="small" @click="transferConfirm">确定</el-button> </span> </el-dialog> </div> </template> <script> import { QueryStyleFactory } from "../templates/query-panel/QueryStyleFactory"; import { GridSingleSelect } from "../templates/GridSingleSelect"; import { JsonUtil } from "../../funclib/JsonUtil"; import { getToken } from "../../utils/auth"; import "hi-ui/lib/hi-ui.css"; import { HiLayout, HiLayoutLeft, HiLayoutRight, HiLayoutTop, HiLayoutBottom, HiLayoutCenter } from "hi-ui"; import debounce from 'lodash/debounce' import cloneDeep from 'lodash/cloneDeep' export default { name: "AnalysisSam", props: { conf: { type: Object, } }, components: { HiLayout, HiLayoutLeft, HiLayoutRight, HiLayoutTop, HiLayoutBottom, HiLayoutCenter }, computed: { // 后退 backDisabled() { return this.curIndex === 0 }, // 前进 goDisabled() { return this.curIndex == this.deepArr.length - 1 }, // 表格列 tableColumns() { if (this.showDetail) { return this.dataFields } else { // 组合分组条件分成多个列 let list = this.curGroupField.split(',') // 获取当前分组列 let curGroupArr = this.groupFields.filter(item => { return list.includes(item.prop) }) let arr = [] // 执行叠加后，网格添加冗余字段 if (this.superposition) { let newFields = [] let dataList = [] for (let key in this.selectionData) { let selData = this.selectionData[key] let id = selData.id let simple = selData.simple for (let anaField of this.analyseFields) { let obj = {} obj.prop = anaField.prop + '-' + id; obj.label = anaField.label + '-' + simple; newFields.push(obj) } let keyAnalyse = this.analyseFields.map(item => { return item.prop }) let data = selData.data.map(sData => { for (let key of keyAnalyse) { sData[key + '-' + id] = sData[key] } return sData }) selData.data = data dataList = dataList.concat(data) } // 去重 let keyList = dataList.map(item => { return item[this.curGroupField] }) keyList = Array.from(new Set(keyList)) if (keyList && keyList.length) { let newData = [] for (let key in keyList) { let obj = { [this.curGroupField]: keyList[key] }; for (let field of newFields) { obj[field.prop] = 0 } for (let sData of this.selectionData) { // 组合分组 if (this.curGroupField.indexOf(',') > -1) { } else { let keyArr = sData.data.map(item => { return item[this.curGroupField] }) let i = keyArr.indexOf(keyList[key]) if (i > -1) { obj = { ...obj, ...sData.data[i] } } else { for (let j in sData.data[0]) { obj[j + '-' + sData.id] = 0 } } } } newData[key] = obj } this.data = newData } else { this.data = [] } arr = curGroupArr.concat(newFields) } else { // 当前分组列+分析列 arr = curGroupArr.concat(this.analyseFields) if (arr && arr.length) { this.sortArr = arr } } arr = arr.filter(item => { var show = true this.analysisData.forEach(data => { if (data.prop == item.prop) { show = data.tableColumn } }) return show }) return arr } }, showIndex() { return this.conf && this.conf.showIndex \|\| false }, // 网格是否显示合计行 showSummary() { let flag = false this.analysisData.some(item => { flag = item.tableColumnCount return flag }) return flag }, // 数据列 dataFields() { return this.conf && this.conf.dataFields \|\| [] }, // 图表配置 chartConf() { debugger let groupBy = this.curGroupField; let calcFields = [] // 系列 var series = []; const tooltipOption = { trigger: 'item', axisPointer: { type: 'shadow' }, } let analysisList = this.analysisData.filter(item => { return item.chartColumn }) let showLabel = this.showType == 'none' ? false : true let showPer = this.showType == 'percent' ? true : false let label = { show: showLabel, position: "top", }; if (showPer) { label.formatter = '{c}%' } calcFields = analysisList.map(item => { let prop = showPer ? item.prop + '_per' : item.prop let obj = { name: prop, title: item.label } series.push({ tooltip: tooltipOption, label: label }) return obj }) let controlName = '' let datas = this.data.map((item) => { let obj = { ...item } for (let key in obj) { if (typeof (obj[key]) == 'string' && obj[key].includes('%')) { obj[key] = parseFloat(obj[key]) / 100 } else if (typeof (obj[key]) != 'string' && isNaN(obj[key])) { obj[key] = 0 } } return obj }) // 组合分组条件时，数据添加组合列 if (groupBy.includes(',')) { let keyArr = groupBy.split(','); datas = datas.map(item => { let label = [] for (let key of keyArr) { label.push(item[key]) } label = label.join(); item[groupBy] = label return item }) } controlName = this.chartType == "pie" ? "PieChart" : this.chartType == "bar" ? "BarChart" : this.chartType == "stack" ? "BarChart" : this.chartType == "line" ? "LineChart" : this.chartType == "area" ? "LineChart" : 'PieChart' // 区域图 let areaSeries = calcFields.map(item => { return { smooth: true, areaStyle: { normal: { color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: "rgba(30, 231, 231, 0.3)" }, { offset: 1, color: "rgba(30, 231, 231, 0.1)" }]), }, }, label: label, } }) // 饼图 let pieSeries = [] if (this.chartType == "pie") { let len = calcFields.length if (len > 4) { calcFields = calcFields.filter((item, index) => { return index < 4 }) } let formatter = showPer ? '{b}: {d}%' : '{b}: {c}' label = { normal: { show: true, formatter: formatter, position: 'outer', alignTo: 'labelLine' } } switch (len) { case 1: pieSeries = [{ label: label }]; break; case 2: pieSeries = [ { radius: [0, "50%"], center: ["25%", "50%"], label: label, }, { radius: [0, "50%"], center: ["75%", "50%"], label: label, }, ] break; case 3: pieSeries = [ { radius: [0, "50%"], center: ["25%", "50%"], label: label, }, { radius: [0, "35%"], center: ["75%", "30%"], label: label, }, { radius: [0, "35%"], center: ["75%", "70%"], label: label, }, ] break; case 4: pieSeries = [ { radius: [0, "35%"], center: ["25%", "30%"], label: label, }, { radius: [0, "35%"], center: ["25%", "70%"], label: label, }, { radius: [0, "35%"], center: ["75%", "30%"], label: label, }, { radius: [0, "35%"], center: ["75%", "70%"], label: label, }, ] break; default: pieSeries = [ { radius: [0, "35%"], center: ["25%", "30%"], label: label, }, { radius: [0, "35%"], center: ["25%", "70%"], label: label, }, { radius: [0, "35%"], center: ["75%", "30%"], label: label, }, { radius: [0, "35%"], center: ["75%", "70%"], label: label, }, ] break; } } /// 叠加柱图 let stackSeries = calcFields.map(item => { label.position = 'inside' return { stack: '总量', label: label, } }) let yAxis = { axisLabel: { formatter: function (value, index) { return value + '%'; } } } let xAxis = [{ inverse: this.settingForm.xInverse, //type: 'category', //axisLabel: { interval: 0, rotate: 30 } }] let legend = { show: this.settingForm.legend != 1, orient: this.settingForm.legend == 3 ? 'vertical' : 'horizontal', } if (this.settingForm.legend == 3) { legend.top = '20%' legend.right = '3%' } else { delete legend.top delete legend.right } let tooltip = { show: true, formatter: this.settingForm.tipStyle == 1 ? '{a}: {c}' : this.settingForm.tipStyle == 2 ? '{a}: {d}' : this.settingForm.tipStyle == 3 ? '{a}: {c}<br />{b}' : '{a}: {c}' } let title = { show: this.settingForm.title, text: this.settingForm.mainTitle, subtext: this.settingForm.subTitle, } let option = { legend: legend, toolbox: { show: this.settingForm.toolbox, feature: { dataZoom: { yAxisIndex: "none", title: { zoom: '区域缩放', back: '区域缩放还原' } }, dataView: { readOnly: false, title: '数据视图' }, restore: { title: '还原' }, saveAsImage: { show: true, title: '保存为图片' } } }, tooltip: tooltip, title: title, series: this.chartType == "area" ? areaSeries : this.chartType == "stack" ? stackSeries : this.chartType == "pie" ? pieSeries : series } if (this.chartType != "pie") { option.xAxis = xAxis; } if (showPer && this.chartType != "pie") { option.yAxis = yAxis } // 深度合并自定义图表option JsonUtil.deepMerge(option, this.getExtendChartConfByType(this.chartType)) const conf = { controlName: controlName, controlId: "chart_controlid", height: "100%", isGroupData: true, groupBy: groupBy, datas: datas, calcFields: calcFields, option: option, events: { click(row) { let _this = this.$parent.$parent.$parent; _this.currentObj = row.data _this.currentObj.prop = _this.curGroupField; if (_this.perspective) { var index = -1 _this.deepArr.forEach((item, i) => { if (item.prop == _this.curGroupField) { index = i } }) if (index > -1 && index < _this.deepArr.length - 1) { _this.analysisFieldsVisible = false _this.curIndex = _this.curIndex + 1 _this.currentObj = _this.deepArr[_this.curIndex]; _this.data = _this.currentObj.data _this.curGroupField = _this.currentObj.prop; } else { _this.analysisChartConf.datas = _this.deepAnalysisFields _this.analysisFieldsVisible = true } } else { _this.analysisChartConf.datas = _this.deepAnalysisFields _this.analysisFieldsVisible = true } _this.superposition = false } } }; return conf }, // 深度分析字段列表 deepAnalysisFields() { let fields = this.groupFields if (fields && fields.length == 0) { return [] } let analysisFields = fields.map((item) => { item.value = 1 return item }); // 排除已经统计的分析列 if (this.deepArr && this.deepArr.length > 0) { let arrnew = this.deepArr.slice(0, this.curIndex + 1).map((item) => { return item.prop }); // 多条件的分组拆开排除 arrnew.forEach(item => { if (item.includes(',')) { arrnew.concat(item.split(',')) } }) analysisFields = analysisFields.filter(item => { return arrnew.indexOf(item.prop) < 0 }) } // 添加详情 analysisFields.push( { prop: 'detail', label: this.$t && this.$t("hivuiSam_btn_detail") \|\| '详情', value: 1 } ) return analysisFields }, // 查询字段 queryFields() { let queryFields = [] let fields = this.conf && this.conf.queryFields if (!fields \|\| fields.length == 0) { queryFields = [] } else { queryFields = fields.map(item => { let obj = {} obj.prop = item.prop; obj.label = item.label; if (item.props && item.props.lookup) { let model = item.props.lookup if (item.element === 'hi-select-grid') { var columns = [] if (model && model.columns && model.columns.length) { columns = model.columns.map(item => { item.prop = item.name return item }) } let table = model.tableprops \|\| {} table['columns'] = columns obj.lookup = { type: "data", openstyle: 'selectgrid', bindField: item.prop, lookSelectGrid: { width: 1200, height: 600, table: table, bindField: item.prop }, } if (model && model.sourceDatas) { obj.lookup.lookSelectGrid['tableData'] = model && model.sourceDatas } if (model && model.modelFile) { obj.lookup['lookDataset'] = { modelFilePath: this.conf.dataset.controlId, showSearchField: true } } obj.dbtype = 'dbString' } else if (item.element === 'hi-data-select') { var columns = [] if (model && model.columns && model.columns.length) { columns = model.columns.map(item => { item.prop = item.name return item }) } let queryOptionFields = model.queryOption && model.queryOption.fields let store = model.storeCfg \|\| model.sourceDsCfg let modelFilePath = store.modelFile let fields = store.fields if (!(queryOptionFields && queryOptionFields.length)) { return } let rows = queryOptionFields.map(item => { return { children: [ { prop: item.name, label: item.label } ] } }); let cols = queryOptionFields.map(item => { return { colWidth: 100 } }); let queryPanel = { rows: rows, cols: cols }; let tableColumn = model.columns.map(item => { return { prop: item.name, label: item.label } }) // var table = model.tableprops \|\| {} var table = { children: tableColumn, stripe: model.tableprops && model.tableprops.stripe \|\| false } let ds = { controlName: "HcDataset", controlId: modelFilePath, name: model.entityDs, modelFilePath: modelFilePath, _infcPagging: { pageSize: 10, pageNum: 1, returnCount: true }, _infcLoad: { autoActive: true, }, fields: fields, data: [], } obj.lookup = { type: "data", openstyle: 'dialog', birtModel: GridSingleSelect({ mainDataset: ds, hcQueryPanel: queryPanel, hcTable: table }), lookDataset: { modelFilePath: modelFilePath, // 数据模型路径 showSearchField: true }, lookDialog: { title: "", width: 900, height: 600, }, bindField: item.prop, sourceDsId: model.sourceDsId } obj.dbtype = 'dbString' } } // 时间方案 if (item.props && item.element == 'hi-time-scheme') { obj.dbtype = 'dbDatetime' obj.format = item.props.format obj.element = 'hi-time-scheme' obj.disabledEx = item.disabledEx obj.viewStyle = { viewStyleId: 'DATERANGE', type: item.props.rangeType, format: item.props.format } } return obj }) } return queryFields }, // 数据集字段 fields() { let fields = this.conf.dataset && this.conf.dataset.config.fields for (let key in this.queryFields) { let prop = this.queryFields[key].prop if (fields[prop] && fields[prop].lookup) { let lookup = Object.assign(fields[prop].lookup, this.queryFields[key].lookup) // 下拉枚举查找 if (lookup.label && lookup.returnFields) { for (let key in lookup.returnFields) { if (lookup.returnFields[key] == lookup.label && lookup.lookSelectGrid) { lookup.bindShowField = key lookup.lookSelectGrid.bindShowField = key } if (lookup.lookSelectGrid && lookup.lookSelectGrid.tableData) { let data = lookup.lookSelectGrid.tableData for (let i in data) { if (data[i][lookup.returnFields[key]]) { data[i][key] = data[i][lookup.returnFields[key]] } } } } } // 数据模型查找 if (lookup.fieldPair) { if (lookup.sourceDsId) { lookup.returnFields = lookup.fieldPair[lookup.sourceDsId].returnFields } else { let key = Object.keys(lookup.fieldPair)[0] lookup.returnFields = lookup.fieldPair[key].returnFields } } lookup.returnType = "single", fields[prop]['lookup'] = lookup } // 时间方案 if (fields[prop] && this.queryFields[key].element == 'hi-time-scheme') { let fd = this.queryFields[key] fields[prop].dbtype = 'dbDatetime' fields[prop].format = fd.format fields[prop].disabledEx = fd.disabledEx } } // 应用默认填充表达式 for (let key in fields) { if (fields[key].default && fields[key].default.exps) { fields[key].default['expr'] = fields[key].default.exps } } return fields }, // 数据集 dataset() { var dataset = {} if (this.conf && this.conf.dataset) { debugger let ds = this.conf.dataset dataset = { controlName: ds.controlName, controlId: ds.controlId, name: ds.name, modelFilePath: ds.modelFilePath, fields: this.fields, _infcLoad: Object.assign({ autoActive: false }, ds._infcLoad), _infcPagging: { returnCount: true, pageSize: 100, pageNum: 1 }, data: [], } } return dataset }, // 查询面板 birtModelRight() { let rows = this.queryFields.map(item => { return { children: [item], colspan: 12 } }) let cols = this.queryFields.map(item => { return { colWidth: 60 } }) const queryPanel = { rows: rows, cols: cols }; let hcQueryPanel = { controlName: "HcQueryPanel", controlId: "HcQueryPanel_sam", inline: false, dataset: this.dataset && this.dataset.controlId \|\| "dsSam", size: "small", hideBtn: true, style: "width: 100%;", children: [], }; Object.assign(hcQueryPanel, QueryStyleFactory.buildForm(queryPanel) \|\| {}); let me = this; let birtModelRight = { controlName: "BirtWorkBook", controlId: "BirtWorkBook_right", style: "border-bottom: 1px solid #eee;", showToolBar: false, children: [ { controlName: "BirtSheet", controlId: "BirtSheet_right", name: "sheet0", pageIndex: 0, dataSets: [{ controlName: "HcDataset", controlId: "dsScheme", name: "SysSchemeBizEntity", rowKey: "FGUID", modelFilePath: "/platf/scheme/entity/SysSchemeBizEntity.xml", _infcLoad: { autoActive: false, __zcQuery: true }, _infcPagging: { _isAddingPagging: false, pageSize: -1, }, fields: {}, data: [], }].concat(this.dataset ? this.dataset : []), children: [ { controlName: "BirtFormSheet", controlId: "BirtFormSheet_01", children: [hcQueryPanel] } ] } ], mounted: function () { setTimeout(() => { debugger let __pushStr = me.conf.__push; let pushParam; if (__pushStr) { pushParam = JSON.parse(decodeURIComponent(__pushStr)) } me.doCount(pushParam) }, 100); } }; return birtModelRight }, // 分组条件(统计字段) groupFields() { let groupFields = this.conf && cloneDeep(this.conf.groupFields) \|\| [] // 组合分组条件 if (this.curTransferVal && this.curTransferVal.length) { let obj = {} let curTransferLabel = this.curTransferVal.map(item => { for (var field of groupFields) { if (field.prop == item) { return field.label } } }) obj = { prop: this.curTransferVal.join(), label: curTransferLabel.join() } groupFields.push(obj) } return groupFields }, // 分析字段 analyseFields() { return this.conf && this.conf.analyseFields \|\| [] }, // 显示详情 showDetail() { return this.currentObj.prop == 'detail' }, // 执行叠加按钮 btnDisabled() { return !this.selectionData \|\| this.selectionData.length < 2 }, analyseList_title() { if (this.conf.analyseFields && this.conf.analyseFields.length && this.analyseListChecked) { let curField = this.conf.analyseFields.filter(item => { return item.prop == this.analyseListChecked })[0] return curField && curField.label \|\| '' } else { return '' } } }, watch: { conf: { deep: true, handler: function (val) { if (val && val.groupFields && !this.groupForm.prop) { this.groupForm.prop = val.groupFields[0] && val.groupFields[0].prop this.curGroupField = this.groupForm.prop } if (val && val.analyseFields && val.analyseFields.length) { this.analysisData = val.analyseFields.map(item => { let obj = { prop: item.prop, label: item.label, countField: item.label, tableColumn: true, tableColumnCount: true, chartColumn: true, chartColumnCount: true, } return obj }) } } }, }, data() { return { size: 'small', superposition: false, perspective: false, chartType: "table", groupForm: { prop: "" }, loading: false, currentPage: 1, pageSize: 100, pageSizes: [10, 20, 50, 100], total: 0, data: [], // 排序 sortArr: [], sortIndex: -1, sortType: '', // 分析列 analysisVisible: false, analysisData: [], tableColumnCheck: true, tableColumnCountCheck: true, chartColumnCheck: true, chartColumnCountCheck: true, // 分析字段 analysisFieldsVisible: false, analysisFieldsArr: [], analysisChartConf: { controlName: "PieChart", controlId: "chart_analysis", height: "100%", isGroupData: true, groupBy: "label", datas: [], calcFields: [ { name: "value", title: "" } ], option: { legend: { show: true } }, events: { click(row) { debugger; var _this = this.$parent.$parent; _this.analysisChartConf.datas = _this.deepAnalysisFields let data = JSON.parse(JSON.stringify(row.data)) delete data.emphasis // 删除当前分析以后的深度分析 _this.deepArr.splice(_this.curIndex + 1, _this.deepArr.length - _this.curIndex - 1) let obj = _this.deepArr[_this.deepArr.length - 1] if (_this.currentObj.name) { obj.selectVal = _this.currentObj.name } else { if (_this.currentObj.prop.includes(',')) { let selectVal = [] let arr = _this.currentObj.prop.split(',') selectVal = arr.map(item => { return _this.currentObj[item] }) obj.selectVal = selectVal.join() } else { obj.selectVal = _this.currentObj[_this.currentObj.prop] } } _this.$set(_this.deepArr, _this.curIndex, obj) _this.$set(_this.deepArr, _this.curIndex + 1, data) _this.curGroupField = data.prop; _this.currentObj = data; _this.curIndex = _this.curIndex + 1; _this.doQuery(); _this.analysisFieldsVisible = false; } } }, // 深度分析 deepArr: [], conf: {}, // 图表当前选中对象 currentObj: {}, // 当前分组字段 curGroupField: '', // 深度分析当前环节下标 curIndex: 0, exportLoading: false, // 穿梭框 transferVisible: false, curTransferVal: [], groupFieldsEdit: [], schemeLoading: false, havingForm: {}, // 分析记录 recordVisible: false, recordData: [], // 已勾选记录 selectionData: [], // 统计方案 schemeData: [], schemeVisible: false, // 是否监听 isMonitor: false, // 底部汇总数据 bottomSummary: {}, // 是否查询面板查询 isQueryModel: false, // 显示图表菜单 showChartMenu: false, showType: 'none', showAnalyseList: false, analyseListChecked: '', // 设置面板 activeName: 'condition', settingForm: { xInverse: false, toolbox: false, axisMarking: 1, legend: 2, tipStyle: 3, staField: 'none', title: false, mainTitle: '', subTitle: '', weekColumns: false, column: '', week: '', }, axisMarkOptions: [ { label: this.$t && this.$t("hivuiSam_axisMarkOptions_none") \|\| '不显示', value: 'none' }, { label: this.$t && this.$t("hivuiSam_axisMarkOptions_num") \|\| '显示值', value: 'num' }, { label: this.$t && this.$t("hivuiSam_axisMarkOptions_percent") \|\| '百分比', value: 'percent' }, ], legendOptions: [ { label: this.$t && this.$t("hivuiSam_legendOptions_1") \|\| '不显示', value: 1 }, { label: this.$t && this.$t("hivuiSam_legendOptions_2") \|\| '上边', value: 2 }, { label: this.$t && this.$t("hivuiSam_legendOptions_3") \|\| '右边', value: 3 }, ], tipStyleOptions: [ { label: this.$t && this.$t("hivuiSam_tipStyleOptions_1") \|\| '值', value: 1 }, { label: this.$t && this.$t("hivuiSam_tipStyleOptions_2") \|\| '百分比%', value: 2 }, { label: this.$t && this.$t("hivuiSam_tipStyleOptions_3") \|\| `值+分类`, value: 3 }, ], conditionPanel: this.$t && this.$t("hivuiSam_layout_conditionPanel") \|\| '条件面板', formGroup: this.$t && this.$t("hivuiSam_form_group") \|\| '分组条件', setPanel: this.$t && this.$t("hivuiSam_layout_setPanel") \|\| '设置面板', formXInverse: this.$t && this.$t("hivuiSam_form_xInverse") \|\| '横轴翻转', formToolbox: this.$t && this.$t("hivuiSam_form_toolbox") \|\| '显示工具条', formAxisMarking: this.$t && this.$t("hivuiSam_form_axisMarking") \|\| '轴标记', formLegend: this.$t && this.$t("hivuiSam_form_legend") \|\| '系列名', formTipStyle: this.$t && this.$t("hivuiSam_form_tipStyle") \|\| '提示风格', formStaField: this.$t && this.$t("hivuiSam_form_staField") \|\| '统计字段', formTitle: this.$t && this.$t("hivuiSam_form_title") \|\| '标题', formMainTitle: this.$t && this.$t("hivuiSam_form_mainTitle") \|\| '主标题', formSubTitle: this.$t && this.$t("hivuiSam_form_subTitle") \|\| '副标题', formWeekColumns: this.$t && this.$t("hivuiSam_form_weekColumns") \|\| '周栏', formColumn: this.$t && this.$t("hivuiSam_form_column") \|\| '栏数', formWeek: this.$t && this.$t("hivuiSam_form_week") \|\| '每栏周期', labelNone: this.$t && this.$t("hivuiSam_label_none") \|\| '不显示', countFieldLabel: this.$t && this.$t("hivuiSam_table_countField") \|\| '统计字段', tableColumnLabel: this.$t && this.$t("hivuiSam_table_tableColumn") \|\| '网格列', tableColumnCountLabel: this.$t && this.$t("hivuiSam_table_tableColumnCount") \|\| '网格合计列', chartColumnLabel: this.$t && this.$t("hivuiSam_table_chartColumn") \|\| '图表列', chartColumnCountLabel: this.$t && this.$t("hivuiSam_table_chartColumnCount") \|\| '图表列汇总', operateLabel: this.$t && this.$t("hivuiSam_table_operate") \|\| '操作', upLabel: this.$t && this.$t("hivuiSam_btn_up") \|\| '上移', downLabel: this.$t && this.$t("hivuiSam_btn_down") \|\| '下移', schemeLabel: this.$t && this.$t("hivuiSam_table_scheme") \|\| '方案名称', abbreviationLabel: this.$t && this.$t("hivuiSam_table_abbreviation") \|\| '缩写', editLabel: this.$t && this.$t("hivuiSam_btn_edit") \|\| '编辑', confirmLabel: this.$t && this.$t("hivuiSam_btn_confirm") \|\| '确定', removeLabel: this.$t && this.$t("hivuiSam_btn_remove") \|\| '删除', executeOverlayLabel: this.$t && this.$t("hivuiSam_btn_executeOverlay") \|\| '执行叠加', analysisRecordLabel: this.$t && this.$t("hivuiSam_btn_analysisRecord") \|\| '分析记录', schemeListLabel: this.$t && this.$t("hivuiSam_btn_schemeList") \|\| '方案列表', panelTitle: this.$t && this.$t("hivuiSam_layout_panel") \|\| '面板', } }, updated() { this.$nextTick(() => { this.$refs["table"] && this.$refs["table"].doLayout(); }); }, methods: { // 根据图表类型获取图表扩展配置 getExtendChartConfByType(type) { debugger var chartOptions = this.conf.chartOptions; var extendOption = {} if (chartOptions.length > 0) { chartOptions.forEach(item => { if (item.chartName == "basic" \|\| item.chartName == type) { JsonUtil.deepMerge(extendOption, item.chartOption) } }) } return extendOption }, // 排序 sortClick(val) { this.sortIndex = val this.doQuery(); }, sortDown() { this.sortType = 'desc' }, sortUp() { this.sortType = 'asc' }, // 前进 goCommand(index) { this.curIndex = index; this.currentObj = this.deepArr[index]; this.curGroupField = this.currentObj.prop; this.data = this.currentObj.data }, goClick: debounce(function () { if (this.curIndex < this.deepArr.length - 1) { this.curIndex = this.curIndex + 1; this.currentObj = this.deepArr[this.curIndex]; this.curGroupField = this.currentObj.prop; this.data = this.currentObj.data } }, 500), // 后退 backCommand(val) { this.curIndex = val this.currentObj = this.deepArr[val]; this.curGroupField = this.currentObj.prop; this.data = this.currentObj.data }, backClick: debounce(function () { if (this.curIndex > 0) { this.curIndex = this.curIndex - 1 this.currentObj = this.deepArr[this.curIndex]; this.curGroupField = this.currentObj.prop; this.data = this.currentObj.data } }, 500), // 深度分析 breadcrumbClick(val) { this.curGroupField = val let arrnew = this.deepArr.map(item => { return item.prop }) this.curIndex = arrnew.indexOf(val) this.currentObj = this.deepArr[this.curIndex]; // 数据替换成缓存的数据 this.data = this.currentObj.data }, // 点击表格 rowDblclick(row) { this.currentObj = row this.currentObj.prop = this.curGroupField; this.superposition = false if (this.perspective) { var index = -1 this.deepArr.forEach((item, i) => { if (item.prop == this.curGroupField) { index = i } }) if (index > -1 && index < this.deepArr.length - 1) { this.analysisFieldsVisible = false this.curIndex = this.curIndex + 1 this.currentObj = this.deepArr[this.curIndex]; this.data = this.currentObj.data this.curGroupField = this.currentObj.prop; } else { this.analysisChartConf.datas = this.deepAnalysisFields this.analysisFieldsVisible = true } } else { this.analysisChartConf.datas = this.deepAnalysisFields this.analysisFieldsVisible = true } }, // 点击查询 doCount(param) { debugger; // 叠加状态下不执行查询操作 if (this.superposition) { return } // 监听数据集 if (this.dataset) { let ds = this.$refs.BirtWorkBook_right.dataset[this.dataset.controlId] // 补充下推参数 if (param) { if (param.target) { ds.setPushQueryCdion({ __body: param.target.ps }) } else { ds.setPushQueryCdion(param) } } if (!this.isMonitor) { ds && ds.on("afterLoadData", this.afterLoadData); this.isMonitor = true } this.loading = true; let prop = this.groupForm.prop; let fields = this.groupFields.map(item => { return item.prop }) this.curGroupField = prop; let index = fields.indexOf(prop) if (this.deepArr.length) { // 如果切换了分组条件，清空深度分析 if (this.deepArr[0] && this.deepArr[0].prop !== prop) { this.deepArr = [] this.currentObj = this.groupFields[index] this.recordData = [] } else { this.currentObj = this.deepArr[0] } } this.currentPage = 1 let queryModel = ds.getQueryModel() this.doQuery(queryModel); // 添加分析记录 let obj = {} if (Object.keys(queryModel).length === 0) { obj = { id: 'empty', name: this.$t && this.$t("hivuiSam_name_empty") \|\| '空条件', prop: this.groupForm.prop, } } else { let keyArr = []; let labelArr = []; for (let key in queryModel) { if (queryModel[key] \|\| queryModel[key] === 0) { keyArr.push(key); // let arr = this.queryFields.filter(item =>{ // return item.prop == key // }) labelArr.push(queryModel[key]); } }; if (keyArr.length && labelArr.length) { obj = { id: keyArr.join() + '_' + labelArr.join(), name: labelArr.join(), prop: this.groupForm.prop, } } else { obj = { id: 'empty', name: this.$t && this.$t("hivuiSam_name_empty") \|\| '空条件', prop: this.groupForm.prop, } } } // 判断分析记录中是否含有此条件，有则跳过，无则添加 const ids = this.recordData.map(value => value.id); if (!ids.includes(obj.id)) { this.isQueryModel = true let simple = this.recordData.length + 1; obj.simple = simple obj.isEdit = false this.recordData.push(obj); } else { this.isQueryModel = false } // 当前分组加入深度分析 if (index < 0) { this.$message.error('当前分组条件不在分组字段中，请重新配置') } else { this.$set(this.deepArr, 0, this.groupFields[index]) this.curIndex = 0 }; } }, // 网格列格式化函数 formatter(row, column, cellValue, index) { let fn = column.property; return this.formatValue(cellValue, fn) }, // 根据字段配置输出格式化值 formatValue(cellValue, fn) { let format = this.fields && this.fields[fn] && this.fields[fn].format; if (format) { // 空值处理 if (cellValue == null \|\| cellValue === '' \|\| isNaN(Number(cellValue))) { const zeroPart = format.replace(/[^\d.,]/g, '').replace(/0+/g, '0'); return format.replace(/[0-9,.]+/, zeroPart); } const num = Number(cellValue); // 1. 提取货币符号（￥ $ € 等） const symbol = format.replace(/[^^\$\￥¥€£]/g, '').trim(); // 2. 自动识别小数位数（根据格式小数点后面有几位） const precision = format.includes('.') ? (format.split('.')[1].match(/0/g) \|\| []).length : 0; // 3. 四舍五入指定位数 let fixed = num.toFixed(precision); // 4. 添加千分位 fixed = fixed.replace(/\B(?=(\d{3})+(?!\d))/g, ','); // 5. 拼接符号（如果格式里有符号就带上） return symbol ? symbol + fixed : fixed; } return cellValue; }, afterLoadData(datas) { debugger let newData = datas let ds = this.$refs.BirtWorkBook_right.dataset[this.dataset.controlId] if (datas && datas.length && this.curGroupField != 'detail') { // newData = datas.map(item => { // return ds && ds.getFormatRecd(item) // }) // 添加百分比数据 newData = newData.map(data => { for (let field of this.analyseFields) { let prop = field.prop let percent = prop + '_per' let sum = 0 const values = datas.map(item => Number(item[prop])); if (!values.every(value => isNaN(value))) { sum = values.reduce((prev, curr) => { const value = Number(curr); if (!isNaN(value)) { return prev + curr; } else { return prev; } }, 0); } if (sum && sum > 0) { data[percent] = Number((data[prop] / sum * 100).toFixed(2)) } else { data[percent] = 0 } } return data }) } this.data = newData // 缓存数据 if (this.deepArr && this.deepArr.length > 0) { this.deepArr[this.curIndex].data = newData; } else { this.deepArr = [newData] } // 总条数 this.total = ds._infcPagging.recordCount \|\| this.total; // 底部汇总数据 this.bottomSummary = ds.getBottomSummeryRecd(); // 添加分析记录 if (!this.isQueryModel) return this.recordData[this.recordData.length - 1].data = datas }, // 查询方法 doQuery(model) { debugger let ds = this.$refs.BirtWorkBook_right.dataset[this.dataset.controlId] if (this.showDetail) { ds._infcPagging = { _isPagging: true, pageSize: this.pageSize, pageNum: this.currentPage, returnCount: true }; ds._infcStat = {} ds._infcSort = {} } else { ds._infcPagging = { _isPagging: true, pageSize: this.pageSize, pageNum: this.currentPage, returnCount: true }; ds._infcStat = { isGroupData: true, groupBy: this.curGroupField, __bottomSummary: true } if (this.sortIndex > -1) { let obj = this.sortArr[this.sortIndex] ds._infcSort.orderBy = [{ name: obj.prop, desc: obj.label, type: this.sortType \|\| 'desc' }] } else { ds._infcSort.orderBy = [] } if (this.havingForm) { let _infcHaving = {}; for (let item in this.havingForm) { let obj = JSON.parse(JSON.stringify(this.havingForm[item])) let val = obj.value let val2 = obj.value2 if (val === undefined && val === undefined) { } else if ((val \|\| val === 0) && (val2 \|\| val2 === 0)) { _infcHaving[item] = obj } else { if (obj.sign == 'inRange') { obj.sign = 'lteq' } else { obj.sign = 'gt' } _infcHaving[item] = obj } } ds._infcHaving = _infcHaving } } if (model) { ds.setQueryModel(model) ds._infcLoad.additionalModel = {}; } else if (this.deepArr && this.deepArr.length > 0) { let queryModel = {} this.deepArr.forEach(item => { if (item.prop && item.selectVal) { if (!item.prop.includes(",")) { queryModel[item.prop] = item.selectVal } else { let arr = item.prop.split(',') arr.forEach((it, i) => { queryModel[it] = item.selectVal && item.selectVal.split(',')[i] }) } } }) ds.setAdditionalModel(queryModel) } else { ds._infcLoad.additionalModel = {}; ds._infcLoad.queryModel = {} } ds.query(); this.loading = false; }, // 重置 reset() { this.$refs.groupForm.resetFields(); this.$refs.havingForm.resetFields(); this.havingForm = JSON.parse(JSON.stringify(this.conf.havingForm)); this.curTransferVal = [] this.groupForm.prop = this.groupFields[0] && this.groupFields[0].prop; var queryPanel = this.$refs.BirtWorkBook_right.$children[0].$children[0].$children[0].$children[0].$children[0].$children[0]; queryPanel.reset(); let ds = this.$refs.BirtWorkBook_right.dataset[this.dataset.controlId] ds._infcLoad.queryModel = {} }, handleSizeChange(val) { this.pageSize = val this.doQuery() }, handleCurrentChange(val) { this.currentPage = val this.doQuery() }, // 切换图表 chartTypeChange(command) { this.chartType = command; }, // 打开分析列 analysisClick() { this.analysisVisible = true }, // 分析列全选 handelCheckAll(val) { let _this = this this.analysisData = this.analysisData.map(item => { if (val == 'tableColumn') { item.tableColumn = _this.tableColumnCheck } if (val == 'tableColumnCount') { item.tableColumnCount = _this.tableColumnCountCheck } if (val == 'chartColumn') { item.chartColumn = _this.chartColumnCheck } if (val == 'chartColumnCount') { item.chartColumnCount = _this.chartColumnCountCheck } return item }) }, // 分析列上移 columnUp(index, row) { let arr = this.analysisData if (index > 0) { arr.splice(index - 1, 1, ...arr.splice(index, 1, arr[index - 1])); } }, columnDown(index, row) { let arr = this.analysisData if (index < arr.length) { arr.splice(index, 1, ...arr.splice(index + 1, 1, arr[index])); }; }, // 刷新 refresh() { this.doQuery(); this.$refs.chartConf && this.$refs.chartConf.refreshChart(); }, // 导出 exportExcel() { let param = { pageNum: -1, pageSize: -1, __slaveExport: false, }; let __body = {}; let ds = this.$refs.BirtWorkBook_right.dataset[this.dataset.controlId] var cdion = ds.lastLoadCdion console.log('cdion', cdion) if (cdion) { __body['queryCdions'] = JSON.parse(cdion); } if (this.curGroupField !== 'detail') { __body['groupBy'] = this.curGroupField } param['modelFilePath'] = ds['modelFilePath']; param['__funcpath'] = ds['__funcpath']; param.__body = __body let sheetStyle = {} let cells = [] let columns = [] this.tableColumns.forEach(item => { cells.push({ title: item.label, colspan: 1, rowspan: 1 }) columns.push({ field: item.prop, width: 170 }) }); sheetStyle = { name: '统计分析', titleRows: [ { cells: cells } ], columns: columns } param.__sheetStyle = sheetStyle var time = new Date().getTime() var title = `统计分析${time}` var data = { title: title, __sheetDatas: JSON.stringify([param]) } var url = this.$HI.exportUrl this.exportLoading = true this.$HI.request.post(url, data).then((res) => { console.log('res', res) this.exportLoading = false if (res.status == 200) { let token = getToken(); let pn = window.HIVUI_SETTING && window.HIVUI_SETTING.projectName var url = this.$HI.download + `?path=${res.dataPack.path}&access_token=${token}&pn=${pn}` url = url.replace(/\\/g, "/") const a = document.createElement('a') //创建a标签 a.style.display = 'none' a.href = url // 指定下载链接 a.download = title //指定下载文件名 a.click() //触发下载 } }).catch((e) => { this.exportLoading = false }) }, // 打开穿梭框 showtransfer() { this.groupFieldsEdit = JSON.parse(JSON.stringify(this.curTransferVal)) this.transferVisible = true }, transferConfirm() { if (this.groupFieldsEdit && this.groupFieldsEdit.length > 1) { this.curTransferVal = JSON.parse(JSON.stringify(this.groupFieldsEdit)) this.groupForm.prop = this.curTransferVal.join(); this.curGroupField = this.groupForm.prop; this.transferVisible = false } else { this.$message.error("该分组选项已存在") } }, transferClose() { this.transferVisible = false this.groupFieldsEdit = JSON.parse(JSON.stringify(this.curTransferVal)) }, transferUp(option) { let arr = this.groupFieldsEdit let index = this.groupFieldsEdit.indexOf(option.prop) if (index > 0) { arr.splice(index - 1, 1, ...arr.splice(index, 1, arr[index - 1])); } }, transferDown(option) { let arr = this.groupFieldsEdit let index = this.groupFieldsEdit.indexOf(option.prop) if (index < arr.length) { arr.splice(index, 1, ...arr.splice(index + 1, 1, arr[index])); }; }, // 合计列 getSummaries(parma) { const { columns, data } = parma; const sums = []; // let arr = this.analyseFields.map(item =>{ // return item.prop // }) debugger columns.forEach((column, index) => { let show = true this.analysisData.forEach(item => { if (item.prop == column.property) { show = item.tableColumnCount } }) // if(arr.includes(column.property) && show){ // let values = data.map(item => Number(item[column.property])); // sums[index] = values.reduce((prev, curr) => { // const value = Number(curr); // if (!isNaN(value)) { // return prev + curr; // } else { // return prev; // } // }, 0); let fn = column.property if (this.bottomSummary && this.bottomSummary[fn] != undefined && show) { sums[index] = this.bottomSummary[fn] sums[index] = Math.round(sums[index] * 100) / 100; sums[index] = this.formatValue(sums[index], fn) } else { sums[index] = ''; } }) sums[0] = this.$t && this.$t("hivuiSam_name_sum") \|\| '汇总' return sums; }, // 分析列表 handleEdit(index, row) { row.isEdit = true this.recordData[index] = row }, handleConfirm(index, row) { row.isEdit = false this.recordData[index] = row }, handleDelete(index, row) { this.recordData.splice(index, 1) }, // 执行叠加 doClick() { this.superposition = true this.recordVisible = false this.curGroupField = this.recordData[0].prop this.curIndex = 0 }, // 分析记录勾选 handleSelectionChange(row) { this.selectionData = row }, // 双击 recordDblClick(row) { this.curIndex = 0 this.data = row.data this.deepArr[0].data = row.data this.currentObj.data = row.data }, signChange(val, sign) { this.havingForm[val]['sign'] = sign }, // 统计方案 schemeRowClick(row) { if (row.FCONTENT) { this.reset(); let conf = JSON.parse(row.FCONTENT); if (conf.deepList) { this.deepArr = conf.deepList } if (conf.curGroupField) { this.curGroupField = conf.curGroupField } if (conf.queryModel) { let ds = this.$refs.BirtWorkBook_right.dataset[this.dataset.controlId] ds.setQueryModel(conf.queryModel) let queryPanel = this.$refs.BirtWorkBook_right.$children[0].$children[0].$children[0].$children[0].$children[0].$children[0]; queryPanel.bindModel = conf.queryModel } if (conf.groupForm) { this.groupForm = conf.groupForm } if (conf.havingForm) { this.havingForm = conf.havingForm } if (conf.sortIndex) { this.sortIndex = conf.sortIndex } if (conf.sortType) { this.sortType = conf.sortType } if (conf.data) { this.data = conf.data } if (conf.currentObj) { this.currentObj = conf.currentObj } if (conf.total) { this.total = conf.total } if (conf.curTransferVal) { this.curTransferVal = conf.curTransferVal } if (conf.perspective) { this.perspective = conf.perspective } else { this.perspective = false } if (conf.superposition) { this.superposition = conf.superposition } else { this.superposition = false } } this.schemeVisible = false this.doCount() }, showSchemeData() { let url = '/data/query'; let funcurl = window.location.pathname \|\| '' let queryCdions = { join: 'and', items: [ { sign: "eq", name: "FFUNCURL", dataType: "string", value: funcurl, enable: true, }, ], } var data = { modelFilePath: "/platf/scheme/entity/SysSchemeBizEntity.xml", pageSize: -1, __body: JSON.stringify({ queryCdions: queryCdions }), __bottomSummary: false, // __funcpath: "/eap5csxm/KongJianCeShi/TongJiFenXi/TongJiFenXiCeShi/func/TongJiFenXiRenYuan.func", __zcQuery: true } this.$HI.request.post(url, data).then((res) => { this.schemeData = res.dataPack && res.dataPack.rows }).catch(e => { console.error(e) }) }, // 保存方案 saveScheme() { let ds = this.$refs.BirtWorkBook_right.dataset[this.dataset.controlId] let content = { deepList: this.deepArr, curGroupField: this.curGroupField, queryModel: ds.getQueryModel(), havingForm: this.havingForm, groupForm: this.groupForm, sortIndex: this.sortIndex, sortType: this.sortType, data: this.data, currentObj: this.currentObj, perspective: this.perspective, superposition: this.superposition, total: this.total, curTransferVal: this.curTransferVal } let data = { pushType: "add", dataset: "dsScheme", pushAddType: "map", data: [{ FFUNCURL: window.location.pathname \|\| window.location.href, FCONTENT: JSON.stringify(content), }] } this.openByPath('/platf/scheme/func/add.func', { __push: data, __funcpath: '/platf/scheme/func/add.func' }, { title: '方案保存' }) }, handleSchemeDelete(index, data) { let url = '/data/save' let removeData = { ...data, $state: "rsDelete", $old: data } let body = [{ modelFilePath: "/platf/scheme/entity/SysSchemeBizEntity.xml", data: [removeData] }] let rData = { __body: JSON.stringify(body) } this.$HI.request.post(url, rData).then((res) => { this.$message.success('方案删除成功') this.schemeData.splice(index, 1) }).catch(e => { this.$message.error(e) }) }, // 保存方案下推 openByPath(path, query, { title, target } = {}) { query = query \|\| {}; let queryT = {} Object.assign(queryT, query \|\| {}); if (title) queryT.__title = title; if (target) { target = target === '_blank' ? (new Date()).valueOf() : target queryT.__target = target; } if (this.$router) { this.$router.push({ path, query: queryT }) } else { if (top.window.SysPage && top.window.SysPage.newPage) { top.window.SysPage.newPage(title, path, queryT, "post") } else { this.createForm(path, "_self", queryT.__push.data[0]) } } }, createForm(url, opentype, paramters) { //创建form表单 let me = this; let id = "samuuid" var formid = `${id}_form`; var temp_form = null; if (document.getElementById(formid)) { temp_form = document.getElementById(formid); temp_form.method = me.postType; temp_form.action = url; // for (var item in paramters) { // var inputObj = document.getElementById(`${id}_${item}`); // if (inputObj) { // inputObj.value = paramters[item]; // } // } } else { temp_form = document.createElement("form"); temp_form.id = `${id}_form`; temp_form.action = url; //如需打开新窗口，form的target属性要设置为'_blank' temp_form.target = opentype; //打开方式 temp_form.method = me.postType; temp_form.style.display = "none"; document.body.appendChild(temp_form); } //添加参数 for (var item in paramters) { var inputObj = document.getElementById(`${id}_${item}`); if (inputObj) { inputObj.value = paramters[item]; } else { var opt = document.createElement("input"); opt.type = "hidden"; opt.id = `${id}_${item}`; //opt.id= opt.name = item; opt.value = paramters[item]; temp_form.appendChild(opt); } } //提交数据 temp_form.submit(); }, // 选择显示数值还是百分比 onChangeShowType(type) { this.showType = this.showType == type ? 'none' : type }, // 右侧工具条显示列表选择显示不同分析字段的数据 changeShowAnalyseList(command) { this.analyseListChecked = command this.settingForm.staField = command if (command == 'none') { this.showAnalyseList = false } else { this.showAnalyseList = true } }, // 点击选择深度分析 analyseListOnClick(row, index) { let _this = this _this.currentObj = row _this.currentObj.prop = this.curGroupField if (_this.perspective) { var index = -1 _this.deepArr.forEach((item, i) => { if (item.prop == _this.curGroupField) { index = i } }) if (index > -1 && index < _this.deepArr.length - 1) { _this.analysisFieldsVisible = false _this.curIndex = _this.curIndex + 1 _this.currentObj = _this.deepArr[_this.curIndex]; _this.data = _this.currentObj.data _this.curGroupField = _this.currentObj.prop; } else { _this.analysisChartConf.datas = _this.deepAnalysisFields _this.analysisFieldsVisible = true } } else { _this.analysisChartConf.datas = _this.deepAnalysisFields _this.analysisFieldsVisible = true } _this.superposition = false } }, mounted() { debugger } }; </script> <style> .birtModelRight .el-main { padding: 5px !important; } .birtModelRight table.zhc-birt-data-list { table-layout: auto !important; /* border-collapse: initial !important; / / border-spacing: revert !important; / } .el-transfer.sam .el-transfer-panel:nth-child(1) button { display: none; } .el-dropdown.disabled .el-button, .el-dropdown.disabled .el-button:hover { cursor: not-allowed; color: #C0C4CC; cursor: not-allowed; background-image: none; background-color: #FFF; border-color: #EBEEF5; } .tableHeader th, .tableHeader tr { background: linear-gradient(0deg, rgba(224, 240, 255, 1), rgba(240, 247, 255, 1)); } .el-form-item__label { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .recordPop { text-align: center; } .right-tabs { height: 100%; } .el-tabs--border-card .el-tabs__content { height: calc(100% - 56px); overflow: auto; } .el-tabs--border-card .el-tabs__content .el-tab-pane { height: 100%; } </style> <style lang="scss" scoped> .container { position: relative; display: flex; flex-direction: column; height: 100%; padding: 10px 20px 10px 20px; } .btn-toolbar { +* { margin-left: 10px; margin-right: 0; margin-bottom: 5px } } .el-dropdown-menu__item { min-width: 90px; } .center-content { height: 100%; width: 100%; padding: 10px; box-sizing: border-box; } .depth-analysis { display: flex; align-items: center; padding: 10px; } .el-breadcrumb__item a { cursor: pointer !important; } .deepActive { color: #06c; font-weight: 600; } .sortActive { color: rgb(33, 235, 141); font-weight: 600; } >>>.el-dropdown-menu__item:focus, .el-dropdown-menu__item:not(.is-disabled):hover { background: initial; color: initial; } .el-dropdown-menu__item i { font-weight: 600; margin: 0 0 0 5px; } .el-dropdown-menu__item i:hover { color: rgb(33, 235, 141); } .birtModelRight .el-main { padding: 5px !important; } .el-icon-edit { right: 30px; position: absolute; z-index: 1; line-height: 40px; cursor: pointer; } >>>.el-dropdown.disabled .el-button, >>>.el-dropdown.disabled .el-button:hover { cursor: not-allowed; color: #C0C4CC; cursor: not-allowed; background-image: none; background-color: #FFF; border-color: #EBEEF5; } .chart-tool { position: absolute; right: 10px; top: 5px; i { cursor: pointer; color: #06c; } .el-icon-close { color: #f0797f; } .el-icon-close:hover { color: #f50814; } .content { margin-top: 5px; display: flex; justify-content: space-around; align-items: center; width: 150px; height: 30px; line-height: 30px; border: 1px solid #d8d863; border-radius: 5px; background: rgba(237, 241, 244, 0.4); .iconfont { height: 20px; line-height: 12px; } .item { padding: 3px; border: 1px solid transparent; border-radius: 3px; } .item:hover, .item:active, .item.active { border-color: #08df5d; } } } .el-dropdown-menu__item.active { background-color: #ecf5ff; color: #66b1ff; } >>>.el-dropdown-menu__item:focus, .el-dropdown-menu__item:not(.is-disabled):hover { background-color: #ecf5ff; color: #66b1ff; } .analyseList { position: absolute; right: 10px; top: 45px; width: 150px; border: 1px solid #d8d863; background: #fff; .analyseList-title { border-bottom: 1px dotted #b5b5ad; color: #000; padding: 0 10px; } .analyseList-ul { list-style: none; margin: 0 !important; padding: 0 10px; li { display: flex; justify-content: space-between; align-items: center; a:hover { text-decoration: underline; color: #FF6600; } } } } </style> <template> <div class="container"> <!-- 工具条 --> <div class="btn-toolbar"> <!-- 后退 --> <el-dropdown split-button :size="size" :class="{ disabled: backDisabled }" :disabled="backDisabled" @command="backCommand" @click="backClick"> <i class="el-icon-back"></i>{{ $t && $t("hivuiSam_btn_back") \|\| '后退' }} <el-dropdown-menu slot="dropdown"> <el-dropdown-item v-for="(item, index) in deepArr" :key="item.prop" :command="index" v-if="index < curIndex">{{ item.label }}</el-dropdown-item> </el-dropdown-menu> </el-dropdown> <!-- 前进 --> <el-dropdown split-button :size="size" :class="{ disabled: goDisabled }" :disabled="goDisabled" @command="goCommand" @click="goClick"> <i class="el-icon-right"></i>{{ $t && $t("hivuiSam_btn_go") \|\| '前进' }} <el-dropdown-menu slot="dropdown"> <el-dropdown-item v-for="(item, index) in deepArr" :key="item.prop" :command="index" v-if="index > curIndex">{{ item.label }}</el-dropdown-item> </el-dropdown-menu> </el-dropdown> <!-- 排序 --> <el-dropdown split-button :size="size" class="sort" @command="sortClick"> <i class="el-icon-sort"></i>{{ $t && $t("hivuiSam_btn_sort") \|\| '排序' }} <el-dropdown-menu slot="dropdown"> <el-dropdown-item :command="-1">{{ $t && $t("hivuiSam_btn_noSort") \|\| '不排序' }}</el-dropdown-item> <el-dropdown-item v-for="(item, index) in sortArr" :key="item.prop" :command="index">{{ item.label }} <i class="el-icon-sort-down" :class="{ sortActive: index == sortIndex && sortType == 'desc' }" @click="sortDown"></i> <i class="el-icon-sort-up" :class="{ sortActive: index == sortIndex && sortType == 'asc' }" @click="sortUp"></i> </el-dropdown-item> </el-dropdown-menu> </el-dropdown> <!-- 列设置 --> <el-button icon="el-icon-setting" :size="size" @click="analysisClick">{{ $t && $t("hivuiSam_btn_columnSet") \|\| '列设置' }}</el-button> <!-- 图表 --> <el-dropdown :size="size" @command="chartTypeChange"> <el-button :size="size"> <i class="el-icon-s-data"></i> {{ $t && $t("hivuiSam_btn_chart") \|\| '图表' }}<i class="el-icon-arrow-down el-icon--right"></i> </el-button> <el-dropdown-menu slot="dropdown"> <el-dropdown-item :class="{ active: chartType == 'table' }" command="table">{{ $t && $t("hivuiSam_dropdown_table") \|\| '表格' }}</el-dropdown-item> <el-dropdown-item :class="{ active: chartType == 'pie' }" command="pie">{{ $t && $t("hivuiSam_dropdown_pie") \|\| '饼图' }}</el-dropdown-item> <el-dropdown-item :class="{ active: chartType == 'bar' }" command="bar">{{ $t && $t("hivuiSam_dropdown_bar") \|\| '柱图' }}</el-dropdown-item> <el-dropdown-item :class="{ active: chartType == 'line' }" command="line">{{ $t && $t("hivuiSam_dropdown_line") \|\| '线图' }}</el-dropdown-item> <el-dropdown-item :class="{ active: chartType == 'area' }" command="area">{{ $t && $t("hivuiSam_dropdown_area") \|\| '区域图' }}</el-dropdown-item> <el-dropdown-item :class="{ active: chartType == 'stack' }" command="stack">{{ $t && $t("hivuiSam_dropdown_stack") \|\| '叠加柱图' }}</el-dropdown-item> </el-dropdown-menu> </el-dropdown> <!-- 刷新 --> <el-button icon="el-icon-refresh" :size="size" @click="refresh">{{ $t && $t("hivuiSam_btn_refresh") \|\| '刷新' }}</el-button> <!-- 分析记录 --> <el-popover placement="bottom" popper-class="recordPop" v-model="recordVisible"> <el-table :data="recordData" @row-dblclick="recordDblClick" @selection-change="handleSelectionChange"> <el-table-column type="selection" width="55"> </el-table-column> <el-table-column min-width="150" prop="name" :label="schemeLabel"> <template slot-scope="scope"> <el-input v-if="scope.row && scope.row.isEdit" v-model="scope.row.name"></el-input> <span v-else>{{ scope.row.name }}</span> </template> </el-table-column> <el-table-column width="100" prop="simple" :label="abbreviationLabel"> <template slot-scope="scope"> <el-input v-model="scope.row.simple"></el-input> </template> </el-table-column> <el-table-column :label="operateLabel" width="150"> <template slot-scope="scope"> <el-button size="mini" type="text" v-if="!(scope.row && scope.row.isEdit)" @click="handleEdit(scope.$index, scope.row)">{{ editLabel }}</el-button> <el-button size="mini" type="text" v-else @click="handleConfirm(scope.$index, scope.row)">{{ confirmLabel }}</el-button> <el-button size="mini" type="text" style="color:red;" @click.stop="handleDelete(scope.$index, scope.row)">{{ removeLabel }}</el-button> </template> </el-table-column> </el-table> <el-button type="primary" size="mini" icon="el-icon-check" style="margin: 10px 0 0;" @click.stop="doClick" :disabled="btnDisabled">{{ executeOverlayLabel }}</el-button> <el-button slot="reference" icon="el-icon-edit-outline" :size="size">{{ analysisRecordLabel }}</el-button> </el-popover> <!-- 统计方案 --> <el-popover placement="bottom" v-model="schemeVisible"> <el-table size="mini" :data="schemeData" @row-click="schemeRowClick"> <el-table-column width="150" prop="FSCHEMENAME" :label="schemeListLabel"></el-table-column> <el-table-column :label="operateLabel" width="150"> <template slot-scope="scope"> <el-button size="mini" type="text" style="color:red;" @click.stop="handleSchemeDelete(scope.$index, scope.row)">{{ removeLabel }}</el-button> </template> </el-table-column> </el-table> <el-button slot="reference" icon="el-icon-edit-outline" :size="size" @click="showSchemeData">{{ $t && $t("hivuiSam_btn_schemeList") \|\| '方案列表' }}</el-button> </el-popover> <!-- 叠加 --> <el-checkbox v-model="superposition" border :size="size">{{ $t && $t("hivuiSam_check_overlay") \|\| '叠加' }}</el-checkbox> <!-- 透视 --> <el-checkbox v-model="perspective" border :size="size">{{ $t && $t("hivuiSam_check_directPerspective") \|\| '直接透视' }}</el-checkbox> <el-button icon="el-icon-download" :size="size" :disabled="this.data && this.data.length == 0" :loading="exportLoading" @click="exportExcel">{{ $t && $t("hivuiSam_btn_export") \|\| '导出excel' }}</el-button> <el-button icon="el-icon-save" :size="size" :loading="schemeLoading" @click="saveScheme">{{ $t && $t("hivuiSam_btn_schemeSave") \|\| '保存方案' }}</el-button> </div> <!-- 内容区 --> <hi-layout :is-fit="true" style="heiht: 100%;"> <!-- 右侧查询面板 --> <hi-layout-right size="300" :title="panelTitle"> <el-tabs v-model="activeName" class="right-tabs" type="border-card" @tab-click="handleClick"> <el-tab-pane :label="conditionPanel" name="condition"> <div style="height: calc( 100% - 342px );overflow: auto;border:none; min-height: 150px;"> <birt-work-book style="min-height: calc( 100% - 342px );" :conf="birtModelRight" :ref="birtModelRight.controlId" class="birtModelRight"></birt-work-book> </div> <el-divider>{{ $t && $t("hivuiSam_layout_summary") \|\| '汇总条件' }}</el-divider> <div style="height: 150px;overflow:auto;"> <el-form @submit.native.prevent ref="havingForm" style="padding: 10px 10px 0 0;" :model="havingForm" label-width="80px"> <el-form-item v-for="(val, name, index) in havingForm" :key="name"> <span slot="label" :title="val.label"> {{ val.label }} </span> <el-col :span="10"> <el-input type="number" v-model="havingForm[name].value" size="mini" controls-position="right" @change="handleChange" :min="0"></el-input> </el-col> <el-col class="line" :span="2">-</el-col> <el-col :span="10"> <el-input type="number" v-model="havingForm[name].value2" size="mini" controls-position="right" @change="handleChange" :min="0"></el-input> </el-col> <el-col class="line" :span="2" style="text-align:center;"> <el-button v-if="val.sign == 'inRange'" size="mini" type="text" @click="signChange(name, 'outRange')">{{ $t && $t("hivuiSam_btn_inRange") \|\| '内' }}</el-button> <el-button v-else size="mini" type="text" @click="signChange(name, 'inRange')">{{ $t && $t("hivuiSam_btn_outRange") \|\| '外' }}</el-button> </el-col> </el-form-item> </el-form> </div> <el-form @submit.native.prevent ref="groupForm" style="padding: 10px 10px 0 0;" :model="groupForm" label-width="80px"> <el-form-item :label="formGroup"> <i class="el-icon-edit" @click="showtransfer"></i> <el-select v-model="groupForm.prop" style="width: 100%;"> <el-option v-for="item in groupFields" :label="item.label" :value="item.prop" :key="item.prop"></el-option> </el-select> </el-form-item> <el-form-item> <el-button type="primary" size="mini" :loading="loading" @click="doCount">{{ $t && $t("hivuiSam_btn_doQuery") \|\| '执行查询' }}</el-button> <el-button size="mini" @click="reset">{{ $t && $t("hivuiSam_btn_reset") \|\| '重置' }}</el-button> </el-form-item> </el-form> </el-tab-pane> <el-tab-pane :label="setPanel" name="setting"> <el-form @submit.native.prevent ref="settingForm" style="padding: 10px 10px 0 0;" :model="settingForm" label-width="90px"> <el-form-item :label="formXInverse"> <el-checkbox v-model="settingForm.xInverse" label=""></el-checkbox> </el-form-item> <el-form-item :label="formToolbox"> <el-checkbox v-model="settingForm.toolbox" label=""></el-checkbox> </el-form-item> <el-form-item :label="formAxisMarking"> <el-select v-model="showType" style="width: 100%;"> <el-option v-for="item in axisMarkOptions" :label="item.label" :value="item.value" :key="item.value"></el-option> </el-select> </el-form-item> <el-form-item :label="formLegend"> <el-select v-model="settingForm.legend" style="width: 100%;"> <el-option v-for="item in legendOptions" :label="item.label" :value="item.value" :key="item.value"></el-option> </el-select> </el-form-item> <el-form-item :label="formTipStyle"> <el-select v-model="settingForm.tipStyle" style="width: 100%;"> <el-option v-for="item in tipStyleOptions" :label="item.label" :value="item.value" :key="item.value"></el-option> </el-select> </el-form-item> <el-form-item :label="formStaField"> <el-select v-model="settingForm.staField" style="width: 100%;" @change="changeShowAnalyseList"> <el-option :label="labelNone" value="none"></el-option> <el-option v-for="item in analyseFields" :label="item.label" :value="item.prop" :key="item.prop"></el-option> </el-select> </el-form-item> <el-form-item :label="formTitle"> <el-checkbox v-model="settingForm.title" label=""></el-checkbox> </el-form-item> <el-form-item v-if="settingForm.title" :label="formMainTitle"> <el-input v-model="settingForm.mainTitle" /> </el-form-item> <el-form-item v-if="settingForm.title" :label="formSubTitle"> <el-input v-model="settingForm.subTitle" /> </el-form-item> <el-form-item :label="formWeekColumns"> <el-checkbox v-model="settingForm.weekColumns" label=""></el-checkbox> </el-form-item> <el-form-item v-if="settingForm.weekColumns" :label="formColumn"> <el-input v-model="settingForm.column" /> </el-form-item> <el-form-item v-if="settingForm.weekColumns" :label="formWeek"> <el-input v-model="settingForm.week" /> </el-form-item> </el-form> </el-tab-pane> </el-tabs> </hi-layout-right> <!-- 图表展示区 --> <hi-layout-center style="heiht: 100%;"> <!-- 图表工具栏 --> <div class="chart-tool"> <i v-if="!showChartMenu" @click="showChartMenu = true" class="el-icon-menu" /> <div v-else class="content"> <i class="iconfont icon-num item" :class="{ active: showType == 'num' }" title="显示数值" @click="onChangeShowType('num')" /> <i class="iconfont icon-percentage item" :class="{ active: showType == 'percent' }" title="显示百分比" @click="onChangeShowType('percent')" /> <el-dropdown placement="bottom" @command="changeShowAnalyseList"> <i class="el-icon-s-unfold"></i> <el-dropdown-menu slot="dropdown"> <el-dropdown-item command="none">{{ $t && $t("hivuiSam_label_none") \|\| '不显示' }}</el-dropdown-item> <el-dropdown-item :class="{ active: analyseListChecked == item.prop }" v-for="item in analyseFields" :command="item.prop">{{ item.label }}</el-dropdown-item> </el-dropdown-menu> </el-dropdown> <i class="el-icon-close" @click="showChartMenu = false" /> </div> </div> <!-- 深度分析显示区 --> <div class="depth-analysis"> <span>{{ $t && $t('hivuiSam_label_depthAnalysis') \|\| '深度分析:' }}</span> <el-breadcrumb separator-class="el-icon-arrow-right" style="padding: 0 0 0 10px;"> <el-breadcrumb-item v-for="(item, index) in deepArr" :key="item.prop"> <span v-if="item.label.includes(',') && item.selectVal" @click="breadcrumbClick(item.prop)" :class="{ deepActive: index == curIndex }" style="cursor: pointer;"> <span v-for="(it, i) in item.label.split(',')"> {{ it }} <span style="color: rgb(255, 102, 0);margin-left:2px;" v-if="index < curIndex">{{ item.selectVal.split(',')[i] }}<span v-if="i < item.label.split(',').length - 1">,</span></span> </span> </span> <span v-else @click="breadcrumbClick(item.prop)" :class="{ deepActive: index == curIndex }" style="cursor: pointer;"> {{ item.label }} <span style="color: rgb(255, 102, 0);margin-left:2px;" v-if="index < curIndex">{{ item.selectVal }}</span> </span> </el-breadcrumb-item> </el-breadcrumb> </div> <div v-if="showDetail" style="height: calc( 100% - 80px )"> <el-table :data="data" ref="table" height="100%" border stripe :show-summary="showSummary" :summary-method="getSummaries" header-row-class-name="tableHeader" style="width: 100%"> <el-table-column v-if="showIndex" width=50 type="index"> </el-table-column> <el-table-column v-for="item in tableColumns" :key="item.prop" :prop="item.prop" :label="item.label" :formatter="formatter"> </el-table-column> </el-table> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination> </div> <div v-if="!showDetail && chartType == 'table'" style="height: calc( 100% - 80px )"> <el-table :data="data" ref="table" height="100%" border stripe @row-dblclick="rowDblclick" :show-summary="showSummary" :summary-method="getSummaries" header-row-class-name="tableHeader" style="width: 100%"> <el-table-column v-if="showIndex" width=50 type="index"> </el-table-column> <el-table-column v-for="item in tableColumns" :key="item.prop" :prop="item.prop" :label="item.label" :formatter="formatter"> </el-table-column> </el-table> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="pageSizes" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination> </div> <Pie-chart style="height: calc( 100% - 100px )" v-else-if="!showDetail && chartType == 'pie'" ref="chartConf" :conf="chartConf"></Pie-chart> <Bar-chart style="height: calc( 100% - 100px )" v-else-if="!showDetail && (chartType == 'bar' \|\| chartType == 'stack')" ref="chartConf" :conf="chartConf"></Bar-chart> <Line-chart style="height: calc( 100% - 100px )" v-else-if="!showDetail && chartType == 'line'" ref="chartConf" :conf="chartConf"></Line-chart> <Line-chart style="height: calc( 100% - 100px )" v-else-if="!showDetail && chartType == 'area'" ref="chartConf" :conf="chartConf"></Line-chart> <!-- 分析列表数据展示区 --> <div class="analyseList" v-show="showAnalyseList"> <div class="analyseList-title"> {{ analyseList_title }} </div> <ul class="analyseList-ul"> <li v-for="(item, index) in data"> <a @click="analyseListOnClick(item, index)">{{ item[curGroupField] }}</a> <span>{{ item[analyseListChecked + '_per'] + '%' }}</span> </li> </ul> </div> </hi-layout-center> </hi-layout> <!-- 分析列 --> <el-dialog :visible.sync="analysisVisible" :height="500"> <el-table :data="analysisData" size="small" :height="400"> <el-table-column prop="countField" :label="countFieldLabel"> </el-table-column> <el-table-column prop="tableColumn" :label="tableColumnLabel" align="center"> <template slot="header" slot-scope="{row}"> <el-checkbox v-model="tableColumnCheck" @change="handelCheckAll('tableColumn')" :label="tableColumnLabel"></el-checkbox> </template> <template slot-scope="{row}"> <el-checkbox v-model="row.tableColumn"></el-checkbox> </template> </el-table-column> <el-table-column prop="tableColumnCount" :label="tableColumnCountLabel" align="center"> <template slot="header" slot-scope="{row}"> <el-checkbox v-model="tableColumnCountCheck" @change="handelCheckAll('tableColumnCount')" :label="tableColumnCountLabel"></el-checkbox> </template> <template slot-scope="{row}"> <el-checkbox v-model="row.tableColumnCount"></el-checkbox> </template> </el-table-column> <el-table-column prop="chartColumn" :label="chartColumnLabel" align="center"> <template slot="header" slot-scope="{row}"> <el-checkbox v-model="chartColumnCheck" @change="handelCheckAll('chartColumn')" :label="chartColumnLabel"></el-checkbox> </template> <template slot-scope="{row}"> <el-checkbox v-model="row.chartColumn"></el-checkbox> </template> </el-table-column> <el-table-column prop="chartColumnCount" :label="chartColumnCountLabel" align="center"> <template slot="header" slot-scope="{row}"> <el-checkbox v-model="chartColumnCountCheck" @change="handelCheckAll('chartColumnCount')" :label="chartColumnCountLabel"></el-checkbox> </template> <template slot-scope="{row}"> <el-checkbox v-model="row.chartColumnCount"></el-checkbox> </template> </el-table-column> <el-table-column :label="operateLabel" width="150"> <template slot-scope="scope"> <el-button size="mini" type="text" @click="columnUp(scope.$index, scope.row)">{{ upLabel }}</el-button> <el-button size="mini" type="text" @click="columnDown(scope.$index, scope.row)">{{ downLabel }}</el-button> </template> </el-table-column> </el-table> <div slot="title" style="height: 20px;"></div> </el-dialog> <!-- 分析字段 --> <el-dialog :visible.sync="analysisFieldsVisible" :height="500"> <Pie-chart style="height: 400px;" ref="analysisChart" :conf="analysisChartConf"></Pie-chart> <div slot="title" style="height: 20px;"></div> </el-dialog> <!-- 穿梭框(修改分组字段) --> <el-dialog :visible.sync="transferVisible" :height="500" width="640px" center @close="transferClose"> <el-transfer class="sam" v-model="groupFieldsEdit" :data="conf.groupFields" :titles="[$t('hivuiSam_trans_source'), $t('hivuiSam_trans_target')]" target-order="push" :props="{ key: 'prop', label: 'label' }" style="width: 100%;padding: 20px;"> <span slot-scope="{ option }">{{ option.label }} <el-button style="margin-left: 10px;" icon="el-icon-top" type="primary" size="mini" circle @click.stop="transferUp(option)"></el-button> <el-button icon="el-icon-bottom" type="primary" size="mini" circle @click.stop="transferDown(option)"></el-button> </span> </el-transfer> <div slot="title" style="height: 20px;"></div> <span slot="footer" class="dialog-footer"> <el-button @click="transferClose" size="small">取消</el-button> <el-button type="primary" size="small" @click="transferConfirm">确定</el-button> </span> </el-dialog> </div> </template> <script> import { QueryStyleFactory } from "../templates/query-panel/QueryStyleFactory"; import { GridSingleSelect } from "../templates/GridSingleSelect"; import { getToken } from "../../utils/auth"; import "hi-ui/lib/hi-ui.css"; import { HiLayout, HiLayoutLeft, HiLayoutRight, HiLayoutTop, HiLayoutBottom, HiLayoutCenter } from "hi-ui"; import debounce from 'lodash/debounce' import cloneDeep from 'lodash/cloneDeep' export default { name: "AnalysisSam", props: { conf: { type: Object, } }, components: { HiLayout, HiLayoutLeft, HiLayoutRight, HiLayoutTop, HiLayoutBottom, HiLayoutCenter }, computed: { // 后退 backDisabled() { return this.curIndex === 0 }, // 前进 goDisabled() { return this.curIndex == this.deepArr.length - 1 }, // 表格列 tableColumns() { if (this.showDetail) { return this.dataFields } else { // 组合分组条件分成多个列 let list = this.curGroupField.split(',') // 获取当前分组列 let curGroupArr = this.groupFields.filter(item => { return list.includes(item.prop) }) let arr = [] // 执行叠加后，网格添加冗余字段 if (this.superposition) { let newFields = [] let dataList = [] for (let key in this.selectionData) { let selData = this.selectionData[key] let id = selData.id let simple = selData.simple for (let anaField of this.analyseFields) { let obj = {} obj.prop = anaField.prop + '-' + id; obj.label = anaField.label + '-' + simple; newFields.push(obj) } let keyAnalyse = this.analyseFields.map(item => { return item.prop }) let data = selData.data.map(sData => { for (let key of keyAnalyse) { sData[key + '-' + id] = sData[key] } return sData }) selData.data = data dataList = dataList.concat(data) } // 去重 let keyList = dataList.map(item => { return item[this.curGroupField] }) keyList = Array.from(new Set(keyList)) if (keyList && keyList.length) { let newData = [] for (let key in keyList) { let obj = { [this.curGroupField]: keyList[key] }; for (let field of newFields) { obj[field.prop] = 0 } for (let sData of this.selectionData) { // 组合分组 if (this.curGroupField.indexOf(',') > -1) { } else { let keyArr = sData.data.map(item => { return item[this.curGroupField] }) let i = keyArr.indexOf(keyList[key]) if (i > -1) { obj = { ...obj, ...sData.data[i] } } else { for (let j in sData.data[0]) { obj[j + '-' + sData.id] = 0 } } } } newData[key] = obj } this.data = newData } else { this.data = [] } arr = curGroupArr.concat(newFields) } else { // 当前分组列+分析列 arr = curGroupArr.concat(this.analyseFields) if (arr && arr.length) { this.sortArr = arr } } arr = arr.filter(item => { var show = true this.analysisData.forEach(data => { if (data.prop == item.prop) { show = data.tableColumn } }) return show }) return arr } }, showIndex() { return this.conf && this.conf.showIndex \|\| false }, // 网格是否显示合计行 showSummary() { let flag = false this.analysisData.some(item => { flag = item.tableColumnCount return flag }) return flag }, // 数据列 dataFields() { return this.conf && this.conf.dataFields \|\| [] }, // 图表配置 chartConf() { debugger let groupBy = this.curGroupField; let calcFields = [] // 系列 var series = []; const tooltipOption = { trigger: 'item', axisPointer: { type: 'shadow' }, } let analysisList = this.analysisData.filter(item => { return item.chartColumn }) let showLabel = this.showType == 'none' ? false : true let showPer = this.showType == 'percent' ? true : false let label = { show: showLabel, position: "top", }; if (showPer) { label.formatter = '{c}%' } calcFields = analysisList.map(item => { let prop = showPer ? item.prop + '_per' : item.prop let obj = { name: prop, title: item.label } series.push({ tooltip: tooltipOption, label: label }) return obj }) let controlName = '' let datas = this.data.map((item) => { let obj = { ...item } for (let key in obj) { if (typeof (obj[key]) == 'string' && obj[key].includes('%')) { obj[key] = parseFloat(obj[key]) / 100 } else if (typeof (obj[key]) != 'string' && isNaN(obj[key])) { obj[key] = 0 } } return obj }) // 组合分组条件时，数据添加组合列 if (groupBy.includes(',')) { let keyArr = groupBy.split(','); datas = datas.map(item => { let label = [] for (let key of keyArr) { label.push(item[key]) } label = label.join(); item[groupBy] = label return item }) } controlName = this.chartType == "pie" ? "PieChart" : this.chartType == "bar" ? "BarChart" : this.chartType == "stack" ? "BarChart" : this.chartType == "line" ? "LineChart" : this.chartType == "area" ? "LineChart" : 'PieChart' // 区域图 let areaSeries = calcFields.map(item => { return { smooth: true, areaStyle: { normal: { color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: "rgba(30, 231, 231, 0.3)" }, { offset: 1, color: "rgba(30, 231, 231, 0.1)" }]), }, }, label: label, } }) // 饼图 let pieSeries = [] if (this.chartType == "pie") { let len = calcFields.length if (len > 4) { calcFields = calcFields.filter((item, index) => { return index < 4 }) } let formatter = showPer ? '{b}: {d}%' : '{b}: {c}' label = { normal: { show: true, formatter: formatter, position: 'outer', alignTo: 'labelLine' } } switch (len) { case 1: pieSeries = [{ label: label }]; break; case 2: pieSeries = [ { radius: [0, "50%"], center: ["25%", "50%"], label: label, }, { radius: [0, "50%"], center: ["75%", "50%"], label: label, }, ] break; case 3: pieSeries = [ { radius: [0, "50%"], center: ["25%", "50%"], label: label, }, { radius: [0, "35%"], center: ["75%", "30%"], label: label, }, { radius: [0, "35%"], center: ["75%", "70%"], label: label, }, ] break; case 4: pieSeries = [ { radius: [0, "35%"], center: ["25%", "30%"], label: label, }, { radius: [0, "35%"], center: ["25%", "70%"], label: label, }, { radius: [0, "35%"], center: ["75%", "30%"], label: label, }, { radius: [0, "35%"], center: ["75%", "70%"], label: label, }, ] break; default: pieSeries = [ { radius: [0, "35%"], center: ["25%", "30%"], label: label, }, { radius: [0, "35%"], center: ["25%", "70%"], label: label, }, { radius: [0, "35%"], center: ["75%", "30%"], label: label, }, { radius: [0, "35%"], center: ["75%", "70%"], label: label, }, ] break; } } /// 叠加柱图 let stackSeries = calcFields.map(item => { label.position = 'inside' return { stack: '总量', label: label, } }) let yAxis = { axisLabel: { formatter: function (value, index) { return value + '%'; } } } let xAxis = [{ inverse: this.settingForm.xInverse }] let legend = { show: this.settingForm.legend != 1, orient: this.settingForm.legend == 3 ? 'vertical' : 'horizontal', } if (this.settingForm.legend == 3) { legend.top = '20%' legend.right = '3%' } else { delete legend.top delete legend.right } let tooltip = { show: true, formatter: this.settingForm.tipStyle == 1 ? '{a}: {c}' : this.settingForm.tipStyle == 2 ? '{a}: {d}' : this.settingForm.tipStyle == 3 ? '{a}: {c}<br />{b}' : '{a}: {c}' } let title = { show: this.settingForm.title, text: this.settingForm.mainTitle, subtext: this.settingForm.subTitle, } let option = { legend: legend, toolbox: { show: this.settingForm.toolbox, feature: { dataZoom: { yAxisIndex: "none", title: { zoom: '区域缩放', back: '区域缩放还原' } }, dataView: { readOnly: false, title: '数据视图' }, restore: { title: '还原' }, saveAsImage: { show: true, title: '保存为图片' } } }, tooltip: tooltip, title: title, series: this.chartType == "area" ? areaSeries : this.chartType == "stack" ? stackSeries : this.chartType == "pie" ? pieSeries : series } if (this.chartType != "pie") { option.xAxis = xAxis; } if (showPer && this.chartType != "pie") { option.yAxis = yAxis } const conf = { controlName: controlName, controlId: "chart_controlid", height: "100%", isGroupData: true, groupBy: groupBy, datas: datas, calcFields: calcFields, option: option, events: { click(row) { let _this = this.$parent.$parent.$parent; _this.currentObj = row.data _this.currentObj.prop = _this.curGroupField; if (_this.perspective) { var index = -1 _this.deepArr.forEach((item, i) => { if (item.prop == _this.curGroupField) { index = i } }) if (index > -1 && index < _this.deepArr.length - 1) { _this.analysisFieldsVisible = false _this.curIndex = _this.curIndex + 1 _this.currentObj = _this.deepArr[_this.curIndex]; _this.data = _this.currentObj.data _this.curGroupField = _this.currentObj.prop; } else { _this.analysisChartConf.datas = _this.deepAnalysisFields _this.analysisFieldsVisible = true } } else { _this.analysisChartConf.datas = _this.deepAnalysisFields _this.analysisFieldsVisible = true } _this.superposition = false } } }; return conf }, // 深度分析字段列表 deepAnalysisFields() { let fields = this.groupFields if (fields && fields.length == 0) { return [] } let analysisFields = fields.map((item) => { item.value = 1 return item }); // 排除已经统计的分析列 if (this.deepArr && this.deepArr.length > 0) { let arrnew = this.deepArr.slice(0, this.curIndex + 1).map((item) => { return item.prop }); // 多条件的分组拆开排除 arrnew.forEach(item => { if (item.includes(',')) { arrnew.concat(item.split(',')) } }) analysisFields = analysisFields.filter(item => { return arrnew.indexOf(item.prop) < 0 }) } // 添加详情 analysisFields.push( { prop: 'detail', label: this.$t && this.$t("hivuiSam_btn_detail") \|\| '详情', value: 1 } ) return analysisFields }, // 查询字段 queryFields() { let queryFields = [] let fields = this.conf && this.conf.queryFields if (!fields \|\| fields.length == 0) { queryFields = [] } else { queryFields = fields.map(item => { let obj = {} obj.prop = item.prop; obj.label = item.label; if (item.props && item.props.lookup) { let model = item.props.lookup if (item.element === 'hi-select-grid') { var columns = [] if (model && model.columns && model.columns.length) { columns = model.columns.map(item => { item.prop = item.name return item }) } let table = model.tableprops \|\| {} table['columns'] = columns obj.lookup = { type: "data", openstyle: 'selectgrid', bindField: item.prop, lookSelectGrid: { width: 1200, height: 600, table: table, bindField: item.prop }, } if (model && model.sourceDatas) { obj.lookup.lookSelectGrid['tableData'] = model && model.sourceDatas } if (model && model.modelFile) { obj.lookup['lookDataset'] = { modelFilePath: this.conf.dataset.controlId, showSearchField: true } } obj.dbtype = 'dbString' } else if (item.element === 'hi-data-select') { var columns = [] if (model && model.columns && model.columns.length) { columns = model.columns.map(item => { item.prop = item.name return item }) } let queryOptionFields = model.queryOption && model.queryOption.fields let store = model.storeCfg \|\| model.sourceDsCfg let modelFilePath = store.modelFile let fields = store.fields if (!(queryOptionFields && queryOptionFields.length)) { return } let rows = queryOptionFields.map(item => { return { children: [ { prop: item.name, label: item.label } ] } }); let cols = queryOptionFields.map(item => { return { colWidth: 100 } }); let queryPanel = { rows: rows, cols: cols }; let tableColumn = model.columns.map(item => { return { prop: item.name, label: item.label } }) // var table = model.tableprops \|\| {} var table = { children: tableColumn, stripe: model.tableprops && model.tableprops.stripe \|\| false } let ds = { controlName: "HcDataset", controlId: modelFilePath, name: model.entityDs, modelFilePath: modelFilePath, _infcPagging: { pageSize: 10, pageNum: 1, returnCount: true }, _infcLoad: { autoActive: true, }, fields: fields, data: [], } obj.lookup = { type: "data", openstyle: 'dialog', birtModel: GridSingleSelect({ mainDataset: ds, hcQueryPanel: queryPanel, hcTable: table }), lookDataset: { modelFilePath: modelFilePath, // 数据模型路径 showSearchField: true }, lookDialog: { title: "", width: 900, height: 600, }, bindField: item.prop, sourceDsId: model.sourceDsId } obj.dbtype = 'dbString' } } // 时间方案 if (item.props && item.element == 'hi-time-scheme') { obj.dbtype = 'dbDatetime' obj.format = item.props.format obj.element = 'hi-time-scheme' obj.disabledEx = item.disabledEx obj.viewStyle = { viewStyleId: 'DATERANGE', type: item.props.rangeType, format: item.props.format } } return obj }) } return queryFields }, // 数据集字段 fields() { let fields = this.conf.dataset && this.conf.dataset.config.fields for (let key in this.queryFields) { let prop = this.queryFields[key].prop if (fields[prop] && fields[prop].lookup) { let lookup = Object.assign(fields[prop].lookup, this.queryFields[key].lookup) // 下拉枚举查找 if (lookup.label && lookup.returnFields) { for (let key in lookup.returnFields) { if (lookup.returnFields[key] == lookup.label && lookup.lookSelectGrid) { lookup.bindShowField = key lookup.lookSelectGrid.bindShowField = key } if (lookup.lookSelectGrid && lookup.lookSelectGrid.tableData) { let data = lookup.lookSelectGrid.tableData for (let i in data) { if (data[i][lookup.returnFields[key]]) { data[i][key] = data[i][lookup.returnFields[key]] } } } } } // 数据模型查找 if (lookup.fieldPair) { if (lookup.sourceDsId) { lookup.returnFields = lookup.fieldPair[lookup.sourceDsId].returnFields } else { let key = Object.keys(lookup.fieldPair)[0] lookup.returnFields = lookup.fieldPair[key].returnFields } } lookup.returnType = "single", fields[prop]['lookup'] = lookup } // 时间方案 if (fields[prop] && this.queryFields[key].element == 'hi-time-scheme') { let fd = this.queryFields[key] fields[prop].dbtype = 'dbDatetime' fields[prop].format = fd.format fields[prop].disabledEx = fd.disabledEx } } // 应用默认填充表达式 for (let key in fields) { if (fields[key].default && fields[key].default.exps) { fields[key].default['expr'] = fields[key].default.exps } } return fields }, // 数据集 dataset() { var dataset = {} if (this.conf && this.conf.dataset) { debugger let ds = this.conf.dataset dataset = { controlName: ds.controlName, controlId: ds.controlId, name: ds.name, modelFilePath: ds.modelFilePath, fields: this.fields, _infcLoad: Object.assign({ autoActive: false }, ds._infcLoad), _infcPagging: { returnCount: true, pageSize: 100, pageNum: 1 }, data: [], } } return dataset }, // 查询面板 birtModelRight() { let rows = this.queryFields.map(item => { return { children: [item], colspan: 12 } }) let cols = this.queryFields.map(item => { return { colWidth: 60 } }) const queryPanel = { rows: rows, cols: cols }; let hcQueryPanel = { controlName: "HcQueryPanel", controlId: "HcQueryPanel_sam", inline: false, dataset: this.dataset && this.dataset.controlId \|\| "dsSam", size: "small", hideBtn: true, style: "width: 100%;", children: [], }; Object.assign(hcQueryPanel, QueryStyleFactory.buildForm(queryPanel) \|\| {}); let me = this; let birtModelRight = { controlName: "BirtWorkBook", controlId: "BirtWorkBook_right", style: "border-bottom: 1px solid #eee;", showToolBar: false, children: [ { controlName: "BirtSheet", controlId: "BirtSheet_right", name: "sheet0", pageIndex: 0, dataSets: [{ controlName: "HcDataset", controlId: "dsScheme", name: "SysSchemeBizEntity", rowKey: "FGUID", modelFilePath: "/platf/scheme/entity/SysSchemeBizEntity.xml", _infcLoad: { autoActive: false, __zcQuery: true }, _infcPagging: { _isAddingPagging: false, pageSize: -1, }, fields: {}, data: [], }].concat(this.dataset ? this.dataset : []), children: [ { controlName: "BirtFormSheet", controlId: "BirtFormSheet_01", children: [hcQueryPanel] } ] } ], mounted: function () { setTimeout(() => { debugger let __pushStr = me.conf.__push; let pushParam; if (__pushStr) { pushParam = JSON.parse(decodeURIComponent(__pushStr)) } me.doCount(pushParam) }, 100); } }; return birtModelRight }, // 分组条件(统计字段) groupFields() { let groupFields = this.conf && cloneDeep(this.conf.groupFields) \|\| [] // 组合分组条件 if (this.curTransferVal && this.curTransferVal.length) { let obj = {} let curTransferLabel = this.curTransferVal.map(item => { for (var field of groupFields) { if (field.prop == item) { return field.label } } }) obj = { prop: this.curTransferVal.join(), label: curTransferLabel.join() } groupFields.push(obj) } return groupFields }, // 分析字段 analyseFields() { return this.conf && this.conf.analyseFields \|\| [] }, // 显示详情 showDetail() { return this.currentObj.prop == 'detail' }, // 执行叠加按钮 btnDisabled() { return !this.selectionData \|\| this.selectionData.length < 2 }, analyseList_title() { if (this.conf.analyseFields && this.conf.analyseFields.length && this.analyseListChecked) { let curField = this.conf.analyseFields.filter(item => { return item.prop == this.analyseListChecked })[0] return curField && curField.label \|\| '' } else { return '' } } }, watch: { conf: { deep: true, handler: function (val) { if (val && val.groupFields && !this.groupForm.prop) { this.groupForm.prop = val.groupFields[0] && val.groupFields[0].prop this.curGroupField = this.groupForm.prop } if (val && val.analyseFields && val.analyseFields.length) { this.analysisData = val.analyseFields.map(item => { let obj = { prop: item.prop, label: item.label, countField: item.label, tableColumn: true, tableColumnCount: true, chartColumn: true, chartColumnCount: true, } return obj }) } } }, }, data() { return { size: 'small', superposition: false, perspective: false, chartType: "table", groupForm: { prop: "" }, loading: false, currentPage: 1, pageSize: 100, pageSizes: [10, 20, 50, 100], total: 0, data: [], // 排序 sortArr: [], sortIndex: -1, sortType: '', // 分析列 analysisVisible: false, analysisData: [], tableColumnCheck: true, tableColumnCountCheck: true, chartColumnCheck: true, chartColumnCountCheck: true, // 分析字段 analysisFieldsVisible: false, analysisFieldsArr: [], analysisChartConf: { controlName: "PieChart", controlId: "chart_analysis", height: "100%", isGroupData: true, groupBy: "label", datas: [], calcFields: [ { name: "value", title: "" } ], option: { legend: { show: true } }, events: { click(row) { debugger; var _this = this.$parent.$parent; _this.analysisChartConf.datas = _this.deepAnalysisFields let data = JSON.parse(JSON.stringify(row.data)) delete data.emphasis // 删除当前分析以后的深度分析 _this.deepArr.splice(_this.curIndex + 1, _this.deepArr.length - _this.curIndex - 1) let obj = _this.deepArr[_this.deepArr.length - 1] if (_this.currentObj.name) { obj.selectVal = _this.currentObj.name } else { if (_this.currentObj.prop.includes(',')) { let selectVal = [] let arr = _this.currentObj.prop.split(',') selectVal = arr.map(item => { return _this.currentObj[item] }) obj.selectVal = selectVal.join() } else { obj.selectVal = _this.currentObj[_this.currentObj.prop] } } _this.$set(_this.deepArr, _this.curIndex, obj) _this.$set(_this.deepArr, _this.curIndex + 1, data) _this.curGroupField = data.prop; _this.currentObj = data; _this.curIndex = _this.curIndex + 1; _this.doQuery(); _this.analysisFieldsVisible = false; } } }, // 深度分析 deepArr: [], conf: {}, // 图表当前选中对象 currentObj: {}, // 当前分组字段 curGroupField: '', // 深度分析当前环节下标 curIndex: 0, exportLoading: false, // 穿梭框 transferVisible: false, curTransferVal: [], groupFieldsEdit: [], schemeLoading: false, havingForm: {}, // 分析记录 recordVisible: false, recordData: [], // 已勾选记录 selectionData: [], // 统计方案 schemeData: [], schemeVisible: false, // 是否监听 isMonitor: false, // 底部汇总数据 bottomSummary: {}, // 是否查询面板查询 isQueryModel: false, // 显示图表菜单 showChartMenu: false, showType: 'none', showAnalyseList: false, analyseListChecked: '', // 设置面板 activeName: 'condition', settingForm: { xInverse: false, toolbox: false, axisMarking: 1, legend: 2, tipStyle: 3, staField: 'none', title: false, mainTitle: '', subTitle: '', weekColumns: false, column: '', week: '', }, axisMarkOptions: [ { label: this.$t && this.$t("hivuiSam_axisMarkOptions_none") \|\| '不显示', value: 'none' }, { label: this.$t && this.$t("hivuiSam_axisMarkOptions_num") \|\| '显示值', value: 'num' }, { label: this.$t && this.$t("hivuiSam_axisMarkOptions_percent") \|\| '百分比', value: 'percent' }, ], legendOptions: [ { label: this.$t && this.$t("hivuiSam_legendOptions_1") \|\| '不显示', value: 1 }, { label: this.$t && this.$t("hivuiSam_legendOptions_2") \|\| '上边', value: 2 }, { label: this.$t && this.$t("hivuiSam_legendOptions_3") \|\| '右边', value: 3 }, ], tipStyleOptions: [ { label: this.$t && this.$t("hivuiSam_tipStyleOptions_1") \|\| '值', value: 1 }, { label: this.$t && this.$t("hivuiSam_tipStyleOptions_2") \|\| '百分比%', value: 2 }, { label: this.$t && this.$t("hivuiSam_tipStyleOptions_3") \|\| `值+分类`, value: 3 }, ], conditionPanel: this.$t && this.$t("hivuiSam_layout_conditionPanel") \|\| '条件面板', formGroup: this.$t && this.$t("hivuiSam_form_group") \|\| '分组条件', setPanel: this.$t && this.$t("hivuiSam_layout_setPanel") \|\| '设置面板', formXInverse: this.$t && this.$t("hivuiSam_form_xInverse") \|\| '横轴翻转', formToolbox: this.$t && this.$t("hivuiSam_form_toolbox") \|\| '显示工具条', formAxisMarking: this.$t && this.$t("hivuiSam_form_axisMarking") \|\| '轴标记', formLegend: this.$t && this.$t("hivuiSam_form_legend") \|\| '系列名', formTipStyle: this.$t && this.$t("hivuiSam_form_tipStyle") \|\| '提示风格', formStaField: this.$t && this.$t("hivuiSam_form_staField") \|\| '统计字段', formTitle: this.$t && this.$t("hivuiSam_form_title") \|\| '标题', formMainTitle: this.$t && this.$t("hivuiSam_form_mainTitle") \|\| '主标题', formSubTitle: this.$t && this.$t("hivuiSam_form_subTitle") \|\| '副标题', formWeekColumns: this.$t && this.$t("hivuiSam_form_weekColumns") \|\| '周栏', formColumn: this.$t && this.$t("hivuiSam_form_column") \|\| '栏数', formWeek: this.$t && this.$t("hivuiSam_form_week") \|\| '每栏周期', labelNone: this.$t && this.$t("hivuiSam_label_none") \|\| '不显示', countFieldLabel: this.$t && this.$t("hivuiSam_table_countField") \|\| '统计字段', tableColumnLabel: this.$t && this.$t("hivuiSam_table_tableColumn") \|\| '网格列', tableColumnCountLabel: this.$t && this.$t("hivuiSam_table_tableColumnCount") \|\| '网格合计列', chartColumnLabel: this.$t && this.$t("hivuiSam_table_chartColumn") \|\| '图表列', chartColumnCountLabel: this.$t && this.$t("hivuiSam_table_chartColumnCount") \|\| '图表列汇总', operateLabel: this.$t && this.$t("hivuiSam_table_operate") \|\| '操作', upLabel: this.$t && this.$t("hivuiSam_btn_up") \|\| '上移', downLabel: this.$t && this.$t("hivuiSam_btn_down") \|\| '下移', schemeLabel: this.$t && this.$t("hivuiSam_table_scheme") \|\| '方案名称', abbreviationLabel: this.$t && this.$t("hivuiSam_table_abbreviation") \|\| '缩写', editLabel: this.$t && this.$t("hivuiSam_btn_edit") \|\| '编辑', confirmLabel: this.$t && this.$t("hivuiSam_btn_confirm") \|\| '确定', removeLabel: this.$t && this.$t("hivuiSam_btn_remove") \|\| '删除', executeOverlayLabel: this.$t && this.$t("hivuiSam_btn_executeOverlay") \|\| '执行叠加', analysisRecordLabel: this.$t && this.$t("hivuiSam_btn_analysisRecord") \|\| '分析记录', schemeListLabel: this.$t && this.$t("hivuiSam_btn_schemeList") \|\| '方案列表', panelTitle: this.$t && this.$t("hivuiSam_layout_panel") \|\| '面板', } }, updated() { this.$nextTick(() => { this.$refs["table"] && this.$refs["table"].doLayout(); }); }, methods: { // 排序 sortClick(val) { this.sortIndex = val this.doQuery(); }, sortDown() { this.sortType = 'desc' }, sortUp() { this.sortType = 'asc' }, // 前进 goCommand(index) { this.curIndex = index; this.currentObj = this.deepArr[index]; this.curGroupField = this.currentObj.prop; this.data = this.currentObj.data }, goClick: debounce(function () { if (this.curIndex < this.deepArr.length - 1) { this.curIndex = this.curIndex + 1; this.currentObj = this.deepArr[this.curIndex]; this.curGroupField = this.currentObj.prop; this.data = this.currentObj.data } }, 500), // 后退 backCommand(val) { this.curIndex = val this.currentObj = this.deepArr[val]; this.curGroupField = this.currentObj.prop; this.data = this.currentObj.data }, backClick: debounce(function () { if (this.curIndex > 0) { this.curIndex = this.curIndex - 1 this.currentObj = this.deepArr[this.curIndex]; this.curGroupField = this.currentObj.prop; this.data = this.currentObj.data } }, 500), // 深度分析 breadcrumbClick(val) { this.curGroupField = val let arrnew = this.deepArr.map(item => { return item.prop }) this.curIndex = arrnew.indexOf(val) this.currentObj = this.deepArr[this.curIndex]; // 数据替换成缓存的数据 this.data = this.currentObj.data }, // 点击表格 rowDblclick(row) { this.currentObj = row this.currentObj.prop = this.curGroupField; this.superposition = false if (this.perspective) { var index = -1 this.deepArr.forEach((item, i) => { if (item.prop == this.curGroupField) { index = i } }) if (index > -1 && index < this.deepArr.length - 1) { this.analysisFieldsVisible = false this.curIndex = this.curIndex + 1 this.currentObj = this.deepArr[this.curIndex]; this.data = this.currentObj.data this.curGroupField = this.currentObj.prop; } else { this.analysisChartConf.datas = this.deepAnalysisFields this.analysisFieldsVisible = true } } else { this.analysisChartConf.datas = this.deepAnalysisFields this.analysisFieldsVisible = true } }, // 点击查询 doCount(param) { debugger; // 叠加状态下不执行查询操作 if (this.superposition) { return } // 监听数据集 if (this.dataset) { let ds = this.$refs.BirtWorkBook_right.dataset[this.dataset.controlId] // 补充下推参数 if (param) { if (param.target) { ds.setPushQueryCdion({ __body: param.target.ps }) } else { ds.setPushQueryCdion(param) } } if (!this.isMonitor) { ds && ds.on("afterLoadData", this.afterLoadData); this.isMonitor = true } this.loading = true; let prop = this.groupForm.prop; let fields = this.groupFields.map(item => { return item.prop }) this.curGroupField = prop; let index = fields.indexOf(prop) if (this.deepArr.length) { // 如果切换了分组条件，清空深度分析 if (this.deepArr[0] && this.deepArr[0].prop !== prop) { this.deepArr = [] this.currentObj = this.groupFields[index] this.recordData = [] } else { this.currentObj = this.deepArr[0] } } this.currentPage = 1 let queryModel = ds.getQueryModel() this.doQuery(queryModel); // 添加分析记录 let obj = {} if (Object.keys(queryModel).length === 0) { obj = { id: 'empty', name: this.$t && this.$t("hivuiSam_name_empty") \|\| '空条件', prop: this.groupForm.prop, } } else { let keyArr = []; let labelArr = []; for (let key in queryModel) { if (queryModel[key] \|\| queryModel[key] === 0) { keyArr.push(key); // let arr = this.queryFields.filter(item =>{ // return item.prop == key // }) labelArr.push(queryModel[key]); } }; if (keyArr.length && labelArr.length) { obj = { id: keyArr.join() + '_' + labelArr.join(), name: labelArr.join(), prop: this.groupForm.prop, } } else { obj = { id: 'empty', name: this.$t && this.$t("hivuiSam_name_empty") \|\| '空条件', prop: this.groupForm.prop, } } } // 判断分析记录中是否含有此条件，有则跳过，无则添加 const ids = this.recordData.map(value => value.id); if (!ids.includes(obj.id)) { this.isQueryModel = true let simple = this.recordData.length + 1; obj.simple = simple obj.isEdit = false this.recordData.push(obj); } else { this.isQueryModel = false } // 当前分组加入深度分析 if (index < 0) { this.$message.error('当前分组条件不在分组字段中，请重新配置') } else { this.$set(this.deepArr, 0, this.groupFields[index]) this.curIndex = 0 }; } }, // 网格列格式化函数 formatter(row, column, cellValue, index) { let fn = column.property; return this.formatValue(cellValue, fn) }, // 根据字段配置输出格式化值 formatValue(cellValue, fn) { let format = this.fields && this.fields[fn] && this.fields[fn].format; if (format) { // 空值处理 if (cellValue == null \|\| cellValue === '' \|\| isNaN(Number(cellValue))) { const zeroPart = format.replace(/[^\d.,]/g, '').replace(/0+/g, '0'); return format.replace(/[0-9,.]+/, zeroPart); } const num = Number(cellValue); // 1. 提取货币符号（￥ $ € 等） const symbol = format.replace(/[^^\$\￥¥€£]/g, '').trim(); // 2. 自动识别小数位数（根据格式小数点后面有几位） const precision = format.includes('.') ? (format.split('.')[1].match(/0/g) \|\| []).length : 0; // 3. 四舍五入指定位数 let fixed = num.toFixed(precision); // 4. 添加千分位 fixed = fixed.replace(/\B(?=(\d{3})+(?!\d))/g, ','); // 5. 拼接符号（如果格式里有符号就带上） return symbol ? symbol + fixed : fixed; } return cellValue; }, afterLoadData(datas) { debugger let newData = datas let ds = this.$refs.BirtWorkBook_right.dataset[this.dataset.controlId] if (datas && datas.length && this.curGroupField != 'detail') { // newData = datas.map(item => { // return ds && ds.getFormatRecd(item) // }) // 添加百分比数据 newData = newData.map(data => { for (let field of this.analyseFields) { let prop = field.prop let percent = prop + '_per' let sum = 0 const values = datas.map(item => Number(item[prop])); if (!values.every(value => isNaN(value))) { sum = values.reduce((prev, curr) => { const value = Number(curr); if (!isNaN(value)) { return prev + curr; } else { return prev; } }, 0); } if (sum && sum > 0) { data[percent] = Number((data[prop] / sum * 100).toFixed(2)) } else { data[percent] = 0 } } return data }) } this.data = newData // 缓存数据 if (this.deepArr && this.deepArr.length > 0) { this.deepArr[this.curIndex].data = newData; } else { this.deepArr = [newData] } // 总条数 this.total = ds._infcPagging.recordCount \|\| this.total; // 底部汇总数据 this.bottomSummary = ds.getBottomSummeryRecd(); // 添加分析记录 if (!this.isQueryModel) return this.recordData[this.recordData.length - 1].data = datas }, // 查询方法 doQuery(model) { debugger let ds = this.$refs.BirtWorkBook_right.dataset[this.dataset.controlId] if (this.showDetail) { ds._infcPagging = { _isPagging: true, pageSize: this.pageSize, pageNum: this.currentPage, returnCount: true }; ds._infcStat = {} ds._infcSort = {} } else { ds._infcPagging = { _isPagging: true, pageSize: this.pageSize, pageNum: this.currentPage, returnCount: true }; ds._infcStat = { isGroupData: true, groupBy: this.curGroupField, __bottomSummary: true } if (this.sortIndex > -1) { let obj = this.sortArr[this.sortIndex] ds._infcSort.orderBy = [{ name: obj.prop, desc: obj.label, type: this.sortType \|\| 'desc' }] } else { ds._infcSort.orderBy = [] } if (this.havingForm) { let _infcHaving = {}; for (let item in this.havingForm) { let obj = JSON.parse(JSON.stringify(this.havingForm[item])) let val = obj.value let val2 = obj.value2 if (val === undefined && val === undefined) { } else if ((val \|\| val === 0) && (val2 \|\| val2 === 0)) { _infcHaving[item] = obj } else { if (obj.sign == 'inRange') { obj.sign = 'lteq' } else { obj.sign = 'gt' } _infcHaving[item] = obj } } ds._infcHaving = _infcHaving } } if (model) { ds.setQueryModel(model) ds._infcLoad.additionalModel = {}; } else if (this.deepArr && this.deepArr.length > 0) { let queryModel = {} this.deepArr.forEach(item => { if (item.prop && item.selectVal) { if (!item.prop.includes(",")) { queryModel[item.prop] = item.selectVal } else { let arr = item.prop.split(',') arr.forEach((it, i) => { queryModel[it] = item.selectVal && item.selectVal.split(',')[i] }) } } }) ds.setAdditionalModel(queryModel) } else { ds._infcLoad.additionalModel = {}; ds._infcLoad.queryModel = {} } ds.query(); this.loading = false; }, // 重置 reset() { this.$refs.groupForm.resetFields(); this.$refs.havingForm.resetFields(); this.havingForm = JSON.parse(JSON.stringify(this.conf.havingForm)); this.curTransferVal = [] this.groupForm.prop = this.groupFields[0] && this.groupFields[0].prop; var queryPanel = this.$refs.BirtWorkBook_right.$children[0].$children[0].$children[0].$children[0].$children[0].$children[0]; queryPanel.reset(); let ds = this.$refs.BirtWorkBook_right.dataset[this.dataset.controlId] ds._infcLoad.queryModel = {} }, handleSizeChange(val) { this.pageSize = val this.doQuery() }, handleCurrentChange(val) { this.currentPage = val this.doQuery() }, // 切换图表 chartTypeChange(command) { this.chartType = command; }, // 打开分析列 analysisClick() { this.analysisVisible = true }, // 分析列全选 handelCheckAll(val) { let _this = this this.analysisData = this.analysisData.map(item => { if (val == 'tableColumn') { item.tableColumn = _this.tableColumnCheck } if (val == 'tableColumnCount') { item.tableColumnCount = _this.tableColumnCountCheck } if (val == 'chartColumn') { item.chartColumn = _this.chartColumnCheck } if (val == 'chartColumnCount') { item.chartColumnCount = _this.chartColumnCountCheck } return item }) }, // 分析列上移 columnUp(index, row) { let arr = this.analysisData if (index > 0) { arr.splice(index - 1, 1, ...arr.splice(index, 1, arr[index - 1])); } }, columnDown(index, row) { let arr = this.analysisData if (index < arr.length) { arr.splice(index, 1, ...arr.splice(index + 1, 1, arr[index])); }; }, // 刷新 refresh() { this.doQuery(); this.$refs.chartConf && this.$refs.chartConf.refreshChart(); }, // 导出 exportExcel() { let param = { pageNum: -1, pageSize: -1, __slaveExport: false, }; let __body = {}; let ds = this.$refs.BirtWorkBook_right.dataset[this.dataset.controlId] var cdion = ds.lastLoadCdion console.log('cdion', cdion) if (cdion) { __body['queryCdions'] = JSON.parse(cdion); } if (this.curGroupField !== 'detail') { __body['groupBy'] = this.curGroupField } param['modelFilePath'] = ds['modelFilePath']; param['__funcpath'] = ds['__funcpath']; param.__body = __body let sheetStyle = {} let cells = [] let columns = [] this.tableColumns.forEach(item => { cells.push({ title: item.label, colspan: 1, rowspan: 1 }) columns.push({ field: item.prop, width: 170 }) }); sheetStyle = { name: '统计分析', titleRows: [ { cells: cells } ], columns: columns } param.__sheetStyle = sheetStyle var time = new Date().getTime() var title = `统计分析${time}` var data = { title: title, __sheetDatas: JSON.stringify([param]) } var url = this.$HI.exportUrl this.exportLoading = true this.$HI.request.post(url, data).then((res) => { console.log('res', res) this.exportLoading = false if (res.status == 200) { let token = getToken(); let pn = window.HIVUI_SETTING && window.HIVUI_SETTING.projectName var url = this.$HI.download + `?path=${res.dataPack.path}&access_token=${token}&pn=${pn}` url = url.replace(/\\/g, "/") const a = document.createElement('a') //创建a标签 a.style.display = 'none' a.href = url // 指定下载链接 a.download = title //指定下载文件名 a.click() //触发下载 } }).catch((e) => { this.exportLoading = false }) }, // 打开穿梭框 showtransfer() { this.groupFieldsEdit = JSON.parse(JSON.stringify(this.curTransferVal)) this.transferVisible = true }, transferConfirm() { if (this.groupFieldsEdit && this.groupFieldsEdit.length > 1) { this.curTransferVal = JSON.parse(JSON.stringify(this.groupFieldsEdit)) this.groupForm.prop = this.curTransferVal.join(); this.curGroupField = this.groupForm.prop; this.transferVisible = false } else { this.$message.error("该分组选项已存在") } }, transferClose() { this.transferVisible = false this.groupFieldsEdit = JSON.parse(JSON.stringify(this.curTransferVal)) }, transferUp(option) { let arr = this.groupFieldsEdit let index = this.groupFieldsEdit.indexOf(option.prop) if (index > 0) { arr.splice(index - 1, 1, ...arr.splice(index, 1, arr[index - 1])); } }, transferDown(option) { let arr = this.groupFieldsEdit let index = this.groupFieldsEdit.indexOf(option.prop) if (index < arr.length) { arr.splice(index, 1, ...arr.splice(index + 1, 1, arr[index])); }; }, // 合计列 getSummaries(parma) { const { columns, data } = parma; const sums = []; // let arr = this.analyseFields.map(item =>{ // return item.prop // }) debugger columns.forEach((column, index) => { let show = true this.analysisData.forEach(item => { if (item.prop == column.property) { show = item.tableColumnCount } }) // if(arr.includes(column.property) && show){ // let values = data.map(item => Number(item[column.property])); // sums[index] = values.reduce((prev, curr) => { // const value = Number(curr); // if (!isNaN(value)) { // return prev + curr; // } else { // return prev; // } // }, 0); let fn = column.property if (this.bottomSummary && this.bottomSummary[fn] != undefined && show) { sums[index] = this.bottomSummary[fn] sums[index] = Math.round(sums[index] * 100) / 100; sums[index] = this.formatValue(sums[index], fn) } else { sums[index] = ''; } }) sums[0] = this.$t && this.$t("hivuiSam_name_sum") \|\| '汇总' return sums; }, // 分析列表 handleEdit(index, row) { row.isEdit = true this.recordData[index] = row }, handleConfirm(index, row) { row.isEdit = false this.recordData[index] = row }, handleDelete(index, row) { this.recordData.splice(index, 1) }, // 执行叠加 doClick() { this.superposition = true this.recordVisible = false this.curGroupField = this.recordData[0].prop this.curIndex = 0 }, // 分析记录勾选 handleSelectionChange(row) { this.selectionData = row }, // 双击 recordDblClick(row) { this.curIndex = 0 this.data = row.data this.deepArr[0].data = row.data this.currentObj.data = row.data }, signChange(val, sign) { this.havingForm[val]['sign'] = sign }, // 统计方案 schemeRowClick(row) { if (row.FCONTENT) { this.reset(); let conf = JSON.parse(row.FCONTENT); if (conf.deepList) { this.deepArr = conf.deepList } if (conf.curGroupField) { this.curGroupField = conf.curGroupField } if (conf.queryModel) { let ds = this.$refs.BirtWorkBook_right.dataset[this.dataset.controlId] ds.setQueryModel(conf.queryModel) let queryPanel = this.$refs.BirtWorkBook_right.$children[0].$children[0].$children[0].$children[0].$children[0].$children[0]; queryPanel.bindModel = conf.queryModel } if (conf.groupForm) { this.groupForm = conf.groupForm } if (conf.havingForm) { this.havingForm = conf.havingForm } if (conf.sortIndex) { this.sortIndex = conf.sortIndex } if (conf.sortType) { this.sortType = conf.sortType } if (conf.data) { this.data = conf.data } if (conf.currentObj) { this.currentObj = conf.currentObj } if (conf.total) { this.total = conf.total } if (conf.curTransferVal) { this.curTransferVal = conf.curTransferVal } if (conf.perspective) { this.perspective = conf.perspective } else { this.perspective = false } if (conf.superposition) { this.superposition = conf.superposition } else { this.superposition = false } } this.schemeVisible = false this.doCount() }, showSchemeData() { let url = '/data/query'; let funcurl = window.location.pathname \|\| '' let queryCdions = { join: 'and', items: [ { sign: "eq", name: "FFUNCURL", dataType: "string", value: funcurl, enable: true, }, ], } var data = { modelFilePath: "/platf/scheme/entity/SysSchemeBizEntity.xml", pageSize: -1, __body: JSON.stringify({ queryCdions: queryCdions }), __bottomSummary: false, // __funcpath: "/eap5csxm/KongJianCeShi/TongJiFenXi/TongJiFenXiCeShi/func/TongJiFenXiRenYuan.func", __zcQuery: true } this.$HI.request.post(url, data).then((res) => { this.schemeData = res.dataPack && res.dataPack.rows }).catch(e => { console.error(e) }) }, // 保存方案 saveScheme() { let ds = this.$refs.BirtWorkBook_right.dataset[this.dataset.controlId] let content = { deepList: this.deepArr, curGroupField: this.curGroupField, queryModel: ds.getQueryModel(), havingForm: this.havingForm, groupForm: this.groupForm, sortIndex: this.sortIndex, sortType: this.sortType, data: this.data, currentObj: this.currentObj, perspective: this.perspective, superposition: this.superposition, total: this.total, curTransferVal: this.curTransferVal } let data = { pushType: "add", dataset: "dsScheme", pushAddType: "map", data: [{ FFUNCURL: window.location.pathname \|\| window.location.href, FCONTENT: JSON.stringify(content), }] } this.openByPath('/platf/scheme/func/add.func', { __push: data, __funcpath: '/platf/scheme/func/add.func' }, { title: '方案保存' }) }, handleSchemeDelete(index, data) { let url = '/data/save' let removeData = { ...data, $state: "rsDelete", $old: data } let body = [{ modelFilePath: "/platf/scheme/entity/SysSchemeBizEntity.xml", data: [removeData] }] let rData = { __body: JSON.stringify(body) } this.$HI.request.post(url, rData).then((res) => { this.$message.success('方案删除成功') this.schemeData.splice(index, 1) }).catch(e => { this.$message.error(e) }) }, // 保存方案下推 openByPath(path, query, { title, target } = {}) { query = query \|\| {}; let queryT = {} Object.assign(queryT, query \|\| {}); if (title) queryT.__title = title; if (target) { target = target === '_blank' ? (new Date()).valueOf() : target queryT.__target = target; } if (this.$router) { this.$router.push({ path, query: queryT }) } else { if (top.window.SysPage && top.window.SysPage.newPage) { top.window.SysPage.newPage(title, path, queryT, "post") } else { this.createForm(path, "_self", queryT.__push.data[0]) } } }, createForm(url, opentype, paramters) { //创建form表单 let me = this; let id = "samuuid" var formid = `${id}_form`; var temp_form = null; if (document.getElementById(formid)) { temp_form = document.getElementById(formid); temp_form.method = me.postType; temp_form.action = url; // for (var item in paramters) { // var inputObj = document.getElementById(`${id}_${item}`); // if (inputObj) { // inputObj.value = paramters[item]; // } // } } else { temp_form = document.createElement("form"); temp_form.id = `${id}_form`; temp_form.action = url; //如需打开新窗口，form的target属性要设置为'_blank' temp_form.target = opentype; //打开方式 temp_form.method = me.postType; temp_form.style.display = "none"; document.body.appendChild(temp_form); } //添加参数 for (var item in paramters) { var inputObj = document.getElementById(`${id}_${item}`); if (inputObj) { inputObj.value = paramters[item]; } else { var opt = document.createElement("input"); opt.type = "hidden"; opt.id = `${id}_${item}`; //opt.id= opt.name = item; opt.value = paramters[item]; temp_form.appendChild(opt); } } //提交数据 temp_form.submit(); }, // 选择显示数值还是百分比 onChangeShowType(type) { this.showType = this.showType == type ? 'none' : type }, // 右侧工具条显示列表选择显示不同分析字段的数据 changeShowAnalyseList(command) { this.analyseListChecked = command this.settingForm.staField = command if (command == 'none') { this.showAnalyseList = false } else { this.showAnalyseList = true } }, // 点击选择深度分析 analyseListOnClick(row, index) { let _this = this _this.currentObj = row _this.currentObj.prop = this.curGroupField if (_this.perspective) { var index = -1 _this.deepArr.forEach((item, i) => { if (item.prop == _this.curGroupField) { index = i } }) if (index > -1 && index < _this.deepArr.length - 1) { _this.analysisFieldsVisible = false _this.curIndex = _this.curIndex + 1 _this.currentObj = _this.deepArr[_this.curIndex]; _this.data = _this.currentObj.data _this.curGroupField = _this.currentObj.prop; } else { _this.analysisChartConf.datas = _this.deepAnalysisFields _this.analysisFieldsVisible = true } } else { _this.analysisChartConf.datas = _this.deepAnalysisFields _this.analysisFieldsVisible = true } _this.superposition = false } }, mounted() { debugger } }; </script> <style> .birtModelRight .el-main { padding: 5px !important; } .birtModelRight table.zhc-birt-data-list { table-layout: auto !important; /* border-collapse: initial !important; / / border-spacing: revert !important; / } .el-transfer.sam .el-transfer-panel:nth-child(1) button { display: none; } .el-dropdown.disabled .el-button, .el-dropdown.disabled .el-button:hover { cursor: not-allowed; color: #C0C4CC; cursor: not-allowed; background-image: none; background-color: #FFF; border-color: #EBEEF5; } .tableHeader th, .tableHeader tr { background: linear-gradient(0deg, rgba(224, 240, 255, 1), rgba(240, 247, 255, 1)); } .el-form-item__label { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .recordPop { text-align: center; } .right-tabs { height: 100%; } .el-tabs--border-card .el-tabs__content { height: calc(100% - 56px); overflow: auto; } .el-tabs--border-card .el-tabs__content .el-tab-pane { height: 100%; } </style> <style lang="scss" scoped> .container { position: relative; display: flex; flex-direction: column; height: 100%; padding: 10px 20px 10px 20px; } .btn-toolbar { +* { margin-left: 10px; margin-right: 0; margin-bottom: 5px } } .el-dropdown-menu__item { min-width: 90px; } .center-content { height: 100%; width: 100%; padding: 10px; box-sizing: border-box; } .depth-analysis { display: flex; align-items: center; padding: 10px; } .el-breadcrumb__item a { cursor: pointer !important; } .deepActive { color: #06c; font-weight: 600; } .sortActive { color: rgb(33, 235, 141); font-weight: 600; } >>>.el-dropdown-menu__item:focus, .el-dropdown-menu__item:not(.is-disabled):hover { background: initial; color: initial; } .el-dropdown-menu__item i { font-weight: 600; margin: 0 0 0 5px; } .el-dropdown-menu__item i:hover { color: rgb(33, 235, 141); } .birtModelRight .el-main { padding: 5px !important; } .el-icon-edit { right: 30px; position: absolute; z-index: 1; line-height: 40px; cursor: pointer; } >>>.el-dropdown.disabled .el-button, >>>.el-dropdown.disabled .el-button:hover { cursor: not-allowed; color: #C0C4CC; cursor: not-allowed; background-image: none; background-color: #FFF; border-color: #EBEEF5; } .chart-tool { position: absolute; right: 10px; top: 5px; i { cursor: pointer; color: #06c; } .el-icon-close { color: #f0797f; } .el-icon-close:hover { color: #f50814; } .content { margin-top: 5px; display: flex; justify-content: space-around; align-items: center; width: 150px; height: 30px; line-height: 30px; border: 1px solid #d8d863; border-radius: 5px; background: rgba(237, 241, 244, 0.4); .iconfont { height: 20px; line-height: 12px; } .item { padding: 3px; border: 1px solid transparent; border-radius: 3px; } .item:hover, .item:active, .item.active { border-color: #08df5d; } } } .el-dropdown-menu__item.active { background-color: #ecf5ff; color: #66b1ff; } >>>.el-dropdown-menu__item:focus, .el-dropdown-menu__item:not(.is-disabled):hover { background-color: #ecf5ff; color: #66b1ff; } .analyseList { position: absolute; right: 10px; top: 45px; width: 150px; border: 1px solid #d8d863; background: #fff; .analyseList-title { border-bottom: 1px dotted #b5b5ad; color: #000; padding: 0 10px; } .analyseList-ul { list-style: none; margin: 0 !important; padding: 0 10px; li { display: flex; justify-content: space-between; align-items: center; a:hover { text-decoration: underline; color: #FF6600; } } } } </style>

Ignore Space Show notes View

project/hivuiSam/components/analysisSam/Index.vue

<template>
  <div class="container">
    
    <div class="btn-toolbar">
      
      <el-dropdown split-button :size="size" :class="{ disabled: backDisabled }" :disabled="backDisabled"
        @command="backCommand" @click="backClick">
        <i class="el-icon-back"></i>{{ $t && $t("hivuiSam_btn_back") || '后退' }}
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item v-for="(item, index) in deepArr" :key="item.prop" :command="index"
            v-if="index < curIndex">{{
              item.label }}</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      
      <el-dropdown split-button :size="size" :class="{ disabled: goDisabled }" :disabled="goDisabled"
        @command="goCommand" @click="goClick">
        <i class="el-icon-right"></i>{{ $t && $t("hivuiSam_btn_go") || '前进' }}
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item v-for="(item, index) in deepArr" :key="item.prop" :command="index"
            v-if="index > curIndex">{{
              item.label }}</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      
      <el-dropdown split-button :size="size" class="sort" @command="sortClick">
        <i class="el-icon-sort"></i>{{ $t && $t("hivuiSam_btn_sort") || '排序' }}
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item :command="-1">{{ $t && $t("hivuiSam_btn_noSort") || '不排序' }}</el-dropdown-item>
          <el-dropdown-item v-for="(item, index) in sortArr" :key="item.prop" :command="index">{{ item.label }}
            <i class="el-icon-sort-down" :class="{ sortActive: index == sortIndex && sortType == 'desc' }"
              @click="sortDown"></i> <i class="el-icon-sort-up"
              :class="{ sortActive: index == sortIndex && sortType == 'asc' }" @click="sortUp"></i>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      
      <el-button icon="el-icon-setting" :size="size" @click="analysisClick">{{ $t && $t("hivuiSam_btn_columnSet") ||
        '列设置' }}</el-button>
      
      <el-dropdown :size="size" @command="chartTypeChange">
        <el-button :size="size">
          <i class="el-icon-s-data"></i>
          {{ $t && $t("hivuiSam_btn_chart") || '图表' }}<i class="el-icon-arrow-down el-icon--right"></i>
        </el-button>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item :class="{ active: chartType == 'table' }" command="table">{{ $t &&
            $t("hivuiSam_dropdown_table") || '表格' }}</el-dropdown-item>
          <el-dropdown-item :class="{ active: chartType == 'pie' }" command="pie">{{ $t && $t("hivuiSam_dropdown_pie")
            ||
            '饼图' }}</el-dropdown-item>
          <el-dropdown-item :class="{ active: chartType == 'bar' }" command="bar">{{ $t && $t("hivuiSam_dropdown_bar")
            ||
            '柱图' }}</el-dropdown-item>
          <el-dropdown-item :class="{ active: chartType == 'line' }" command="line">{{ $t &&
            $t("hivuiSam_dropdown_line")
            || '线图' }}</el-dropdown-item>
          <el-dropdown-item :class="{ active: chartType == 'area' }" command="area">{{ $t &&
            $t("hivuiSam_dropdown_area")
            || '区域图' }}</el-dropdown-item>
          <el-dropdown-item :class="{ active: chartType == 'stack' }" command="stack">{{ $t &&
            $t("hivuiSam_dropdown_stack") || '叠加柱图' }}</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      
      <el-button icon="el-icon-refresh" :size="size" @click="refresh">{{ $t && $t("hivuiSam_btn_refresh") ||
        '刷新' }}</el-button>
      
      <el-popover placement="bottom" popper-class="recordPop" v-model="recordVisible">
        <el-table :data="recordData" @row-dblclick="recordDblClick" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55">
          </el-table-column>
          <el-table-column min-width="150" prop="name" :label="schemeLabel">
            <template slot-scope="scope">
              <el-input v-if="scope.row && scope.row.isEdit" v-model="scope.row.name"></el-input>
              <span v-else>{{ scope.row.name }}</span>
            </template>
          </el-table-column>
          <el-table-column width="100" prop="simple" :label="abbreviationLabel">
            <template slot-scope="scope">
              <el-input v-model="scope.row.simple"></el-input>
            </template>
          </el-table-column>
          <el-table-column :label="operateLabel" width="150">
            <template slot-scope="scope">
              <el-button size="mini" type="text" v-if="!(scope.row && scope.row.isEdit)"
                @click="handleEdit(scope.$index, scope.row)">{{ editLabel }}</el-button>
              <el-button size="mini" type="text" v-else @click="handleConfirm(scope.$index, scope.row)">{{ confirmLabel
              }}</el-button>
              <el-button size="mini" type="text" style="color:red;"
                @click.stop="handleDelete(scope.$index, scope.row)">{{ removeLabel }}</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-button type="primary" size="mini" icon="el-icon-check" style="margin: 10px 0 0;" @click.stop="doClick"
          :disabled="btnDisabled">{{ executeOverlayLabel }}</el-button>
        <el-button slot="reference" icon="el-icon-edit-outline" :size="size">{{ analysisRecordLabel }}</el-button>
      </el-popover>
      
      <el-popover placement="bottom" v-model="schemeVisible">
        <el-table size="mini" :data="schemeData" @row-click="schemeRowClick">
          <el-table-column width="150" prop="FSCHEMENAME" :label="schemeListLabel"></el-table-column>
          <el-table-column :label="operateLabel" width="150">
            <template slot-scope="scope">
              <el-button size="mini" type="text" style="color:red;"
                @click.stop="handleSchemeDelete(scope.$index, scope.row)">{{ removeLabel }}</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-button slot="reference" icon="el-icon-edit-outline" :size="size" @click="showSchemeData">{{ $t &&
          $t("hivuiSam_btn_schemeList") || '方案列表' }}</el-button>
      </el-popover>
      
      <el-checkbox v-model="superposition" border :size="size">{{ $t && $t("hivuiSam_check_overlay") || '叠加'
      }}</el-checkbox>
      
      <el-checkbox v-model="perspective" border :size="size">{{ $t && $t("hivuiSam_check_directPerspective") || '直接透视'
      }}</el-checkbox>
      <el-button icon="el-icon-download" :size="size" :disabled="this.data && this.data.length == 0"
        :loading="exportLoading" @click="exportExcel">{{ $t && $t("hivuiSam_btn_export") || '导出excel' }}</el-button>
      <el-button icon="el-icon-save" :size="size" :loading="schemeLoading" @click="saveScheme">{{ $t &&
        $t("hivuiSam_btn_schemeSave") || '保存方案' }}</el-button>
    </div>
    
    <hi-layout :is-fit="true" style="heiht: 100%;">
      
      <hi-layout-right size="300" :title="panelTitle">
        <el-tabs v-model="activeName" class="right-tabs" type="border-card" @tab-click="handleClick">
          <el-tab-pane :label="conditionPanel" name="condition">
            <div style="height: calc( 100% - 342px );overflow: auto;border:none; min-height: 150px;">
              <birt-work-book style="min-height: calc( 100% - 342px );" :conf="birtModelRight"
                :ref="birtModelRight.controlId" class="birtModelRight"></birt-work-book>
            </div>
            <el-divider>{{ $t && $t("hivuiSam_layout_summary") || '汇总条件' }}</el-divider>
            <div style="height: 150px;overflow:auto;">
              <el-form @submit.native.prevent ref="havingForm" style="padding: 10px 10px 0 0;" :model="havingForm"
                label-width="80px">
                <el-form-item v-for="(val, name, index) in havingForm" :key="name">
                  <span slot="label" :title="val.label">
                    {{ val.label }}
                  </span>
                  <el-col :span="10">
                    <el-input type="number" v-model="havingForm[name].value" size="mini" controls-position="right"
                      @change="handleChange" :min="0"></el-input>
                  </el-col>
                  <el-col class="line" :span="2">-</el-col>
                  <el-col :span="10">
                    <el-input type="number" v-model="havingForm[name].value2" size="mini" controls-position="right"
                      @change="handleChange" :min="0"></el-input>
                  </el-col>
                  <el-col class="line" :span="2" style="text-align:center;">
                    <el-button v-if="val.sign == 'inRange'" size="mini" type="text"
                      @click="signChange(name, 'outRange')">{{
                        $t && $t("hivuiSam_btn_inRange") || '内' }}</el-button>
                    <el-button v-else size="mini" type="text" @click="signChange(name, 'inRange')">{{ $t &&
                      $t("hivuiSam_btn_outRange") || '外' }}</el-button>
                  </el-col>
                </el-form-item>
              </el-form>
            </div>
            <el-form @submit.native.prevent ref="groupForm" style="padding: 10px 10px 0 0;" :model="groupForm"
              label-width="80px">
              <el-form-item :label="formGroup">
                <i class="el-icon-edit" @click="showtransfer"></i>
                <el-select v-model="groupForm.prop" style="width: 100%;">
                  <el-option v-for="item in groupFields" :label="item.label" :value="item.prop"
                    :key="item.prop"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" size="mini" :loading="loading" @click="doCount">{{ $t &&
                  $t("hivuiSam_btn_doQuery") || '执行查询' }}</el-button>
                <el-button size="mini" @click="reset">{{ $t && $t("hivuiSam_btn_reset") || '重置' }}</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane :label="setPanel" name="setting">
            <el-form @submit.native.prevent ref="settingForm" style="padding: 10px 10px 0 0;" :model="settingForm"
              label-width="90px">
              <el-form-item :label="formXInverse">
                <el-checkbox v-model="settingForm.xInverse" label=""></el-checkbox>
              </el-form-item>
              <el-form-item :label="formToolbox">
                <el-checkbox v-model="settingForm.toolbox" label=""></el-checkbox>
              </el-form-item>
              <el-form-item :label="formAxisMarking">
                <el-select v-model="showType" style="width: 100%;">
                  <el-option v-for="item in axisMarkOptions" :label="item.label" :value="item.value"
                    :key="item.value"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item :label="formLegend">
                <el-select v-model="settingForm.legend" style="width: 100%;">
                  <el-option v-for="item in legendOptions" :label="item.label" :value="item.value"
                    :key="item.value"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item :label="formTipStyle">
                <el-select v-model="settingForm.tipStyle" style="width: 100%;">
                  <el-option v-for="item in tipStyleOptions" :label="item.label" :value="item.value"
                    :key="item.value"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item :label="formStaField">
                <el-select v-model="settingForm.staField" style="width: 100%;" @change="changeShowAnalyseList">
                  <el-option :label="labelNone" value="none"></el-option>
                  <el-option v-for="item in analyseFields" :label="item.label" :value="item.prop"
                    :key="item.prop"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item :label="formTitle">
                <el-checkbox v-model="settingForm.title" label=""></el-checkbox>
              </el-form-item>
              <el-form-item v-if="settingForm.title" :label="formMainTitle">
                <el-input v-model="settingForm.mainTitle" />
              </el-form-item>
              <el-form-item v-if="settingForm.title" :label="formSubTitle">
                <el-input v-model="settingForm.subTitle" />
              </el-form-item>
              <el-form-item :label="formWeekColumns">
                <el-checkbox v-model="settingForm.weekColumns" label=""></el-checkbox>
              </el-form-item>
              <el-form-item v-if="settingForm.weekColumns" :label="formColumn">
                <el-input v-model="settingForm.column" />
              </el-form-item>
              <el-form-item v-if="settingForm.weekColumns" :label="formWeek">
                <el-input v-model="settingForm.week" />
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </hi-layout-right>
      
      <hi-layout-center style="heiht: 100%;">
        
        <div class="chart-tool">
          <i v-if="!showChartMenu" @click="showChartMenu = true" class="el-icon-menu" />
          <div v-else class="content">
            <i class="iconfont icon-num item" :class="{ active: showType == 'num' }" title="显示数值"
              @click="onChangeShowType('num')" />
            <i class="iconfont icon-percentage item" :class="{ active: showType == 'percent' }" title="显示百分比"
              @click="onChangeShowType('percent')" />
            <el-dropdown placement="bottom" @command="changeShowAnalyseList">
              <i class="el-icon-s-unfold"></i>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="none">{{ $t && $t("hivuiSam_label_none") || '不显示' }}</el-dropdown-item>
                <el-dropdown-item :class="{ active: analyseListChecked == item.prop }" v-for="item in analyseFields"
                  :command="item.prop">{{ item.label }}</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <i class="el-icon-close" @click="showChartMenu = false" />
          </div>
        </div>
        
        <div class="depth-analysis">
          <span>{{ $t && $t('hivuiSam_label_depthAnalysis') || '深度分析:' }}</span>
          <el-breadcrumb separator-class="el-icon-arrow-right" style="padding: 0 0 0 10px;">
            <el-breadcrumb-item v-for="(item, index) in deepArr" :key="item.prop">
              <span v-if="item.label.includes(',') && item.selectVal" @click="breadcrumbClick(item.prop)"
                :class="{ deepActive: index == curIndex }" style="cursor: pointer;">
                <span v-for="(it, i) in item.label.split(',')">
                  {{ it }}
                  <span style="color: rgb(255, 102, 0);margin-left:2px;" v-if="index < curIndex">{{
                    item.selectVal.split(',')[i] }}<span v-if="i < item.label.split(',').length - 1">,</span></span>
                </span>
              </span>
              <span v-else @click="breadcrumbClick(item.prop)" :class="{ deepActive: index == curIndex }"
                style="cursor: pointer;">
                {{ item.label }}
                <span style="color: rgb(255, 102, 0);margin-left:2px;" v-if="index < curIndex">{{ item.selectVal
                }}</span>
              </span>
            </el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div v-if="showDetail" style="height: calc( 100% - 80px )">
          <el-table :data="data" ref="table" height="100%" border stripe :show-summary="showSummary"
            :summary-method="getSummaries" header-row-class-name="tableHeader" style="width: 100%">
            <el-table-column v-if="showIndex" width=50 type="index">
            </el-table-column>
            <el-table-column v-for="item in tableColumns" :key="item.prop" :prop="item.prop" :label="item.label"
              :formatter="formatter">
            </el-table-column>
          </el-table>
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="currentPage" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper" :total="total">
          </el-pagination>
        </div>
        <div v-if="!showDetail && chartType == 'table'" style="height: calc( 100% - 80px )">
          <el-table :data="data" ref="table" height="100%" border stripe @row-dblclick="rowDblclick"
            :show-summary="showSummary" :summary-method="getSummaries" header-row-class-name="tableHeader"
            style="width: 100%">
            <el-table-column v-if="showIndex" width=50 type="index">
            </el-table-column>
            <el-table-column v-for="item in tableColumns" :key="item.prop" :prop="item.prop" :label="item.label"
              :formatter="formatter">
            </el-table-column>
          </el-table>
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="currentPage" :page-sizes="pageSizes" :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper" :total="total">
          </el-pagination>
        </div>
        <Pie-chart style="height: calc( 100% - 100px )" v-else-if="!showDetail && chartType == 'pie'" ref="chartConf"
          :conf="chartConf"></Pie-chart>
        <Bar-chart style="height: calc( 100% - 100px )"
          v-else-if="!showDetail && (chartType == 'bar' || chartType == 'stack')" ref="chartConf"
          :conf="chartConf"></Bar-chart>
        <Line-chart style="height: calc( 100% - 100px )" v-else-if="!showDetail && chartType == 'line'" ref="chartConf"
          :conf="chartConf"></Line-chart>
        <Line-chart style="height: calc( 100% - 100px )" v-else-if="!showDetail && chartType == 'area'" ref="chartConf"
          :conf="chartConf"></Line-chart>
        
        <div class="analyseList" v-show="showAnalyseList">
          <div class="analyseList-title">
            {{ analyseList_title }}
          </div>
          <ul class="analyseList-ul">
            <li v-for="(item, index) in data">
              <a @click="analyseListOnClick(item, index)">{{ item[curGroupField] }}</a>
              <span>{{ item[analyseListChecked + '_per'] + '%' }}</span>
            </li>
          </ul>
        </div>
      </hi-layout-center>
    </hi-layout>
    
    <el-dialog :visible.sync="analysisVisible" :height="500">
      <el-table :data="analysisData" size="small" :height="400">
        <el-table-column prop="countField" :label="countFieldLabel">
        </el-table-column>
        <el-table-column prop="tableColumn" :label="tableColumnLabel" align="center">
          <template slot="header" slot-scope="{row}">
            <el-checkbox v-model="tableColumnCheck" @change="handelCheckAll('tableColumn')"
              :label="tableColumnLabel"></el-checkbox>
          </template>
          <template slot-scope="{row}">
            <el-checkbox v-model="row.tableColumn"></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column prop="tableColumnCount" :label="tableColumnCountLabel" align="center">
          <template slot="header" slot-scope="{row}">
            <el-checkbox v-model="tableColumnCountCheck" @change="handelCheckAll('tableColumnCount')"
              :label="tableColumnCountLabel"></el-checkbox>
          </template>
          <template slot-scope="{row}">
            <el-checkbox v-model="row.tableColumnCount"></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column prop="chartColumn" :label="chartColumnLabel" align="center">
          <template slot="header" slot-scope="{row}">
            <el-checkbox v-model="chartColumnCheck" @change="handelCheckAll('chartColumn')"
              :label="chartColumnLabel"></el-checkbox>
          </template>
          <template slot-scope="{row}">
            <el-checkbox v-model="row.chartColumn"></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column prop="chartColumnCount" :label="chartColumnCountLabel" align="center">
          <template slot="header" slot-scope="{row}">
            <el-checkbox v-model="chartColumnCountCheck" @change="handelCheckAll('chartColumnCount')"
              :label="chartColumnCountLabel"></el-checkbox>
          </template>
          <template slot-scope="{row}">
            <el-checkbox v-model="row.chartColumnCount"></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column :label="operateLabel" width="150">
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="columnUp(scope.$index, scope.row)">{{ upLabel }}</el-button>
            <el-button size="mini" type="text" @click="columnDown(scope.$index, scope.row)">{{ downLabel }}</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div slot="title" style="height: 20px;"></div>
    </el-dialog>
    
    <el-dialog :visible.sync="analysisFieldsVisible" :height="500">
      <Pie-chart style="height: 400px;" ref="analysisChart" :conf="analysisChartConf"></Pie-chart>
      <div slot="title" style="height: 20px;"></div>
    </el-dialog>
    
    <el-dialog :visible.sync="transferVisible" :height="500" width="640px" center @close="transferClose">
      <el-transfer class="sam" v-model="groupFieldsEdit" :data="conf.groupFields"
        :titles="[$t('hivuiSam_trans_source'), $t('hivuiSam_trans_target')]" target-order="push" :props="{
          key: 'prop',
          label: 'label'
        }" style="width: 100%;padding: 20px;">
        <span slot-scope="{ option }">{{ option.label }}
          <el-button style="margin-left: 10px;" icon="el-icon-top" type="primary" size="mini" circle
            @click.stop="transferUp(option)"></el-button>
          <el-button icon="el-icon-bottom" type="primary" size="mini" circle
            @click.stop="transferDown(option)"></el-button>
        </span>
      </el-transfer>
      <div slot="title" style="height: 20px;"></div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="transferClose" size="small">取 消</el-button>
        <el-button type="primary" size="small" @click="transferConfirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

import { getToken } from "../../utils/auth";
import "hi-ui/lib/hi-ui.css";
import { HiLayout, HiLayoutLeft, HiLayoutRight, HiLayoutTop, HiLayoutBottom, HiLayoutCenter } from "hi-ui";
import debounce from 'lodash/debounce'
import cloneDeep from 'lodash/cloneDeep'
export default {
  name: "AnalysisSam",
  props: {
    conf: {
      type: Object,
    }
  },
  components: { HiLayout, HiLayoutLeft, HiLayoutRight, HiLayoutTop, HiLayoutBottom, HiLayoutCenter },
  computed: {
    // 后退
    backDisabled() {
      return this.curIndex === 0
    },
    // 前进
    goDisabled() {
      return this.curIndex == this.deepArr.length - 1
    },
    // 表格列
    tableColumns() {
      if (this.showDetail) {
        return this.dataFields
      } else {
        // 组合分组条件分成多个列
        let list = this.curGroupField.split(',')
        // 获取当前分组列
        let curGroupArr = this.groupFields.filter(item => {
          return list.includes(item.prop)
        })
        let arr = []
        // 执行叠加后，网格添加冗余字段
        if (this.superposition) {
          let newFields = []
          let dataList = []
          for (let key in this.selectionData) {
            let selData = this.selectionData[key]
            let id = selData.id
            let simple = selData.simple
            for (let anaField of this.analyseFields) {
              let obj = {}
              obj.prop = anaField.prop + '-' + id;
              obj.label = anaField.label + '-' + simple;
              newFields.push(obj)
            }
            let keyAnalyse = this.analyseFields.map(item => {
              return item.prop
            })
            let data = selData.data.map(sData => {
              for (let key of keyAnalyse) {
                sData[key + '-' + id] = sData[key]
              }
              return sData
            })
            selData.data = data
            dataList = dataList.concat(data)
          }
          // 去重
          let keyList = dataList.map(item => {
            return item[this.curGroupField]
          })
          keyList = Array.from(new Set(keyList))
          if (keyList && keyList.length) {
            let newData = []
            for (let key in keyList) {
              let obj = {
                [this.curGroupField]: keyList[key]
              };
              for (let field of newFields) {
                obj[field.prop] = 0
              }
              for (let sData of this.selectionData) {
                // 组合分组
                if (this.curGroupField.indexOf(',') > -1) {

} else {
                  let keyArr = sData.data.map(item => {
                    return item[this.curGroupField]
                  })
                  let i = keyArr.indexOf(keyList[key])
                  if (i > -1) {
                    obj = { ...obj, ...sData.data[i] }
                  } else {
                    for (let j in sData.data[0]) {
                      obj[j + '-' + sData.id] = 0
                    }
                  }
                }
              }
              newData[key] = obj
            }
            this.data = newData
          } else {
            this.data = []
          }
          arr = curGroupArr.concat(newFields)
        } else {
          // 当前分组列+分析列
          arr = curGroupArr.concat(this.analyseFields)
          if (arr && arr.length) {
            this.sortArr = arr
          }
        }
        arr = arr.filter(item => {
          var show = true
          this.analysisData.forEach(data => {
            if (data.prop == item.prop) {
              show = data.tableColumn
            }
          })
          return show
        })
        return arr
      }
    },
    showIndex() {
      return this.conf && this.conf.showIndex || false
    },
    // 网格是否显示合计行
    showSummary() {
      let flag = false
      this.analysisData.some(item => {
        flag = item.tableColumnCount
        return flag
      })
      return flag
    },
    //  数据列
    dataFields() {
      return this.conf && this.conf.dataFields || []
    },
    // 图表配置
    chartConf() {
      debugger
      let groupBy = this.curGroupField;
      let calcFields = []
      // 系列
      var series = [];
      const tooltipOption = {
        trigger: 'item',
        axisPointer: {
          type: 'shadow'
        },
      }
      let analysisList = this.analysisData.filter(item => {
        return item.chartColumn
      })
      let showLabel = this.showType == 'none' ? false : true
      let showPer = this.showType == 'percent' ? true : false
      let label = {
        show: showLabel,
        position: "top",
      };
      if (showPer) {
        label.formatter = '{c}%'
      }
      calcFields = analysisList.map(item => {
        let prop = showPer ? item.prop + '_per' : item.prop
        let obj = {
          name: prop,
          title: item.label
        }
        series.push({
          tooltip: tooltipOption,
          label: label
        })
        return obj
      })
      let controlName = ''
      let datas = this.data.map((item) => {
        let obj = { ...item }
        for (let key in obj) {
          if (typeof (obj[key]) == 'string' && obj[key].includes('%')) {
            obj[key] = parseFloat(obj[key]) / 100
          } else if (typeof (obj[key]) != 'string' && isNaN(obj[key])) {
            obj[key] = 0
          }
        }
        return obj
      })
      // 组合分组条件时，数据添加组合列
      if (groupBy.includes(',')) {
        let keyArr = groupBy.split(',');
        datas = datas.map(item => {
          let label = []
          for (let key of keyArr) {
            label.push(item[key])
          }
          label = label.join();
          item[groupBy] = label
          return item
        })
      }
      controlName = this.chartType == "pie" ? "PieChart"
        : this.chartType == "bar" ? "BarChart"
          : this.chartType == "stack" ? "BarChart"
            : this.chartType == "line" ? "LineChart"
              : this.chartType == "area" ? "LineChart" : 'PieChart'
      // 区域图
      let areaSeries = calcFields.map(item => {
        return {
          smooth: true,
          areaStyle: {
            normal: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: "rgba(30, 231, 231, 0.3)" }, { offset: 1, color: "rgba(30, 231, 231, 0.1)" }]),
            },
          },
          label: label,
        }
      })
      // 饼图
      let pieSeries = []
      if (this.chartType == "pie") {
        let len = calcFields.length
        if (len > 4) {
          calcFields = calcFields.filter((item, index) => {
            return index < 4
          })
        }
        let formatter = showPer ? '{b}: {d}%' : '{b}: {c}'
        label = {
          normal: {
            show: true,
            formatter: formatter,
            position: 'outer',
            alignTo: 'labelLine'
          }
        }
        switch (len) {
          case 1:
            pieSeries = [{ label: label }];
            break;
          case 2:
            pieSeries = [
              {
                radius: [0, "50%"],
                center: ["25%", "50%"],
                label: label,
              },
              {
                radius: [0, "50%"],
                center: ["75%", "50%"],
                label: label,
              },
            ]
            break;
          case 3:
            pieSeries = [
              {
                radius: [0, "50%"],
                center: ["25%", "50%"],
                label: label,
              },
              {
                radius: [0, "35%"],
                center: ["75%", "30%"],
                label: label,
              },
              {
                radius: [0, "35%"],
                center: ["75%", "70%"],
                label: label,
              },
            ]
            break;
          case 4:
            pieSeries = [
              {
                radius: [0, "35%"],
                center: ["25%", "30%"],
                label: label,
              },
              {
                radius: [0, "35%"],
                center: ["25%", "70%"],
                label: label,
              },
              {
                radius: [0, "35%"],
                center: ["75%", "30%"],
                label: label,
              },
              {
                radius: [0, "35%"],
                center: ["75%", "70%"],
                label: label,
              },
            ]
            break;
          default:
            pieSeries = [
              {
                radius: [0, "35%"],
                center: ["25%", "30%"],
                label: label,
              },
              {
                radius: [0, "35%"],
                center: ["25%", "70%"],
                label: label,
              },
              {
                radius: [0, "35%"],
                center: ["75%", "30%"],
                label: label,
              },
              {
                radius: [0, "35%"],
                center: ["75%", "70%"],
                label: label,
              },
            ]
            break;
        }
      }
      /// 叠加柱图
      let stackSeries = calcFields.map(item => {
        label.position = 'inside'
        return {
          stack: '总量',
          label: label,
        }
      })
      let yAxis = {
        axisLabel: {
          formatter: function (value, index) {
            return value + '%';
          }
        }
      }
      let xAxis = [{
        inverse: this.settingForm.xInverse,
        //type: 'category',
        //axisLabel: { interval: 0, rotate: 30 }
      }]
      let legend = {
        show: this.settingForm.legend != 1,
        orient: this.settingForm.legend == 3 ? 'vertical' : 'horizontal',
      }
      if (this.settingForm.legend == 3) {
        legend.top = '20%'
        legend.right = '3%'
      } else {
        delete legend.top
        delete legend.right
      }
      let tooltip = {
        show: true,
        formatter: this.settingForm.tipStyle == 1 ? '{a}: {c}' :
          this.settingForm.tipStyle == 2 ? '{a}: {d}' :
            this.settingForm.tipStyle == 3 ? '{a}: {c}<br />{b}' : '{a}: {c}'
      }
      let title = {
        show: this.settingForm.title,
        text: this.settingForm.mainTitle,
        subtext: this.settingForm.subTitle,
      }
      let option = {
        legend: legend,
        toolbox: {
          show: this.settingForm.toolbox,
          feature: {
            dataZoom: {
              yAxisIndex: "none",
              title: { zoom: '区域缩放', back: '区域缩放还原' }
            },
            dataView: {
              readOnly: false,
              title: '数据视图'
            },
            restore: {
              title: '还原'
            },
            saveAsImage: {
              show: true,
              title: '保存为图片'
            }
          }
        },
        tooltip: tooltip,
        title: title,
        series: this.chartType == "area" ? areaSeries
          : this.chartType == "stack" ? stackSeries
            : this.chartType == "pie" ? pieSeries : series
      }
      if (this.chartType != "pie") {
        option.xAxis = xAxis;
      }
      if (showPer && this.chartType != "pie") {
        option.yAxis = yAxis
      }
      // 深度合并自定义图表option
      JsonUtil.deepMerge(option, this.getExtendChartConfByType(this.chartType))
      const conf = {
        controlName: controlName,
        controlId: "chart_controlid",
        height: "100%",
        isGroupData: true,
        groupBy: groupBy,
        datas: datas,
        calcFields: calcFields,
        option: option,
        events: {
          click(row) {
            let _this = this.$parent.$parent.$parent;
            _this.currentObj = row.data
            _this.currentObj.prop = _this.curGroupField;
            if (_this.perspective) {
              var index = -1
              _this.deepArr.forEach((item, i) => {
                if (item.prop == _this.curGroupField) {
                  index = i
                }
              })
              if (index > -1 && index < _this.deepArr.length - 1) {
                _this.analysisFieldsVisible = false
                _this.curIndex = _this.curIndex + 1
                _this.currentObj = _this.deepArr[_this.curIndex];
                _this.data = _this.currentObj.data
                _this.curGroupField = _this.currentObj.prop;
              } else {
                _this.analysisChartConf.datas = _this.deepAnalysisFields
                _this.analysisFieldsVisible = true
              }
            } else {
              _this.analysisChartConf.datas = _this.deepAnalysisFields
              _this.analysisFieldsVisible = true
            }
            _this.superposition = false
          }
        }
      };
      return conf
    },
    //  深度分析字段列表
    deepAnalysisFields() {
      let fields = this.groupFields
      if (fields && fields.length == 0) {
        return []
      }
      let analysisFields = fields.map((item) => {
        item.value = 1
        return item
      });

// 排除已经统计的分析列
      if (this.deepArr && this.deepArr.length > 0) {
        let arrnew = this.deepArr.slice(0, this.curIndex + 1).map((item) => {
          return item.prop
        });
        // 多条件的分组 拆开排除
        arrnew.forEach(item => {
          if (item.includes(',')) {
            arrnew.concat(item.split(','))
          }
        })
        analysisFields = analysisFields.filter(item => {
          return arrnew.indexOf(item.prop) < 0
        })
      }
      // 添加详情
      analysisFields.push(
        {
          prop: 'detail',
          label: this.$t && this.$t("hivuiSam_btn_detail") || '详情',
          value: 1
        }
      )
      return analysisFields
    },
    // 查询字段
    queryFields() {
      let queryFields = []
      let fields = this.conf && this.conf.queryFields
      if (!fields || fields.length == 0) {
        queryFields = []
      } else {
        queryFields = fields.map(item => {
          let obj = {}
          obj.prop = item.prop;
          obj.label = item.label;
          if (item.props && item.props.lookup) {
            let model = item.props.lookup
            if (item.element === 'hi-select-grid') {
              var columns = []
              if (model && model.columns && model.columns.length) {
                columns = model.columns.map(item => {
                  item.prop = item.name
                  return item
                })
              }
              let table = model.tableprops || {}
              table['columns'] = columns
              obj.lookup = {
                type: "data",
                openstyle: 'selectgrid',
                bindField: item.prop,
                lookSelectGrid: {
                  width: 1200,
                  height: 600,
                  table: table,
                  bindField: item.prop
                },
              }
              if (model && model.sourceDatas) {
                obj.lookup.lookSelectGrid['tableData'] = model && model.sourceDatas
              }
              if (model && model.modelFile) {
                obj.lookup['lookDataset'] = {
                  modelFilePath: this.conf.dataset.controlId,
                  showSearchField: true
                }
              }
              obj.dbtype = 'dbString'
            } else if (item.element === 'hi-data-select') {
              var columns = []
              if (model && model.columns && model.columns.length) {
                columns = model.columns.map(item => {
                  item.prop = item.name
                  return item
                })
              }
              let queryOptionFields = model.queryOption && model.queryOption.fields
              let store = model.storeCfg || model.sourceDsCfg
              let modelFilePath = store.modelFile
              let fields = store.fields
              if (!(queryOptionFields && queryOptionFields.length)) {
                return
              }
              let rows = queryOptionFields.map(item => {
                return {
                  children: [
                    {
                      prop: item.name,
                      label: item.label
                    }
                  ]
                }
              });
              let cols = queryOptionFields.map(item => {
                return { colWidth: 100 }
              });
              let queryPanel = {
                rows: rows,
                cols: cols
              };
              let tableColumn = model.columns.map(item => {
                return {
                  prop: item.name,
                  label: item.label
                }
              })
              // var table = model.tableprops || {}
              var table = {
                children: tableColumn,
                stripe: model.tableprops && model.tableprops.stripe || false
              }
              let ds = {
                controlName: "HcDataset",
                controlId: modelFilePath,
                name: model.entityDs,
                modelFilePath: modelFilePath,
                _infcPagging: {
                  pageSize: 10,
                  pageNum: 1,
                  returnCount: true
                },
                _infcLoad: {
                  autoActive: true,
                },
                fields: fields,
                data: [],
              }
              obj.lookup = {
                type: "data",
                openstyle: 'dialog',
                birtModel: GridSingleSelect({
                  mainDataset: ds,
                  hcQueryPanel: queryPanel,
                  hcTable: table
                }),
                lookDataset: {
                  modelFilePath: modelFilePath, // 数据模型路径
                  showSearchField: true
                },
                lookDialog: {
                  title: "",
                  width: 900,
                  height: 600,
                },
                bindField: item.prop,
                sourceDsId: model.sourceDsId
              }
              obj.dbtype = 'dbString'
            }
          }
          // 时间方案
          if (item.props && item.element == 'hi-time-scheme') {
            obj.dbtype = 'dbDatetime'
            obj.format = item.props.format
            obj.element = 'hi-time-scheme'
            obj.disabledEx = item.disabledEx
            obj.viewStyle = {
              viewStyleId: 'DATERANGE',
              type: item.props.rangeType,
              format: item.props.format
            }
          }
          return obj
        })
      }
      return queryFields
    },
    // 数据集字段
    fields() {
      let fields = this.conf.dataset && this.conf.dataset.config.fields
      for (let key in this.queryFields) {
        let prop = this.queryFields[key].prop
        if (fields[prop] && fields[prop].lookup) {
          let lookup = Object.assign(fields[prop].lookup, this.queryFields[key].lookup)
          // 下拉枚举查找
          if (lookup.label && lookup.returnFields) {
            for (let key in lookup.returnFields) {
              if (lookup.returnFields[key] == lookup.label && lookup.lookSelectGrid) {
                lookup.bindShowField = key
                lookup.lookSelectGrid.bindShowField = key
              }
              if (lookup.lookSelectGrid && lookup.lookSelectGrid.tableData) {
                let data = lookup.lookSelectGrid.tableData
                for (let i in data) {
                  if (data[i][lookup.returnFields[key]]) {
                    data[i][key] = data[i][lookup.returnFields[key]]
                  }
                }
              }
            }
          }
          // 数据模型查找
          if (lookup.fieldPair) {
            if (lookup.sourceDsId) {
              lookup.returnFields = lookup.fieldPair[lookup.sourceDsId].returnFields
            } else {
              let key = Object.keys(lookup.fieldPair)[0]
              lookup.returnFields = lookup.fieldPair[key].returnFields
            }
          }
          lookup.returnType = "single",
            fields[prop]['lookup'] = lookup
        }
        // 时间方案
        if (fields[prop] && this.queryFields[key].element == 'hi-time-scheme') {
          let fd = this.queryFields[key]
          fields[prop].dbtype = 'dbDatetime'
          fields[prop].format = fd.format
          fields[prop].disabledEx = fd.disabledEx
        }
      }
      // 应用默认填充表达式
      for (let key in fields) {
        if (fields[key].default && fields[key].default.exps) {
          fields[key].default['expr'] = fields[key].default.exps
        }
      }
      return fields
    },
    // 数据集
    dataset() {
      var dataset = {}
      if (this.conf && this.conf.dataset) {
        debugger
        let ds = this.conf.dataset
        dataset = {
          controlName: ds.controlName,
          controlId: ds.controlId,
          name: ds.name,
          modelFilePath: ds.modelFilePath,
          fields: this.fields,
          _infcLoad: Object.assign({
            autoActive: false
          }, ds._infcLoad),
          _infcPagging: {
            returnCount: true,
            pageSize: 100,
            pageNum: 1
          },
          data: [],
        }
      }
      return dataset
    },
    // 查询面板
    birtModelRight() {
      let rows = this.queryFields.map(item => {
        return { children: [item], colspan: 12 }
      })
      let cols = this.queryFields.map(item => {
        return { colWidth: 60 }
      })
      const queryPanel = {
        rows: rows,
        cols: cols
      };
      let hcQueryPanel = {
        controlName: "HcQueryPanel",
        controlId: "HcQueryPanel_sam",
        inline: false,
        dataset: this.dataset && this.dataset.controlId || "dsSam",
        size: "small",
        hideBtn: true,
        style: "width: 100%;",
        children: [],
      };
      Object.assign(hcQueryPanel, QueryStyleFactory.buildForm(queryPanel) || {});
      let me = this;
      let birtModelRight = {
        controlName: "BirtWorkBook",
        controlId: "BirtWorkBook_right",
        style: "border-bottom: 1px solid #eee;",
        showToolBar: false,
        children: [
          {
            controlName: "BirtSheet",
            controlId: "BirtSheet_right",
            name: "sheet0",
            pageIndex: 0,
            dataSets: [{
              controlName: "HcDataset",
              controlId: "dsScheme",
              name: "SysSchemeBizEntity",
              rowKey: "FGUID",
              modelFilePath: "/platf/scheme/entity/SysSchemeBizEntity.xml",
              _infcLoad: {
                autoActive: false,
                __zcQuery: true
              },
              _infcPagging: {
                _isAddingPagging: false,
                pageSize: -1,
              },
              fields: {},
              data: [],
            }].concat(this.dataset ? this.dataset : []),
            children: [
              {
                controlName: "BirtFormSheet",
                controlId: "BirtFormSheet_01",
                children: [hcQueryPanel]
              }
            ]
          }
        ],
        mounted: function () {
          setTimeout(() => {
            debugger
            let __pushStr = me.conf.__push;
            let pushParam;
            if (__pushStr) {
              pushParam = JSON.parse(decodeURIComponent(__pushStr))
            }
            me.doCount(pushParam)
          }, 100);
        }
      };
      return birtModelRight
    },
    // 分组条件(统计字段)
    groupFields() {
      let groupFields = this.conf && cloneDeep(this.conf.groupFields) || []
      // 组合分组条件
      if (this.curTransferVal && this.curTransferVal.length) {
        let obj = {}
        let curTransferLabel = this.curTransferVal.map(item => {
          for (var field of groupFields) {
            if (field.prop == item) {
              return field.label
            }
          }
        })
        obj = {
          prop: this.curTransferVal.join(),
          label: curTransferLabel.join()
        }
        groupFields.push(obj)
      }
      return groupFields
    },
    // 分析字段
    analyseFields() {
      return this.conf && this.conf.analyseFields || []
    },
    // 显示详情
    showDetail() {
      return this.currentObj.prop == 'detail'
    },
    // 执行叠加按钮
    btnDisabled() {
      return !this.selectionData || this.selectionData.length < 2
    },
    analyseList_title() {
      if (this.conf.analyseFields && this.conf.analyseFields.length && this.analyseListChecked) {
        let curField = this.conf.analyseFields.filter(item => {
          return item.prop == this.analyseListChecked
        })[0]
        return curField && curField.label || ''
      } else {
        return ''
      }
    }
  },
  watch: {
    conf: {
      deep: true,
      handler: function (val) {
        if (val && val.groupFields && !this.groupForm.prop) {
          this.groupForm.prop = val.groupFields[0] && val.groupFields[0].prop
          this.curGroupField = this.groupForm.prop
        }
        if (val && val.analyseFields && val.analyseFields.length) {
          this.analysisData = val.analyseFields.map(item => {
            let obj = {
              prop: item.prop,
              label: item.label,
              countField: item.label,
              tableColumn: true,
              tableColumnCount: true,
              chartColumn: true,
              chartColumnCount: true,
            }
            return obj
          })
        }
      }
    },
  },
  data() {
    return {
      size: 'small',
      superposition: false,
      perspective: false,
      chartType: "table",
      groupForm: {
        prop: ""
      },
      loading: false,
      currentPage: 1,
      pageSize: 100,
      pageSizes: [10, 20, 50, 100],
      total: 0,
      data: [],
      // 排序
      sortArr: [],
      sortIndex: -1,
      sortType: '',
      // 分析列
      analysisVisible: false,
      analysisData: [],
      tableColumnCheck: true,
      tableColumnCountCheck: true,
      chartColumnCheck: true,
      chartColumnCountCheck: true,
      // 分析字段
      analysisFieldsVisible: false,
      analysisFieldsArr: [],
      analysisChartConf: {
        controlName: "PieChart",
        controlId: "chart_analysis",
        height: "100%",
        isGroupData: true,
        groupBy: "label",
        datas: [],
        calcFields: [
          {
            name: "value",
            title: ""
          }
        ],
        option: {
          legend: {
            show: true
          }
        },
        events: {
          click(row) {
            debugger;
            var _this = this.$parent.$parent;
            _this.analysisChartConf.datas = _this.deepAnalysisFields
            let data = JSON.parse(JSON.stringify(row.data))
            delete data.emphasis
            // 删除当前分析以后的深度分析
            _this.deepArr.splice(_this.curIndex + 1, _this.deepArr.length - _this.curIndex - 1)
            let obj = _this.deepArr[_this.deepArr.length - 1]
            if (_this.currentObj.name) {
              obj.selectVal = _this.currentObj.name
            } else {
              if (_this.currentObj.prop.includes(',')) {
                let selectVal = []
                let arr = _this.currentObj.prop.split(',')
                selectVal = arr.map(item => {
                  return _this.currentObj[item]
                })
                obj.selectVal = selectVal.join()
              } else {
                obj.selectVal = _this.currentObj[_this.currentObj.prop]
              }
            }
            _this.$set(_this.deepArr, _this.curIndex, obj)
            _this.$set(_this.deepArr, _this.curIndex + 1, data)
            _this.curGroupField = data.prop;
            _this.currentObj = data;
            _this.curIndex = _this.curIndex + 1;
            _this.doQuery();
            _this.analysisFieldsVisible = false;
          }
        }
      },
      // 深度分析
      deepArr: [],
      conf: {},
      // 图表当前选中对象
      currentObj: {},
      // 当前分组字段
      curGroupField: '',
      // 深度分析当前环节下标
      curIndex: 0,
      exportLoading: false,
      // 穿梭框
      transferVisible: false,
      curTransferVal: [],
      groupFieldsEdit: [],
      schemeLoading: false,
      havingForm: {},
      // 分析记录
      recordVisible: false,
      recordData: [],
      // 已勾选记录
      selectionData: [],
      //  统计方案
      schemeData: [],
      schemeVisible: false,
      // 是否监听
      isMonitor: false,
      // 底部汇总数据
      bottomSummary: {},
      // 是否查询面板查询
      isQueryModel: false,
      // 显示图表菜单
      showChartMenu: false,
      showType: 'none',
      showAnalyseList: false,
      analyseListChecked: '',
      // 设置面板
      activeName: 'condition',
      settingForm: {
        xInverse: false,
        toolbox: false,
        axisMarking: 1,
        legend: 2,
        tipStyle: 3,
        staField: 'none',
        title: false,
        mainTitle: '',
        subTitle: '',
        weekColumns: false,
        column: '',
        week: '',
      },
      axisMarkOptions: [
        {
          label: this.$t && this.$t("hivuiSam_axisMarkOptions_none") || '不显示',
          value: 'none'
        },
        {
          label: this.$t && this.$t("hivuiSam_axisMarkOptions_num") || '显示值',
          value: 'num'
        },
        {
          label: this.$t && this.$t("hivuiSam_axisMarkOptions_percent") || '百分比',
          value: 'percent'
        },
      ],
      legendOptions: [
        {
          label: this.$t && this.$t("hivuiSam_legendOptions_1") || '不显示',
          value: 1
        },
        {
          label: this.$t && this.$t("hivuiSam_legendOptions_2") || '上边',
          value: 2
        },
        {
          label: this.$t && this.$t("hivuiSam_legendOptions_3") || '右边',
          value: 3
        },
      ],
      tipStyleOptions: [
        {
          label: this.$t && this.$t("hivuiSam_tipStyleOptions_1") || '值',
          value: 1
        },
        {
          label: this.$t && this.$t("hivuiSam_tipStyleOptions_2") || '百分比%',
          value: 2
        },
        {
          label: this.$t && this.$t("hivuiSam_tipStyleOptions_3") || `值+分类`,
          value: 3
        },
      ],
      conditionPanel: this.$t && this.$t("hivuiSam_layout_conditionPanel") || '条件面板',
      formGroup: this.$t && this.$t("hivuiSam_form_group") || '分组条件',
      setPanel: this.$t && this.$t("hivuiSam_layout_setPanel") || '设置面板',
      formXInverse: this.$t && this.$t("hivuiSam_form_xInverse") || '横轴翻转',
      formToolbox: this.$t && this.$t("hivuiSam_form_toolbox") || '显示工具条',
      formAxisMarking: this.$t && this.$t("hivuiSam_form_axisMarking") || '轴标记',
      formLegend: this.$t && this.$t("hivuiSam_form_legend") || '系列名',
      formTipStyle: this.$t && this.$t("hivuiSam_form_tipStyle") || '提示风格',
      formStaField: this.$t && this.$t("hivuiSam_form_staField") || '统计字段',
      formTitle: this.$t && this.$t("hivuiSam_form_title") || '标题',
      formMainTitle: this.$t && this.$t("hivuiSam_form_mainTitle") || '主标题',
      formSubTitle: this.$t && this.$t("hivuiSam_form_subTitle") || '副标题',
      formWeekColumns: this.$t && this.$t("hivuiSam_form_weekColumns") || '周栏',
      formColumn: this.$t && this.$t("hivuiSam_form_column") || '栏数',
      formWeek: this.$t && this.$t("hivuiSam_form_week") || '每栏周期',
      labelNone: this.$t && this.$t("hivuiSam_label_none") || '不显示',
      countFieldLabel: this.$t && this.$t("hivuiSam_table_countField") || '统计字段',
      tableColumnLabel: this.$t && this.$t("hivuiSam_table_tableColumn") || '网格列',
      tableColumnCountLabel: this.$t && this.$t("hivuiSam_table_tableColumnCount") || '网格合计列',
      chartColumnLabel: this.$t && this.$t("hivuiSam_table_chartColumn") || '图表列',
      chartColumnCountLabel: this.$t && this.$t("hivuiSam_table_chartColumnCount") || '图表列汇总',
      operateLabel: this.$t && this.$t("hivuiSam_table_operate") || '操作',
      upLabel: this.$t && this.$t("hivuiSam_btn_up") || '上移',
      downLabel: this.$t && this.$t("hivuiSam_btn_down") || '下移',
      schemeLabel: this.$t && this.$t("hivuiSam_table_scheme") || '方案名称',
      abbreviationLabel: this.$t && this.$t("hivuiSam_table_abbreviation") || '缩写',
      editLabel: this.$t && this.$t("hivuiSam_btn_edit") || '编辑',
      confirmLabel: this.$t && this.$t("hivuiSam_btn_confirm") || '确定',
      removeLabel: this.$t && this.$t("hivuiSam_btn_remove") || '删除',
      executeOverlayLabel: this.$t && this.$t("hivuiSam_btn_executeOverlay") || '执行叠加',
      analysisRecordLabel: this.$t && this.$t("hivuiSam_btn_analysisRecord") || '分析记录',
      schemeListLabel: this.$t && this.$t("hivuiSam_btn_schemeList") || '方案列表',
      panelTitle: this.$t && this.$t("hivuiSam_layout_panel") || '面板',
    }
  },
  updated() {
    this.$nextTick(() => {
      this.$refs["table"] && this.$refs["table"].doLayout();
    });
  },
  methods: {
    // 根据图表类型获取图表扩展配置
    getExtendChartConfByType(type) {
      debugger
      var chartOptions = this.conf.chartOptions;
      var extendOption = {}
      if (chartOptions.length > 0) {
        chartOptions.forEach(item => {
          if (item.chartName == "basic" || item.chartName == type) {
            JsonUtil.deepMerge(extendOption, item.chartOption)
          }
        })
      }
      return extendOption
    },
    //  排序
    sortClick(val) {
      this.sortIndex = val
      this.doQuery();
    },
    sortDown() {
      this.sortType = 'desc'
    },
    sortUp() {
      this.sortType = 'asc'
    },
    // 前进
    goCommand(index) {
      this.curIndex = index;
      this.currentObj = this.deepArr[index];
      this.curGroupField = this.currentObj.prop;
      this.data = this.currentObj.data
    },
    goClick: debounce(function () {
      if (this.curIndex < this.deepArr.length - 1) {
        this.curIndex = this.curIndex + 1;
        this.currentObj = this.deepArr[this.curIndex];
        this.curGroupField = this.currentObj.prop;
        this.data = this.currentObj.data
      }
    }, 500),
    // 后退
    backCommand(val) {
      this.curIndex = val
      this.currentObj = this.deepArr[val];
      this.curGroupField = this.currentObj.prop;
      this.data = this.currentObj.data
    },
    backClick: debounce(function () {
      if (this.curIndex > 0) {
        this.curIndex = this.curIndex - 1
        this.currentObj = this.deepArr[this.curIndex];
        this.curGroupField = this.currentObj.prop;
        this.data = this.currentObj.data
      }
    }, 500),
    // 深度分析
    breadcrumbClick(val) {
      this.curGroupField = val
      let arrnew = this.deepArr.map(item => {
        return item.prop
      })
      this.curIndex = arrnew.indexOf(val)
      this.currentObj = this.deepArr[this.curIndex];
      // 数据替换成缓存的数据
      this.data = this.currentObj.data
    },
    // 点击表格
    rowDblclick(row) {
      this.currentObj = row
      this.currentObj.prop = this.curGroupField;
      this.superposition = false
      if (this.perspective) {
        var index = -1
        this.deepArr.forEach((item, i) => {
          if (item.prop == this.curGroupField) {
            index = i
          }
        })
        if (index > -1 && index < this.deepArr.length - 1) {
          this.analysisFieldsVisible = false
          this.curIndex = this.curIndex + 1
          this.currentObj = this.deepArr[this.curIndex];
          this.data = this.currentObj.data
          this.curGroupField = this.currentObj.prop;
        } else {
          this.analysisChartConf.datas = this.deepAnalysisFields
          this.analysisFieldsVisible = true
        }
      } else {
        this.analysisChartConf.datas = this.deepAnalysisFields
        this.analysisFieldsVisible = true
      }
    },
    // 点击查询
    doCount(param) {
      debugger;
      // 叠加状态下不执行查询操作
      if (this.superposition) {
        return
      }
      // 监听数据集
      if (this.dataset) {
        let ds = this.$refs.BirtWorkBook_right.dataset[this.dataset.controlId]
        // 补充下推参数
        if (param) {
          if (param.target) {
            ds.setPushQueryCdion({ __body: param.target.ps })
          } else {
            ds.setPushQueryCdion(param)
          }
        }
        if (!this.isMonitor) {
          ds && ds.on("afterLoadData", this.afterLoadData);
          this.isMonitor = true
        }
        this.loading = true;
        let prop = this.groupForm.prop;
        let fields = this.groupFields.map(item => {
          return item.prop
        })
        this.curGroupField = prop;
        let index = fields.indexOf(prop)
        if (this.deepArr.length) {
          // 如果切换了分组条件，清空深度分析
          if (this.deepArr[0] && this.deepArr[0].prop !== prop) {
            this.deepArr = []
            this.currentObj = this.groupFields[index]
            this.recordData = []
          } else {
            this.currentObj = this.deepArr[0]
          }
        }
        this.currentPage = 1
        let queryModel = ds.getQueryModel()
        this.doQuery(queryModel);
        // 添加分析记录
        let obj = {}
        if (Object.keys(queryModel).length === 0) {
          obj = {
            id: 'empty',
            name: this.$t && this.$t("hivuiSam_name_empty") || '空条件',
            prop: this.groupForm.prop,
          }
        } else {
          let keyArr = [];
          let labelArr = [];
          for (let key in queryModel) {
            if (queryModel[key] || queryModel[key] === 0) {
              keyArr.push(key);
              // let arr = this.queryFields.filter(item =>{
              //   return item.prop == key
              // })
              labelArr.push(queryModel[key]);
            }
          };
          if (keyArr.length && labelArr.length) {
            obj = {
              id: keyArr.join() + '_' + labelArr.join(),
              name: labelArr.join(),
              prop: this.groupForm.prop,
            }
          } else {
            obj = {
              id: 'empty',
              name: this.$t && this.$t("hivuiSam_name_empty") || '空条件',
              prop: this.groupForm.prop,
            }
          }
        }
        // 判断分析记录中是否含有此条件，有则跳过，无则添加
        const ids = this.recordData.map(value => value.id);
        if (!ids.includes(obj.id)) {
          this.isQueryModel = true
          let simple = this.recordData.length + 1;
          obj.simple = simple
          obj.isEdit = false
          this.recordData.push(obj);
        } else {
          this.isQueryModel = false
        }
        // 当前分组加入深度分析
        if (index < 0) {
          this.$message.error('当前分组条件不在分组字段中，请重新配置')
        } else {
          this.$set(this.deepArr, 0, this.groupFields[index])
          this.curIndex = 0
        };
      }
    },
    // 网格列格式化函数
    formatter(row, column, cellValue, index) {
      let fn = column.property;
      return this.formatValue(cellValue, fn)
    },
    // 根据字段配置输出格式化值
    formatValue(cellValue, fn) {
      let format = this.fields && this.fields[fn] && this.fields[fn].format;
      if (format) {
        // 空值处理
        if (cellValue == null || cellValue === '' || isNaN(Number(cellValue))) {
          const zeroPart = format.replace(/[^\d.,]/g, '').replace(/0+/g, '0');
          return format.replace(/[0-9,.]+/, zeroPart);
        }
        const num = Number(cellValue);
        // 1. 提取货币符号（￥ $ € 等）
        const symbol = format.replace(/[^^\$\￥¥€£]/g, '').trim();
        // 2. 自动识别小数位数（根据格式小数点后面有几位）
        const precision = format.includes('.') ? (format.split('.')[1].match(/0/g) || []).length : 0;
        // 3. 四舍五入指定位数
        let fixed = num.toFixed(precision);
        // 4. 添加千分位
        fixed = fixed.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
        // 5. 拼接符号（如果格式里有符号就带上）
        return symbol ? symbol + fixed : fixed;
      }
      return cellValue;
    },
    afterLoadData(datas) {
      debugger
      let newData = datas
      let ds = this.$refs.BirtWorkBook_right.dataset[this.dataset.controlId]
      if (datas && datas.length && this.curGroupField != 'detail') {
        // newData = datas.map(item => {
        //   return ds && ds.getFormatRecd(item)
        // })
        // 添加百分比数据
        newData = newData.map(data => {
          for (let field of this.analyseFields) {
            let prop = field.prop
            let percent = prop + '_per'
            let sum = 0
            const values = datas.map(item => Number(item[prop]));
            if (!values.every(value => isNaN(value))) {
              sum = values.reduce((prev, curr) => {
                const value = Number(curr);
                if (!isNaN(value)) {
                  return prev + curr;
                } else {
                  return prev;
                }
              }, 0);
            }
            if (sum && sum > 0) {
              data[percent] = Number((data[prop] / sum * 100).toFixed(2))
            } else {
              data[percent] = 0
            }
          }
          return data
        })
      }
      this.data = newData
      // 缓存数据
      if (this.deepArr && this.deepArr.length > 0) {
        this.deepArr[this.curIndex].data = newData;
      } else {
        this.deepArr = [newData]
      }
      // 总条数
      this.total = ds._infcPagging.recordCount || this.total;
      // 底部汇总数据
      this.bottomSummary = ds.getBottomSummeryRecd();
      // 添加分析记录
      if (!this.isQueryModel) return
      this.recordData[this.recordData.length - 1].data = datas
    },
    // 查询方法
    doQuery(model) {
      debugger
      let ds = this.$refs.BirtWorkBook_right.dataset[this.dataset.controlId]
      if (this.showDetail) {
        ds._infcPagging = {
          _isPagging: true,
          pageSize: this.pageSize,
          pageNum: this.currentPage,
          returnCount: true
        };
        ds._infcStat = {}
        ds._infcSort = {}
      } else {
        ds._infcPagging = {
          _isPagging: true,
          pageSize: this.pageSize,
          pageNum: this.currentPage,
          returnCount: true
        };
        ds._infcStat = {
          isGroupData: true,
          groupBy: this.curGroupField,
          __bottomSummary: true
        }
        if (this.sortIndex > -1) {
          let obj = this.sortArr[this.sortIndex]
          ds._infcSort.orderBy = [{
            name: obj.prop,
            desc: obj.label,
            type: this.sortType || 'desc'
          }]
        } else {
          ds._infcSort.orderBy = []
        }
        if (this.havingForm) {
          let _infcHaving = {};
          for (let item in this.havingForm) {
            let obj = JSON.parse(JSON.stringify(this.havingForm[item]))
            let val = obj.value
            let val2 = obj.value2
            if (val === undefined && val === undefined) {

} else if ((val || val === 0) && (val2 || val2 === 0)) {
              _infcHaving[item] = obj
            } else {
              if (obj.sign == 'inRange') {
                obj.sign = 'lteq'
              } else {
                obj.sign = 'gt'
              }
              _infcHaving[item] = obj
            }
          }
          ds._infcHaving = _infcHaving
        }
      }
      if (model) {
        ds.setQueryModel(model)
        ds._infcLoad.additionalModel = {};
      } else if (this.deepArr && this.deepArr.length > 0) {
        let queryModel = {}
        this.deepArr.forEach(item => {
          if (item.prop && item.selectVal) {
            if (!item.prop.includes(",")) {
              queryModel[item.prop] = item.selectVal
            } else {
              let arr = item.prop.split(',')
              arr.forEach((it, i) => {
                queryModel[it] = item.selectVal && item.selectVal.split(',')[i]
              })
            }
          }
        })
        ds.setAdditionalModel(queryModel)
      } else {
        ds._infcLoad.additionalModel = {};
        ds._infcLoad.queryModel = {}
      }
      ds.query();
      this.loading = false;
    },
    //  重置
    reset() {
      this.$refs.groupForm.resetFields();
      this.$refs.havingForm.resetFields();
      this.havingForm = JSON.parse(JSON.stringify(this.conf.havingForm));
      this.curTransferVal = []
      this.groupForm.prop = this.groupFields[0] && this.groupFields[0].prop;
      var queryPanel = this.$refs.BirtWorkBook_right.$children[0].$children[0].$children[0].$children[0].$children[0].$children[0];
      queryPanel.reset();
      let ds = this.$refs.BirtWorkBook_right.dataset[this.dataset.controlId]
      ds._infcLoad.queryModel = {}
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.doQuery()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.doQuery()
    },
    // 切换图表
    chartTypeChange(command) {
      this.chartType = command;
    },
    // 打开分析列
    analysisClick() {
      this.analysisVisible = true
    },
    // 分析列全选
    handelCheckAll(val) {
      let _this = this
      this.analysisData = this.analysisData.map(item => {
        if (val == 'tableColumn') {
          item.tableColumn = _this.tableColumnCheck
        }
        if (val == 'tableColumnCount') {
          item.tableColumnCount = _this.tableColumnCountCheck
        }
        if (val == 'chartColumn') {
          item.chartColumn = _this.chartColumnCheck
        }
        if (val == 'chartColumnCount') {
          item.chartColumnCount = _this.chartColumnCountCheck
        }
        return item
      })
    },
    // 分析列上移
    columnUp(index, row) {
      let arr = this.analysisData
      if (index > 0) {
        arr.splice(index - 1, 1, ...arr.splice(index, 1, arr[index - 1]));
      }
    },
    columnDown(index, row) {
      let arr = this.analysisData
      if (index < arr.length) {
        arr.splice(index, 1, ...arr.splice(index + 1, 1, arr[index]));
      };
    },
    // 刷新
    refresh() {
      this.doQuery();
      this.$refs.chartConf && this.$refs.chartConf.refreshChart();
    },
    // 导出
    exportExcel() {
      let param = {
        pageNum: -1,
        pageSize: -1,
        __slaveExport: false,
      };
      let __body = {};
      let ds = this.$refs.BirtWorkBook_right.dataset[this.dataset.controlId]
      var cdion = ds.lastLoadCdion
      console.log('cdion', cdion)
      if (cdion) {
        __body['queryCdions'] = JSON.parse(cdion);
      }
      if (this.curGroupField !== 'detail') {
        __body['groupBy'] = this.curGroupField
      }
      param['modelFilePath'] = ds['modelFilePath'];
      param['__funcpath'] = ds['__funcpath'];
      param.__body = __body
      let sheetStyle = {}
      let cells = []
      let columns = []
      this.tableColumns.forEach(item => {
        cells.push({
          title: item.label,
          colspan: 1,
          rowspan: 1
        })
        columns.push({
          field: item.prop,
          width: 170
        })
      });
      sheetStyle = {
        name: '统计分析',
        titleRows: [
          {
            cells: cells
          }
        ],
        columns: columns
      }
      param.__sheetStyle = sheetStyle
      var time = new Date().getTime()
      var title = `统计分析${time}`
      var data = {
        title: title,
        __sheetDatas: JSON.stringify([param])
      }
      var url = this.$HI.exportUrl
      this.exportLoading = true
      this.$HI.request.post(url, data).then((res) => {
        console.log('res', res)
        this.exportLoading = false
        if (res.status == 200) {
          let token = getToken();
          let pn = window.HIVUI_SETTING && window.HIVUI_SETTING.projectName
          var url = this.$HI.download + `?path=${res.dataPack.path}&access_token=${token}&pn=${pn}`
          url = url.replace(/\\/g, "/")
          const a = document.createElement('a') //创建a标签
          a.style.display = 'none'
          a.href = url // 指定下载链接
          a.download = title //指定下载文件名
          a.click() //触发下载
        }
      }).catch((e) => {
        this.exportLoading = false
      })
    },
    // 打开穿梭框
    showtransfer() {
      this.groupFieldsEdit = JSON.parse(JSON.stringify(this.curTransferVal))
      this.transferVisible = true
    },
    transferConfirm() {
      if (this.groupFieldsEdit && this.groupFieldsEdit.length > 1) {
        this.curTransferVal = JSON.parse(JSON.stringify(this.groupFieldsEdit))
        this.groupForm.prop = this.curTransferVal.join();
        this.curGroupField = this.groupForm.prop;
        this.transferVisible = false
      } else {
        this.$message.error("该分组选项已存在")
      }
    },
    transferClose() {
      this.transferVisible = false
      this.groupFieldsEdit = JSON.parse(JSON.stringify(this.curTransferVal))
    },
    transferUp(option) {
      let arr = this.groupFieldsEdit
      let index = this.groupFieldsEdit.indexOf(option.prop)
      if (index > 0) {
        arr.splice(index - 1, 1, ...arr.splice(index, 1, arr[index - 1]));
      }
    },
    transferDown(option) {
      let arr = this.groupFieldsEdit
      let index = this.groupFieldsEdit.indexOf(option.prop)
      if (index < arr.length) {
        arr.splice(index, 1, ...arr.splice(index + 1, 1, arr[index]));
      };
    },
    // 合计列
    getSummaries(parma) {
      const { columns, data } = parma;
      const sums = [];
      // let arr = this.analyseFields.map(item =>{
      //   return item.prop
      // })
      debugger
      columns.forEach((column, index) => {
        let show = true
        this.analysisData.forEach(item => {
          if (item.prop == column.property) {
            show = item.tableColumnCount
          }
        })
        // if(arr.includes(column.property) && show){
        //   let values = data.map(item => Number(item[column.property]));
        //   sums[index] = values.reduce((prev, curr) => {
        //     const value = Number(curr);
        //     if (!isNaN(value)) {
        //       return prev + curr;
        //     } else {
        //       return prev;
        //     }
        //   }, 0);
        let fn = column.property
        if (this.bottomSummary && this.bottomSummary[fn] != undefined && show) {
          sums[index] = this.bottomSummary[fn]
          sums[index] = Math.round(sums[index] * 100) / 100;
          sums[index] = this.formatValue(sums[index], fn)
        } else {
          sums[index] = '';
        }
      })
      sums[0] = this.$t && this.$t("hivuiSam_name_sum") || '汇总'
      return sums;
    },
    // 分析列表
    handleEdit(index, row) {
      row.isEdit = true
      this.recordData[index] = row
    },
    handleConfirm(index, row) {
      row.isEdit = false
      this.recordData[index] = row
    },
    handleDelete(index, row) {
      this.recordData.splice(index, 1)
    },
    // 执行叠加
    doClick() {
      this.superposition = true
      this.recordVisible = false
      this.curGroupField = this.recordData[0].prop
      this.curIndex = 0
    },
    // 分析记录勾选
    handleSelectionChange(row) {
      this.selectionData = row
    },
    // 双击
    recordDblClick(row) {
      this.curIndex = 0
      this.data = row.data
      this.deepArr[0].data = row.data
      this.currentObj.data = row.data
    },
    signChange(val, sign) {
      this.havingForm[val]['sign'] = sign
    },
    // 统计方案
    schemeRowClick(row) {
      if (row.FCONTENT) {
        this.reset();
        let conf = JSON.parse(row.FCONTENT);
        if (conf.deepList) {
          this.deepArr = conf.deepList
        }
        if (conf.curGroupField) {
          this.curGroupField = conf.curGroupField
        }
        if (conf.queryModel) {
          let ds = this.$refs.BirtWorkBook_right.dataset[this.dataset.controlId]
          ds.setQueryModel(conf.queryModel)
          let queryPanel = this.$refs.BirtWorkBook_right.$children[0].$children[0].$children[0].$children[0].$children[0].$children[0];
          queryPanel.bindModel = conf.queryModel
        }
        if (conf.groupForm) {
          this.groupForm = conf.groupForm
        }
        if (conf.havingForm) {
          this.havingForm = conf.havingForm
        }
        if (conf.sortIndex) {
          this.sortIndex = conf.sortIndex
        }
        if (conf.sortType) {
          this.sortType = conf.sortType
        }
        if (conf.data) {
          this.data = conf.data
        }
        if (conf.currentObj) {
          this.currentObj = conf.currentObj
        }
        if (conf.total) {
          this.total = conf.total
        }
        if (conf.curTransferVal) {
          this.curTransferVal = conf.curTransferVal
        }
        if (conf.perspective) {
          this.perspective = conf.perspective
        } else {
          this.perspective = false
        }
        if (conf.superposition) {
          this.superposition = conf.superposition
        } else {
          this.superposition = false
        }
      }
      this.schemeVisible = false
      this.doCount()
    },
    showSchemeData() {
      let url = '/data/query';
      let funcurl = window.location.pathname || ''
      let queryCdions = {
        join: 'and',
        items: [
          {
            sign: "eq",
            name: "FFUNCURL",
            dataType: "string",
            value: funcurl,
            enable: true,
          },
        ],
      }
      var data = {
        modelFilePath: "/platf/scheme/entity/SysSchemeBizEntity.xml",
        pageSize: -1,
        __body: JSON.stringify({ queryCdions: queryCdions }),
        __bottomSummary: false,
        // __funcpath: "/eap5csxm/KongJianCeShi/TongJiFenXi/TongJiFenXiCeShi/func/TongJiFenXiRenYuan.func",
        __zcQuery: true
      }
      this.$HI.request.post(url, data).then((res) => {
        this.schemeData = res.dataPack && res.dataPack.rows
      }).catch(e => {
        console.error(e)
      })
    },
    // 保存方案
    saveScheme() {
      let ds = this.$refs.BirtWorkBook_right.dataset[this.dataset.controlId]
      let content = {
        deepList: this.deepArr,
        curGroupField: this.curGroupField,
        queryModel: ds.getQueryModel(),
        havingForm: this.havingForm,
        groupForm: this.groupForm,
        sortIndex: this.sortIndex,
        sortType: this.sortType,
        data: this.data,
        currentObj: this.currentObj,
        perspective: this.perspective,
        superposition: this.superposition,
        total: this.total,
        curTransferVal: this.curTransferVal
      }
      let data = {
        pushType: "add",
        dataset: "dsScheme",
        pushAddType: "map",
        data: [{
          FFUNCURL: window.location.pathname || window.location.href,
          FCONTENT: JSON.stringify(content),
        }]
      }
      this.openByPath('/platf/scheme/func/add.func', { __push: data, __funcpath: '/platf/scheme/func/add.func' }, { title: '方案保存' })
    },
    handleSchemeDelete(index, data) {
      let url = '/data/save'
      let removeData = {
        ...data,
        $state: "rsDelete",
        $old: data
      }
      let body = [{
        modelFilePath: "/platf/scheme/entity/SysSchemeBizEntity.xml",
        data: [removeData]
      }]
      let rData = {
        __body: JSON.stringify(body)
      }
      this.$HI.request.post(url, rData).then((res) => {
        this.$message.success('方案删除成功')
        this.schemeData.splice(index, 1)
      }).catch(e => {
        this.$message.error(e)
      })
    },
    // 保存方案下推
    openByPath(path, query, { title, target } = {}) {
      query = query || {};
      let queryT = {}
      Object.assign(queryT, query || {});
      if (title)
        queryT.__title = title;
      if (target) {
        target = target === '_blank' ? (new Date()).valueOf() : target
        queryT.__target = target;
      }
      if (this.$router) {
        this.$router.push({
          path,
          query: queryT
        })
      } else {
        if (top.window.SysPage && top.window.SysPage.newPage) {
          top.window.SysPage.newPage(title, path, queryT, "post")
        } else {
          this.createForm(path, "_self", queryT.__push.data[0])
        }
      }
    },
    createForm(url, opentype, paramters) {
      //创建form表单
      let me = this;
      let id = "samuuid"
      var formid = `${id}_form`;
      var temp_form = null;
      if (document.getElementById(formid)) {
        temp_form = document.getElementById(formid);
        temp_form.method = me.postType;
        temp_form.action = url;
        // for (var item in paramters) {
        //   var inputObj = document.getElementById(`${id}_${item}`);
        //   if (inputObj) {
        //     inputObj.value = paramters[item];
        //   }
        // }
      } else {
        temp_form = document.createElement("form");
        temp_form.id = `${id}_form`;
        temp_form.action = url;
        //如需打开新窗口，form的target属性要设置为'_blank'
        temp_form.target = opentype; //打开方式
        temp_form.method = me.postType;
        temp_form.style.display = "none";

}
};
</script>
<style>
.birtModelRight .el-main {
  padding: 5px !important;
}

.birtModelRight table.zhc-birt-data-list {
  table-layout: auto !important;
  /* border-collapse: initial !important; */
  /* border-spacing: revert !important; */
}

.el-transfer.sam .el-transfer-panel:nth-child(1) button {
  display: none;
}

.el-dropdown.disabled .el-button,
.el-dropdown.disabled .el-button:hover {
  cursor: not-allowed;
  color: #C0C4CC;
  cursor: not-allowed;
  background-image: none;
  background-color: #FFF;
  border-color: #EBEEF5;
}

.tableHeader th,
.tableHeader tr {
  background: linear-gradient(0deg, rgba(224, 240, 255, 1), rgba(240, 247, 255, 1));
}

.el-form-item__label {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.recordPop {
  text-align: center;
}

.right-tabs {
  height: 100%;
}

.el-tabs--border-card .el-tabs__content {
  height: calc(100% - 56px);
  overflow: auto;
}

.el-tabs--border-card .el-tabs__content .el-tab-pane {
  height: 100%;
}
</style>
<style lang="scss" scoped>
.container {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 10px 20px 10px 20px;
}

.btn-toolbar {
  *+* {
    margin-left: 10px;
    margin-right: 0;
    margin-bottom: 5px
  }
}

.el-dropdown-menu__item {
  min-width: 90px;
}

.center-content {
  height: 100%;
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
}

.depth-analysis {
  display: flex;
  align-items: center;
  padding: 10px;
}

.el-breadcrumb__item a {
  cursor: pointer !important;
}

.deepActive {
  color: #06c;
  font-weight: 600;
}

.sortActive {
  color: rgb(33, 235, 141);
  font-weight: 600;
}

>>>.el-dropdown-menu__item:focus,
.el-dropdown-menu__item:not(.is-disabled):hover {
  background: initial;
  color: initial;
}

.el-dropdown-menu__item i {
  font-weight: 600;
  margin: 0 0 0 5px;
}

.el-dropdown-menu__item i:hover {
  color: rgb(33, 235, 141);
}

.birtModelRight .el-main {
  padding: 5px !important;
}

.el-icon-edit {
  right: 30px;
  position: absolute;
  z-index: 1;
  line-height: 40px;
  cursor: pointer;
}

>>>.el-dropdown.disabled .el-button,
>>>.el-dropdown.disabled .el-button:hover {
  cursor: not-allowed;
  color: #C0C4CC;
  cursor: not-allowed;
  background-image: none;
  background-color: #FFF;
  border-color: #EBEEF5;
}

.chart-tool {
  position: absolute;
  right: 10px;
  top: 5px;

i {
    cursor: pointer;
    color: #06c;
  }

.el-icon-close {
    color: #f0797f;
  }

.el-icon-close:hover {
    color: #f50814;
  }

.content {
    margin-top: 5px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 150px;
    height: 30px;
    line-height: 30px;
    border: 1px solid #d8d863;
    border-radius: 5px;
    background: rgba(237, 241, 244, 0.4);

.iconfont {
      height: 20px;
      line-height: 12px;
    }

.item {
      padding: 3px;
      border: 1px solid transparent;
      border-radius: 3px;
    }

.item:hover,
    .item:active,
    .item.active {
      border-color: #08df5d;
    }
  }
}

.el-dropdown-menu__item.active {
  background-color: #ecf5ff;
  color: #66b1ff;
}

>>>.el-dropdown-menu__item:focus,
.el-dropdown-menu__item:not(.is-disabled):hover {
  background-color: #ecf5ff;
  color: #66b1ff;
}

.analyseList {
  position: absolute;
  right: 10px;
  top: 45px;
  width: 150px;
  border: 1px solid #d8d863;
  background: #fff;

.analyseList-title {
    border-bottom: 1px dotted #b5b5ad;
    color: #000;
    padding: 0 10px;
  }

.analyseList-ul {
    list-style: none;
    margin: 0 !important;
    padding: 0 10px;

li {
      display: flex;
      justify-content: space-between;
      align-items: center;

a:hover {
        text-decoration: underline;
        color: #FF6600;
      }
    }
  }
}
</style>

} else {
                  let keyArr = sData.data.map(item => {
                    return item[this.curGroupField]
                  })
                  let i = keyArr.indexOf(keyList[key])
                  if (i > -1) {
                    obj = { ...obj, ...sData.data[i] }
                  } else {
                    for (let j in sData.data[0]) {
                      obj[j + '-' + sData.id] = 0
                    }
                  }
                }
              }
              newData[key] = obj
            }
            this.data = newData
          } else {
            this.data = []
          }
          arr = curGroupArr.concat(newFields)
        } else {
          // 当前分组列+分析列
          arr = curGroupArr.concat(this.analyseFields)
          if (arr && arr.length) {
            this.sortArr = arr
          }
        }
        arr = arr.filter(item => {
          var show = true
          this.analysisData.forEach(data => {
            if (data.prop == item.prop) {
              show = data.tableColumn
            }
          })
          return show
        })
        return arr
      }
    },
    showIndex() {
      return this.conf && this.conf.showIndex || false
    },
    // 网格是否显示合计行
    showSummary() {
      let flag = false
      this.analysisData.some(item => {
        flag = item.tableColumnCount
        return flag
      })
      return flag
    },
    //  数据列
    dataFields() {
      return this.conf && this.conf.dataFields || []
    },
    // 图表配置
    chartConf() {
      debugger
      let groupBy = this.curGroupField;
      let calcFields = []
      // 系列
      var series = [];
      const tooltipOption = {
        trigger: 'item',
        axisPointer: {
          type: 'shadow'
        },
      }
      let analysisList = this.analysisData.filter(item => {
        return item.chartColumn
      })
      let showLabel = this.showType == 'none' ? false : true
      let showPer = this.showType == 'percent' ? true : false
      let label = {
        show: showLabel,
        position: "top",
      };
      if (showPer) {
        label.formatter = '{c}%'
      }
      calcFields = analysisList.map(item => {
        let prop = showPer ? item.prop + '_per' : item.prop
        let obj = {
          name: prop,
          title: item.label
        }
        series.push({
          tooltip: tooltipOption,
          label: label
        })
        return obj
      })
      let controlName = ''
      let datas = this.data.map((item) => {
        let obj = { ...item }
        for (let key in obj) {
          if (typeof (obj[key]) == 'string' && obj[key].includes('%')) {
            obj[key] = parseFloat(obj[key]) / 100
          } else if (typeof (obj[key]) != 'string' && isNaN(obj[key])) {
            obj[key] = 0
          }
        }
        return obj
      })
      // 组合分组条件时，数据添加组合列
      if (groupBy.includes(',')) {
        let keyArr = groupBy.split(',');
        datas = datas.map(item => {
          let label = []
          for (let key of keyArr) {
            label.push(item[key])
          }
          label = label.join();
          item[groupBy] = label
          return item
        })
      }
      controlName = this.chartType == "pie" ? "PieChart"
        : this.chartType == "bar" ? "BarChart"
          : this.chartType == "stack" ? "BarChart"
            : this.chartType == "line" ? "LineChart"
              : this.chartType == "area" ? "LineChart" : 'PieChart'
      // 区域图
      let areaSeries = calcFields.map(item => {
        return {
          smooth: true,
          areaStyle: {
            normal: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: "rgba(30, 231, 231, 0.3)" }, { offset: 1, color: "rgba(30, 231, 231, 0.1)" }]),
            },
          },
          label: label,
        }
      })
      // 饼图
      let pieSeries = []
      if (this.chartType == "pie") {
        let len = calcFields.length
        if (len > 4) {
          calcFields = calcFields.filter((item, index) => {
            return index < 4
          })
        }
        let formatter = showPer ? '{b}: {d}%' : '{b}: {c}'
        label = {
          normal: {
            show: true,
            formatter: formatter,
            position: 'outer',
            alignTo: 'labelLine'
          }
        }
        switch (len) {
          case 1:
            pieSeries = [{ label: label }];
            break;
          case 2:
            pieSeries = [
              {
                radius: [0, "50%"],
                center: ["25%", "50%"],
                label: label,
              },
              {
                radius: [0, "50%"],
                center: ["75%", "50%"],
                label: label,
              },
            ]
            break;
          case 3:
            pieSeries = [
              {
                radius: [0, "50%"],
                center: ["25%", "50%"],
                label: label,
              },
              {
                radius: [0, "35%"],
                center: ["75%", "30%"],
                label: label,
              },
              {
                radius: [0, "35%"],
                center: ["75%", "70%"],
                label: label,
              },
            ]
            break;
          case 4:
            pieSeries = [
              {
                radius: [0, "35%"],
                center: ["25%", "30%"],
                label: label,
              },
              {
                radius: [0, "35%"],
                center: ["25%", "70%"],
                label: label,
              },
              {
                radius: [0, "35%"],
                center: ["75%", "30%"],
                label: label,
              },
              {
                radius: [0, "35%"],
                center: ["75%", "70%"],
                label: label,
              },
            ]
            break;
          default:
            pieSeries = [
              {
                radius: [0, "35%"],
                center: ["25%", "30%"],
                label: label,
              },
              {
                radius: [0, "35%"],
                center: ["25%", "70%"],
                label: label,
              },
              {
                radius: [0, "35%"],
                center: ["75%", "30%"],
                label: label,
              },
              {
                radius: [0, "35%"],
                center: ["75%", "70%"],
                label: label,
              },
            ]
            break;
        }
      }
      /// 叠加柱图
      let stackSeries = calcFields.map(item => {
        label.position = 'inside'
        return {
          stack: '总量',
          label: label,
        }
      })
      let yAxis = {
        axisLabel: {
          formatter: function (value, index) {
            return value + '%';
          }
        }
      }
      let xAxis = [{
        inverse: this.settingForm.xInverse
      }]
      let legend = {
        show: this.settingForm.legend != 1,
        orient: this.settingForm.legend == 3 ? 'vertical' : 'horizontal',
      }
      if (this.settingForm.legend == 3) {
        legend.top = '20%'
        legend.right = '3%'
      } else {
        delete legend.top
        delete legend.right
      }
      let tooltip = {
        show: true,
        formatter: this.settingForm.tipStyle == 1 ? '{a}: {c}' :
          this.settingForm.tipStyle == 2 ? '{a}: {d}' :
            this.settingForm.tipStyle == 3 ? '{a}: {c}<br />{b}' : '{a}: {c}'
      }
      let title = {
        show: this.settingForm.title,
        text: this.settingForm.mainTitle,
        subtext: this.settingForm.subTitle,
      }
      let option = {
        legend: legend,
        toolbox: {
          show: this.settingForm.toolbox,
          feature: {
            dataZoom: {
              yAxisIndex: "none",
              title: { zoom: '区域缩放', back: '区域缩放还原' }
            },
            dataView: {
              readOnly: false,
              title: '数据视图'
            },
            restore: {
              title: '还原'
            },
            saveAsImage: {
              show: true,
              title: '保存为图片'
            }
          }
        },
        tooltip: tooltip,
        title: title,
        series: this.chartType == "area" ? areaSeries
          : this.chartType == "stack" ? stackSeries
            : this.chartType == "pie" ? pieSeries : series
      }
      if (this.chartType != "pie") {
        option.xAxis = xAxis;
      }
      if (showPer && this.chartType != "pie") {
        option.yAxis = yAxis
      }
      const conf = {
        controlName: controlName,
        controlId: "chart_controlid",
        height: "100%",
        isGroupData: true,
        groupBy: groupBy,
        datas: datas,
        calcFields: calcFields,
        option: option,
        events: {
          click(row) {
            let _this = this.$parent.$parent.$parent;
            _this.currentObj = row.data
            _this.currentObj.prop = _this.curGroupField;
            if (_this.perspective) {
              var index = -1
              _this.deepArr.forEach((item, i) => {
                if (item.prop == _this.curGroupField) {
                  index = i
                }
              })
              if (index > -1 && index < _this.deepArr.length - 1) {
                _this.analysisFieldsVisible = false
                _this.curIndex = _this.curIndex + 1
                _this.currentObj = _this.deepArr[_this.curIndex];
                _this.data = _this.currentObj.data
                _this.curGroupField = _this.currentObj.prop;
              } else {
                _this.analysisChartConf.datas = _this.deepAnalysisFields
                _this.analysisFieldsVisible = true
              }
            } else {
              _this.analysisChartConf.datas = _this.deepAnalysisFields
              _this.analysisFieldsVisible = true
            }
            _this.superposition = false
          }
        }
      };
      return conf
    },
    //  深度分析字段列表
    deepAnalysisFields() {
      let fields = this.groupFields
      if (fields && fields.length == 0) {
        return []
      }
      let analysisFields = fields.map((item) => {
        item.value = 1
        return item
      });

// 排除已经统计的分析列
      if (this.deepArr && this.deepArr.length > 0) {
        let arrnew = this.deepArr.slice(0, this.curIndex + 1).map((item) => {
          return item.prop
        });
        // 多条件的分组 拆开排除
        arrnew.forEach(item => {
          if (item.includes(',')) {
            arrnew.concat(item.split(','))
          }
        })
        analysisFields = analysisFields.filter(item => {
          return arrnew.indexOf(item.prop) < 0
        })
      }
      // 添加详情
      analysisFields.push(
        {
          prop: 'detail',
          label: this.$t && this.$t("hivuiSam_btn_detail") || '详情',
          value: 1
        }
      )
      return analysisFields
    },
    // 查询字段
    queryFields() {
      let queryFields = []
      let fields = this.conf && this.conf.queryFields
      if (!fields || fields.length == 0) {
        queryFields = []
      } else {
        queryFields = fields.map(item => {
          let obj = {}
          obj.prop = item.prop;
          obj.label = item.label;
          if (item.props && item.props.lookup) {
            let model = item.props.lookup
            if (item.element === 'hi-select-grid') {
              var columns = []
              if (model && model.columns && model.columns.length) {
                columns = model.columns.map(item => {
                  item.prop = item.name
                  return item
                })
              }
              let table = model.tableprops || {}
              table['columns'] = columns
              obj.lookup = {
                type: "data",
                openstyle: 'selectgrid',
                bindField: item.prop,
                lookSelectGrid: {
                  width: 1200,
                  height: 600,
                  table: table,
                  bindField: item.prop
                },
              }
              if (model && model.sourceDatas) {
                obj.lookup.lookSelectGrid['tableData'] = model && model.sourceDatas
              }
              if (model && model.modelFile) {
                obj.lookup['lookDataset'] = {
                  modelFilePath: this.conf.dataset.controlId,
                  showSearchField: true
                }
              }
              obj.dbtype = 'dbString'
            } else if (item.element === 'hi-data-select') {
              var columns = []
              if (model && model.columns && model.columns.length) {
                columns = model.columns.map(item => {
                  item.prop = item.name
                  return item
                })
              }
              let queryOptionFields = model.queryOption && model.queryOption.fields
              let store = model.storeCfg || model.sourceDsCfg
              let modelFilePath = store.modelFile
              let fields = store.fields
              if (!(queryOptionFields && queryOptionFields.length)) {
                return
              }
              let rows = queryOptionFields.map(item => {
                return {
                  children: [
                    {
                      prop: item.name,
                      label: item.label
                    }
                  ]
                }
              });
              let cols = queryOptionFields.map(item => {
                return { colWidth: 100 }
              });
              let queryPanel = {
                rows: rows,
                cols: cols
              };
              let tableColumn = model.columns.map(item => {
                return {
                  prop: item.name,
                  label: item.label
                }
              })
              // var table = model.tableprops || {}
              var table = {
                children: tableColumn,
                stripe: model.tableprops && model.tableprops.stripe || false
              }
              let ds = {
                controlName: "HcDataset",
                controlId: modelFilePath,
                name: model.entityDs,
                modelFilePath: modelFilePath,
                _infcPagging: {
                  pageSize: 10,
                  pageNum: 1,
                  returnCount: true
                },
                _infcLoad: {
                  autoActive: true,
                },
                fields: fields,
                data: [],
              }
              obj.lookup = {
                type: "data",
                openstyle: 'dialog',
                birtModel: GridSingleSelect({
                  mainDataset: ds,
                  hcQueryPanel: queryPanel,
                  hcTable: table
                }),
                lookDataset: {
                  modelFilePath: modelFilePath, // 数据模型路径
                  showSearchField: true
                },
                lookDialog: {
                  title: "",
                  width: 900,
                  height: 600,
                },
                bindField: item.prop,
                sourceDsId: model.sourceDsId
              }
              obj.dbtype = 'dbString'
            }
          }
          // 时间方案
          if (item.props && item.element == 'hi-time-scheme') {
            obj.dbtype = 'dbDatetime'
            obj.format = item.props.format
            obj.element = 'hi-time-scheme'
            obj.disabledEx = item.disabledEx
            obj.viewStyle = {
              viewStyleId: 'DATERANGE',
              type: item.props.rangeType,
              format: item.props.format
            }
          }
          return obj
        })
      }
      return queryFields
    },
    // 数据集字段
    fields() {
      let fields = this.conf.dataset && this.conf.dataset.config.fields
      for (let key in this.queryFields) {
        let prop = this.queryFields[key].prop
        if (fields[prop] && fields[prop].lookup) {
          let lookup = Object.assign(fields[prop].lookup, this.queryFields[key].lookup)
          // 下拉枚举查找
          if (lookup.label && lookup.returnFields) {
            for (let key in lookup.returnFields) {
              if (lookup.returnFields[key] == lookup.label && lookup.lookSelectGrid) {
                lookup.bindShowField = key
                lookup.lookSelectGrid.bindShowField = key
              }
              if (lookup.lookSelectGrid && lookup.lookSelectGrid.tableData) {
                let data = lookup.lookSelectGrid.tableData
                for (let i in data) {
                  if (data[i][lookup.returnFields[key]]) {
                    data[i][key] = data[i][lookup.returnFields[key]]
                  }
                }
              }
            }
          }
          // 数据模型查找
          if (lookup.fieldPair) {
            if (lookup.sourceDsId) {
              lookup.returnFields = lookup.fieldPair[lookup.sourceDsId].returnFields
            } else {
              let key = Object.keys(lookup.fieldPair)[0]
              lookup.returnFields = lookup.fieldPair[key].returnFields
            }
          }
          lookup.returnType = "single",
            fields[prop]['lookup'] = lookup
        }
        // 时间方案
        if (fields[prop] && this.queryFields[key].element == 'hi-time-scheme') {
          let fd = this.queryFields[key]
          fields[prop].dbtype = 'dbDatetime'
          fields[prop].format = fd.format
          fields[prop].disabledEx = fd.disabledEx
        }
      }
      // 应用默认填充表达式
      for (let key in fields) {
        if (fields[key].default && fields[key].default.exps) {
          fields[key].default['expr'] = fields[key].default.exps
        }
      }
      return fields
    },
    // 数据集
    dataset() {
      var dataset = {}
      if (this.conf && this.conf.dataset) {
        debugger
        let ds = this.conf.dataset
        dataset = {
          controlName: ds.controlName,
          controlId: ds.controlId,
          name: ds.name,
          modelFilePath: ds.modelFilePath,
          fields: this.fields,
          _infcLoad: Object.assign({
            autoActive: false
          }, ds._infcLoad),
          _infcPagging: {
            returnCount: true,
            pageSize: 100,
            pageNum: 1
          },
          data: [],
        }
      }
      return dataset
    },
    // 查询面板
    birtModelRight() {
      let rows = this.queryFields.map(item => {
        return { children: [item], colspan: 12 }
      })
      let cols = this.queryFields.map(item => {
        return { colWidth: 60 }
      })
      const queryPanel = {
        rows: rows,
        cols: cols
      };
      let hcQueryPanel = {
        controlName: "HcQueryPanel",
        controlId: "HcQueryPanel_sam",
        inline: false,
        dataset: this.dataset && this.dataset.controlId || "dsSam",
        size: "small",
        hideBtn: true,
        style: "width: 100%;",
        children: [],
      };
      Object.assign(hcQueryPanel, QueryStyleFactory.buildForm(queryPanel) || {});
      let me = this;
      let birtModelRight = {
        controlName: "BirtWorkBook",
        controlId: "BirtWorkBook_right",
        style: "border-bottom: 1px solid #eee;",
        showToolBar: false,
        children: [
          {
            controlName: "BirtSheet",
            controlId: "BirtSheet_right",
            name: "sheet0",
            pageIndex: 0,
            dataSets: [{
              controlName: "HcDataset",
              controlId: "dsScheme",
              name: "SysSchemeBizEntity",
              rowKey: "FGUID",
              modelFilePath: "/platf/scheme/entity/SysSchemeBizEntity.xml",
              _infcLoad: {
                autoActive: false,
                __zcQuery: true
              },
              _infcPagging: {
                _isAddingPagging: false,
                pageSize: -1,
              },
              fields: {},
              data: [],
            }].concat(this.dataset ? this.dataset : []),
            children: [
              {
                controlName: "BirtFormSheet",
                controlId: "BirtFormSheet_01",
                children: [hcQueryPanel]
              }
            ]
          }
        ],
        mounted: function () {
          setTimeout(() => {
            debugger
            let __pushStr = me.conf.__push;
            let pushParam;
            if (__pushStr) {
              pushParam = JSON.parse(decodeURIComponent(__pushStr))
            }
            me.doCount(pushParam)
          }, 100);
        }
      };
      return birtModelRight
    },
    // 分组条件(统计字段)
    groupFields() {
      let groupFields = this.conf && cloneDeep(this.conf.groupFields) || []
      // 组合分组条件
      if (this.curTransferVal && this.curTransferVal.length) {
        let obj = {}
        let curTransferLabel = this.curTransferVal.map(item => {
          for (var field of groupFields) {
            if (field.prop == item) {
              return field.label
            }
          }
        })
        obj = {
          prop: this.curTransferVal.join(),
          label: curTransferLabel.join()
        }
        groupFields.push(obj)
      }
      return groupFields
    },
    // 分析字段
    analyseFields() {
      return this.conf && this.conf.analyseFields || []
    },
    // 显示详情
    showDetail() {
      return this.currentObj.prop == 'detail'
    },
    // 执行叠加按钮
    btnDisabled() {
      return !this.selectionData || this.selectionData.length < 2
    },
    analyseList_title() {
      if (this.conf.analyseFields && this.conf.analyseFields.length && this.analyseListChecked) {
        let curField = this.conf.analyseFields.filter(item => {
          return item.prop == this.analyseListChecked
        })[0]
        return curField && curField.label || ''
      } else {
        return ''
      }
    }
  },
  watch: {
    conf: {
      deep: true,
      handler: function (val) {
        if (val && val.groupFields && !this.groupForm.prop) {
          this.groupForm.prop = val.groupFields[0] && val.groupFields[0].prop
          this.curGroupField = this.groupForm.prop
        }
        if (val && val.analyseFields && val.analyseFields.length) {
          this.analysisData = val.analyseFields.map(item => {
            let obj = {
              prop: item.prop,
              label: item.label,
              countField: item.label,
              tableColumn: true,
              tableColumnCount: true,
              chartColumn: true,
              chartColumnCount: true,
            }
            return obj
          })
        }
      }
    },
  },
  data() {
    return {
      size: 'small',
      superposition: false,
      perspective: false,
      chartType: "table",
      groupForm: {
        prop: ""
      },
      loading: false,
      currentPage: 1,
      pageSize: 100,
      pageSizes: [10, 20, 50, 100],
      total: 0,
      data: [],
      // 排序
      sortArr: [],
      sortIndex: -1,
      sortType: '',
      // 分析列
      analysisVisible: false,
      analysisData: [],
      tableColumnCheck: true,
      tableColumnCountCheck: true,
      chartColumnCheck: true,
      chartColumnCountCheck: true,
      // 分析字段
      analysisFieldsVisible: false,
      analysisFieldsArr: [],
      analysisChartConf: {
        controlName: "PieChart",
        controlId: "chart_analysis",
        height: "100%",
        isGroupData: true,
        groupBy: "label",
        datas: [],
        calcFields: [
          {
            name: "value",
            title: ""
          }
        ],
        option: {
          legend: {
            show: true
          }
        },
        events: {
          click(row) {
            debugger;
            var _this = this.$parent.$parent;
            _this.analysisChartConf.datas = _this.deepAnalysisFields
            let data = JSON.parse(JSON.stringify(row.data))
            delete data.emphasis
            // 删除当前分析以后的深度分析
            _this.deepArr.splice(_this.curIndex + 1, _this.deepArr.length - _this.curIndex - 1)
            let obj = _this.deepArr[_this.deepArr.length - 1]
            if (_this.currentObj.name) {
              obj.selectVal = _this.currentObj.name
            } else {
              if (_this.currentObj.prop.includes(',')) {
                let selectVal = []
                let arr = _this.currentObj.prop.split(',')
                selectVal = arr.map(item => {
                  return _this.currentObj[item]
                })
                obj.selectVal = selectVal.join()
              } else {
                obj.selectVal = _this.currentObj[_this.currentObj.prop]
              }
            }
            _this.$set(_this.deepArr, _this.curIndex, obj)
            _this.$set(_this.deepArr, _this.curIndex + 1, data)
            _this.curGroupField = data.prop;
            _this.currentObj = data;
            _this.curIndex = _this.curIndex + 1;
            _this.doQuery();
            _this.analysisFieldsVisible = false;
          }
        }
      },
      // 深度分析
      deepArr: [],
      conf: {},
      // 图表当前选中对象
      currentObj: {},
      // 当前分组字段
      curGroupField: '',
      // 深度分析当前环节下标
      curIndex: 0,
      exportLoading: false,
      // 穿梭框
      transferVisible: false,
      curTransferVal: [],
      groupFieldsEdit: [],
      schemeLoading: false,
      havingForm: {},
      // 分析记录
      recordVisible: false,
      recordData: [],
      // 已勾选记录
      selectionData: [],
      //  统计方案
      schemeData: [],
      schemeVisible: false,
      // 是否监听
      isMonitor: false,
      // 底部汇总数据
      bottomSummary: {},
      // 是否查询面板查询
      isQueryModel: false,
      // 显示图表菜单
      showChartMenu: false,
      showType: 'none',
      showAnalyseList: false,
      analyseListChecked: '',
      // 设置面板
      activeName: 'condition',
      settingForm: {
        xInverse: false,
        toolbox: false,
        axisMarking: 1,
        legend: 2,
        tipStyle: 3,
        staField: 'none',
        title: false,
        mainTitle: '',
        subTitle: '',
        weekColumns: false,
        column: '',
        week: '',
      },
      axisMarkOptions: [
        {
          label: this.$t && this.$t("hivuiSam_axisMarkOptions_none") || '不显示',
          value: 'none'
        },
        {
          label: this.$t && this.$t("hivuiSam_axisMarkOptions_num") || '显示值',
          value: 'num'
        },
        {
          label: this.$t && this.$t("hivuiSam_axisMarkOptions_percent") || '百分比',
          value: 'percent'
        },
      ],
      legendOptions: [
        {
          label: this.$t && this.$t("hivuiSam_legendOptions_1") || '不显示',
          value: 1
        },
        {
          label: this.$t && this.$t("hivuiSam_legendOptions_2") || '上边',
          value: 2
        },
        {
          label: this.$t && this.$t("hivuiSam_legendOptions_3") || '右边',
          value: 3
        },
      ],
      tipStyleOptions: [
        {
          label: this.$t && this.$t("hivuiSam_tipStyleOptions_1") || '值',
          value: 1
        },
        {
          label: this.$t && this.$t("hivuiSam_tipStyleOptions_2") || '百分比%',
          value: 2
        },
        {
          label: this.$t && this.$t("hivuiSam_tipStyleOptions_3") || `值+分类`,
          value: 3
        },
      ],
      conditionPanel: this.$t && this.$t("hivuiSam_layout_conditionPanel") || '条件面板',
      formGroup: this.$t && this.$t("hivuiSam_form_group") || '分组条件',
      setPanel: this.$t && this.$t("hivuiSam_layout_setPanel") || '设置面板',
      formXInverse: this.$t && this.$t("hivuiSam_form_xInverse") || '横轴翻转',
      formToolbox: this.$t && this.$t("hivuiSam_form_toolbox") || '显示工具条',
      formAxisMarking: this.$t && this.$t("hivuiSam_form_axisMarking") || '轴标记',
      formLegend: this.$t && this.$t("hivuiSam_form_legend") || '系列名',
      formTipStyle: this.$t && this.$t("hivuiSam_form_tipStyle") || '提示风格',
      formStaField: this.$t && this.$t("hivuiSam_form_staField") || '统计字段',
      formTitle: this.$t && this.$t("hivuiSam_form_title") || '标题',
      formMainTitle: this.$t && this.$t("hivuiSam_form_mainTitle") || '主标题',
      formSubTitle: this.$t && this.$t("hivuiSam_form_subTitle") || '副标题',
      formWeekColumns: this.$t && this.$t("hivuiSam_form_weekColumns") || '周栏',
      formColumn: this.$t && this.$t("hivuiSam_form_column") || '栏数',
      formWeek: this.$t && this.$t("hivuiSam_form_week") || '每栏周期',
      labelNone: this.$t && this.$t("hivuiSam_label_none") || '不显示',
      countFieldLabel: this.$t && this.$t("hivuiSam_table_countField") || '统计字段',
      tableColumnLabel: this.$t && this.$t("hivuiSam_table_tableColumn") || '网格列',
      tableColumnCountLabel: this.$t && this.$t("hivuiSam_table_tableColumnCount") || '网格合计列',
      chartColumnLabel: this.$t && this.$t("hivuiSam_table_chartColumn") || '图表列',
      chartColumnCountLabel: this.$t && this.$t("hivuiSam_table_chartColumnCount") || '图表列汇总',
      operateLabel: this.$t && this.$t("hivuiSam_table_operate") || '操作',
      upLabel: this.$t && this.$t("hivuiSam_btn_up") || '上移',
      downLabel: this.$t && this.$t("hivuiSam_btn_down") || '下移',
      schemeLabel: this.$t && this.$t("hivuiSam_table_scheme") || '方案名称',
      abbreviationLabel: this.$t && this.$t("hivuiSam_table_abbreviation") || '缩写',
      editLabel: this.$t && this.$t("hivuiSam_btn_edit") || '编辑',
      confirmLabel: this.$t && this.$t("hivuiSam_btn_confirm") || '确定',
      removeLabel: this.$t && this.$t("hivuiSam_btn_remove") || '删除',
      executeOverlayLabel: this.$t && this.$t("hivuiSam_btn_executeOverlay") || '执行叠加',
      analysisRecordLabel: this.$t && this.$t("hivuiSam_btn_analysisRecord") || '分析记录',
      schemeListLabel: this.$t && this.$t("hivuiSam_btn_schemeList") || '方案列表',
      panelTitle: this.$t && this.$t("hivuiSam_layout_panel") || '面板',
    }
  },
  updated() {
    this.$nextTick(() => {
      this.$refs["table"] && this.$refs["table"].doLayout();
    });
  },
  methods: {
    //  排序
    sortClick(val) {
      this.sortIndex = val
      this.doQuery();
    },
    sortDown() {
      this.sortType = 'desc'
    },
    sortUp() {
      this.sortType = 'asc'
    },
    // 前进
    goCommand(index) {
      this.curIndex = index;
      this.currentObj = this.deepArr[index];
      this.curGroupField = this.currentObj.prop;
      this.data = this.currentObj.data
    },
    goClick: debounce(function () {
      if (this.curIndex < this.deepArr.length - 1) {
        this.curIndex = this.curIndex + 1;
        this.currentObj = this.deepArr[this.curIndex];
        this.curGroupField = this.currentObj.prop;
        this.data = this.currentObj.data
      }
    }, 500),
    // 后退
    backCommand(val) {
      this.curIndex = val
      this.currentObj = this.deepArr[val];
      this.curGroupField = this.currentObj.prop;
      this.data = this.currentObj.data
    },
    backClick: debounce(function () {
      if (this.curIndex > 0) {
        this.curIndex = this.curIndex - 1
        this.currentObj = this.deepArr[this.curIndex];
        this.curGroupField = this.currentObj.prop;
        this.data = this.currentObj.data
      }
    }, 500),
    // 深度分析
    breadcrumbClick(val) {
      this.curGroupField = val
      let arrnew = this.deepArr.map(item => {
        return item.prop
      })
      this.curIndex = arrnew.indexOf(val)
      this.currentObj = this.deepArr[this.curIndex];
      // 数据替换成缓存的数据
      this.data = this.currentObj.data
    },
    // 点击表格
    rowDblclick(row) {
      this.currentObj = row
      this.currentObj.prop = this.curGroupField;
      this.superposition = false
      if (this.perspective) {
        var index = -1
        this.deepArr.forEach((item, i) => {
          if (item.prop == this.curGroupField) {
            index = i
          }
        })
        if (index > -1 && index < this.deepArr.length - 1) {
          this.analysisFieldsVisible = false
          this.curIndex = this.curIndex + 1
          this.currentObj = this.deepArr[this.curIndex];
          this.data = this.currentObj.data
          this.curGroupField = this.currentObj.prop;
        } else {
          this.analysisChartConf.datas = this.deepAnalysisFields
          this.analysisFieldsVisible = true
        }
      } else {
        this.analysisChartConf.datas = this.deepAnalysisFields
        this.analysisFieldsVisible = true
      }
    },
    // 点击查询
    doCount(param) {
      debugger;
      // 叠加状态下不执行查询操作
      if (this.superposition) {
        return
      }
      // 监听数据集
      if (this.dataset) {
        let ds = this.$refs.BirtWorkBook_right.dataset[this.dataset.controlId]
        // 补充下推参数
        if (param) {
          if (param.target) {
            ds.setPushQueryCdion({ __body: param.target.ps })
          } else {
            ds.setPushQueryCdion(param)
          }
        }
        if (!this.isMonitor) {
          ds && ds.on("afterLoadData", this.afterLoadData);
          this.isMonitor = true
        }
        this.loading = true;
        let prop = this.groupForm.prop;
        let fields = this.groupFields.map(item => {
          return item.prop
        })
        this.curGroupField = prop;
        let index = fields.indexOf(prop)
        if (this.deepArr.length) {
          // 如果切换了分组条件，清空深度分析
          if (this.deepArr[0] && this.deepArr[0].prop !== prop) {
            this.deepArr = []
            this.currentObj = this.groupFields[index]
            this.recordData = []
          } else {
            this.currentObj = this.deepArr[0]
          }
        }
        this.currentPage = 1
        let queryModel = ds.getQueryModel()
        this.doQuery(queryModel);
        // 添加分析记录
        let obj = {}
        if (Object.keys(queryModel).length === 0) {
          obj = {
            id: 'empty',
            name: this.$t && this.$t("hivuiSam_name_empty") || '空条件',
            prop: this.groupForm.prop,
          }
        } else {
          let keyArr = [];
          let labelArr = [];
          for (let key in queryModel) {
            if (queryModel[key] || queryModel[key] === 0) {
              keyArr.push(key);
              // let arr = this.queryFields.filter(item =>{
              //   return item.prop == key
              // })
              labelArr.push(queryModel[key]);
            }
          };
          if (keyArr.length && labelArr.length) {
            obj = {
              id: keyArr.join() + '_' + labelArr.join(),
              name: labelArr.join(),
              prop: this.groupForm.prop,
            }
          } else {
            obj = {
              id: 'empty',
              name: this.$t && this.$t("hivuiSam_name_empty") || '空条件',
              prop: this.groupForm.prop,
            }
          }
        }
        // 判断分析记录中是否含有此条件，有则跳过，无则添加
        const ids = this.recordData.map(value => value.id);
        if (!ids.includes(obj.id)) {
          this.isQueryModel = true
          let simple = this.recordData.length + 1;
          obj.simple = simple
          obj.isEdit = false
          this.recordData.push(obj);
        } else {
          this.isQueryModel = false
        }
        // 当前分组加入深度分析
        if (index < 0) {
          this.$message.error('当前分组条件不在分组字段中，请重新配置')
        } else {
          this.$set(this.deepArr, 0, this.groupFields[index])
          this.curIndex = 0
        };
      }
    },
    // 网格列格式化函数
    formatter(row, column, cellValue, index) {
      let fn = column.property;
      return this.formatValue(cellValue, fn)
    },
    // 根据字段配置输出格式化值
    formatValue(cellValue, fn) {
      let format = this.fields && this.fields[fn] && this.fields[fn].format;
      if (format) {
        // 空值处理
        if (cellValue == null || cellValue === '' || isNaN(Number(cellValue))) {
          const zeroPart = format.replace(/[^\d.,]/g, '').replace(/0+/g, '0');
          return format.replace(/[0-9,.]+/, zeroPart);
        }
        const num = Number(cellValue);
        // 1. 提取货币符号（￥ $ € 等）
        const symbol = format.replace(/[^^\$\￥¥€£]/g, '').trim();
        // 2. 自动识别小数位数（根据格式小数点后面有几位）
        const precision = format.includes('.') ? (format.split('.')[1].match(/0/g) || []).length : 0;
        // 3. 四舍五入指定位数
        let fixed = num.toFixed(precision);
        // 4. 添加千分位
        fixed = fixed.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
        // 5. 拼接符号（如果格式里有符号就带上）
        return symbol ? symbol + fixed : fixed;
      }
      return cellValue;
    },
    afterLoadData(datas) {
      debugger
      let newData = datas
      let ds = this.$refs.BirtWorkBook_right.dataset[this.dataset.controlId]
      if (datas && datas.length && this.curGroupField != 'detail') {
        // newData = datas.map(item => {
        //   return ds && ds.getFormatRecd(item)
        // })
        // 添加百分比数据
        newData = newData.map(data => {
          for (let field of this.analyseFields) {
            let prop = field.prop
            let percent = prop + '_per'
            let sum = 0
            const values = datas.map(item => Number(item[prop]));
            if (!values.every(value => isNaN(value))) {
              sum = values.reduce((prev, curr) => {
                const value = Number(curr);
                if (!isNaN(value)) {
                  return prev + curr;
                } else {
                  return prev;
                }
              }, 0);
            }
            if (sum && sum > 0) {
              data[percent] = Number((data[prop] / sum * 100).toFixed(2))
            } else {
              data[percent] = 0
            }
          }
          return data
        })
      }
      this.data = newData
      // 缓存数据
      if (this.deepArr && this.deepArr.length > 0) {
        this.deepArr[this.curIndex].data = newData;
      } else {
        this.deepArr = [newData]
      }
      // 总条数
      this.total = ds._infcPagging.recordCount || this.total;
      // 底部汇总数据
      this.bottomSummary = ds.getBottomSummeryRecd();
      // 添加分析记录
      if (!this.isQueryModel) return
      this.recordData[this.recordData.length - 1].data = datas
    },
    // 查询方法
    doQuery(model) {
      debugger
      let ds = this.$refs.BirtWorkBook_right.dataset[this.dataset.controlId]
      if (this.showDetail) {
        ds._infcPagging = {
          _isPagging: true,
          pageSize: this.pageSize,
          pageNum: this.currentPage,
          returnCount: true
        };
        ds._infcStat = {}
        ds._infcSort = {}
      } else {
        ds._infcPagging = {
          _isPagging: true,
          pageSize: this.pageSize,
          pageNum: this.currentPage,
          returnCount: true
        };
        ds._infcStat = {
          isGroupData: true,
          groupBy: this.curGroupField,
          __bottomSummary: true
        }
        if (this.sortIndex > -1) {
          let obj = this.sortArr[this.sortIndex]
          ds._infcSort.orderBy = [{
            name: obj.prop,
            desc: obj.label,
            type: this.sortType || 'desc'
          }]
        } else {
          ds._infcSort.orderBy = []
        }
        if (this.havingForm) {
          let _infcHaving = {};
          for (let item in this.havingForm) {
            let obj = JSON.parse(JSON.stringify(this.havingForm[item]))
            let val = obj.value
            let val2 = obj.value2
            if (val === undefined && val === undefined) {