liuchang/fe_service_ebtp_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
66fbfb926904cd6ddf0dee1afdff196fd010e655
fe_service_ebtp_frontend/src/pages/PartyMemberTopic/Home/index.tsx

498 lines
21 KiB
TypeScript
Raw Normal View History

6.26 首页接口联调
2022-06-26 10:42:10 +08:00
import React, { useEffect, useRef, useState } from 'react';
6.23 党员专题首页
2022-06-23 08:42:54 +08:00
import './index.less';
6.26 首页接口联调
2022-06-26 10:42:10 +08:00
import { Button, Carousel, Col, Divider, Input, List, message, Modal, Radio, RadioChangeEvent, Row, Spin } from 'antd';
6.23 党员专题首页
2022-06-23 08:42:54 +08:00
import * as echarts from 'echarts';
6.26 首页接口联调
2022-06-26 10:42:10 +08:00
import Marquee from 'react-fast-marquee';
6.23 党员专题首页
2022-06-23 08:42:54 +08:00
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_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'
6.26 首页接口联调
2022-06-26 10:42:10 +08:00
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';
6.23 党员专题首页
2022-06-23 08:42:54 +08:00
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 (
6.26 首页接口联调
2022-06-26 10:42:10 +08:00
props.data?.length > 0 ? (
<div className='right-display-content'>
<img src={props.img} className='right-display-content-img' />
<div className='right-display-content-right'>
<div className='right-display-content-title'>
<span>{props.data[props.index].dataName}</span>
{props.data[props.index].dataCompare != null && <span className='right-display-content-percentage'>
<span>同比</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'>{props.data[props.index].dataCompare} ↓</span>
)}
</span>}
</div>
<div className='right-display-content-content'>
<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>
6.23 党员专题首页
2022-06-23 08:42:54 +08:00
</div>
</div>
6.26 首页接口联调
2022-06-26 10:42:10 +08:00
) : null
6.23 党员专题首页
2022-06-23 08:42:54 +08:00
)
}
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%',
6.26 首页接口联调
2022-06-26 10:42:10 +08:00
color: ['#EE6666', '#FAC858', '#73C0DE', '#91CC75', '#5470C6', '#FC8452', '#9A60B4', '#3BA272'],
6.23 党员专题首页
2022-06-23 08:42:54 +08:00
data: props.data,
label: {
6.26 首页接口联调
2022-06-26 10:42:10 +08:00
formatter: props.type != null ? `{b}\n\n{c}${props.type} {d}%` : '{b}',
6.23 党员专题首页
2022-06-23 08:42:54 +08:00
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>
)
}
6.26 首页接口联调
2022-06-26 10:42:10 +08:00
const BottomCardContent = (props: any) => {
6.23 党员专题首页
2022-06-23 08:42:54 +08:00
6.26 首页接口联调
2022-06-26 10:42:10 +08:00
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>
)
}
6.23 党员专题首页
2022-06-23 08:42:54 +08:00
6.26 首页接口联调
2022-06-26 10:42:10 +08:00
const CommentModal = (props: any) => {
const { TextArea } = Input;
const [modalLoading, setModalLoading] = useState<boolean>(false);
const textRef = useRef<any>(null);
const radioRef = useRef<any>(null);
6.23 党员专题首页
2022-06-23 08:42:54 +08:00
6.26 首页接口联调
2022-06-26 10:42:10 +08:00
const onRadioChange = (e: RadioChangeEvent) => {
radioRef.current = e.target.value;
};
6.23 党员专题首页
2022-06-23 08:42:54 +08:00
6.26 首页接口联调
2022-06-26 10:42:10 +08:00
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>
)
}
6.23 党员专题首页
2022-06-23 08:42:54 +08:00
const Home: React.FC<{}> = () => {
6.26 首页接口联调
2022-06-26 10:42:10 +08:00
//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();
}, [])
6.23 党员专题首页
2022-06-23 08:42:54 +08:00
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'>
6.26 首页接口联调
2022-06-26 10:42:10 +08:00
<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>
</div>
</div>
))}
6.23 党员专题首页
2022-06-23 08:42:54 +08:00
</Carousel>
<div className='left-activity'>
<img src={topic_activity_logo} />
6.26 首页接口联调
2022-06-26 10:42:10 +08:00
<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>
6.23 党员专题首页
2022-06-23 08:42:54 +08:00
</div>
<div className='left-card'>
<div className='left-graceful'>
<LeftCardTop title="活动风采" />
<div>
<Row gutter={[20, 31]}>
6.26 首页接口联调
2022-06-26 10:42:10 +08:00
{gracefulList?.length > 0 && gracefulList.map((item, index) => (
6.23 党员专题首页
2022-06-23 08:42:54 +08:00
<Col span={8} key={index}>
6.26 首页接口联调
2022-06-26 10:42:10 +08:00
<div className='left-graceful-bg' style={{ backgroundImage: `url(${item.imageUrl})` }}>
6.23 党员专题首页
2022-06-23 08:42:54 +08:00
<div className='left-graceful-textbg'>
6.26 首页接口联调
2022-06-26 10:42:10 +08:00
<span className='left-graceful-text'>{item.imageWord}</span>
6.23 党员专题首页
2022-06-23 08:42:54 +08:00
</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}
6.26 首页接口联调
2022-06-26 10:42:10 +08:00
dataSource={projectList}
6.23 党员专题首页
2022-06-23 08:42:54 +08:00
renderItem={item => (
<List.Item>
<div className='left-project-content-item'>
<span className='left-project-content-item-title'>{item.title}</span>
6.26 首页接口联调
2022-06-26 10:42:10 +08:00
<span className='left-project-content-item-time'>{formatProjectTime(item.createTime)}</span>
6.23 党员专题首页
2022-06-23 08:42:54 +08:00
</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="党员及支部数量情况" />
6.26 首页接口联调
2022-06-26 10:42:10 +08:00
<RightDisplayContent index={0} data={rightList} img={topic_partymember} color="number-blue" />
<RightDisplayContent index={1} data={rightList} img={topic_partybranch} color="number-blue" />
6.23 党员专题首页
2022-06-23 08:42:54 +08:00
</div>
<Divider className='right-divider' />
<div className='right-display'>
<RightDisplayTitle title="2022年订单交易情况" />
6.26 首页接口联调
2022-06-26 10:42:10 +08:00
<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" />
6.23 党员专题首页
2022-06-23 08:42:54 +08:00
</div>
<Divider className='right-divider' />
6.26 首页接口联调
2022-06-26 10:42:10 +08:00
{rightGraphList.length > 0 && rightGraphList.map(item => (
<div className='right-graph' key={item.dataClass}>
6.23 党员专题首页
2022-06-23 08:42:54 +08:00
<div className='right-graph-title'>
6.26 首页接口联调
2022-06-26 10:42:10 +08:00
{item.dataClass}
6.23 党员专题首页
2022-06-23 08:42:54 +08:00
</div>
<div className='right-graph-subtitle'>
6.26 首页接口联调
2022-06-26 10:42:10 +08:00
{item.dataName != null && `${item.dataName}：${item.dataValue}${item.dataType}`}
6.23 党员专题首页
2022-06-23 08:42:54 +08:00
</div>
<div className='right-graph-content'>
6.26 首页接口联调
2022-06-26 10:42:10 +08:00
<RightGraphContent name={item.dataClass} type={item.dataType} data={item.data} />
6.23 党员专题首页
2022-06-23 08:42:54 +08:00
</div>
</div>
))}
</div>
</div>
<div className='bottom-global'>
<LeftCardTop title="活动联系人" />
6.26 首页接口联调
2022-06-26 10:42:10 +08:00
{Object.entries(contactData).map(([name, value], index) => (
<div key={index}>
<div className='bottom-title'>{name}</div>
6.23 党员专题首页
2022-06-23 08:42:54 +08:00
<div className='bottom-content'>
<Row gutter={[20, 20]}>
6.26 首页接口联调
2022-06-26 10:42:10 +08:00
{value.map((item: any) => (
<BottomCardContent data={item} onClick={() => openModal(item)} />
6.23 党员专题首页
2022-06-23 08:42:54 +08:00
))}
</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>
6.26 首页接口联调
2022-06-26 10:42:10 +08:00
<CommentModal visible={adviceVisible} closeModal={() => closeModal()} data={adviceItemData} />
6.23 党员专题首页
2022-06-23 08:42:54 +08:00
</div>
</div>
);
};
6.26 首页接口联调
2022-06-26 10:42:10 +08:00
export default Home;
Reference in New Issue Copy Permalink