428 lines
17 KiB
TypeScript
428 lines
17 KiB
TypeScript
|
import React, { useEffect } from 'react';
|
|||
|
|
import './index.less';
|
|||
|
|
import { Carousel, Col, Divider, List, Row } from 'antd';
|
|||
|
|
import * as echarts from 'echarts';
|
|||
|
|
import topic_header from '@/assets/topic/topic_header.jpg'
|
|||
|
|
import topic_activity_logo from '@/assets/topic/topic_activity_logo.png'
|
|||
|
|
import topic_red_flag from '@/assets/topic/topic_red_flag.png'
|
|||
|
|
import topic_other from '@/assets/topic/topic_other.png'
|
|||
|
|
import topic_example1 from '@/assets/topic/topic_example1.jpg'
|
|||
|
|
import topic_example2 from '@/assets/topic/topic_example2.jpg'
|
|||
|
|
import topic_example3 from '@/assets/topic/topic_example3.jpg'
|
|||
|
|
import topic_example4 from '@/assets/topic/topic_example4.jpg'
|
|||
|
|
import topic_example5 from '@/assets/topic/topic_example5.jpg'
|
|||
|
|
import topic_example6 from '@/assets/topic/topic_example6.jpg'
|
|||
|
|
import topic_project_picture from '@/assets/topic/topic_project_picture.jpg'
|
|||
|
|
import topic_bottom_button from '@/assets/topic/topic_bottom_button.png'
|
|||
|
|
import topic_right_material from '@/assets/topic/topic_right_material.png'
|
|||
|
|
import topic_partymember from '@/assets/topic/topic_partymember.png'
|
|||
|
|
import topic_partybranch from '@/assets/topic/topic_partybranch.png'
|
|||
|
|
import topic_totalamount from '@/assets/topic/topic_totalamount.png'
|
|||
|
|
import topic_totalnumber from '@/assets/topic/topic_totalnumber.png'
|
|||
|
|
import topic_commodity from '@/assets/topic/topic_commodity.png'
|
|||
|
|
import topic_protocol from '@/assets/topic/topic_protocol.png'
|
|||
|
|
import topic_banner1 from '@/assets/topic/topic_banner1.jpg'
|
|||
|
|
|
|||
|
|
const LeftCardTop = (props: any) => {
|
|||
|
|
return (
|
|||
|
|
<>
|
|||
|
|
<div className='left-card-top'>
|
|||
|
|
<div>
|
|||
|
|
<span className='left-card-title'>{props.title}</span>
|
|||
|
|
<img src={topic_red_flag} className='left-card-flag' />
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<span className='left-card-other'>更多</span>
|
|||
|
|
<img src={topic_other} className='left-card-otherimg' />
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<Divider className='left-card-divider' />
|
|||
|
|
</>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const RightDisplayTitle = (props: any) => {
|
|||
|
|
return (
|
|||
|
|
<div className='right-display-title'>
|
|||
|
|
{props.title}
|
|||
|
|
</div>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const RightDisplayContent = (props: any) => {
|
|||
|
|
return (
|
|||
|
|
<div className='right-display-content'>
|
|||
|
|
<img src={right_data[props.type].img} className='right-display-content-img' />
|
|||
|
|
<div className='right-display-content-right'>
|
|||
|
|
<div className='right-display-content-title'>
|
|||
|
|
<span>{right_data[props.type].name}</span>
|
|||
|
|
{right_data[props.type].type != null && <span className='right-display-content-percentage'>
|
|||
|
|
<span>同比</span>
|
|||
|
|
{right_data[props.type].type == 1 ? (
|
|||
|
|
<span className='right-display-content-percentage-increase'>{right_data[props.type].percentage}% ↑</span>
|
|||
|
|
) : (
|
|||
|
|
<span className='right-display-content-percentage-reduce'>{right_data[props.type].percentage}% ↓</span>
|
|||
|
|
)}
|
|||
|
|
</span>}
|
|||
|
|
</div>
|
|||
|
|
<div className='right-display-content-content'>
|
|||
|
|
<span className={`right-display-content-number ${props.color}`}>{right_data[props.type].number}</span>
|
|||
|
|
<span className='right-display-content-unit'>{right_data[props.type].unit}</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const RightGraphContent = (props: any) => {
|
|||
|
|
const random = Math.random().toString();
|
|||
|
|
useEffect(() => {
|
|||
|
|
type EChartsOption = echarts.EChartsOption;
|
|||
|
|
const chartDom = document.getElementById(random)!;
|
|||
|
|
const myChart = echarts.init(chartDom);
|
|||
|
|
const option: EChartsOption = {
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: 'item'
|
|||
|
|
},
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
name: props.name,
|
|||
|
|
type: 'pie',
|
|||
|
|
radius: '90%',
|
|||
|
|
color: ['#5470C6', '#91CC75', '#FAC858', '#EE6666', '#73C0DE', '#3BA272', '#FC8452', '#9A60B4'],
|
|||
|
|
data: props.data,
|
|||
|
|
label: {
|
|||
|
|
formatter: props.type == 1 ? '{b}\n\n{c}件 {d}%' : '{b}',
|
|||
|
|
fontSize: 12,
|
|||
|
|
color: '#fff',
|
|||
|
|
position: 'inner',
|
|||
|
|
},
|
|||
|
|
emphasis: {
|
|||
|
|
itemStyle: {
|
|||
|
|
shadowBlur: 10,
|
|||
|
|
shadowOffsetX: 0,
|
|||
|
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
};
|
|||
|
|
myChart.setOption(option);
|
|||
|
|
}, [])
|
|||
|
|
return (
|
|||
|
|
<div id={random} style={{ width: '100%', height: '100%' }}></div>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const example_list = [
|
|||
|
|
{
|
|||
|
|
img: topic_example1,
|
|||
|
|
text: '支队领导带领党员民警参观5G创新中心'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
img: topic_example2,
|
|||
|
|
text: '支队领导带领党员民警参观5G创新中心'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
img: topic_example3,
|
|||
|
|
text: '支队领导带领党员民警参观5G创新中心'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
img: topic_example4,
|
|||
|
|
text: '支队领导带领党员民警参观5G创新中心'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
img: topic_example5,
|
|||
|
|
text: '支队领导带领党员民警参观5G创新中心'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
img: topic_example6,
|
|||
|
|
text: '支队领导带领党员民警参观5G创新中心'
|
|||
|
|
},
|
|||
|
|
]
|
|||
|
|
|
|||
|
|
const listData = [
|
|||
|
|
{
|
|||
|
|
title: '中国联通召开 2022年党建暨党风廉政建设工作会议',
|
|||
|
|
time: '05-25 16:19',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '喜报｜联通智慧党建产品，荣获国家级创新大赛一等奖',
|
|||
|
|
time: '05-25 16:19',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '中国联通召开 2022年党建暨党风廉政建设工作会议',
|
|||
|
|
time: '05-25 16:19',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '喜报｜联通智慧党建产品，荣获国家级创新大赛一等奖',
|
|||
|
|
time: '05-25 16:19',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '中国联通召开 2022年党建暨党风廉政建设工作会议',
|
|||
|
|
time: '05-25 16:19',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '喜报｜联通智慧党建产品，荣获国家级创新大赛一等奖',
|
|||
|
|
time: '05-25 16:19',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '中国联通召开 2022年党建暨党风廉政建设工作会议',
|
|||
|
|
time: '05-25 16:19',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '喜报｜联通智慧党建产品，荣获国家级创新大赛一等奖',
|
|||
|
|
time: '05-25 16:19',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '中国联通召开 2022年党建暨党风廉政建设工作会议',
|
|||
|
|
time: '05-25 16:19',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '喜报｜联通智慧党建产品，荣获国家级创新大赛一等奖',
|
|||
|
|
time: '05-25 16:19',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '中国联通召开 2022年党建暨党风廉政建设工作会议',
|
|||
|
|
time: '05-25 16:19',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '喜报｜联通智慧党建产品，荣获国家级创新大赛一等奖',
|
|||
|
|
time: '05-25 16:19',
|
|||
|
|
},
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
const length = ['集团', '北京分公司', '山东分公司'];
|
|||
|
|
const card_length = [1, 2, 3, 4];
|
|||
|
|
|
|||
|
|
const right_data = {
|
|||
|
|
partymember: {
|
|||
|
|
name: '党员数量',
|
|||
|
|
img: topic_partymember,
|
|||
|
|
number: 1275,
|
|||
|
|
unit: '个',
|
|||
|
|
type: null,
|
|||
|
|
percentage: null,
|
|||
|
|
},
|
|||
|
|
partybranch: {
|
|||
|
|
name: '党支部数量',
|
|||
|
|
img: topic_partybranch,
|
|||
|
|
number: 75,
|
|||
|
|
unit: '个',
|
|||
|
|
type: null,
|
|||
|
|
percentage: null,
|
|||
|
|
},
|
|||
|
|
totalamount: {
|
|||
|
|
name: '订单交易总额',
|
|||
|
|
img: topic_totalamount,
|
|||
|
|
number: 274.5,
|
|||
|
|
unit: '亿元',
|
|||
|
|
type: 1,
|
|||
|
|
percentage: 0.9,
|
|||
|
|
},
|
|||
|
|
totalnumber: {
|
|||
|
|
name: '订单总数量',
|
|||
|
|
img: topic_totalnumber,
|
|||
|
|
number: 1297,
|
|||
|
|
unit: '个',
|
|||
|
|
type: 1,
|
|||
|
|
percentage: 0.9,
|
|||
|
|
},
|
|||
|
|
commodity: {
|
|||
|
|
name: '商品数量',
|
|||
|
|
img: topic_commodity,
|
|||
|
|
number: 76321,
|
|||
|
|
unit: '件',
|
|||
|
|
type: 1,
|
|||
|
|
percentage: 1.9,
|
|||
|
|
},
|
|||
|
|
protocol: {
|
|||
|
|
name: '协议数量',
|
|||
|
|
img: topic_protocol,
|
|||
|
|
number: 257,
|
|||
|
|
unit: '个',
|
|||
|
|
type: 0,
|
|||
|
|
percentage: 0.7,
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const right_graph_data = [
|
|||
|
|
{
|
|||
|
|
name: '物资采购计划',
|
|||
|
|
sub: '总采购数量',
|
|||
|
|
type: 1,
|
|||
|
|
number: 22324,
|
|||
|
|
unit: '件',
|
|||
|
|
data: [
|
|||
|
|
{ value: 1421, name: '已完成数量' },
|
|||
|
|
{ value: 2369, name: '进行中数量' },
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '攻坚克难项目',
|
|||
|
|
sub: '总课题数量',
|
|||
|
|
type: 1,
|
|||
|
|
number: 223,
|
|||
|
|
unit: '个',
|
|||
|
|
data: [
|
|||
|
|
{ value: 165, name: '已完成数量' },
|
|||
|
|
{ value: 265, name: '进行中数量' },
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '建议类型',
|
|||
|
|
sub: null,
|
|||
|
|
type: 0,
|
|||
|
|
number: null,
|
|||
|
|
unit: null,
|
|||
|
|
data: [
|
|||
|
|
{ value: 40, name: '系统优化' },
|
|||
|
|
{ value: 30, name: '组织优化' },
|
|||
|
|
{ value: 20, name: '制度优化' },
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
]
|
|||
|
|
|
|||
|
|
const Home: React.FC<{}> = () => {
|
|||
|
|
return (
|
|||
|
|
<div className="topic-global">
|
|||
|
|
<div className="topic-background">
|
|||
|
|
<div className="top-picture">
|
|||
|
|
<img src={topic_header} />
|
|||
|
|
</div>
|
|||
|
|
<div className="top-global">
|
|||
|
|
<div className='left-global'>
|
|||
|
|
<Carousel className='left-carousel'>
|
|||
|
|
<div>
|
|||
|
|
<img src={topic_banner1} className='carousel-content' />
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<h3 className='carousel-content'>2</h3>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<h3 className='carousel-content'>3</h3>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<h3 className='carousel-content'>4</h3>
|
|||
|
|
</div>
|
|||
|
|
</Carousel>
|
|||
|
|
<div className='left-activity'>
|
|||
|
|
<img src={topic_activity_logo} />
|
|||
|
|
</div>
|
|||
|
|
<div className='left-card'>
|
|||
|
|
<div className='left-graceful'>
|
|||
|
|
<LeftCardTop title="活动风采" />
|
|||
|
|
<div>
|
|||
|
|
<Row gutter={[20, 31]}>
|
|||
|
|
{example_list.map((item, index) => (
|
|||
|
|
<Col span={8} key={index}>
|
|||
|
|
<div className='left-graceful-bg' style={{ backgroundImage: `url(${item.img})` }}>
|
|||
|
|
<div className='left-graceful-textbg'>
|
|||
|
|
<span className='left-graceful-text'>{item.text}</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</Col>
|
|||
|
|
))}
|
|||
|
|
</Row>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div className='left-project'>
|
|||
|
|
<LeftCardTop title="攻坚克难项目" />
|
|||
|
|
<div className='left-project-content'>
|
|||
|
|
<img src={topic_project_picture} />
|
|||
|
|
<div className='left-project-content-list'>
|
|||
|
|
<List
|
|||
|
|
size='small'
|
|||
|
|
split={false}
|
|||
|
|
dataSource={listData}
|
|||
|
|
renderItem={item => (
|
|||
|
|
<List.Item>
|
|||
|
|
<div className='left-project-content-item'>
|
|||
|
|
<span className='left-project-content-item-title'>{item.title}</span>
|
|||
|
|
<span className='left-project-content-item-time'>{item.time}</span>
|
|||
|
|
</div>
|
|||
|
|
</List.Item>
|
|||
|
|
)}
|
|||
|
|
>
|
|||
|
|
</List>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div className='right-global'>
|
|||
|
|
<div>
|
|||
|
|
<img src={topic_right_material} className='right-material' />
|
|||
|
|
</div>
|
|||
|
|
<div className='right-display'>
|
|||
|
|
<RightDisplayTitle title="党员及支部数量情况" />
|
|||
|
|
<RightDisplayContent type="partymember" color="number-blue" />
|
|||
|
|
<RightDisplayContent type="partybranch" color="number-blue" />
|
|||
|
|
</div>
|
|||
|
|
<Divider className='right-divider' />
|
|||
|
|
<div className='right-display'>
|
|||
|
|
<RightDisplayTitle title="2022年订单交易情况" />
|
|||
|
|
<RightDisplayContent type="totalamount" color="number-orange" />
|
|||
|
|
<RightDisplayContent type="totalnumber" color="number-orange" />
|
|||
|
|
<RightDisplayContent type="commodity" color="number-orange" />
|
|||
|
|
<RightDisplayContent type="protocol" color="number-orange" />
|
|||
|
|
</div>
|
|||
|
|
<Divider className='right-divider' />
|
|||
|
|
{right_graph_data.map(item => (
|
|||
|
|
<div className='right-graph' key={item.name}>
|
|||
|
|
<div className='right-graph-title'>
|
|||
|
|
{item.name}
|
|||
|
|
</div>
|
|||
|
|
<div className='right-graph-subtitle'>
|
|||
|
|
{item.type == 1 && `${item.sub}：${item.number}${item.unit}`}
|
|||
|
|
</div>
|
|||
|
|
<div className='right-graph-content'>
|
|||
|
|
<RightGraphContent name={item.name} type={item.type} data={item.data} />
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div className='bottom-global'>
|
|||
|
|
<LeftCardTop title="活动联系人" />
|
|||
|
|
{length.map(item => (
|
|||
|
|
<div key={item}>
|
|||
|
|
<div className='bottom-title'>{item}</div>
|
|||
|
|
<div className='bottom-content'>
|
|||
|
|
<Row gutter={[20, 20]}>
|
|||
|
|
{card_length.map(item => (
|
|||
|
|
<Col span={6} key={item}>
|
|||
|
|
<div className='bottom-card'>
|
|||
|
|
<div className='bottom-card-flex'>
|
|||
|
|
<div className='bottom-card-title'>
|
|||
|
|
<span>张三</span>
|
|||
|
|
<span className='bottom-card-title-type'>(IP物资类)</span>
|
|||
|
|
</div>
|
|||
|
|
<img src={topic_bottom_button} />
|
|||
|
|
</div>
|
|||
|
|
<div className='bottom-card-content'>
|
|||
|
|
<div>邮箱：1214567@chinaunicom.cn</div>
|
|||
|
|
<div>电话：12111112222</div>
|
|||
|
|
<div>部门：xxxx部</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</Col>
|
|||
|
|
))}
|
|||
|
|
</Row>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
))}
|
|||
|
|
<div className='bottom-other'>
|
|||
|
|
<div>
|
|||
|
|
<span className='bottom-other-text'>更多</span>
|
|||
|
|
<img src={topic_other} className='bottom-other-icon' />
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
export default Home;
|