aldehyde 0.0.4 → 0.0.5

package/src/components/welcome/HCWelcome.js

@@ -0,0 +1,232 @@
+import React from 'react'
+import AntdPieChart from "../chart/antd/PieChart2";
+import {Card, Col, Row,Image,Carousel} from 'antd';
+import HcserviceV3 from "../tmpl/hcservice-v3";
+import QuickEntrance from './quick-entrance'
+import Workbench from './workbench';
+import './index.css';
+import  * as Echarts from 'echarts';
+import TimeCost from '../../../public/time-cost.png';
+import TimePrograss from '../../../public/time-prograss.png';
+import PainPoint from '../../../public/pain-point.png';
+import Target from '../../../public/target.png';
+import Development from '../../../public/development.png';
+
+export default class HCWelcome extends React.Component {
+    state = {}
+
+    intervals = [];
+
+    async componentDidMount() {
+        // let l2MenuCharts = await HcserviceV3.requestSimpleCharts();
+        // let piecharts = [];
+        // for (const item of l2MenuCharts) {
+        //     let data = await HcserviceV3.requestSimpleChartsEntities( item.id);
+        //     if (data) {
+        //         piecharts.push(<Col span={12}> <AntdPieChart data={data} key={item.id}></AntdPieChart></Col>)
+        //     }
+        // }
+        //
+        // var chartDom = document.getElementById('echart1');
+        // var myChart = Echarts.init(chartDom);
+        // var option;
+        //
+        // option = {
+        //     title: {
+        //         text: 'Line'
+        //     },
+        //     tooltip: {
+        //         trigger: 'axis'
+        //     },
+        //     legend: {
+        //         data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
+        //     },
+        //     grid: {
+        //         left: '3%',
+        //         right: '4%',
+        //         bottom: '3%',
+        //         containLabel: true
+        //     },
+        //     toolbox: {
+        //         feature: {
+        //             saveAsImage: {}
+        //         }
+        //     },
+        //     xAxis: {
+        //         type: 'category',
+        //         boundaryGap: false,
+        //         data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+        //     },
+        //     yAxis: {
+        //         type: 'value'
+        //     },
+        //     series: [
+        //         {
+        //             name: 'Email',
+        //             type: 'line',
+        //             stack: 'Total',
+        //             data: [120, 132, 101, 134, 90, 230, 210]
+        //         },
+        //         {
+        //             name: 'Union Ads',
+        //             type: 'line',
+        //             stack: 'Total',
+        //             data: [220, 182, 191, 234, 290, 330, 310]
+        //         },
+        //         {
+        //             name: 'Video Ads',
+        //             type: 'line',
+        //             stack: 'Total',
+        //             data: [150, 232, 201, 154, 190, 330, 410]
+        //         },
+        //         {
+        //             name: 'Direct',
+        //             type: 'line',
+        //             stack: 'Total',
+        //             data: [320, 332, 301, 334, 390, 330, 320]
+        //         },
+        //         {
+        //             name: 'Search Engine',
+        //             type: 'line',
+        //             stack: 'Total',
+        //             data: [820, 932, 901, 934, 1290, 1330, 1320]
+        //         }
+        //     ]
+        // };
+        //
+        // option && myChart.setOption(option);
+        //
+        // var chartDom = document.getElementById('echart2');
+        // var myChart = Echarts.init(chartDom);
+        // var option;
+        //
+        // option = {
+        //     legend: {
+        //         top: 'bottom'
+        //     },
+        //     toolbox: {
+        //         show: true,
+        //         feature: {
+        //             mark: { show: true },
+        //             dataView: { show: true, readOnly: false },
+        //             restore: { show: true },
+        //             saveAsImage: { show: true }
+        //         }
+        //     },
+        //     series: [
+        //         {
+        //             name: 'Nightingale Chart',
+        //             type: 'pie',
+        //             radius: [16, 80],
+        //             center: ['50%', '50%'],
+        //             roseType: 'area',
+        //             itemStyle: {
+        //                 borderRadius: 8
+        //             },
+        //             data: [
+        //                 { value: 40, name: 'rose 1' },
+        //                 { value: 38, name: 'rose 2' },
+        //                 { value: 32, name: 'rose 3' },
+        //                 { value: 30, name: 'rose 4' },
+        //                 { value: 28, name: 'rose 5' },
+        //                 { value: 26, name: 'rose 6' },
+        //                 { value: 22, name: 'rose 7' },
+        //                 { value: 18, name: 'rose 8' }
+        //             ]
+        //         }
+        //     ]
+        // };
+        //
+        // option && myChart.setOption(option);
+        //
+        // this.setState({
+        //     piecharts
+        // })
+    }
+
+    componentWillUnmount() {
+        if (this.intervals.length > 0) {
+            for (let i of this.intervals) {
+                clearInterval(i);
+            }
+        }
+        this.intervals = [];
+    }
+    cardStyle = {
+        height: '400px',
+        // background: '#364d79',
+    };
+    carouselStyle={
+        background: '#fff',
+        borderRadius:'6px'
+    }
+
+    render() {
+        return <>
+        <Row className={'home-page'} gutter={{xs: 8, sm: 16, md: 24, lg: 32}}>
+            <Col span={24} >
+                <Card className="hovercard">
+                    <Row gutter={{xs: 8, sm: 16, md: 24, lg: 32}}>
+                        <Col span={12}><Image  src={PainPoint} ></Image></Col>
+                        <Col span={12}> <Image  src={Target} ></Image></Col>
+                    </Row>
+                </Card>
+                {/*<Card className="hovercard">*/}
+                {/*    */}
+                {/*</Card>*/}
+            </Col>
+            <Col span={24} >
+                <Row style={{minHeight:'100px'}} gutter={{xs: 8, sm: 16, md: 24, lg: 32}}>
+                    <Col span={12} style={{width: '100%'}}>
+                        <Workbench className="hovercard" ></Workbench>
+                        <QuickEntrance   className="hovercard"></QuickEntrance>
+                    </Col>
+                    <Col span={12} style={{'height':'410px'}}  >
+                        <Card className="hovercard" style={this.cardStyle} bodyStyle={{padding:'2px'}}>
+                        <Carousel  autoplay >
+                            <div >
+                                <Image src={TimePrograss} ></Image>
+                            </div >
+                            <div >
+                                <Image src={Development} ></Image>
+                            </div>
+                            <div >
+                                <Image src={TimeCost} ></Image>
+                            </div>
+                        </Carousel>
+                        </Card>
+                    </Col>
+                </Row>
+            </Col>
+            {/*<Col span={24} >*/}
+            {/*    <Row style={{minHeight:'100px'}} gutter={{xs: 8, sm: 16, md: 24, lg: 32}}>*/}
+            {/*        <Col span={12} style={{width: '100%','height':'400px'}}>*/}
+            {/*            <Image src={Development} ></Image>*/}
+            {/*        </Col>*/}
+            {/*        <Col span={12} style={{'height':'400px'}} >*/}
+            {/*            <Image src={TimeCost} ></Image>*/}
+            {/*        </Col>*/}
+            {/*    </Row>*/}
+            {/*</Col>*/}
+            <Col span={24}>
+            < Row gutter={{xs: 8, sm: 16, md: 24, lg: 32}}>
+                <Col style={{width: '100%'}}>
+                    <Card className="hovercard"
+                        title={'统计视图'}>
+                        < Row gutter={[{xs: 8, sm: 16, md: 24, lg: 32},{xs: 8, sm: 16, md: 24, lg: 32}]}>
+                            {/*{this.state.piecharts}*/}
+                        <Col span={16} style={{'height':'400px'}} id={'echart1'} >
+                        </Col>
+                            <Col span={8} style={{'height':'400px'}}  id={'echart2'}>
+                            </Col>
+                            {/*{this.state.piecharts}*/}
+                        </Row>
+                    </Card>
+                </Col>
+            </Row>
+            </Col>
+        </Row>
+            </>
+    }
+
+}

