diff --git a/src/assets/topic/topic_banner1.jpg b/src/assets/topic/topic_banner1.jpg deleted file mode 100644 index fd0daad..0000000 Binary files a/src/assets/topic/topic_banner1.jpg and /dev/null differ diff --git a/src/assets/topic/topic_example1.jpg b/src/assets/topic/topic_example1.jpg deleted file mode 100644 index e8e9508..0000000 Binary files a/src/assets/topic/topic_example1.jpg and /dev/null differ diff --git a/src/assets/topic/topic_example2.jpg b/src/assets/topic/topic_example2.jpg deleted file mode 100644 index 85d67db..0000000 Binary files a/src/assets/topic/topic_example2.jpg and /dev/null differ diff --git a/src/assets/topic/topic_example3.jpg b/src/assets/topic/topic_example3.jpg deleted file mode 100644 index 6f9f06e..0000000 Binary files a/src/assets/topic/topic_example3.jpg and /dev/null differ diff --git a/src/assets/topic/topic_example4.jpg b/src/assets/topic/topic_example4.jpg deleted file mode 100644 index 3345b6e..0000000 Binary files a/src/assets/topic/topic_example4.jpg and /dev/null differ diff --git a/src/assets/topic/topic_example5.jpg b/src/assets/topic/topic_example5.jpg deleted file mode 100644 index fac92f5..0000000 Binary files a/src/assets/topic/topic_example5.jpg and /dev/null differ diff --git a/src/assets/topic/topic_example6.jpg b/src/assets/topic/topic_example6.jpg deleted file mode 100644 index 117bc2b..0000000 Binary files a/src/assets/topic/topic_example6.jpg and /dev/null differ diff --git a/src/assets/topic/topic_header_img.png b/src/assets/topic/topic_header_img.png new file mode 100644 index 0000000..5e83f9e Binary files /dev/null and b/src/assets/topic/topic_header_img.png differ diff --git a/src/pages/PartyMemberTopic/Home/index.less b/src/pages/PartyMemberTopic/Home/index.less index dfb0aff..52972e1 100644 --- a/src/pages/PartyMemberTopic/Home/index.less +++ b/src/pages/PartyMemberTopic/Home/index.less @@ -25,20 +25,77 @@ margin: 0; .left-carousel { - margin-bottom: -8px; .carousel-content { height: 584px; - color: #fff; - line-height: 584px; - text-align: center; - background: #364d79; + 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; + 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; + } + } } \ No newline at end of file diff --git a/src/pages/PartyMemberTopic/Home/index.tsx b/src/pages/PartyMemberTopic/Home/index.tsx index 14dff50..403b39f 100644 --- a/src/pages/PartyMemberTopic/Home/index.tsx +++ b/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 ( -
- -
-
- {right_data[props.type].name} - {right_data[props.type].type != null && - 同比 - {right_data[props.type].type == 1 ? ( - {right_data[props.type].percentage}% ↑ - ) : ( - {right_data[props.type].percentage}% ↓ - )} - } -
-
- {right_data[props.type].number} - {right_data[props.type].unit} + props.data?.length > 0 ? ( +
+ +
+
+ {props.data[props.index].dataName} + {props.data[props.index].dataCompare != null && + 同比 + {props.data[props.index].dataCompare[0] == '+' ? ( + {props.data[props.index].dataCompare} ↑ + ) : ( + {props.data[props.index].dataCompare} ↓ + )} + } +
+
+ {props.data[props.index].dataValue} + {props.data[props.index].dataType} +
-
+ ) : 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 ( + +
+
+
+ {props.data.contactName} + ({props.data.contactName}) +
+ props.onClick()} /> +
+
+
邮箱：{props.data.contactEmail}
+
电话：{props.data.contactMobiphone}
+
部门：{props.data.contactDepartment}
+
+
+ + ) } -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(false); + const textRef = useRef(null); + const radioRef = useRef(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 ( + + +
+ 我要提意见 +
+
+ } + visible={props.visible} + onCancel={onCancel} + destroyOnClose + closable={false} + footer={null} + centered + maskStyle={{ backgroundColor: 'rgba(0, 0, 0, 0.3)' }} + width={350} + > + +
+
+ + 系统优化 + 制度优化 + 组织优化 + 其他 + +
+