534 lines
24 KiB
TypeScript
534 lines
24 KiB
TypeScript
import React, { useEffect, useRef, useState } from 'react';
|
||
import './index.less';
|
||
import { Button, Carousel, Col, Divider, Input, List, message, Modal, Radio, RadioChangeEvent, Row, Spin, Tooltip } 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_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_header_img from '@/assets/topic/topic_header_img.png'
|
||
import topic_banner_default from '@/assets/topic/topic_banner_default.jpg'
|
||
import topic_activity_default from '@/assets/topic/topic_activity_default.jpg'
|
||
import { getHomeActivity, getHomeBanner, getHomeContact, getHomeGraceful, getHomeProject, getHomeRight, submitAdvice } from './service';
|
||
import { formatTime, getImageUrl, isEmpty, isNotEmpty } from '../utils';
|
||
|
||
//卡片头
|
||
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>
|
||
{props.url && <div onClick={() => window.open(props.url)}>
|
||
<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) => {
|
||
const displayContentClick = () => {
|
||
if (props.index == 0 || props.index == 1) {//党员数量 //党支部数量
|
||
window.open("/partyMemberTopic/partyBranch");
|
||
}
|
||
}
|
||
return (
|
||
props.data?.length > 0 ? (
|
||
<div className={props.index == 0 || props.index == 1 ? 'right-display-content right-display-content-pointer' : 'right-display-content'} onClick={() => displayContentClick()}>
|
||
<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>
|
||
</div>
|
||
</div>
|
||
) : null
|
||
)
|
||
}
|
||
//右侧图表内容
|
||
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: ['#EE6666', '#FAC858', '#73C0DE', '#91CC75', '#5470C6', '#FC8452', '#9A60B4', '#3BA272'],
|
||
data: props.data,
|
||
label: {
|
||
formatter: props.type != null ? `{b}\n\n{c}${props.type} {d}%` : '{b}',
|
||
fontSize: '90%',
|
||
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 BottomCardContent = (props: any) => {
|
||
|
||
return (
|
||
<Col span={6}>
|
||
<div className='bottom-card'>
|
||
<div className='bottom-card-flex'>
|
||
<div className='bottom-card-title'>
|
||
<span>{props.data.contactName}</span>
|
||
</div>
|
||
<img src={topic_bottom_button} onClick={() => props.onClick()} />
|
||
</div>
|
||
<div className='bottom-card-remark'>
|
||
<Tooltip placement="topLeft" title={props.data.remark}>
|
||
<span className='bottom-card-remark-text'>{props.data.remark}</span>
|
||
</Tooltip>
|
||
</div>
|
||
<div className='bottom-card-content'>
|
||
<div>邮箱：{props.data.contactEmail}</div>
|
||
<div>电话：{props.data.contactMobiphone}</div>
|
||
<div>部门：{props.data.contactDepartment}</div>
|
||
</div>
|
||
</div>
|
||
</Col>
|
||
)
|
||
}
|
||
//活动联系人-我要提意见Modal
|
||
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 () => {
|
||
if (isEmpty(textRef.current)) {
|
||
message.info("请先输入意见内容");
|
||
return;
|
||
}
|
||
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={450}
|
||
>
|
||
<Spin spinning={modalLoading}>
|
||
<div className='bottom-modal-body'>
|
||
<div className='radio-group'>
|
||
<Radio.Group onChange={onRadioChange} defaultValue={"1"}>
|
||
<Radio value="网络运营" className="radio-content">网络运营</Radio>
|
||
<Radio value="IT" className="radio-content">IT</Radio>
|
||
<Radio value="市场" className="radio-content">市场</Radio>
|
||
<Radio value="综合行政" className="radio-content">综合行政</Radio>
|
||
<Radio value="其他" className="radio-content">其他</Radio>
|
||
</Radio.Group>
|
||
</div>
|
||
<TextArea
|
||
rows={11}
|
||
className='bottom-modal-textarea'
|
||
maxLength={50}
|
||
defaultValue={''}
|
||
onChange={onTextChange}
|
||
placeholder="在这里输入我要提出的意见（最多输入50字）"
|
||
/>
|
||
<div className='bottom-modal-submit'>
|
||
<span className='submit-text'>提交给{props.data?.contactDepartment}的{props.data?.contactName}</span>
|
||
<div>
|
||
<Button className='submit-cancelbutton' onClick={onCancel}>
|
||
取消
|
||
</Button>
|
||
<Button type='primary' className='submit-button' onClick={onSubmit}>
|
||
提交
|
||
</Button>
|
||
</div>
|
||
</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 local data
|
||
const [contactData, setContactData] = useState<any[]>([]);
|
||
//right total data
|
||
const totalContactData = useRef<any>(null);
|
||
//bottom advice modalvisible
|
||
const [adviceVisible, setAdviceVisible] = useState<boolean>(false);
|
||
//bottom advice modal data
|
||
const [adviceItemData, setAdviceItemData] = useState<Object>({});
|
||
|
||
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', topic_banner_default);
|
||
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', topic_activity_default);
|
||
} else {
|
||
data = await getImageUrl(res?.data, 'image', topic_activity_default);
|
||
}
|
||
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) {
|
||
const data = Object.entries(res?.data);
|
||
if (data.length > 3) {
|
||
setContactData(data.slice(0, 3));
|
||
totalContactData.current = data;
|
||
} else {
|
||
setContactData(data);
|
||
}
|
||
}
|
||
})
|
||
}
|
||
|
||
//to hard project
|
||
const hardProjectClick = (data: any) => {
|
||
sessionStorage.setItem("detailData", JSON.stringify(data));
|
||
window.open("/partyMemberTopic/hardDetail");
|
||
}
|
||
|
||
//to hard project
|
||
const newsDetailClick = (data: any) => {
|
||
sessionStorage.setItem("detailData", JSON.stringify(data));
|
||
window.open("/partyMemberTopic/newsDetail");
|
||
}
|
||
|
||
//other buttom onclick
|
||
const bottomOtherClick = (param: string) => {
|
||
if (param == '0') {
|
||
setContactData([...totalContactData.current]);
|
||
} else {
|
||
setContactData([...totalContactData.current.slice(0, 3)]);
|
||
}
|
||
}
|
||
|
||
useEffect(() => {
|
||
getBannerList();
|
||
getGracefulList();
|
||
getActivityList();
|
||
getProjectList();
|
||
getRightList();
|
||
getContactList();
|
||
}, [])
|
||
|
||
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' autoplay>
|
||
{bannerList?.length > 0 && bannerList.map(item => (
|
||
<div key={item.id}>
|
||
<div className='carousel-content' style={{ backgroundImage: `url(${item.imageUrl})` }} onClick={() => newsDetailClick(item)}>
|
||
<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>
|
||
))}
|
||
</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 - 1) && (
|
||
<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="活动风采" url="/partyMemberTopic/activityStyle" />
|
||
<div>
|
||
<Row gutter={[20, 31]}>
|
||
{gracefulList?.length > 0 && gracefulList.map((item, index) => (
|
||
<Col span={8} key={index}>
|
||
<div className='left-graceful-bg' style={{ backgroundImage: `url(${item.imageUrl})` }} onClick={() => newsDetailClick(item)}>
|
||
<div className='left-graceful-textbg'>
|
||
<span className='left-graceful-text'>{item.title}</span>
|
||
</div>
|
||
</div>
|
||
</Col>
|
||
))}
|
||
</Row>
|
||
</div>
|
||
</div>
|
||
<div className='left-project'>
|
||
<LeftCardTop title="攻坚克难项目" url="/partyMemberTopic/overDifficult" />
|
||
<div className='left-project-content'>
|
||
<img src={topic_project_picture} />
|
||
<div className='left-project-content-list'>
|
||
<List
|
||
size='small'
|
||
split={false}
|
||
dataSource={projectList}
|
||
renderItem={item => (
|
||
<List.Item>
|
||
<div className='left-project-content-item'>
|
||
<a onClick={() => hardProjectClick(item)} className='left-project-content-item-title'>{item.title}</a>
|
||
<span className='left-project-content-item-time'>{formatTime(item.createTime, 'MM-DD HH:mm')}</span>
|
||
</div>
|
||
</List.Item>
|
||
)}
|
||
>
|
||
</List>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className='right-global'>
|
||
<div>
|
||
<img src={topic_right_material} className='right-material' onClick={() => window.open("/partyMemberTopic/partyBranch")} />
|
||
</div>
|
||
<div className='right-display'>
|
||
<RightDisplayTitle title="党员及支部数量情况" />
|
||
<RightDisplayContent index={1} data={rightList} img={topic_partybranch} color="number-blue" />
|
||
<RightDisplayContent index={0} data={rightList} img={topic_partymember} color="number-blue" />
|
||
</div>
|
||
<Divider className='right-divider' />
|
||
<div className='right-display'>
|
||
<RightDisplayTitle title="2022年订单交易情况" />
|
||
<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' />
|
||
{rightGraphList.length > 0 && rightGraphList.map(item => (
|
||
<div className='right-graph' key={item.dataClass}>
|
||
<div className='right-graph-title'>
|
||
{item.dataClass}
|
||
</div>
|
||
<div className='right-graph-subtitle'>
|
||
{isNotEmpty(item.dataName) && `${item.dataName}：${item.dataValue}${item.dataType}`}
|
||
</div>
|
||
<div className='right-graph-content'>
|
||
<RightGraphContent name={item.dataClass} type={item.dataType} data={item.data} />
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
<div className='bottom-global'>
|
||
<LeftCardTop title="我要提意见" />
|
||
{contactData.length > 0 && contactData.map(([name, value], index) => (
|
||
<div key={index}>
|
||
<div className='bottom-title'>{name}</div>
|
||
<div className='bottom-content'>
|
||
<Row gutter={[20, 20]}>
|
||
{value.map((item: any) => (
|
||
<BottomCardContent data={item} onClick={() => openModal(item)} key={item.id} />
|
||
))}
|
||
</Row>
|
||
</div>
|
||
</div>
|
||
))}
|
||
{contactData.length != 0 && contactData.length > 2 && (
|
||
<div className='bottom-other'>
|
||
<div>
|
||
<span className='bottom-other-text' onClick={() => bottomOtherClick(contactData.length > 3 ? '1' : '0')}>{contactData.length > 3 ? '收起' : '更多'}</span>
|
||
<img src={topic_other} className={contactData.length > 3 ? 'bottom-close-icon' : 'bottom-other-icon'} />
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
<CommentModal visible={adviceVisible} closeModal={() => closeModal()} data={adviceItemData} />
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default Home; |