6.26 首页接口联调
This commit is contained in:
jl-zhoujl2
Binary file not shown.
|
Before Width: | Height: | Size: 183 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 39 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 40 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 46 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 36 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 33 KiB |
BIN
src/assets/topic/topic_header_img.png
Normal file
BIN
src/assets/topic/topic_header_img.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
@ -25,20 +25,77 @@
|
||||
margin: 0;
|
||||
|
||||
.left-carousel {
|
||||
margin-bottom: -8px;
|
||||
|
||||
.carousel-content {
|
||||
height: 584px;
|
||||
width: 1139px;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
|
||||
.carousel-textbg {
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
padding: 12px 0px 32px;
|
||||
|
||||
.carousel-text {
|
||||
color: #fff;
|
||||
line-height: 584px;
|
||||
text-align: center;
|
||||
background: #364d79;
|
||||
width: 812px;
|
||||
|
||||
.carousel-text-content {
|
||||
font-weight: bold;
|
||||
font-size: 32px;
|
||||
line-height: 36px;
|
||||
}
|
||||
|
||||
.carousel-text-click {
|
||||
font-size: 14px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.left-carousel .slick-dots-bottom {
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.left-activity {
|
||||
height: 103px;
|
||||
background-image: url("~@/assets/topic/topic_activity_gradient.jpg")
|
||||
background-image: url("~@/assets/topic/topic_activity_gradient.jpg");
|
||||
display: flex;
|
||||
justify-content: left;
|
||||
|
||||
.left-activity-marquee {
|
||||
height: 103px;
|
||||
width: 940px;
|
||||
padding-left: 45px;
|
||||
|
||||
.left-activity-scroll {
|
||||
height: 103px;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
|
||||
.left-activity-scroll-content {
|
||||
font-size: 18px;
|
||||
color: #fff;
|
||||
margin-right: 20px;
|
||||
|
||||
.left-activity-scroll-end {
|
||||
margin-top: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.left-activity-scroll-content .left-activity-scroll-name {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.left-card {
|
||||
@ -362,3 +419,74 @@
|
||||
|
||||
|
||||
}
|
||||
|
||||
.topic-home-modal .ant-modal-content {
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.topic-home-modal .ant-modal-content .ant-modal-header {
|
||||
border-top-left-radius: 8px;
|
||||
border-top-right-radius: 8px;
|
||||
background: #da3232;
|
||||
padding: 0;
|
||||
height: 45px;
|
||||
|
||||
.bottom-modal-header {
|
||||
display: flex;
|
||||
justify-content: left;
|
||||
align-items: center;
|
||||
padding: 0 20px;
|
||||
|
||||
.bottom-modal-headertext {
|
||||
font-size: 20px;
|
||||
font-family: '黑体';
|
||||
color: #fff;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
right: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.topic-home-modal .ant-modal-content .ant-modal-body {
|
||||
border-bottom-left-radius: 8px;
|
||||
border-bottom-right-radius: 8px;
|
||||
background: #eeeeee;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.topic-home-modal .ant-modal-content .ant-modal-body .bottom-modal-body {
|
||||
.radio-group {
|
||||
padding: 0 40px 8px;
|
||||
|
||||
.radio-content {
|
||||
font-size: 17.16px;
|
||||
font-family: '黑体';
|
||||
color: #939393;
|
||||
margin-left: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.bottom-modal-textarea {
|
||||
resize: none;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.bottom-modal-submit {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 8px;
|
||||
|
||||
.submit-text {
|
||||
color: #939393;
|
||||
}
|
||||
|
||||
.submit-button {
|
||||
border-radius: 8px;
|
||||
background: #d44026;
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,17 +1,12 @@
|
||||
import React, { useEffect } from 'react';
|
||||
import React, { useEffect, useRef, useState } from 'react';
|
||||
import './index.less';
|
||||
import { Carousel, Col, Divider, List, Row } from 'antd';
|
||||
import { Button, Carousel, Col, Divider, Input, List, message, Modal, Radio, RadioChangeEvent, Row, Spin } from 'antd';
|
||||
import * as echarts from 'echarts';
|
||||
import Marquee from 'react-fast-marquee';
|
||||
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'
|
||||
@ -21,7 +16,11 @@ 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'
|
||||
import topic_header_img from '@/assets/topic/topic_header_img.png'
|
||||
import { getHomeActivity, getHomeBanner, getHomeContact, getHomeGraceful, getHomeProject, getHomeRight, submitAdvice } from './service';
|
||||
import { getFilelist } from '@/services/download_';
|
||||
import { pictureDisplayPath } from '@/utils/DownloadUtils';
|
||||
import moment from 'moment';
|
||||
|
||||
const LeftCardTop = (props: any) => {
|
||||
return (
|
||||
@ -51,26 +50,28 @@ const RightDisplayTitle = (props: any) => {
|
||||
|
||||
const RightDisplayContent = (props: any) => {
|
||||
return (
|
||||
props.data?.length > 0 ? (
|
||||
<div className='right-display-content'>
|
||||
<img src={right_data[props.type].img} className='right-display-content-img' />
|
||||
<img src={props.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>{props.data[props.index].dataName}</span>
|
||||
{props.data[props.index].dataCompare != 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>
|
||||
{props.data[props.index].dataCompare[0] == '+' ? (
|
||||
<span className='right-display-content-percentage-increase'>{props.data[props.index].dataCompare} ↑</span>
|
||||
) : (
|
||||
<span className='right-display-content-percentage-reduce'>{right_data[props.type].percentage}% ↓</span>
|
||||
<span className='right-display-content-percentage-reduce'>{props.data[props.index].dataCompare} ↓</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>
|
||||
<span className={`right-display-content-number ${props.color}`}>{props.data[props.index].dataValue}</span>
|
||||
<span className='right-display-content-unit'>{props.data[props.index].dataType}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : null
|
||||
)
|
||||
}
|
||||
|
||||
@ -89,10 +90,10 @@ const RightGraphContent = (props: any) => {
|
||||
name: props.name,
|
||||
type: 'pie',
|
||||
radius: '90%',
|
||||
color: ['#5470C6', '#91CC75', '#FAC858', '#EE6666', '#73C0DE', '#3BA272', '#FC8452', '#9A60B4'],
|
||||
color: ['#EE6666', '#FAC858', '#73C0DE', '#91CC75', '#5470C6', '#FC8452', '#9A60B4', '#3BA272'],
|
||||
data: props.data,
|
||||
label: {
|
||||
formatter: props.type == 1 ? '{b}\n\n{c}件 {d}%' : '{b}',
|
||||
formatter: props.type != null ? `{b}\n\n{c}${props.type} {d}%` : '{b}',
|
||||
fontSize: 12,
|
||||
color: '#fff',
|
||||
position: 'inner',
|
||||
@ -114,176 +115,240 @@ const RightGraphContent = (props: any) => {
|
||||
)
|
||||
}
|
||||
|
||||
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 BottomCardContent = (props: any) => {
|
||||
|
||||
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,
|
||||
},
|
||||
return (
|
||||
<Col span={6}>
|
||||
<div className='bottom-card'>
|
||||
<div className='bottom-card-flex'>
|
||||
<div className='bottom-card-title'>
|
||||
<span>{props.data.contactName}</span>
|
||||
<span className='bottom-card-title-type'>({props.data.contactName})</span>
|
||||
</div>
|
||||
<img src={topic_bottom_button} onClick={() => props.onClick()} />
|
||||
</div>
|
||||
<div className='bottom-card-content'>
|
||||
<div>邮箱：{props.data.contactEmail}</div>
|
||||
<div>电话：{props.data.contactMobiphone}</div>
|
||||
<div>部门：{props.data.contactDepartment}</div>
|
||||
</div>
|
||||
</div>
|
||||
</Col>
|
||||
)
|
||||
}
|
||||
|
||||
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 CommentModal = (props: any) => {
|
||||
const { TextArea } = Input;
|
||||
const [modalLoading, setModalLoading] = useState<boolean>(false);
|
||||
const textRef = useRef<any>(null);
|
||||
const radioRef = useRef<any>(null);
|
||||
|
||||
const onRadioChange = (e: RadioChangeEvent) => {
|
||||
radioRef.current = e.target.value;
|
||||
};
|
||||
|
||||
const onTextChange = (e: any) => {
|
||||
textRef.current = e.target.value;
|
||||
};
|
||||
|
||||
const onCancel = () => {
|
||||
props.closeModal();
|
||||
textRef.current = null;
|
||||
radioRef.current = null;
|
||||
}
|
||||
|
||||
const onSubmit = async () => {
|
||||
setModalLoading(true);
|
||||
const params = {
|
||||
contactName: props.data?.contactName,
|
||||
contactId: props.data?.contactId,
|
||||
suggestionType: radioRef.current,
|
||||
suggestionContent: textRef.current,
|
||||
}
|
||||
await submitAdvice(params).then(res => {
|
||||
if (res?.code == 200) {
|
||||
message.success("提交成功");
|
||||
onCancel();
|
||||
}
|
||||
}).finally(() => {
|
||||
setModalLoading(false);
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<Modal
|
||||
className='topic-home-modal'
|
||||
title={
|
||||
<div className='bottom-modal-header'>
|
||||
<img src={topic_header_img} />
|
||||
<div className='bottom-modal-headertext'>
|
||||
<span>我要提意见</span>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
visible={props.visible}
|
||||
onCancel={onCancel}
|
||||
destroyOnClose
|
||||
closable={false}
|
||||
footer={null}
|
||||
centered
|
||||
maskStyle={{ backgroundColor: 'rgba(0, 0, 0, 0.3)' }}
|
||||
width={350}
|
||||
>
|
||||
<Spin spinning={modalLoading}>
|
||||
<div className='bottom-modal-body'>
|
||||
<div className='radio-group'>
|
||||
<Radio.Group onChange={onRadioChange} defaultValue={"1"}>
|
||||
<Radio value="1" className="radio-content">系统优化</Radio>
|
||||
<Radio value="2" className="radio-content">制度优化</Radio>
|
||||
<Radio value="3" className="radio-content">组织优化</Radio>
|
||||
<Radio value="4" className="radio-content">其他</Radio>
|
||||
</Radio.Group>
|
||||
</div>
|
||||
<TextArea
|
||||
rows={9}
|
||||
className='bottom-modal-textarea'
|
||||
maxLength={200}
|
||||
defaultValue={''}
|
||||
onChange={onTextChange}
|
||||
/>
|
||||
<div className='bottom-modal-submit'>
|
||||
<span className='submit-text'>提交给{props.data?.contactDepartment}的{props.data?.contactName}</span>
|
||||
<Button type='primary' className='submit-button' onClick={onSubmit}>
|
||||
提交
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Spin>
|
||||
</Modal>
|
||||
)
|
||||
}
|
||||
|
||||
const Home: React.FC<{}> = () => {
|
||||
//banner data
|
||||
const [bannerList, setBannerList] = useState<any[]>([]);
|
||||
//graceful data
|
||||
const [gracefulList, setGracefulList] = useState<any[]>([]);
|
||||
//activity data
|
||||
const [activityList, setActivityList] = useState<any[]>([]);
|
||||
//project data
|
||||
const [projectList, setProjectList] = useState<any[]>([]);
|
||||
//right data
|
||||
const [rightList, setRightList] = useState<any[]>([]);
|
||||
//right data
|
||||
const [rightGraphList, setRightGraphList] = useState<any[]>([]);
|
||||
//right data
|
||||
const [contactData, setContactData] = useState<Object>({});
|
||||
//bottom advice modalvisible
|
||||
const [adviceVisible, setAdviceVisible] = useState<boolean>(false);
|
||||
//bottom advice modal data
|
||||
const [adviceItemData, setAdviceItemData] = useState<Object>({});
|
||||
|
||||
const getImageUrl = async (data: any[], paramName: string) => {
|
||||
for (const ite of data) {
|
||||
await getFilelist([ite[paramName]]).then(response => {//获取主图
|
||||
if (response?.success && response?.data?.length > 0) {
|
||||
const returnUrl = window.location.origin + pictureDisplayPath + '?filePath=' + response?.data[0].filePath;
|
||||
ite["imageUrl"] = returnUrl;
|
||||
}
|
||||
})
|
||||
}
|
||||
return data;
|
||||
}
|
||||
|
||||
const formatProjectTime = (time: string) => {
|
||||
return moment(time).format('MM-DD HH:mm');
|
||||
}
|
||||
|
||||
const openModal = (item: any) => {
|
||||
setAdviceItemData(item);
|
||||
setAdviceVisible(true);
|
||||
}
|
||||
|
||||
const closeModal = () => {
|
||||
setAdviceVisible(false);
|
||||
setAdviceItemData({});
|
||||
}
|
||||
|
||||
//get banner
|
||||
const getBannerList = () => {
|
||||
getHomeBanner().then(async res => {
|
||||
if (res?.code == 200) {
|
||||
const data = await getImageUrl(res?.data, 'titleImage');
|
||||
setBannerList(data);
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
//get activity
|
||||
const getActivityList = () => {
|
||||
getHomeActivity().then(res => {
|
||||
if (res?.code == 200) {
|
||||
setActivityList(res?.data);
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
//get graceful
|
||||
const getGracefulList = () => {
|
||||
getHomeGraceful().then(async res => {
|
||||
if (res?.code == 200) {
|
||||
let data: any[] = [];
|
||||
if (res?.data.length > 6) {
|
||||
data = await getImageUrl(res?.data.slice(0, 6), 'image');
|
||||
} else {
|
||||
data = await getImageUrl(res?.data, 'image');
|
||||
}
|
||||
setGracefulList(data);
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
//get project
|
||||
const getProjectList = () => {
|
||||
getHomeProject().then(res => {
|
||||
if (res?.code == 200) {
|
||||
let data: any[] = [];
|
||||
if (res?.data.length > 12) {
|
||||
data = res?.data.slice(0, 12);
|
||||
} else {
|
||||
data = res?.data;
|
||||
}
|
||||
setProjectList(data);
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
//get right
|
||||
const getRightList = () => {
|
||||
getHomeRight().then(res => {
|
||||
if (res?.code == 200) {
|
||||
if (res?.data.length > 0) {
|
||||
setRightList(res?.data.slice(0, 6));
|
||||
setRightGraphList(res?.data.slice(6, 9));
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
//get contact
|
||||
const getContactList = () => {
|
||||
getHomeContact().then(res => {
|
||||
if (res?.code == 200) {
|
||||
setContactData(res?.data);
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
getBannerList();
|
||||
getGracefulList();
|
||||
getActivityList();
|
||||
getProjectList();
|
||||
getRightList();
|
||||
getContactList();
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<div className="topic-global">
|
||||
<div className="topic-background">
|
||||
@ -292,33 +357,53 @@ const Home: React.FC<{}> = () => {
|
||||
</div>
|
||||
<div className="top-global">
|
||||
<div className='left-global'>
|
||||
<Carousel className='left-carousel'>
|
||||
<div>
|
||||
<img src={topic_banner1} className='carousel-content' />
|
||||
<Carousel className='left-carousel' autoplay>
|
||||
{bannerList?.length > 0 && bannerList.map(item => (
|
||||
<div key={item.id}>
|
||||
<div className='carousel-content' style={{ backgroundImage: `url(${item.imageUrl})` }}>
|
||||
<div className='carousel-textbg'>
|
||||
<div className='carousel-text'>
|
||||
<span className='carousel-text-content'>{item.imageWord}</span>
|
||||
<span className='carousel-text-click'>⋙点击查看详情</span>
|
||||
</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 className='left-activity-marquee'>
|
||||
<Marquee pauseOnHover gradient={false}>
|
||||
<div className='left-activity-scroll'>
|
||||
{activityList.length > 0 && activityList.map((item, index) => (
|
||||
index % 2 == 0 && <div className='left-activity-scroll-content' key={index}>
|
||||
<div>
|
||||
<span className='left-activity-scroll-name'>{item.name}：</span>
|
||||
<span>{item.text}</span>
|
||||
</div>
|
||||
{index != activityList.length && (
|
||||
<div className='left-activity-scroll-end'>
|
||||
<span className='left-activity-scroll-name'>{activityList[index + 1].name}：</span>
|
||||
<span>{activityList[index + 1].text}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Marquee>
|
||||
</div>
|
||||
</div>
|
||||
<div className='left-card'>
|
||||
<div className='left-graceful'>
|
||||
<LeftCardTop title="活动风采" />
|
||||
<div>
|
||||
<Row gutter={[20, 31]}>
|
||||
{example_list.map((item, index) => (
|
||||
{gracefulList?.length > 0 && gracefulList.map((item, index) => (
|
||||
<Col span={8} key={index}>
|
||||
<div className='left-graceful-bg' style={{ backgroundImage: `url(${item.img})` }}>
|
||||
<div className='left-graceful-bg' style={{ backgroundImage: `url(${item.imageUrl})` }}>
|
||||
<div className='left-graceful-textbg'>
|
||||
<span className='left-graceful-text'>{item.text}</span>
|
||||
<span className='left-graceful-text'>{item.imageWord}</span>
|
||||
</div>
|
||||
</div>
|
||||
</Col>
|
||||
@ -334,12 +419,12 @@ const Home: React.FC<{}> = () => {
|
||||
<List
|
||||
size='small'
|
||||
split={false}
|
||||
dataSource={listData}
|
||||
dataSource={projectList}
|
||||
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>
|
||||
<span className='left-project-content-item-time'>{formatProjectTime(item.createTime)}</span>
|
||||
</div>
|
||||
</List.Item>
|
||||
)}
|
||||
@ -356,28 +441,28 @@ const Home: React.FC<{}> = () => {
|
||||
</div>
|
||||
<div className='right-display'>
|
||||
<RightDisplayTitle title="党员及支部数量情况" />
|
||||
<RightDisplayContent type="partymember" color="number-blue" />
|
||||
<RightDisplayContent type="partybranch" color="number-blue" />
|
||||
<RightDisplayContent index={0} data={rightList} img={topic_partymember} color="number-blue" />
|
||||
<RightDisplayContent index={1} data={rightList} img={topic_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" />
|
||||
<RightDisplayContent index={2} data={rightList} img={topic_totalamount} color="number-orange" />
|
||||
<RightDisplayContent index={3} data={rightList} img={topic_totalnumber} color="number-orange" />
|
||||
<RightDisplayContent index={4} data={rightList} img={topic_commodity} color="number-orange" />
|
||||
<RightDisplayContent index={5} data={rightList} img={topic_protocol} color="number-orange" />
|
||||
</div>
|
||||
<Divider className='right-divider' />
|
||||
{right_graph_data.map(item => (
|
||||
<div className='right-graph' key={item.name}>
|
||||
{rightGraphList.length > 0 && rightGraphList.map(item => (
|
||||
<div className='right-graph' key={item.dataClass}>
|
||||
<div className='right-graph-title'>
|
||||
{item.name}
|
||||
{item.dataClass}
|
||||
</div>
|
||||
<div className='right-graph-subtitle'>
|
||||
{item.type == 1 && `${item.sub}：${item.number}${item.unit}`}
|
||||
{item.dataName != null && `${item.dataName}：${item.dataValue}${item.dataType}`}
|
||||
</div>
|
||||
<div className='right-graph-content'>
|
||||
<RightGraphContent name={item.name} type={item.type} data={item.data} />
|
||||
<RightGraphContent name={item.dataClass} type={item.dataType} data={item.data} />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
@ -385,28 +470,13 @@ const Home: React.FC<{}> = () => {
|
||||
</div>
|
||||
<div className='bottom-global'>
|
||||
<LeftCardTop title="活动联系人" />
|
||||
{length.map(item => (
|
||||
<div key={item}>
|
||||
<div className='bottom-title'>{item}</div>
|
||||
{Object.entries(contactData).map(([name, value], index) => (
|
||||
<div key={index}>
|
||||
<div className='bottom-title'>{name}</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>
|
||||
{value.map((item: any) => (
|
||||
<BottomCardContent data={item} onClick={() => openModal(item)} />
|
||||
))}
|
||||
</Row>
|
||||
</div>
|
||||
@ -419,6 +489,7 @@ const Home: React.FC<{}> = () => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<CommentModal visible={adviceVisible} closeModal={() => closeModal()} data={adviceItemData} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -0,0 +1,39 @@
|
||||
import request from '@/utils/request';
|
||||
|
||||
//轮播图
|
||||
export async function getHomeBanner() {
|
||||
return request('/api/biz-service-ebtp-extend/v1/eventpartybranch/eventStyle/banner');
|
||||
}
|
||||
|
||||
//活动风采列表
|
||||
export async function getHomeGraceful() {
|
||||
return request('/api/biz-service-ebtp-extend/v1/eventpartybranch/eventStyle/list');
|
||||
}
|
||||
|
||||
//活动宣言
|
||||
export async function getHomeActivity() {
|
||||
return request('/api/biz-service-ebtp-extend/v1/eventpartybranch/eventDeclaration/list');
|
||||
}
|
||||
|
||||
//攻坚克难项目
|
||||
export async function getHomeProject() {
|
||||
return request('/api/biz-service-ebtp-extend/v1/eventpartybranch/eventSubject/list');
|
||||
}
|
||||
|
||||
//攻坚克难项目
|
||||
export async function getHomeRight() {
|
||||
return request('/api/biz-service-ebtp-extend/v1/eventpartybranch/data/list');
|
||||
}
|
||||
|
||||
//活动联系人
|
||||
export async function getHomeContact() {
|
||||
return request('/api/biz-service-ebtp-extend/v1/eventpartybranch/eventContact/group');
|
||||
}
|
||||
|
||||
//提意见 提交
|
||||
export async function submitAdvice(data: any) {
|
||||
return request('/api/biz-service-ebtp-extend/v1/eventpartybranch/submitSuggestion', {
|
||||
method: 'POST',
|
||||
data: { ...data }
|
||||
});
|
||||
}
|
||||
Reference in New Issue
Block a user