498 lines
21 KiB
TypeScript
498 lines
21 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 } 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 { 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 (
|
||
<>
|
||
<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 (
|
||
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>
|
||
</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: 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 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>
|
||
<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 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">
|
||
<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})` }}>
|
||
<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 && (
|
||
<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]}>
|
||
{gracefulList?.length > 0 && gracefulList.map((item, index) => (
|
||
<Col span={8} key={index}>
|
||
<div className='left-graceful-bg' style={{ backgroundImage: `url(${item.imageUrl})` }}>
|
||
<div className='left-graceful-textbg'>
|
||
<span className='left-graceful-text'>{item.imageWord}</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={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'>{formatProjectTime(item.createTime)}</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 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 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'>
|
||
{item.dataName != null && `${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="活动联系人" />
|
||
{Object.entries(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)} />
|
||
))}
|
||
</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>
|
||
<CommentModal visible={adviceVisible} closeModal={() => closeModal()} data={adviceItemData} />
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default Home; |