diff --git a/config/router.config.ts b/config/router.config.ts index 34acf9b..495beb8 100644 --- a/config/router.config.ts +++ b/config/router.config.ts @@ -4,6 +4,7 @@ import home from './HomePage/router_home'; import juryRoom from './JuryRoom/router_menuJury.config'; import approvalForm from './router_approval_form'; import partyMemberTopic from './router_partyMemberTopic'; +import highQualityOperation from './router_highQualityOperation'; import { elecBidEvaluation, monitor, monitorScreen } from './router_elecEvaluation'; export default [ //========================================================================登陆 @@ -12,6 +13,8 @@ export default [ ...approvalForm, //党建攻坚 ...partyMemberTopic, + //高质量运营 + ...highQualityOperation, //电子评标室-监控大屏 ...monitorScreen, ...monitor, diff --git a/config/router_highQualityOperation.ts b/config/router_highQualityOperation.ts new file mode 100644 index 0000000..68b5ac1 --- /dev/null +++ b/config/router_highQualityOperation.ts @@ -0,0 +1,53 @@ +export default [ + { + name: '高质量运营', + path: '/highQualityOperation', + routes: [ + { //首页 + name: 'home', + path: '/highQualityOperation/home', + component: './HighQualityOperation/Home', + }, + { //物资采购与管理专业线 党支部 省分 + name: 'partyBranch', + path: '/highQualityOperation/partyBranch', + component: './HighQualityOperation/PartyBranch', + }, + { //物资采购与管理专业线 党支部数据 + name: 'partyBranches', + path: '/highQualityOperation/partyBranches', + component: './HighQualityOperation/PartyBranches', + }, + { //物资采购与管理专业线 党支部人员信息 + name: 'personInfor', + path: '/highQualityOperation/personInfor', + component: './HighQualityOperation/PersonInfor', + }, + { //高质量运营标杆项目 更多 + name: 'MarkProject', + path: '/highQualityOperation/markProjectList', + component: './HighQualityOperation/MarkProjectList', + }, + { //工作风采 更多 + name: 'activityStyle', + path: '/highQualityOperation/jobStyleList', + component: './HighQualityOperation/JobStyleList', + }, + { //运营提升小课堂 更多 + name: 'classroomList', + path: '/highQualityOperation/classroomList', + component: './HighQualityOperation/ClassroomList', + }, + { //工作风采和banner 高质量运营标杆 小课堂详情 + name: 'detail', + path: '/highQualityOperation/detail', + component: './HighQualityOperation/Detail', + }, + { //管理端 首页 + name: 'manage', + path: '/highQualityOperation/manage', + component: './HighQualityOperation/Management/Manage', + }, + ] + }, +]; \ No newline at end of file diff --git a/package.json b/package.json index 67e0054..9fc119f 100644 --- a/package.json +++ b/package.json @@ -86,6 +86,7 @@ "react-dom": "16.14.0", "react-fast-marquee": "1.3.2", "react-helmet-async": "^1.0.9", + "react-player": "^2.12.0", "react-signature-canvas": "^1.0.3", "react-sortable-hoc": "^1.11.0", "sm-crypto": "0.2.5", diff --git a/src/assets/highQuality/bannerListPic.jpg b/src/assets/highQuality/bannerListPic.jpg new file mode 100644 index 0000000..7aa025a Binary files /dev/null and b/src/assets/highQuality/bannerListPic.jpg differ diff --git a/src/assets/highQuality/bottom_button.png b/src/assets/highQuality/bottom_button.png new file mode 100644 index 0000000..cfe48b3 Binary files /dev/null and b/src/assets/highQuality/bottom_button.png differ diff --git a/src/assets/highQuality/card_img_2.png b/src/assets/highQuality/card_img_2.png new file mode 100644 index 0000000..ddce8e3 Binary files /dev/null and b/src/assets/highQuality/card_img_2.png differ diff --git a/src/assets/highQuality/card_img_3.png b/src/assets/highQuality/card_img_3.png new file mode 100644 index 0000000..c4c3a0d Binary files /dev/null and b/src/assets/highQuality/card_img_3.png differ diff --git a/src/assets/highQuality/card_img_4.png b/src/assets/highQuality/card_img_4.png new file mode 100644 index 0000000..70a1e3a Binary files /dev/null and b/src/assets/highQuality/card_img_4.png differ diff --git a/src/assets/highQuality/card_img_5.png b/src/assets/highQuality/card_img_5.png new file mode 100644 index 0000000..a62c180 Binary files /dev/null and b/src/assets/highQuality/card_img_5.png differ diff --git a/src/assets/highQuality/card_img_6.png b/src/assets/highQuality/card_img_6.png new file mode 100644 index 0000000..b47eb39 Binary files /dev/null and b/src/assets/highQuality/card_img_6.png differ diff --git a/src/assets/highQuality/card_img_7.png b/src/assets/highQuality/card_img_7.png new file mode 100644 index 0000000..4642d65 Binary files /dev/null and b/src/assets/highQuality/card_img_7.png differ diff --git a/src/assets/highQuality/card_img_8.png b/src/assets/highQuality/card_img_8.png new file mode 100644 index 0000000..61cb53a Binary files /dev/null and b/src/assets/highQuality/card_img_8.png differ diff --git a/src/assets/highQuality/card_img_9.png b/src/assets/highQuality/card_img_9.png new file mode 100644 index 0000000..9eb697a Binary files /dev/null and b/src/assets/highQuality/card_img_9.png differ diff --git a/src/assets/highQuality/card_picture.jpg b/src/assets/highQuality/card_picture.jpg new file mode 100644 index 0000000..f2db355 Binary files /dev/null and b/src/assets/highQuality/card_picture.jpg differ diff --git a/src/assets/highQuality/classroom_banner.jpg b/src/assets/highQuality/classroom_banner.jpg new file mode 100644 index 0000000..08916ac Binary files /dev/null and b/src/assets/highQuality/classroom_banner.jpg differ diff --git a/src/assets/highQuality/classroom_bg.jpg b/src/assets/highQuality/classroom_bg.jpg new file mode 100644 index 0000000..633fcb5 Binary files /dev/null and b/src/assets/highQuality/classroom_bg.jpg differ diff --git a/src/assets/highQuality/flag.png b/src/assets/highQuality/flag.png new file mode 100644 index 0000000..30be0b2 Binary files /dev/null and b/src/assets/highQuality/flag.png differ diff --git a/src/assets/highQuality/header.jpg b/src/assets/highQuality/header.jpg new file mode 100644 index 0000000..339c70c Binary files /dev/null and b/src/assets/highQuality/header.jpg differ diff --git a/src/assets/highQuality/learn.jpg b/src/assets/highQuality/learn.jpg new file mode 100644 index 0000000..3ddfba8 Binary files /dev/null and b/src/assets/highQuality/learn.jpg differ diff --git a/src/assets/highQuality/material.jpg b/src/assets/highQuality/material.jpg new file mode 100644 index 0000000..ec7ea6b Binary files /dev/null and b/src/assets/highQuality/material.jpg differ diff --git a/src/assets/highQuality/news_banner.jpg b/src/assets/highQuality/news_banner.jpg new file mode 100644 index 0000000..0ccdd7d Binary files /dev/null and b/src/assets/highQuality/news_banner.jpg differ diff --git a/src/assets/highQuality/news_bg.jpg b/src/assets/highQuality/news_bg.jpg new file mode 100644 index 0000000..8f95131 Binary files /dev/null and b/src/assets/highQuality/news_bg.jpg differ diff --git a/src/assets/highQuality/partybranch.png b/src/assets/highQuality/partybranch.png new file mode 100644 index 0000000..14f14db Binary files /dev/null and b/src/assets/highQuality/partybranch.png differ diff --git a/src/assets/highQuality/partymember.png b/src/assets/highQuality/partymember.png new file mode 100644 index 0000000..1d2b88d Binary files /dev/null and b/src/assets/highQuality/partymember.png differ diff --git a/src/assets/highQuality/project_banner.jpg b/src/assets/highQuality/project_banner.jpg new file mode 100644 index 0000000..9e7db77 Binary files /dev/null and b/src/assets/highQuality/project_banner.jpg differ diff --git a/src/assets/highQuality/project_bg.jpg b/src/assets/highQuality/project_bg.jpg new file mode 100644 index 0000000..6ea90ef Binary files /dev/null and b/src/assets/highQuality/project_bg.jpg differ diff --git a/src/assets/highQuality/project_left.jpg b/src/assets/highQuality/project_left.jpg new file mode 100644 index 0000000..7596195 Binary files /dev/null and b/src/assets/highQuality/project_left.jpg differ diff --git a/src/assets/highQuality/star1.png b/src/assets/highQuality/star1.png new file mode 100644 index 0000000..b93f27d Binary files /dev/null and b/src/assets/highQuality/star1.png differ diff --git a/src/assets/highQuality/star2.png b/src/assets/highQuality/star2.png new file mode 100644 index 0000000..2676cf4 Binary files /dev/null and b/src/assets/highQuality/star2.png differ diff --git a/src/assets/highQuality/star3.png b/src/assets/highQuality/star3.png new file mode 100644 index 0000000..b3463db Binary files /dev/null and b/src/assets/highQuality/star3.png differ diff --git a/src/pages/HighQualityOperation/ClassroomList.tsx b/src/pages/HighQualityOperation/ClassroomList.tsx new file mode 100644 index 0000000..e561b3b --- /dev/null +++ b/src/pages/HighQualityOperation/ClassroomList.tsx @@ -0,0 +1,102 @@ +import React, { useEffect, useState } from 'react'; +import './style.less'; +import { Input, List, Spin } from 'antd'; +import { formatTime } from './utils'; +import { history } from 'umi'; +import { getClassroomList } from './Home/service'; + +const { Search } = Input; + +const ClassroomList: React.FC<{}> = () => { + //project data + const [classroomList, setClassroomList] = useState([]); + //loading + const [loading, setLoading] = useState(false); + //page + const [page, setPage] = useState(1); + + //get project + const getClassroomData = (value: string) => { + setLoading(true); + getClassroomList({ param: value }).then(res => { + if (res?.code == 200) { + setClassroomList(res?.data); + setPage(1); + } + }).finally(() => { + setLoading(false); + }) + } + + //onclick + const clickTitle = (data: any) => { + history.push({ pathname: "/highQualityOperation/detail", state: { detail: data } }); + } + //to home + const toHome = () => { + history.push("/highQualityOperation/home"); + } + //to previous page + const toPreviousPage = () => { + setPage((page) => page - 1); + } + //to next page + const toNextPage = () => { + setPage((page) => page + 1); + } + + useEffect(() => { + getClassroomData(''); + }, []) + + return ( +
+
+
+ toHome()}>返回首页 + {page > 1 && toPreviousPage()}>上一页} + {classroomList.length != 0 && page < Math.ceil(classroomList.length / 10) && toNextPage()}>下一页} +
+
+ +
+ 运营提升小课堂 +
+ +
+
+
+ { + setPage(page); + }, + current: page, + showTotal: (total) => `共 ${total} 条`, + pageSize: 10, + }} + dataSource={classroomList} + renderItem={item => ( + +
+

clickTitle(item)}>{item.title}

+ {formatTime(item.createTime, 'YYYY-MM-DD')} +
+ + )} + /> +
+ +
+ ) +} + +export default ClassroomList; \ No newline at end of file diff --git a/src/pages/HighQualityOperation/Detail.tsx b/src/pages/HighQualityOperation/Detail.tsx new file mode 100644 index 0000000..a4273d8 --- /dev/null +++ b/src/pages/HighQualityOperation/Detail.tsx @@ -0,0 +1,241 @@ +import React, { Fragment, useEffect, useMemo, useRef, useState } from 'react'; +import './style.less'; +import project_banner from '@/assets/highQuality/project_banner.jpg' +import news_banner from '@/assets/highQuality/news_banner.jpg' +import classroom_banner from '@/assets/highQuality/classroom_banner.jpg' +import { formatCreateTime, formatTime, getDetailData, isNotEmpty } from './utils'; +import { history } from 'umi' +import ReactPlayer from 'react-player'; +import { LikeFilled, LikeOutlined, MessageOutlined, SyncOutlined } from '@ant-design/icons'; +import { clickLikes, downloadVideo, getCommentsCount, getCommentsList, getLikesCount, isUserLike, saveComment } from './Home/service'; +import { Avatar, Button, Input, List, Skeleton, Space, Tooltip, message } from 'antd'; +interface DetailProps { + /**标题 */ + title: string, + /**副标题 */ + secordTitle: string | null, + /**创建时间 年月日时分秒 */ + createTime: string, + /**正文内容 html字符串 内部包含图片 */ + content: string, + /**类型 1-首页 2-工作风采 3-高质量运营标杆项目 4-运营提升小课堂 */ + category: "1" | "2" | "3" | "4", +} +interface StateProps { detail: DetailProps }; +interface LocationProps { state?: StateProps }; +interface DetailLocationProps { location: LocationProps }; +interface CommentListProps { loading: boolean, createrName: string, context: string, createTime: string }; +/** + * 通用详情 + * @param props + * @returns + */ +const Detail: React.FC = (props) => { + const [likesCount, setLikesCount] = useState(0); + const [commentsCount, setCommentsCount] = useState(0); + const [isLike, setIsLike] = useState(true); + const [loading, setLoading] = useState(false); + const [expand, setExpand] = useState(false); + const [commentList, setCommentList] = useState([]); + const [inputValue, setInputValue] = useState(); + const commentRef = useRef([]); + const listRef = useRef(null); + const item = props.location.state?.detail ?? getDetailData(); + const { Search } = Input; + const ContentMaps = { + "1": { banner: news_banner, content: "contentBlock", inform: "informDefault" }, + "2": { banner: news_banner, content: "contentBlock", inform: "informDefault" }, + "3": { banner: project_banner, content: "contentBlock03", inform: "informDefault03" }, + "4": { banner: classroom_banner, content: "contentBlock04", inform: "informDefault04" }, + }; + //to home + const toHome = () => { + sessionStorage.removeItem("detailData"); + history.push("/highQualityOperation/home"); + } + const getCount = (reId: string) => { + //获取点赞数 + getLikesCount({ reId }).then(res => { + if (res?.code == 200) { + setLikesCount(res?.data); + } + }) + + //获取评论数 + getCommentsCount({ reId }).then(res => { + if (res?.code == 200) { + setCommentsCount(res?.data); + } + }) + } + const getIsLike = (reId: string) => { + //当前登录人是否点赞 + isUserLike({ reId }).then(res => { + if (res?.code == 200) { + setIsLike(res?.data); + } + }) + } + const getCommentList = (reId: string, count: number) => { + if (listRef.current) { listRef.current.scrollTo({ top: 0 }); } + const array = [...new Array(count)].map(() => ({ loading: true, createrName: "", context: "", createTime: "" })); + setCommentList(array.concat(commentRef.current)); + setLoading(true); + //获取评论列表 + getCommentsList({ reId }).then(res => { + if (res?.code == 200) { + setCommentList(res?.data); + commentRef.current = res?.data; + } + }).finally(() => { + setLoading(false); + }) + } + //点赞 + const likeClick = (reId: string) => { + if (isLike) { + message.warning("您已经点过赞啦！"); + return; + } + setIsLike(true); + //点赞 + clickLikes({ reId }).then(res => { + if (res?.code == 200) { + message.success(res?.data); + getCount(reId); + } + }) + } + //评论 + const commentClick = (reId: string, option: boolean) => { + if (option) { + setExpand(!expand); + } + if (!option || !expand) { + let data = commentRef.current; + let count = 3; + if (data.length > 5) { + count = 9; + } else if (data.length > 2) { + count = data.length + 2; + } + getCommentList(reId, count); + } + } + const onSave = (reId: string, context: string) => { + //保存评论 + if (isNotEmpty(context)) { + setInputValue(""); + saveComment({ reId, context }).then(res => { + if (res?.code == 200) { + getCount(reId); + getCommentList(reId, 1); + } + }); + } + } + const onChange = (e: { preventDefault: () => void; target: { value: string; }; }) => { + e.preventDefault(); + setInputValue(e.target.value); + } + + useEffect(() => { + if (item && item.category == "4") { + getCount(item.id); + getIsLike(item.id); + } + }, []) + + return ( +
+
+
+ +
+
+ toHome()}>返回首页 +
+
+
+