package/src/components/welcome/index.css

@@ -0,0 +1,13 @@
+.home{
+    height:calc(70vh);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 20px;
+    background: #fff;
+}
+
+.home-page{
+    padding-top: 24px;
+    background: #f0f5ff;
+}

package/src/components/welcome/quick-entrance.tsx

@@ -0,0 +1,77 @@
+import React from 'react'
+import {Badge, Button, Card, Layout, Space,CardProps} from 'antd'
+import {CodeTwoTone} from '@ant-design/icons';
+import 'antd/dist/antd.css';
+import HcserviceV3 from "../tmpl/hcservice-v3";
+import HCDataSource from '../tmpl/hc-data-source'
+import {Level2Menu} from "../tmpl/interface";
+
+interface QuickEntranceProps extends CardProps{
+}
+
+interface QuickEntranceState {
+    l2Menus:Level2Menu[]
+}
+
+class QuickEntrance extends React.PureComponent<QuickEntranceProps, QuickEntranceState> {
+    state={
+        l2Menus:undefined
+    }
+    intervals:any[]=[];
+    async componentDidMount() {
+        let l2Menus:Level2Menu[] = await HCDataSource.quickEntranceMenus();
+        for (const item of l2Menus) {
+            if (item.displayTotal == true) {
+                let i= setInterval(async () => {
+                    let count = await HcserviceV3.requestLtmplCount(item.id);
+                    item.count = count;
+                    this.setState({})
+                }, 180000);
+                this.intervals.push(i);
+                let count = await HcserviceV3.requestLtmplCount(item.id);
+                item.count = count;
+                this.setState({})
+            }
+        }
+        this.setState({
+            l2Menus
+        })
+    }
+
+    componentWillUnmount(): void {
+        if(this.intervals.length>0){
+            for(let i of this.intervals){
+                console.log('快捷入口移除定时任务');
+                clearInterval( i);
+            }
+        }
+        this.intervals=[];
+    }
+
+    render() {
+
+        const {title,...other}=this.props;
+        const {l2Menus}=this.state;
+
+        let faceplateL2MenuComp = [];
+        l2Menus && l2Menus.forEach((l2Menu) => {
+            let comp =
+                <Badge key={l2Menu.id} count={l2Menu.count}>
+                    <Button shape="round" icon={<CodeTwoTone/>} href={`#/${l2Menu.id}/act-table?menuId=${l2Menu.id}`}
+                            size='large'>{l2Menu.title}</Button>
+                </Badge>
+
+            faceplateL2MenuComp.push(comp);
+        })
+
+        return (
+            <Card {...other} >
+                <Space size={[16, 16]} wrap>
+                    {faceplateL2MenuComp}
+                </Space>
+            </Card>
+        )
+    }
+}
+
+export default QuickEntrance

