diff --git a/config/router.config.ts b/config/router.config.ts index b4159e9..d1d87dd 100644 --- a/config/router.config.ts +++ b/config/router.config.ts @@ -3,11 +3,14 @@ import transfer from './router_transfer'; import home from './HomePage/router_home'; import juryRoom from './JuryRoom/router_menuJury.config'; import approvalForm from './router_approval_form'; +import partyMemberTopic from './router_partyMemberTopic'; export default [ //========================================================================登陆 ...transfer,//跳转、登陆 //审批单 ...approvalForm, + //党员专题 + ...partyMemberTopic, { path: '/userformal', // component: '../layouts/UserLayout', diff --git a/config/router_partyMemberTopic.ts b/config/router_partyMemberTopic.ts new file mode 100644 index 0000000..7f3afc9 --- /dev/null +++ b/config/router_partyMemberTopic.ts @@ -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', + }, +]; \ No newline at end of file diff --git a/src/assets/topic/topic_activity_gradient.jpg b/src/assets/topic/topic_activity_gradient.jpg new file mode 100644 index 0000000..f01c55b Binary files /dev/null and b/src/assets/topic/topic_activity_gradient.jpg differ diff --git a/src/assets/topic/topic_activity_logo.png b/src/assets/topic/topic_activity_logo.png new file mode 100644 index 0000000..4a82fbf Binary files /dev/null and b/src/assets/topic/topic_activity_logo.png differ diff --git a/src/assets/topic/topic_banner1.jpg b/src/assets/topic/topic_banner1.jpg new file mode 100644 index 0000000..fd0daad Binary files /dev/null and b/src/assets/topic/topic_banner1.jpg differ diff --git a/src/assets/topic/topic_bottom_button.png b/src/assets/topic/topic_bottom_button.png new file mode 100644 index 0000000..0dcdcfc Binary files /dev/null and b/src/assets/topic/topic_bottom_button.png differ diff --git a/src/assets/topic/topic_bottom_card_picture.png b/src/assets/topic/topic_bottom_card_picture.png new file mode 100644 index 0000000..1def271 Binary files /dev/null and b/src/assets/topic/topic_bottom_card_picture.png differ diff --git a/src/assets/topic/topic_commodity.png b/src/assets/topic/topic_commodity.png new file mode 100644 index 0000000..8b671ed Binary files /dev/null and b/src/assets/topic/topic_commodity.png differ diff --git a/src/assets/topic/topic_example1.jpg b/src/assets/topic/topic_example1.jpg new file mode 100644 index 0000000..e8e9508 Binary files /dev/null and b/src/assets/topic/topic_example1.jpg differ diff --git a/src/assets/topic/topic_example2.jpg b/src/assets/topic/topic_example2.jpg new file mode 100644 index 0000000..85d67db Binary files /dev/null and b/src/assets/topic/topic_example2.jpg differ diff --git a/src/assets/topic/topic_example3.jpg b/src/assets/topic/topic_example3.jpg new file mode 100644 index 0000000..6f9f06e Binary files /dev/null and b/src/assets/topic/topic_example3.jpg differ diff --git a/src/assets/topic/topic_example4.jpg b/src/assets/topic/topic_example4.jpg new file mode 100644 index 0000000..3345b6e Binary files /dev/null and b/src/assets/topic/topic_example4.jpg differ diff --git a/src/assets/topic/topic_example5.jpg b/src/assets/topic/topic_example5.jpg new file mode 100644 index 0000000..fac92f5 Binary files /dev/null and b/src/assets/topic/topic_example5.jpg differ diff --git a/src/assets/topic/topic_example6.jpg b/src/assets/topic/topic_example6.jpg new file mode 100644 index 0000000..117bc2b Binary files /dev/null and b/src/assets/topic/topic_example6.jpg differ diff --git a/src/assets/topic/topic_graceful_textbg.png b/src/assets/topic/topic_graceful_textbg.png new file mode 100644 index 0000000..207df99 Binary files /dev/null and b/src/assets/topic/topic_graceful_textbg.png differ diff --git a/src/assets/topic/topic_header.jpg b/src/assets/topic/topic_header.jpg new file mode 100644 index 0000000..f4036cd Binary files /dev/null and b/src/assets/topic/topic_header.jpg differ diff --git a/src/assets/topic/topic_other.png b/src/assets/topic/topic_other.png new file mode 100644 index 0000000..35359e0 Binary files /dev/null and b/src/assets/topic/topic_other.png differ diff --git a/src/assets/topic/topic_partybranch.png b/src/assets/topic/topic_partybranch.png new file mode 100644 index 0000000..6845b36 Binary files /dev/null and b/src/assets/topic/topic_partybranch.png differ diff --git a/src/assets/topic/topic_partymember.png b/src/assets/topic/topic_partymember.png new file mode 100644 index 0000000..6ce187c Binary files /dev/null and b/src/assets/topic/topic_partymember.png differ diff --git a/src/assets/topic/topic_project_picture.jpg b/src/assets/topic/topic_project_picture.jpg new file mode 100644 index 0000000..ffa2249 Binary files /dev/null and b/src/assets/topic/topic_project_picture.jpg differ diff --git a/src/assets/topic/topic_protocol.png b/src/assets/topic/topic_protocol.png new file mode 100644 index 0000000..ca08fcd Binary files /dev/null and b/src/assets/topic/topic_protocol.png differ diff --git a/src/assets/topic/topic_red_flag.png b/src/assets/topic/topic_red_flag.png new file mode 100644 index 0000000..36aa4a4 Binary files /dev/null and b/src/assets/topic/topic_red_flag.png differ diff --git a/src/assets/topic/topic_right_material.png b/src/assets/topic/topic_right_material.png new file mode 100644 index 0000000..307132a Binary files /dev/null and b/src/assets/topic/topic_right_material.png differ diff --git a/src/assets/topic/topic_totalamount.png b/src/assets/topic/topic_totalamount.png new file mode 100644 index 0000000..cfccc0e Binary files /dev/null and b/src/assets/topic/topic_totalamount.png differ diff --git a/src/assets/topic/topic_totalnumber.png b/src/assets/topic/topic_totalnumber.png new file mode 100644 index 0000000..93bc7b1 Binary files /dev/null and b/src/assets/topic/topic_totalnumber.png differ diff --git a/src/pages/PartyMemberTopic/Home/index.less b/src/pages/PartyMemberTopic/Home/index.less new file mode 100644 index 0000000..dfb0aff --- /dev/null +++ b/src/pages/PartyMemberTopic/Home/index.less @@ -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; + } + } + } + } + + +} \ No newline at end of file diff --git a/src/pages/PartyMemberTopic/Home/index.tsx b/src/pages/PartyMemberTopic/Home/index.tsx new file mode 100644 index 0000000..14dff50 --- /dev/null +++ b/src/pages/PartyMemberTopic/Home/index.tsx @@ -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 ( + <> +
+
+ {props.title} + +
+
+ 更多 + +
+
+ + + ) +} + +const RightDisplayTitle = (props: any) => { + return ( +
+ {props.title} +
+ ) +} + +const RightDisplayContent = (props: any) => { + return ( +
+ +
+
+ {right_data[props.type].name} + {right_data[props.type].type != null && + 同比 + {right_data[props.type].type == 1 ? ( + {right_data[props.type].percentage}% ↑ + ) : ( + {right_data[props.type].percentage}% ↓ + )} + } +
+
+ {right_data[props.type].number} + {right_data[props.type].unit} +
+
+
+ ) +} + +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 ( +
+ ) +} + +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 ( +
+
+
+ +
+
+
+ +
+ +
+
+

2

+
+
+

3

+
+
+

4

+
+ +
+ +
+
+
+ +
+ + {example_list.map((item, index) => ( + +
+
+ {item.text} +
+
+ + ))} + +
+
+
+ +
+ +
+ ( + +
+ {item.title} + {item.time} +
+ + )} + > + +
+
+
+
+
+
+
+ +
+
+ + + +
+ +
+ + + + + +
+ + {right_graph_data.map(item => ( +
+
+ {item.name} +
+
+ {item.type == 1 && `${item.sub}：${item.number}${item.unit}`} +
+
+ +
+
+ ))} +
+
+
+ + {length.map(item => ( +
+
{item}
+
+ + {card_length.map(item => ( + +
+
+
+ 张三 + (IP物资类) +
+ +
+
+
邮箱：1214567@chinaunicom.cn
+
电话：12111112222
+
部门：xxxx部
+
+
+ + ))} + +
+
+ ))} +
+
+ 更多 + +
+
+
+
+
+ ); +}; + +export default Home; diff --git a/src/pages/PartyMemberTopic/Home/service.ts b/src/pages/PartyMemberTopic/Home/service.ts new file mode 100644 index 0000000..e69de29