6.26 首页接口联调

src/pages/PartyMemberTopic/Home/index.less

@@ -25,20 +25,77 @@
                 margin: 0;
 
                 .left-carousel {
-                    margin-bottom: -8px;
 
                     .carousel-content {
                         height: 584px;
-                        color: #fff;
+                        width: 1139px;
-                        line-height: 584px;
+                        background-repeat: no-repeat;
-                        text-align: center;
+                        background-size: 100%;
-                        background: #364d79;
+                        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;
+                                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 {
@@ -361,4 +418,75 @@
     }
 
 
+}
+
+.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;
+        }
+    }
 }

src/pages/PartyMemberTopic/Home/index.tsx

@@ -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 (
-        <div className='right-display-content'>
+        props.data?.length > 0 ? (
-            <img src={right_data[props.type].img} className='right-display-content-img' />
+            <div className='right-display-content'>
-            <div className='right-display-content-right'>
+                <img src={props.img} className='right-display-content-img' />
-                <div className='right-display-content-title'>
+                <div className='right-display-content-right'>
-                    <span>{right_data[props.type].name}</span>
+                    <div className='right-display-content-title'>
-                    {right_data[props.type].type != null && <span className='right-display-content-percentage'>
+                        <span>{props.data[props.index].dataName}</span>
-                        <span>同比</span>
+                        {props.data[props.index].dataCompare != null && <span className='right-display-content-percentage'>
-                        {right_data[props.type].type == 1 ? (
+                            <span>同比</span>
-                            <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>
+                        </span>}
-                <div className='right-display-content-content'>
+                    </div>
-                    <span className={`right-display-content-number ${props.color}`}>{right_data[props.type].number}</span>
+                    <div className='right-display-content-content'>
-                    <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>
-        </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 = [
+const BottomCardContent = (props: any) => {
-    {
-        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 = [
+    return (
-    {
+        <Col span={6}>
-        title: '中国联通召开 2022年党建暨党风廉政建设工作会议',
+            <div className='bottom-card'>
-        time: '05-25 16:19',
+                <div className='bottom-card-flex'>
-    },
+                    <div className='bottom-card-title'>
-    {
+                        <span>{props.data.contactName}</span>
-        title: '喜报｜联通智慧党建产品，荣获国家级创新大赛一等奖',
+                        <span className='bottom-card-title-type'>({props.data.contactName})</span>
-        time: '05-25 16:19',
+                    </div>
-    },
+                    <img src={topic_bottom_button} onClick={() => props.onClick()} />
-    {
+                </div>
-        title: '中国联通召开 2022年党建暨党风廉政建设工作会议',
+                <div className='bottom-card-content'>
-        time: '05-25 16:19',
+                    <div>邮箱：{props.data.contactEmail}</div>
-    },
+                    <div>电话：{props.data.contactMobiphone}</div>
-    {
+                    <div>部门：{props.data.contactDepartment}</div>
-        title: '喜报｜联通智慧党建产品，荣获国家级创新大赛一等奖',
+                </div>
-        time: '05-25 16:19',
+            </div>
-    },
+        </Col>
-    {
+    )
-        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 = [
+const CommentModal = (props: any) => {
-    {
+    const { TextArea } = Input;
-        name: '物资采购计划',
+    const [modalLoading, setModalLoading] = useState<boolean>(false);
-        sub: '总采购数量',
+    const textRef = useRef<any>(null);
-        type: 1,
+    const radioRef = useRef<any>(null);
-        number: 22324,
+
-        unit: '件',
+    const onRadioChange = (e: RadioChangeEvent) => {
-        data: [
+        radioRef.current = e.target.value;
-            { value: 1421, name: '已完成数量' },
+    };
-            { value: 2369, name: '进行中数量' },
+
-        ],
+    const onTextChange = (e: any) => {
-    },
+        textRef.current = e.target.value;
-    {
+    };
-        name: '攻坚克难项目',
+
-        sub: '总课题数量',
+    const onCancel = () => {
-        type: 1,
+        props.closeModal();
-        number: 223,
+        textRef.current = null;
-        unit: '个',
+        radioRef.current = null;
-        data: [
+    }
-            { value: 165, name: '已完成数量' },
+
-            { value: 265, name: '进行中数量' },
+    const onSubmit = async () => {
-        ],
+        setModalLoading(true);
-    },
+        const params = {
-    {
+            contactName: props.data?.contactName,
-        name: '建议类型',
+            contactId: props.data?.contactId,
-        sub: null,
+            suggestionType: radioRef.current,
-        type: 0,
+            suggestionContent: textRef.current,
-        number: null,
+        }
-        unit: null,
+        await submitAdvice(params).then(res => {
-        data: [
+            if (res?.code == 200) {
-            { value: 40, name: '系统优化' },
+                message.success("提交成功");
-            { value: 30, name: '组织优化' },
+                onCancel();
-            { value: 20, name: '制度优化' },
+            }
-        ],
+        }).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'>
+                        <Carousel className='left-carousel' autoplay>
-                            <div>
+                            {bannerList?.length > 0 && bannerList.map(item => (
-                                <img src={topic_banner1} className='carousel-content' />
+                                <div key={item.id}>
-                            </div>
+                                    <div className='carousel-content' style={{ backgroundImage: `url(${item.imageUrl})` }}>
-                            <div>
+                                        <div className='carousel-textbg'>
-                                <h3 className='carousel-content'>2</h3>
+                                            <div className='carousel-text'>
-                            </div>
+                                                <span className='carousel-text-content'>{item.imageWord}</span>
-                            <div>
+                                                <span className='carousel-text-click'>⋙点击查看详情</span>
-                                <h3 className='carousel-content'>3</h3>
+                                            </div>
-                            </div>
+                                        </div>
-                            <div>
+                                    </div>
-                                <h3 className='carousel-content'>4</h3>
+                                </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]}>
-                                        {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 index={0} data={rightList} img={topic_partymember} color="number-blue" />
-                            <RightDisplayContent type="partybranch" 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 index={2} data={rightList} img={topic_totalamount} color="number-orange" />
-                            <RightDisplayContent type="totalnumber" color="number-orange" />
+                            <RightDisplayContent index={3} data={rightList} img={topic_totalnumber} color="number-orange" />
-                            <RightDisplayContent type="commodity" color="number-orange" />
+                            <RightDisplayContent index={4} data={rightList} img={topic_commodity} color="number-orange" />
-                            <RightDisplayContent type="protocol" color="number-orange" />
+                            <RightDisplayContent index={5} data={rightList} img={topic_protocol} color="number-orange" />
                         </div>
                         <Divider className='right-divider' />
-                        {right_graph_data.map(item => (
+                        {rightGraphList.length > 0 && rightGraphList.map(item => (
-                            <div className='right-graph' key={item.name}>
+                            <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 => (
+                    {Object.entries(contactData).map(([name, value], index) => (
-                        <div key={item}>
+                        <div key={index}>
-                            <div className='bottom-title'>{item}</div>
+                            <div className='bottom-title'>{name}</div>
                             <div className='bottom-content'>
                                 <Row gutter={[20, 20]}>
-                                    {card_length.map(item => (
+                                    {value.map((item: any) => (
-                                        <Col span={6} key={item}>
+                                        <BottomCardContent data={item} onClick={() => openModal(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>
                                     ))}
                                 </Row>
                             </div>
@@ -419,9 +489,10 @@ const Home: React.FC<{}> = () => {
                         </div>
                     </div>
                 </div>
+                <CommentModal visible={adviceVisible} closeModal={() => closeModal()} data={adviceItemData} />
             </div>
         </div>
     );
 };
 
-export default Home;
+export default Home;

src/pages/PartyMemberTopic/Home/service.ts

@@ -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 }
+    });
+}