package/src/components/welcome/workbench.tsx

@@ -0,0 +1,76 @@
+import React from 'react'
+import {Button, Card, Space, Statistic,CardProps} from 'antd'
+import {RocketTwoTone } from '@ant-design/icons';
+import 'antd/dist/antd.css';
+import HcserviceV3 from "../tmpl/hcservice-v3";
+import HCDataSource from '../tmpl/hc-data-source'
+import {Level2Menu} from "../tmpl/interface";
+
+interface WorkbenchProps extends CardProps {
+}
+
+interface WorkbenchState {
+    l2Menus: Level2Menu[]
+}
+
+class Workbench extends React.PureComponent<WorkbenchProps, WorkbenchState> {
+    state = {
+        l2Menus: undefined
+    }
+    intervals: any[] = [];
+
+    async componentDidMount() {
+        let l2Menus: Level2Menu[] = await HCDataSource.workbenchMenus();
+        for (const item of l2Menus) {
+            let i = setInterval(async () => {
+                let count = await HcserviceV3.requestLtmplCount( item.id);
+                item.count = count;
+                this.setState({})
+            }, 180000);
+            this.intervals.push(i);
+            let count = await HcserviceV3.requestLtmplCount( item.id);
+            item.count = count;
+            this.setState({})
+        }
+        this.setState({
+            l2Menus
+        })
+    }
+
+    componentWillUnmount(): void {
+        if (this.intervals.length > 0) {
+            for (let i of this.intervals) {
+                console.log('workbanch移除定时任务');
+                clearInterval(i);
+            }
+        }
+        this.intervals = [];
+    }
+
+    render() {
+
+        const {title, ...other} = this.props;
+        const {l2Menus} = this.state;
+
+        let faceplateStatisticL2MenusComp = [];
+        l2Menus && l2Menus.forEach((l2Menu) => {
+            let comp =
+                (<Card key={l2Menu.id}><Statistic prefix={<RocketTwoTone />} title={l2Menu.title} value={l2Menu.count}/>
+                    <Button style={{marginTop: 12}} href={`#/${l2Menu.id}/act-table?menuId=${l2Menu.id}`} >
+                        查看
+                    </Button>
+                </Card>)
+            faceplateStatisticL2MenusComp.push(comp);
+        })
+
+        return (
+            <Card {...other} title={title ? title : '工作台'}>
+                <Space size={[16, 16]} wrap>
+                    {faceplateStatisticL2MenusComp}
+                </Space>
+            </Card>
+        )
+    }
+}
+
+export default Workbench