{item.title}

+ + {item.category == "4" && ( +
+ +
+
+
+
+ {useMemo(() => ( + ( + + + } + title={{item.createrName}} + description={ + {item.context} + {formatCreateTime(item.createTime)} + } + /> + + + )} + /> + ), [commentList])} +
+
+ onSave(item.id, value)} + enterButton="发送" + style={{ width: "100%" }} + maxLength={200} + /> +
+
+ + commentClick(item.id, false)}> + + + likeClick(item.id)}>{isLike ? : } {likesCount} + + + commentClick(item.id, true)}> {commentsCount} + +
+
+
+ + )} + {isNotEmpty(item.secordTitle) &&

{item.secordTitle}

} +
+
+
+
+
+ ) +} + +export default Detail; \ No newline at end of file diff --git a/src/pages/HighQualityOperation/Home/index.less b/src/pages/HighQualityOperation/Home/index.less new file mode 100644 index 0000000..c7018e8 --- /dev/null +++ b/src/pages/HighQualityOperation/Home/index.less @@ -0,0 +1,877 @@ +@import '~antd/es/style/themes/default.less'; + +.h-topic-global { + width: 100%; + display: flex; + justify-content: center; + background-color: #fff; + + .topic-background { + width: 1460px; + // background-color: #e9e9e9; + + .top-picture { + width: 100%; + padding-bottom: 10px; + } + + .top-global { + display: flex; + justify-content: space-between; + + .left-global { + width: 1204px; + padding: 0; + margin: 0; + + .left-carousel { + + .carousel-content { + height: 608px; + width: 1204px; + background-repeat: no-repeat; + background-size: 100%; + display: flex; + align-items: flex-end; + cursor: pointer; + + .carousel-textbg { + display: flex; + justify-content: flex-start; + width: 100%; + padding: 38px 0 40px; + background: #0000008c; + + .carousel-text { + color: #fff; + width: 940px; + text-align: center; + + &>span { + font-weight: bold; + font-size: 32px; + line-height: 40px; + } + } + } + } + + .carousel-content:hover { + -webkit-filter: brightness(105%); + filter: brightness(105%); + } + + .slick-dots-bottom { + bottom: 48px; + } + + .slick-dots { + justify-content: flex-start; + margin-left: 960px; + margin-right: 0; + } + + .slick-dots li { + width: 24px; + } + + .slick-dots li button { + height: 14px; + width: 14px; + border-radius: 50%; + opacity: 1; + } + + .slick-dots li.slick-active button { + opacity: 1; + background: #e32f2f; + } + + .slick-dots li button:hover, + .slick-dots li button:focus { + background: #e32f2f; + opacity: 0.75; + } + } + + .left-activity { + height: 0; + width: 1204px; + } + + .left-card { + + .left-card-top { + display: flex; + justify-content: flex-start; + align-items: center; + margin-bottom: 22px; + + .left-card-title { + height: 60px; + background: linear-gradient(to right, #e32f2f, #fe8d8d) no-repeat center; + border-top-left-radius: 20px; + border-top-right-radius: 20px; + text-align: center; + width: 252px; + + &>span { + font-weight: bold; + font-family: '黑体'; + font-size: 24px; + line-height: 60px; + color: #FFFFFF; + letter-spacing: 1px; + } + } + + .left-card-content { + flex: 1; + border-bottom: 3px solid #fe8d8d; + height: 60px; + display: flex; + justify-content: space-between; + align-items: center; + + .left-card-flag { + margin-left: 9px; + margin-top: 4px; + } + + .left-card-other { + font-family: '黑体'; + font-size: 18px; + color: #7a7a7a; + cursor: pointer; + } + + .left-card-other:hover { + color: #e32f2f; + text-decoration: underline; + } + + .left-card-icon { + color: #7a7a7a; + } + } + + } + + .left-project { + margin-top: 30px; + background: #fff; + + .left-project-content { + display: flex; + justify-content: left; + + .left-project-content-list { + margin-left: 40px; + width: 100%; + + .left-project-content-item { + font-size: 14px; + font-family: '黑体'; + line-height: 31px; + font-weight: 600; + display: flex; + justify-content: space-between; + width: 100%; + + .left-project-content-item-title { + color: #4f4f4f + } + + &>span { + color: #4f4f4f + } + + .left-project-content-item-title:hover { + color: #e32f2f; + text-decoration: underline; + transition: all .2s cubic-bezier(.645, .045, .355, 1); + } + } + } + } + + .left-project-content .ant-list-sm .ant-list-item { + padding: 0 0 0 16px; + border-bottom: 2px solid #e0e0e0; + } + + .left-graceful-bg { + height: 204px; + width: 387px; + background-size: 100% 100%; + background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: flex-end; + cursor: pointer; + + .left-graceful-textbg { + height: 40px; + width: 387px; + background: linear-gradient(to right, #e32f2ff2, #e32f2f66) no-repeat center; + background-size: 100%; + display: flex; + justify-content: center; + align-items: center; + + .left-graceful-text { + color: #fff; + font-size: 16.64px; + font-weight: bold; + } + } + } + + .left-graceful-bg:hover { + -webkit-filter: brightness(108%); + filter: brightness(108%); + } + + .left-classroom-bg { + height: 218px; + // height: 290px; + width: 387px; + cursor: pointer; + } + + .left-classroom-bg:hover { + -webkit-filter: brightness(108%); + filter: brightness(108%); + } + + .left-classroom-textbg { + height: 40px; + width: 387px; + margin-top: 14px; + text-align: center; + + &>span { + color: #fd4e4f; + font-size: 16.64px; + font-weight: bold; + line-height: 16.64px; + cursor: pointer; + } + + &>span:hover { + text-decoration: underline; + } + } + + .bottom-select { + margin-bottom: 22px; + background: #fff0f0; + padding: 20px 0px 22px 24px; + + .bottom-select-label { + font-size: 16px; + font-weight: 700; + font-family: "黑体"; + display: block; + padding-left: 9px; + padding-bottom: 6px; + } + + .ant-tag-checkable-checked { + background-color: #e32f2f; + } + + .ant-tag-checkable:not(.ant-tag-checkable-checked):hover { + color: #e32f2f; + } + + .ant-tag-checkable:active { + background-color: #e32f2f; + color: #FFFFFF !important; + } + } + + .bottom-select .bottom-select-tag { + font-size: 14px; + padding: 0 9px; + line-height: 27px; + margin-right: 6px; + } + + .bottom-content { + margin-bottom: 22px; + + .bottom-card { + background-image: url("~@/assets/highQuality/card_picture.jpg"); + background-size: 100% 100%; + background-repeat: no-repeat; + + .bottom-card-title { + height: 40px; + padding-left: 20px; + background: linear-gradient(to right, #e32f2f, #fd9596) no-repeat center; + display: flex; + justify-content: space-between; + align-items: center; + + &>span { + font-size: 20px; + font-weight: bold; + line-height: 40px; + color: #ffffff; + } + + &>div>img { + margin-right: 13px; + cursor: pointer; + + &:hover { + -webkit-filter: brightness(108%); + filter: brightness(108%); + } + } + } + + .bottom-card-remark { + height: 36px; + padding-left: 20px; + } + + .bottom-card-remark .bottom-card-remark-text { + color: #494949; + font-size: 16px; + font-weight: 700; + font-family: "黑体"; + line-height: 36px; + } + + .bottom-card-content { + padding-left: 20px; + padding-bottom: 6px; + padding-top: 10px; + + &>p { + color: #494949; + margin-bottom: 2px; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } + } + } + } + + .bottom-title { + font-size: 22px; + font-family: '黑体'; + color: #838383; + margin-bottom: 12px; + } + + .bottom-other { + display: flex; + justify-content: center; + + .bottom-other-text { + font-family: '黑体'; + font-size: 18px; + color: #7a7a7a; + cursor: pointer; + } + + .bottom-other-text:hover { + color: #e32f2f; + text-decoration: underline; + } + + .bottom-other-icon { + color: #7a7a7a; + } + } + } + } + + + } + + .right-global { + background: #fff; + width: 100%; + margin-left: 28px; + display: flex; + flex-direction: column; + align-items: center; + + .right-material { + cursor: pointer; + } + + .right-material:hover { + -webkit-filter: brightness(108%); + filter: brightness(108%); + } + + .right-display { + width: 100%; + padding: 14px 0 40px; + + .right-display-title { + font-size: 14px; + color: #3f3f3f; + text-align: center; + font-weight: bold; + } + + .right-display-content { + display: flex; + justify-content: flex-start; + margin-top: 20px; + margin-left: 26px; + + .right-display-content-img { + height: 60px; + width: 60px; + } + + .right-display-content-right { + margin-left: 16px; + + .right-display-content-title { + color: #3f3f3f; + font-size: 14px; + font-weight: bold; + } + + .right-display-content-content { + font-weight: bold; + margin-top: 4px; + + .right-display-content-number { + font-size: 34px; + font-family: 'Consolas'; + line-height: 34px; + } + + .number-blue { + color: #26c3da; + } + + .right-display-content-unit { + font-size: 28px; + line-height: 28px; + margin-left: 2px; + } + } + + } + } + + .right-display-content-pointer { + cursor: pointer; + } + } + + .right-learn { + background-image: url("~@/assets/highQuality/learn.jpg"); + background-size: 100% 100%; + background-repeat: no-repeat; + width: 100%; + height: 721px; + display: flex; + flex-direction: column; + align-items: center; + + .right-learn-test { + height: 45px; + width: 200px; + border-radius: 9px; + background: linear-gradient(to top, #5867ff, #9189ff) no-repeat center; + text-align: center; + cursor: pointer; + + &>span { + font-size: 20px; + line-height: 44px; + color: #FFFFFF; + font-weight: bold; + letter-spacing: 1px; + } + + &:hover { + -webkit-filter: brightness(105%); + filter: brightness(105%); + } + } + + .right-learn-exam { + .right-learn-test; + background: linear-gradient(to top, #9657ce, #df98f8) no-repeat center; + margin-top: 38px; + } + + .right-learn-title { + .right-learn-test; + background: linear-gradient(to top, #fc9464, #fab696) no-repeat center; + margin: 14px 0; + } + + .right-learn-rank { + + .right-learn-rank-title { + width: 100%; + text-align: center; + padding: 10px 0; + + &>span { + color: #fc4f50; + font-size: 16px; + font-weight: bold; + font-family: "黑体"; + line-height: 16px; + letter-spacing: 1px; + } + } + + .right-learn-rank-content { + height: 210px; + width: 196px; + background: #FFFFFF; + border-radius: 14px; + position: relative; + + .rank-title { + height: 33px; + width: 100%; + background-color: #fd4e4f; + text-align: center; + border-top-left-radius: 14px; + border-top-right-radius: 14px; + + &>span { + color: #FFFFFF; + font-size: 14px; + font-weight: bold; + font-family: "黑体"; + line-height: 32px; + letter-spacing: 1px; + } + } + + .rank-title-people { + .rank-title; + background-color: #ff8534; + } + + .rank-list { + padding: 4px 12px; + position: relative; + height: 156px; + overflow-y: auto; + + // &::-webkit-scrollbar { + // display: none; + // } + /*设置宽度,轨道颜色*/ + &::-webkit-scrollbar { + width: 6px; + height: 6px; + // padding-right: 3px; + } + + /*滚动条*/ + &::-webkit-scrollbar-thumb { + background: #cacfe6; + border-radius: 10px; + } + + /*增加悬停样式*/ + &::-webkit-scrollbar-thumb:hover { + background: #dcdfeb; + } + + /*滚动轨道样式*/ + &::-webkit-scrollbar-track-piece { + background: #eeeeee; + border-radius: 3px; + } + + &>p { + margin-bottom: 0; + line-height: 29px; + border-bottom: 1px solid #ebebeb; + color: #9f9f9f; + font-family: "黑体"; + font-size: 14px; + display: flex; + justify-content: space-between; + align-items: center; + position: relative; + + &>span { + display: block; + text-align: center; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } + + .list-star { + position: absolute; + left: 14px; + } + + .list-block { + width: 40px; + } + + .list-person-block { + width: 30px; + } + + .list-province { + width: 60px; + } + + .list-score { + width: 50px; + } + + .list-person-score { + width: 16px; + } + + .list-name { + width: 60px; + } + + .star1 { + background-image: url("~@/assets/highQuality/star1.png"); + background-size: 100% 100%; + background-repeat: no-repeat; + height: 21px; + width: 20px; + position: absolute; + left: 8px; + top: 3px; + text-align: center; + line-height: 24px; + color: #FFFFFF; + font-weight: bold; + } + + .star2 { + .star1; + background-image: url("~@/assets/highQuality/star2.png"); + background-size: 100% 100%; + background-repeat: no-repeat; + } + + .star3 { + .star1; + background-image: url("~@/assets/highQuality/star3.png"); + background-size: 100% 100%; + background-repeat: no-repeat; + } + } + + &>p:last-child { + border-bottom: 0; + } + } + } + + .right-learn-rank-content:last-child { + margin-top: 16px; + } + } + } + + .right-card { + width: 100%; + + .right-card-title { + text-align: center; + margin: 36px 0 5px; + + &>span { + font-weight: bold; + font-family: '黑体'; + font-size: 23px; + line-height: 24px; + color: #fd4e4f; + letter-spacing: 1px; + } + } + + .right-card-title-line { + width: 100%; + height: 6px; + background: linear-gradient(to right, #fe837e, #fcc767) no-repeat center; + } + + .right-card-title-click { + cursor: pointer; + } + + .right-card-title-click:hover { + &>span { + background-image: linear-gradient(to right, #fe837e, #fcc767); + -webkit-background-clip: text; + background-clip: text; + color: transparent; + transition: all .3s + } + } + + .right-card-content { + height: 80px; + width: 100%; + border: 1px solid #e8e8e8; + border-radius: 8px; + display: flex; + justify-content: flex-start; + margin-top: 15px; + box-shadow: 0 0 8px -2px #d1d1d1; + + .right-card-content-img { + padding: 17px 18px; + + &>img { + height: 46px; + width: 46px; + } + } + + .right-card-content-right { + padding: 17px 0; + + .right-card-content-title { + display: block; + color: #848484; + font-size: 14px; + line-height: 14px; + letter-spacing: 0.5px; + } + + .right-card-content-content { + font-weight: bold; + margin-top: 6px; + + .right-card-content-number { + font-size: 28px; + font-family: 'Consolas'; + line-height: 28px; + } + + .number-green { + color: #26beb9; + } + + .number-blue { + color: #76a3ff; + } + + .right-card-content-unit { + font-size: 18px; + margin-left: 2px; + vertical-align: bottom; + color: #848484; + } + } + + } + } + + .right-card-content-pointer { + cursor: pointer; + } + } + } + } + + .bottom-global { + margin: 0 0 84px 0; + } + } +} + +.h-topic-home-modal .ant-modal-content { + border-radius: 8px; +} + +.h-topic-home-modal .ant-modal-content .ant-modal-header { + border-top-left-radius: 8px; + border-top-right-radius: 8px; + background: #e32f2f; + padding: 0; + height: 45px; + + .bottom-modal-header { + display: flex; + justify-content: left; + align-items: center; + padding: 0 20px; + + .bottom-modal-headertext { + font-size: 21px; + font-family: '黑体'; + color: #fff; + width: 100%; + margin-left: 8px; + } + } +} + +.h-topic-home-modal .ant-modal-content .ant-modal-body { + border-bottom-left-radius: 8px; + border-bottom-right-radius: 8px; + background: #eeeeee; + padding: 16px; +} + +.h-topic-home-modal .ant-modal-content .ant-modal-body .bottom-modal-body { + .ant-form-item { + margin-bottom: 16px; + } + + .ant-form-item textarea { + resize: none; + } + + .ant-form-item-label>label { + font-size: 17px; + font-family: '黑体'; + color: #939393; + } + + .radio-content { + font-size: 17px; + font-family: '黑体'; + color: #939393; + } + + .radio-content:last-child { + margin-right: 0; + } + + .radio-right59 { + margin-right: 59px; + } + + .radio-right41 { + margin-right: 41.5px; + } + + .ant-input { + color: #333333; + } + + .bottom-modal-submit { + text-align: center; + + .submit-button { + background: #e32f2f; + border-color: #e32f2f; + } + } +} \ No newline at end of file diff --git a/src/pages/HighQualityOperation/Home/index.tsx b/src/pages/HighQualityOperation/Home/index.tsx new file mode 100644 index 0000000..9553dd3 --- /dev/null +++ b/src/pages/HighQualityOperation/Home/index.tsx @@ -0,0 +1,677 @@ +import React, { useEffect, useState } from 'react'; +import './index.less'; +import { Button, Carousel, Col, Form, Input, List, Modal, Radio, Row, Space, Spin, Tag, message } from 'antd'; +import header from '@/assets/highQuality/header.jpg' +import flag from '@/assets/highQuality/flag.png' +import project_left from '@/assets/highQuality/project_left.jpg' +import material from '@/assets/highQuality/material.jpg' +import bottom_button from '@/assets/highQuality/bottom_button.png' +import partymember from '@/assets/highQuality/partymember.png' +import partybranch from '@/assets/highQuality/partybranch.png' +import card_img_2 from '@/assets/highQuality/card_img_2.png' +import card_img_3 from '@/assets/highQuality/card_img_3.png' +import card_img_4 from '@/assets/highQuality/card_img_4.png' +import card_img_5 from '@/assets/highQuality/card_img_5.png' +import card_img_6 from '@/assets/highQuality/card_img_6.png' +import card_img_7 from '@/assets/highQuality/card_img_7.png' +import card_img_8 from '@/assets/highQuality/card_img_8.png' +import card_img_9 from '@/assets/highQuality/card_img_9.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 { downloadVideo, getClassroomList, getHomeBanner, getHomeContact, getHomeGraceful, getHomeProject, getHomeRight, getPersonScoreSort, getProvinceScoreSort, submitAdvice } from './service'; +import { chunk, formatTime, getImageUrl, isEmpty, managerAuthority } from '../utils'; +import ExtendUpload from '@/utils/ExtendUpload'; +import { getSessionUserData } from '@/utils/session'; +import ReactPlayer from "react-player/file"; + +const formItemLayout = { + labelCol: { span: 5 }, + wrapperCol: { span: 17 }, +}; + +//卡片头 +const LeftCardTop = (props: any) => { + return ( +
+
+ {props.title} +
+
+
+ +
+ {props.url &&
window.open(props.url)}> + 更多 + >>> +
} +
+
+ ) +} + +//右侧专业线内容 +const RightDisplayContent = (props: any) => { + const displayContentClick = () => { + window.open("/highQualityOperation/partyBranch"); + } + return ( + props.data?.length > 0 ? ( +
displayContentClick()}> + +
+
+ {props.data[props.index].dataName} +
+
+ {props.data[props.index].dataValue} + {props.data[props.index].dataType} +
+
+
+ ) : null + ) +} +//右侧专业线卡片标题 +const RightCardTitle = (props: any) => { + return ( + <> +
{ }} > + {props.title} +
+
+ + ) +} +//右侧专业线卡片内容 +const RightCardContent = (props: any) => { + return ( + props.data?.length > 0 ? ( +
+
+ +
+
+ {props.data[props.index].dataName} +
+ {props.data[props.index].dataValue} + {props.data[props.index].dataType} +
+
+
+ ) : null + ) +} +//接口人信息卡片内容 +const BottomCardContent = (props: any) => { + return ( + +
+
{props.data.contactUnit}
+
+
+
+ {props.data.contactName} +
+ props.onClick()} /> +
+
+ {/*
+ {props.data.remark} +
*/} +
+

