ttk-app-core/compatible/apps/edf/ttk-edf-app-dashboard-workplace/action.js

enterprise develop framework

import React from 'react'
import { action as MetaAction, AppLoader } from 'edf-meta-engine'
import { Tag, Echarts } from 'edf-component'
import config from './config'

class action {
    constructor(option) {
        this.metaAction = option.metaAction
        this.config = config.current
        this.webapi = this.config.webapi
    }

    
    onInit = ({ component, injections }) => {
        this.component = component
        this.injections = injections
        injections.reduce('init')
        this.getData()
    }

    btnClick = () => {
        this.injections.reduce('modifyContent')
    }
    
    getData = async() => {
        const result = await this.webapi.person.query()
        this.injections.reduce('update', result)
    }

    renderCardItem = (data) => {
        return data.map(item => {
            return (
                <div className="project-list-item">
                    <div className="project-list-item-title">
                        <div className="project-list-item-logo">
                            <img src={item.logo}  alt={item.name} title={item.name}/>
                        </div>
                        <div className="project-list-item-name">
                            <a>{item.name}</a>
                        </div>
                    </div>
                    <div className="project-list-item-main">
                        <span>{item.detail}</span>
                    </div>
                    <div className="project-list-item-footer">
                        <div className="project-list-item-article">
                            <span>{item.author}</span>
                        </div>
                        <div className="project-list-item-time">
                            <span>{item.time}</span>
                        </div>
                    </div>
                </div>
            )
        })
    }

    renderActiveItem = (data) => {
        return data.map(item => {
            return (
                <div className="active-list-item">
                    <div className="active-list-item-left">
                        <img src={item.logo} />
                    </div>
                    <div className="active-list-item-right">
                        <div className="active-list-item-right-top">
                            <span>
                                {item.content}
                            </span>
                        </div>
                        <div className="active-list-item-right-bottom">
                            <span>
                                {item.time}
                            </span>
                        </div>
                    </div>
                </div>
            )
        })
    }

    renderQuicknNav = (data) => {   
        const arr =  data.map(item => {
            return (
                <a key={item.name} className="quick-nav-item">{item.name}</a>
            )
        })
        arr.push(
            <span className="quick-nav-item"><Tag>添加</Tag></span>
        )
        return arr
    }

    renderEcharts = () => {
        const option = {
            name: {
                textStyle: {
                    color: '#fff',
                    backgroundColor: '#999',
                    borderRadius: 3,
                    padding: [3, 5]
               }
            },
            legend: {
                data: ['个人', '团队', '部门']
            },
            radar: [
                {
                    indicator: [
                        {text: '引用', max: 12},
                        {text: '度', max: 12},
                        {text: '贡献', max: 12},
                        {text: '产量', max: 12},
                        {text: '口', max: 12}
                    ],
                    radius: 80,
                    center: ['50%','60%'],
                }
            ],
            series: [
                {
                    type: 'radar',
                     tooltip: {
                        trigger: 'item'
                    },
                    data: [
                        {
                            value: [6,7,8,4, 1],
                            name: '个人',
                            itemStyle: {
                                color: '#0f0'
                            }
                        },
                        {
                            value: [11,4,3,8, 6],
                            name: '团队',
                            itemStyle: {
                                color: '#f00'
                            }
                        },
                        {
                            value: [10,6,5,8, 7],
                            name: '部门',
                            itemStyle: {
                                color: '#00f'
                            }
                        }
                    ]
                }
            ]
        }
        return <Echarts option={option} />
    }
    
    renderTeam = (data) => {
        return data.map(item => {
            return (
                <div className="team-item-list">
                    <div className="team-item-list-logo">
                        <img src={item.logo} />
                    </div>
                    <div className="team-item-list-name">
                        {item.name}
                    </div>
                </div>
            )
        })
    }
}

export default function creator(option) {
    const metaAction = new MetaAction(option),
        o = new action({ ...option, metaAction }),
        ret = { ...metaAction, ...o }

    metaAction.config({ metaHandlers: ret })

    return ret
}