6.23 党员专题首页

This commit is contained in:
jl-zhoujl2
2022-06-23 08:42:54 +08:00
parent 92a63809d0
commit 50b1821242
28 changed files with 808 additions and 0 deletions

View File

@ -3,11 +3,14 @@ import transfer from './router_transfer';
import home from './HomePage/router_home'; import home from './HomePage/router_home';
import juryRoom from './JuryRoom/router_menuJury.config'; import juryRoom from './JuryRoom/router_menuJury.config';
import approvalForm from './router_approval_form'; import approvalForm from './router_approval_form';
import partyMemberTopic from './router_partyMemberTopic';
export default [ export default [
//========================================================================登陆 //========================================================================登陆
...transfer,//跳转、登陆 ...transfer,//跳转、登陆
//审批单 //审批单
...approvalForm, ...approvalForm,
//党员专题
...partyMemberTopic,
{ {
path: '/userformal', path: '/userformal',
// component: '../layouts/UserLayout', // component: '../layouts/UserLayout',

View File

@ -0,0 +1,14 @@
export default [
{
// name: 'workbench',
// icon: 'DesktopOutlined',
// path:'/workbench',
// routes: [
// { name: 'commonFiles', path: '/workbench/files',},
// { name: 'commonFilesManage', path: '/workbench/filesManage',},
// ]
name: 'partyMemberTopic',
path: '/partyMemberTopic/home',
component: './PartyMemberTopic/Home',
},
];

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 183 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 35 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 39 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 32 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 40 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 46 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 36 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 33 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 63 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 35 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 38 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.8 KiB

View File

@ -0,0 +1,364 @@
@import '~antd/es/style/themes/default.less';
.topic-global {
width: 100%;
display: flex;
justify-content: center;
background-color: #fff;
.topic-background {
width: 1460px;
background-color: #e9e9e9;
.top-picture {
height: 132px;
width: 100%;
}
.top-global {
display: flex;
justify-content: space-between;
.left-global {
width: 1139px;
padding: 0;
margin: 0;
.left-carousel {
margin-bottom: -8px;
.carousel-content {
height: 584px;
color: #fff;
line-height: 584px;
text-align: center;
background: #364d79;
}
}
.left-activity {
height: 103px;
background-image: url("~@/assets/topic/topic_activity_gradient.jpg")
}
.left-card {
margin: 20px 0px 20px 12px;
.left-card-top {
display: flex;
justify-content: space-between;
align-items: center;
.left-card-title {
font-weight: bold;
font-family: '黑体';
font-size: 28px;
}
.left-card-flag {
vertical-align: text-bottom;
position: relative;
top: 3px;
margin-left: 10px;
}
.left-card-other {
font-family: '黑体';
font-size: 18px;
color: #a2a2a2;
}
.left-card-otherimg {
vertical-align: text-bottom;
margin-left: 5px;
}
}
.left-card-divider {
color: #c9c9c9;
margin: 8px 0px 30px;
}
.left-graceful {
background: #fff;
padding: 24px 24px 50px;
.left-graceful-bg {
height: 198px;
width: 338px;
background-size: 100%;
background-repeat: no-repeat;
display: flex;
justify-content: center;
align-items: flex-end;
padding-bottom: 10px;
.left-graceful-textbg {
height: 36px;
width: 304px;
background-image: url("~@/assets/topic/topic_graceful_textbg.png");
display: flex;
justify-content: center;
align-items: center;
.left-graceful-text {
color: #fff;
font-size: 16.64px;
font-weight: bold;
}
}
}
}
.left-project {
margin-top: 20px;
background: #fff;
padding: 24px 24px 40px;
.left-project-content {
display: flex;
justify-content: left;
.left-project-content-list {
margin-left: 70px;
.left-project-content-item {
font-size: 21px;
font-family: '黑体';
line-height: 36px;
.left-project-content-item-title {
color: #535353
}
.left-project-content-item-time {
color: #a2a2a2;
margin-left: 8px;
}
}
}
}
.left-project-content .ant-list-sm .ant-list-item {
padding: 0px 16px;
}
}
}
}
.right-global {
background: #fff;
width: 100%;
margin: 0px 12px 20px;
display: flex;
flex-direction: column;
align-items: center;
padding: 14px;
.right-material {
width: 100%;
}
.right-display {
width: 100%;
padding: 18px 16px;
.right-display-title {
font-size: 14px;
color: #474747;
letter-spacing: 1px;
text-align: center;
}
.right-display-content {
display: flex;
justify-content: start;
margin-top: 30px;
.right-display-content-img {
height: 56px;
width: 56px;
}
.right-display-content-right {
margin-left: 10px;
.right-display-content-title {
color: #9e9e9e;
font-size: 12px;
letter-spacing: 1px;
.right-display-content-percentage {
margin-left: 24px;
.right-display-content-percentage-increase {
color: #28e099;
}
.right-display-content-percentage-reduce {
color: #eb5527;
}
}
}
.right-display-content-content {
margin-top: 4px;
.right-display-content-number {
font-size: 32.15px;
font-family: 'Consolas';
line-height: 32.15px;
}
.number-blue {
color: #21b8ce;
}
.number-orange {
color: #eb5527;
}
.right-display-content-unit {
font-size: 12px;
margin-left: 5px;
}
}
}
}
}
.right-divider {
margin: 12px 0px 0px;
color: #c9c9c9;
}
.right-graph {
padding-top: 26px;
.right-graph-title {
font-size: 17px;
text-align: center;
}
.right-graph-subtitle {
color: #9e9e9e;
font-size: 12px;
text-align: center;
margin-top: 4px;
}
.right-graph-content {
height: 250px;
width: 250px;
}
}
}
}
.bottom-global {
margin: 0px 12px 84px;
background: #fff;
padding: 24px 24px 28px;
.left-card-top {
display: flex;
justify-content: space-between;
align-items: center;
.left-card-title {
font-weight: bold;
font-family: '黑体';
font-size: 28px;
}
.left-card-flag {
vertical-align: text-bottom;
position: relative;
top: 3px;
margin-left: 10px;
}
.left-card-other {
font-family: '黑体';
font-size: 18px;
color: #a2a2a2;
}
.left-card-otherimg {
vertical-align: text-bottom;
margin-left: 5px;
}
}
.left-card-divider {
color: #c9c9c9;
margin: 8px 0px 24px;
}
.bottom-content {
margin-bottom: 18px;
.bottom-card {
background-image: url("~@/assets/topic/topic_bottom_card_picture.png");
height: 157px;
width: 331px;
padding: 16px;
margin-top: 18px;
.bottom-card-flex {
display: flex;
justify-content: space-between;
.bottom-card-title {
font-size: 21px;
font-weight: bold;
.bottom-card-title-type {
color: #df3b37;
}
}
}
.bottom-card-content {
font-size: 16px;
color: #6f6f6f;
margin-top: 20px;
}
}
}
.bottom-title {
font-weight: bold;
font-size: 24px;
font-family: '黑体';
color: #b8b8b8;
}
.bottom-other {
display: flex;
justify-content: center;
.bottom-other-text {
font-family: '黑体';
font-size: 18px;
color: #a2a2a2;
}
.bottom-other-icon {
transform: rotate(90deg);
vertical-align: text-bottom;
margin-left: 5px;
}
}
}
}
}

View File

@ -0,0 +1,427 @@
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;