<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>后退
<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>前进
<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>排序
<el-dropdown-menu slot="dropdown">
<el-dropdown-item :command="-1">不排序</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">列设置</el-button>
<!-- 图表 -->
<el-dropdown :size="size" @command="chartTypeChange">
<el-button :size="size">
<i class="el-icon-s-data"></i>
图表<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">表格</el-dropdown-item>
<el-dropdown-item :class="{active: chartType == 'pie'}" command="pie">饼图</el-dropdown-item>
<el-dropdown-item :class="{active: chartType == 'bar'}" command="bar">柱图</el-dropdown-item>
<el-dropdown-item :class="{active: chartType == 'line'}" command="line">线图</el-dropdown-item>
<el-dropdown-item :class="{active: chartType == 'area'}" command="area">区域图</el-dropdown-item>
<el-dropdown-item :class="{active: chartType == 'stack'}" command="stack">叠加柱图</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<!-- 刷新 -->
<el-button icon="el-icon-refresh" :size="size" @click="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="方案名称">
<template slot-scope="scope">
<el-input v-if="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="缩写">
<template slot-scope="scope">
<el-input v-model="scope.row.simple"></el-input>
</template>
</el-table-column>
<el-table-column label="操作" width="150">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
v-if="!scope.row.isEdit"
@click="handleEdit(scope.$index, scope.row)">编辑</el-button>
<el-button
size="mini"
type="text"
v-else
@click="handleConfirm(scope.$index, scope.row)">确定</el-button>
<el-button
size="mini"
type="text"
style="color:red;"
@click.stop="handleDelete(scope.$index, scope.row)">删除</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">执行叠加</el-button>
<el-button slot="reference" icon="el-icon-edit-outline" :size="size">分析记录</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="方案列表"></el-table-column>
<el-table-column label="操作" width="150">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
style="color:red;"
@click.stop="handleSchemeDelete(scope.$index, scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-button slot="reference" icon="el-icon-edit-outline" :size="size" @click="showSchemeData">方案列表</el-button>
</el-popover>
<!-- 叠加 -->
<el-checkbox
v-model="superposition"
label="叠加"
border
:size="size"
></el-checkbox>
<!-- 透视 -->
<el-checkbox
v-model="perspective"
label="直接透视"
border
:size="size"
></el-checkbox>
<el-button icon="el-icon-download" :size="size" :disabled="this.data && this.data.length == 0" :loading="exportLoading" @click="exportExcel">导出excel</el-button>
<el-button icon="el-icon-save" :size="size" :loading="schemeLoading" @click="saveScheme">保存方案</el-button>
</div>
<!-- 内容区 -->
<hi-layout :is-fit="true" style="heiht: 100%;">
<!-- 右侧查询面板 -->
<hi-layout-right size="300" title="过滤条件">
<div style="height: calc( 100% - 342px );overflow: auto;border:none;">
<birt-work-book
style="min-height: calc( 100% - 342px );"
:conf="birtModelRight"
:ref="birtModelRight.controlId"
class="birtModelRight"
></birt-work-book>
</div>
<el-divider>汇总条件</el-divider>
<div style="height: 180px;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')">内</el-button>
<el-button v-else size="mini" type="text" @click="signChange(name,'inRange')">外</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="分组条件" prop="prop">
<i class="el-icon-edit" @click="showtransfer"></i>
<el-select v-model="groupForm.prop" style="width: 100%;" placeholder="请选择分组条件">
<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"
>执行查询</el-button
>
<el-button size="mini" @click="reset">重置</el-button>
</el-form-item>
</el-form>
</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">不显示</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>深度分析:</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% - 100px )">
<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"
type="index">
</el-table-column>
<el-table-column
v-for="item in tableColumns"
:key="item.prop"
:prop="item.prop"
:label="item.label"
>
</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% - 100px )">
<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"
type="index">
</el-table-column>
<el-table-column
v-for="item in tableColumns"
:key="item.prop"
:prop="item.prop"
:label="item.label"
>
</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" title="分析列设置" :height="500">
<el-table :data="analysisData" size="small" :height="400">
<el-table-column
prop="countField"
label="统计字段">
</el-table-column>
<el-table-column prop="tableColumn" label="网格列" align="center">
<template slot="header" slot-scope="{row}">
<el-checkbox v-model="tableColumnCheck" @change="handelCheckAll('tableColumn')" label="网格列"></el-checkbox>
</template>
<template slot-scope="{row}">
<el-checkbox v-model="row.tableColumn"></el-checkbox>
</template>
</el-table-column>
<el-table-column prop="tableColumn" label="网格合计列" align="center">
<template slot="header" slot-scope="{row}">
<el-checkbox v-model="tableColumnCountCheck" @change="handelCheckAll('tableColumnCount')" label="网格合计列"></el-checkbox>
</template>
<template slot-scope="{row}">
<el-checkbox v-model="row.tableColumnCount"></el-checkbox>
</template>
</el-table-column>
<el-table-column prop="tableColumn" label="图表列" align="center">
<template slot="header" slot-scope="{row}">
<el-checkbox v-model="chartColumnCheck" @change="handelCheckAll('chartColumn')" label="图表列"></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="图表列汇总" align="center">
<template slot="header" slot-scope="{row}">
<el-checkbox v-model="chartColumnCountCheck" @change="handelCheckAll('chartColumnCount')" label="图表列汇总"></el-checkbox>
</template>
<template slot-scope="{row}">
<el-checkbox v-model="row.chartColumnCount"></el-checkbox>
</template>
</el-table-column>
<el-table-column label="操作" width="150">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
@click="columnUp(scope.$index, scope.row)">上移</el-button>
<el-button
size="mini"
type="text"
@click="columnDown(scope.$index, scope.row)">下移</el-button>
</template>
</el-table-column>
</el-table>
</el-dialog>
<!-- 分析字段 -->
<el-dialog :visible.sync="analysisFieldsVisible" title="选择分析字段" :height="500">
<Pie-chart
style="height: 400px;"
ref="analysisChart"
:conf="analysisChartConf"
></Pie-chart>
</el-dialog>
<!-- 穿梭框(修改分组字段) -->
<el-dialog :visible.sync="transferVisible" title="选择分组字段" :height="500" width="640px" center @close="transferClose">
<el-transfer class="sam" v-model="groupFieldsEdit" :data="conf.groupFields"
:titles="['来源字段', '目标字段']"
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>
<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 == '' ? 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
// 组合分组条件时，数据添加组合列
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
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;
}
}
/// 叠加柱图
let stackSeries = calcFields.map(item =>{
label.position = 'inside'
return {
stack: '总量',
label: label,
}
})
let yAxis = {
axisLabel:{
formatter: function(value,index){
return value +'%';
}
}
}
let option = {
legend: {
show: true
},
toolbox: {
show: true,
feature: {
dataZoom: {
yAxisIndex: "none",
title:{zoom:'区域缩放', back:'区域缩放还原'}
},
dataView: {
readOnly: false,
title:'数据视图'
},
restore: {
title:'还原'
},
saveAsImage: {
show: true,
title: '保存为图片'
}
}
},
series: this.chartType == "area" ? areaSeries
: this.chartType == "stack" ? stackSeries
: this.chartType == "pie" ? pieSeries : series
}
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: "详情",
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){
let ds = this.conf.dataset
dataset = {
controlName: ds.controlName,
controlId: ds.controlId,
name: ds.name,
modelFilePath: ds.modelFilePath,
fields: this.fields,
_infcLoad: {
autoActive: false
},
_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 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]
}
]
}
],
};
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: '',
showAnalyseList: false,
analyseListChecked: ''
}
},
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() {
debugger;
// 叠加状态下不执行查询操作
if(this.superposition){
return
}
// 监听数据集
if(this.dataset){
let ds = this.$refs.BirtWorkBook_right.dataset[this.dataset.controlId]
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: '空条件',
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: '空条件',
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
};
}
},
afterLoadData(datas){
let newData = datas
let ds = this.$refs.BirtWorkBook_right.dataset[this.dataset.controlId]
if(datas && datas.length){
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
// 缓存数据
this.deepArr[this.curIndex].data = 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){
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();
var url = this.$HI.download + `?path=${res.dataPack.path}&access_token=${token}`
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
// })
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);
if(this.bottomSummary && this.bottomSummary[column.property] && show){
sums[index] = this.bottomSummary[column.property]
}else{
sums[index] = '';
}
})
sums[0] = '统计'
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 ? '' : type
},
// 右侧工具条显示列表选择显示不同分析字段的数据
changeShowAnalyseList(command){
if(command == 'none'){
this.showAnalyseList = false
}else{
this.analyseListChecked = command
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() {
}
};
</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;
}
</style>
<style lang="scss" scoped>
.container {
position: relative;
display: flex;
flex-direction: column;
height: 100%;
padding: 20px;
}
.btn-toolbar {
* + * {
margin-left: 10px;
margin-right: 0;
}
}
.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: 30px;
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>
GitBucket
4.6.0