ttk-app-core
Version:
enterprise develop framework
269 lines (251 loc) • 9.48 kB
JavaScript
import React from 'react'
import { action as MetaAction, AppLoader } from 'edf-meta-engine'
import config from './config'
import utils, { fetch } from 'edf-utils'
import { List, fromJS, is } from 'immutable'
import { Echarts, Table, FormDecorator } from 'edf-component'
import { addThousandsPosition,clearThousandsPosition } from './data'
class action {
constructor(option) {
this.metaAction = option.metaAction
this.metaReducer = option.metaReducer
this.config = config.current
this.webapi = this.config.webapi
}
onInit = ({ component, injections }) => {
this.component = component
this.injections = injections
injections.reduce('init')
let addEventListener = this.component.props.addPanelEventListener
if (addEventListener) {
addEventListener('onMouseOver', 'app-home-business-state', (param) => {
this.metaAction.sf('data.other.MathRndom', Math.random())
this.metaAction.sf('data.other.action', param)
})
}
this.load()
}
componentWillReceiveProps = (nextProps) => {
// if(!is(nextProps.data, this.component.props.data) && nextProps.data){
// this.initData(nextProps.data)
// }
}
load = async () => {
let res = this.component.props.data
let emptyData = this.component.props.hasData
this.metaAction.sf('data.other.emptyData', emptyData)
this.metaAction.sf('data.type','chart')
let data = this.component.props.data
// if(res){
// this.initData(res)
// }
const currentOrg = this.metaAction.context.get("currentOrg")
let periodDate = currentOrg.periodDate
let response = {}
if (periodDate) {
const monthDate = utils.date.monthStartEndDay(periodDate)
response.beginDate = monthDate.startDay ? monthDate.startDay : moment().format('YYYY-MM-DD')
response.endDate = monthDate.endDay ? monthDate.endDay : moment().format('YYYY-MM-DD')
// response.voucher.authenticatedMonth = monthDate.endDay ? monthDate.endDay.slice(0, 7) : moment().format('YYYY-MM')
}
let queryInvoiceSum = await this.webapi.business.queryInvoiceSum(response)
this.injections.reduce('load', queryInvoiceSum)
}
compare = (property) => {
return function(a,b){
let value1 = a[property];
let value2 = b[property];
return value1 - value2;
}
}
fieldChange = (path, value) => {
if(value == '0'){
this.metaAction.sf('data.type','chart')
}else {
this.metaAction.sf('data.type','table')
}
}
refresh = async () => {
_hmt && _hmt.push(['_trackEvent', '桌面', '经营状况', '刷新'])
let data = await this.webapi.business.query()
let res = this.initData(data)
}
getChart = () => {
this.metaAction.sf('data.form.textDisplay',true)
}
getTable = () => {
this.metaAction.sf('data.form.textDisplay',false)
}
getContent = () => {
let list = this.metaAction.gf('data.form.list') && this.metaAction.gf('data.form.list').toJS(),
tableSource = this.metaAction.gf('data.form.list') && this.metaAction.gf('data.form.list').toJS(),
invoiceTypeName = [],invoiceTypeSum = [],taxInclusiveAmount = [],pancakeList = []
if(list) {
for(var i=0;i<list.length;i++){
let pancakeObjet = {}
invoiceTypeName.push(list[i].invoiceTypeName)
invoiceTypeSum.push(list[i].invoiceTypeSum)
taxInclusiveAmount.push(list[i].taxInclusiveAmount)
pancakeObjet.value = list[i].invoiceTypeSum
pancakeObjet.name = list[i].invoiceTypeName
pancakeList.push(pancakeObjet)
}
}
let columns = [
{
title: '发票类型',
dataIndex: 'invoiceTypeName',
width: '30%',
key: 'invoiceTypeName'
}, {
title: '份数',
dataIndex: 'invoiceTypeSum',
// width: '30%',
key: 'invoiceTypeSum',
}, {
title: '价税合计',
dataIndex: 'taxInclusiveAmount',
// width: '30%',
key: 'taxInclusiveAmount',
}
]
let option = {
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
legend: {
orient: 'vertical',
x: 'right',
top: 65,
left: 430,
data:invoiceTypeName
},
series: [
{
name:'访问来源',
type:'pie',
radius: ['30%', '50%'],
avoidLabelOverlap: false,
label: {
normal: {
show: false,
position: 'center',
formatter:'{c}'
},
emphasis: {
show: true,
textStyle: {
fontSize: '30',
fontWeight: 'bold'
}
}
},
labelLine: {
normal: {
show: false
}
},
data:pancakeList
}
]
};
let movement = this.metaAction.gf('data.other.action')
let emptyData = this.metaAction.gf('data.other.emptyData')
if(emptyData) {
if(movement == 'out') {
// option = this.moveOut(option)
}else if(movement == 'hover'){
// option = this.moveIn(option)
}
}else {
// option = this.moveIn(option)
}
let type = this.metaAction.gf('data.type'),
onEvents = {
'click': this.chartClick,
'mouseover': this.chartmouseover,
'timelinechanged': this.chartClick
}
if(type == 'chart'||!type){
return <Echarts option={option} className="rcchart" onEvents={onEvents}/>
}else if(type == 'table'){
return <Table columns={columns} bordered={true} dataSource = { tableSource } pagination ={false} className="rctable"/>
}
}
fold = async (option) => {
this.metaAction.sf('data.mathRandom', Math.random())
let fold
if(this.metaAction.gf('data.fold') == true){
this.metaAction.sf('data.fold',false)
fold = 'close'
}else{
this.metaAction.sf('data.fold',true)
fold = 'open'
}
let index
if(this.component.props.appIndex != undefined) {
index = this.component.props.appIndex
}
this.component.props.callback && await this.component.props.callback(index, fold)
}
// //移入移出样式
// moveIn = (option) => {
// option.xAxis.axisLine = {
// lineStyle: {
// color: '#333333'
// }
// }
// option.yAxis.axisLine = {
// lineStyle: {
// color: '#333333'
// }
// }
// option.xAxis.axisLabel.color = '#333333'
// option.yAxis.splitLine = {
// show:true,
// lineStyle:{
// color: '#d0cdc7'
// }
// }
// option.yAxis.axisLabel.color = '#333333'
// option.color = ['#E48E58', '#2BB696', '#4cabce']
// option.legend.textStyle = {
// color: '#333333'
// }
// return option
// }
// moveOut = (option) => {
// option.xAxis.axisLine = {
// lineStyle: {
// color: '#eceef1'
// }
// }
// option.yAxis.axisLine = {
// lineStyle: {
// color: '#eceef1'
// }
// }
// option.xAxis.axisLabel.color = '#e0e4e9'
// option.yAxis.splitLine = {
// show:true,
// lineStyle:{
// color: '#eceef1'
// }
// }
// option.yAxis.axisLabel.color = '#e0e4e9'
// option.color = ['#eceef1', '#eceef1', '#eceef1']
// option.legend.textStyle = {
// color: '#e0e4e9'
// }
// return option
// }
}
export default function creator(option) {
const metaAction = new MetaAction(option),
voucherAction = FormDecorator.actionCreator({ ...option, metaAction }),
o = new action({ ...option, metaAction, voucherAction }),
ret = { ...metaAction, ...voucherAction, ...o }
metaAction.config({ metaHandlers: ret })
return ret
}