package/src/index.tsx

@@ -0,0 +1,5 @@
+import ActTable  from './components/table/act-table';
+import SelectTable  from './components/table/select-table';
+
+export {ActTable,SelectTable}
+

package/src/style/common.css

@@ -0,0 +1,79 @@
+
+body {
+	margin: 0;
+	padding: 0;
+	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+	  "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+	  sans-serif;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+  }
+.container{
+	display:flex;
+	min-width: 620px;
+}
+.nav-left{
+	min-width: 50px;
+	background: #001529;
+	height: calc(100vh);
+	overflow: auto;
+}
+.nav-left::-webkit-scrollbar {
+	display: none;
+}
+.main{
+	flex:1;
+	height: calc(100vh);
+	background: #eee;
+	overflow: auto;
+	/*min-width: 620px;*/
+}
+
+.content{
+	position: relative;
+	background: #fff;
+	flex:1;
+    min-height:calc(75vh);
+}
+.login{
+	position: relative;
+	height:calc(100vh);
+	background: #001529
+}
+.login form{
+	background: #fff;
+	position: absolute;
+	top:50%;
+	left:50%;
+	transform: translate(-50%,-50%);
+	padding:30px 20px;
+	border-radius: 5px
+}
+.buttonDiv{
+    background: #fff;
+    padding:15px 10px 10px;
+}
+.hoverbig:hover{
+    -ms-transform:scale(1.2,1.2); /* IE 9 */
+    -webkit-transform: scale(1.2,1.2); /* Safari */
+    transform: scale(1.2,1.2); /* 标准语法 */
+    transition: all .5s;
+    z-index: 99;
+}
+.fr{
+    position: relative;
+    top:-4px;
+    float: right;
+}
+.fr button{
+	margin-right: 5px;
+}
+.hoverable:hover{
+    box-shadow: 4px 4px 10px rgba(0,0,0,.09);
+    border-color: rgba(0,0,0,.09);
+}
+.hovercard{
+	box-shadow: 4px 4px 10px rgba(0,0,0,.09);
+	border-color: rgba(0,0,0,.09);
+	border-radius: 4px;
+}

package/src/style/coverstyle.css

@@ -0,0 +1,49 @@
+.ant-card-head-title{
+	padding:10px 0;
+}
+.login form .ant-form-item,.ant-card{
+	margin-bottom: 14px
+}
+.ant-tabs .ant-tabs-top-content, .ant-tabs .ant-tabs-bottom-content{
+	padding:0 20px 20px;
+}
+.ant-tabs-tab-btn-disabled, .ant-tabs-tab-btn-disabled:hover{
+	color:#fff;
+}
+.ant-upload-list{
+	width:220px
+}
+:root .ant-tabs-tab-prev-icon-target, :root .ant-tabs-tab-next-icon-target{
+	font-size: 20px;
+}
+.ant-message{
+	z-index: 1090;
+}
+.ant-tabs-bar{
+	z-index: 99;
+}
+.ant-card-extra{
+	padding:0;
+}
+.ant-card-head{
+	min-height: 40px;
+}
+.ant-table{
+	line-height: 1;
+	overflow-x: auto;
+}
+.ant-table-thead > tr > th, .ant-table-tbody > tr > td{
+	padding:8px 10px;
+	white-space :nowrap;
+	text-align: left;
+}
+.ant-table-pagination.ant-pagination{
+	margin:10px 0;
+}
+.ant-table-thead > tr > th.ant-table-selection-column, .ant-table-tbody > tr > td.ant-table-selection-column{
+	min-width: 0;
+}
+.ant-avatar{
+	width:50px;
+	height:50px;
+}

package/src/style/transstyle.css

@@ -0,0 +1,24 @@
+.fade-enter, .fade-appear {
+	opacity: 0;
+}
+
+.fade-enter-active, .fade-appear-active {
+	opacity: 1;
+	transition: opacity 1s ease-in;
+}
+
+.fade-enter-done {
+	opacity: 1;
+}
+
+.fade-exit {
+	opacity: 1;
+}
+.fade-exit-active {
+	opacity: 0;
+	transition: opacity 1s ease-in;
+}
+
+.fade-exit-done{
+	opacity: 0;
+}