邮箱：{props.data.contactEmail}

+

电话：{props.data.contactMobiphone}

+

部门：{props.data.contactDepartment}

+
+
+
+
+ + ) +} +//接口人信息-我要提意见Modal +const CommentModal = (props: any) => { + const { TextArea } = Input; + const [form] = Form.useForm(); + const [modalLoading, setModalLoading] = useState(false); + const onCancel = () => { + props.closeModal(); + } + + const onSubmit = () => { + form.submit(); + } + + const onFinish = async (values: any) => { + setModalLoading(true); + const params = { + ...values, + } + await submitAdvice(params).then(res => { + if (res?.code == 200) { + message.success("提交成功"); + onCancel(); + } + }).finally(() => { + setModalLoading(false); + }) + }; + useEffect(() => { + form.setFieldsValue({ + ...props.data, + name: props.userData?.fullName, + company: props.userData?.organizationName, + }) + }, [props.data?.id]) + + return ( + + +
+ 我要提意见 +
+ + } + visible={props.visible} + onCancel={onCancel} + destroyOnClose + closable={false} + footer={null} + centered + maskStyle={{ backgroundColor: 'rgba(0, 0, 0, 0.3)' }} + width={800} + > + +
+
+ + + + 采购需求提出 + 采购方案编制和实施 + 采购合同上架 + 采购合同执行及评价 + 物资到货与调拨 + 退库和物资处置 + + + +