diff --git a/src/military/achievement.js b/src/military/achievement.js index b0654a836..c8929bcaf 100644 --- a/src/military/achievement.js +++ b/src/military/achievement.js @@ -17,6 +17,10 @@ const Overview = Loadable({ loading: Loading, }); +const AchivChart = Loadable({ + loader: () => import("./achievement/achivChart"), + loading: Loading, +}); const NoticeList = Loadable({ loader: () => import("./achievement/noticeList"), @@ -42,6 +46,13 @@ class Index extends Component { )} > + ( + + )} + > + ( diff --git a/src/military/achievement/achivChart/index.jsx b/src/military/achievement/achivChart/index.jsx new file mode 100644 index 000000000..eb3b4b41e --- /dev/null +++ b/src/military/achievement/achivChart/index.jsx @@ -0,0 +1,113 @@ +import React, { useEffect } from 'react'; +import echarts from 'echarts'; +import './index.scss'; +import topCountPng from '../image/left_top_icon.png'; +import botCountPng from '../image/left_bot_icon.png'; + +function AchivChart() { + useEffect(() => { + // 基于准备好的dom，初始化echarts实例 + const myChart = echarts.init(document.getElementById('chartBox')); + + // 指定图表的配置项和数据 + const option = { + title: { + text: '成果数量占比统计', + left: 'center', + top: 350, + textStyle: { + fontSize: 18 + } + }, + legend: { + orient: 'vertical', + right: 30, + top: 85, + itemGap: 16, + itemWidth: 32, + itemHeight: 24, + textStyle: { + fontSize: 16 + } + }, + color: [ + 'rgba(183, 88, 255, 1)', + 'rgba(255, 190, 56, 1)', + 'rgba(240, 68, 95, 1)', + 'rgba(88, 113, 255, 1)', + 'rgba(36, 185, 168, 1)', + 'rgba(88, 183, 255, 1)' + ], + series: [ + { + name: 'Nightingale Chart', + type: 'pie', + radius: [35, 160], + center: ['150', '50%'], + roseType: 'area', + clockwise: true, + startAngle: 45, + label: { + show: false + }, + itemStyle: { + borderRadius: 0 + }, + data: [ + { value: 19, name: '开源项目 10%' }, + { value: 28, name: '创客任务 20%' }, + { value: 32, name: '开放竞赛 25%' }, + { value: 45, name: '科研成果 32%' }, + { value: 52, name: '装备成果 40%' }, + { value: 66, name: '其他成果 50%' } + ] + } + ], + graphic: { + type: 'text', + left: '133', + top: 'middle', + style: { + text: '成果\n类型', + fill: '#333', + fontSize: 18, + fontWeight: 'bold', + verticalAlign: 'middle', + lineHeight: 24 + } + } + }; + + // 使用刚指定的配置项和数据显示图表。 + myChart.setOption(option); + }, []); + + return ( +
+
+
+
+ icon +
+
+

5896

+

收录成果数

+
+
+
+
+ icon +
+
+

159

+

成果总浏览数

+
+
+
+
+
+
+ ) +} + +export default AchivChart; diff --git a/src/military/achievement/achivChart/index.scss b/src/military/achievement/achivChart/index.scss new file mode 100644 index 000000000..99f7b4235 --- /dev/null +++ b/src/military/achievement/achivChart/index.scss @@ -0,0 +1,125 @@ + +#mainContent { + margin: 40px auto 0 auto; + width: 1200px; + height: 450px; + display: flex; + background:linear-gradient(97.82deg,#f3f5f8 0%,rgba(255, 255, 255, 0) 100%); + box-shadow:8px 6px 18px rgba(171, 202, 255, 0.24) inset; + + #leftBox { + width: 500px; + height: 450px; + position: relative; + .count-top { + display: flex; + width: 180px; + height: 95px; + position: absolute; + top: 87px; + right: 130px; + background:#f7faff; + box-sizing: border-box; + border:1px solid; + border-color:rgba(13, 94, 248, 0.16); + border-radius:6px; + .count-icon { + width: 80px; + height: 95px; + display: flex; + justify-content: center; + align-items: center; + img { + width: 36px; + height: 36px; + } + } + .count-main { + width: 100px; + height: 95px; + display: flex; + flex-direction: column; + #count-num { + width: 100%; + height: 55px; + line-height: 55px; + // font-family:Alibaba PuHuiTi; + font-weight:600; + color:#283444; + font-size:24px; + letter-spacing:2px; + } + // .count-title { + // width: 100%; + // height: 40px; + // line-height: 40px; + // // font-family:Alibaba PuHuiTi; + // color:#445a7a; + // font-size:15px; + // letter-spacing:50px; + // } + } + } + .count-bot { + display: flex; + width: 180px; + height: 95px; + position: absolute; + top: 227px; + right: 130px; + background:#f7faff; + box-sizing: border-box; + border:1px solid; + border-color:rgba(13, 94, 248, 0.16); + border-radius:6px; + .count-icon { + width: 80px; + height: 95px; + display: flex; + justify-content: center; + align-items: center; + img { + width: 36px; + height: 36px; + } + } + .count-main { + width: 100px; + height: 95px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + #count-num { + width: 100%; + height: 55px; + // font-family:Alibaba PuHuiTi; + font-weight:600; + color:#283444; + font-size:24px; + line-height: 30px; + letter-spacing:2px; + } + .count-title { + width: 100%; + height: 40px; + // font-family:Alibaba PuHuiTi; + color:#445a7a; + font-size:15px; + line-height: 20px; + letter-spacing:1px; + } + } + } + } + #chartBox { + width: 500px; + height: 450px; + } + #blankBox { + width: 200px; + height: 450px; + } +} + + diff --git a/src/military/achievement/achivList/index.jsx b/src/military/achievement/achivList/index.jsx new file mode 100644 index 000000000..34d641521 --- /dev/null +++ b/src/military/achievement/achivList/index.jsx @@ -0,0 +1,12 @@ +import React, { useEffect } from 'react'; +import './index.scss'; + +function AchivList() { + useEffect(() => { + console.log('进来成果列表页面了') + }, []); + + return
成果列表页面。。。
; +} + +export default AchivList; diff --git a/src/military/achievement/achivList/index.scss b/src/military/achievement/achivList/index.scss new file mode 100644 index 000000000..34bedafa5 --- /dev/null +++ b/src/military/achievement/achivList/index.scss @@ -0,0 +1,5 @@ + +#listBox { + width: 800px; + height: 600px; +} \ No newline at end of file diff --git a/src/military/achievement/image/banner_new.svg b/src/military/achievement/image/banner_new.svg new file mode 100644 index 000000000..10ea325cc --- /dev/null +++ b/src/military/achievement/image/banner_new.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/military/achievement/image/left_bot_icon.png b/src/military/achievement/image/left_bot_icon.png new file mode 100644 index 000000000..45a5d4045 Binary files /dev/null and b/src/military/achievement/image/left_bot_icon.png differ diff --git a/src/military/achievement/image/left_top_icon.png b/src/military/achievement/image/left_top_icon.png new file mode 100644 index 000000000..1df7cd381 Binary files /dev/null and b/src/military/achievement/image/left_top_icon.png differ diff --git a/src/military/achievement/noticeList/index.jsx b/src/military/achievement/noticeList/index.jsx index e094ad4cc..6d298658a 100644 --- a/src/military/achievement/noticeList/index.jsx +++ b/src/military/achievement/noticeList/index.jsx @@ -5,7 +5,6 @@ import ItemList from '../components/itemList'; import { achieveSource } from '../static'; import Nodata from '../../../forge/Nodata'; import Loading from "../../../Loading"; -import noticePng from '../image/banner.png'; import { getNoticeList } from '../api'; import './index.scss'; @@ -201,7 +200,6 @@ export default (props) => { return ( - 图片加载失败
diff --git a/src/military/achievement/overview/index.jsx b/src/military/achievement/overview/index.jsx index e094ad4cc..27c8ccee1 100644 --- a/src/military/achievement/overview/index.jsx +++ b/src/military/achievement/overview/index.jsx @@ -1,227 +1,47 @@ import React, { useEffect, useState } from 'react'; -import classNames from 'classnames'; -import { Pagination, Icon, Input, Affix, } from 'antd'; -import ItemList from '../components/itemList'; -import { achieveSource } from '../static'; -import Nodata from '../../../forge/Nodata'; -import Loading from "../../../Loading"; -import noticePng from '../image/banner.png'; -import { getNoticeList } from '../api'; - +import noticePng from '../image/banner_new.svg'; import './index.scss'; -const Search = Input.Search; +import AchivChart from '../achivChart'; +import NoticeList from '../noticeList'; export default (props) => { + //记得打开，关闭调试 + const [showChart, setShowChart] = useState(true); + const [showList1, setShowList1] = useState(false); + const [selectedButton, setSelectedButton] = useState('chart'); - const [tab, setTab] = useState('0'); - const [loading, setLoading] = useState(false); - - const [title, setTitle] = useState(undefined); - const [orderBy, setOrderBy] = useState('publishDateDesc'); - - const [curPage, setCurPage] = useState(1); - const [total, setTotal] = useState(0); - const [noticeList, setNoticeList] = useState([]); - - const [callList, setCallList] = useState([]); - const [changeList, setChangeList] = useState([]); - const [checkList, setCheckList] = useState([]); - const [abandonList, setAbandonList] = useState([]); - const [competitionList, setCompetitionList] = useState([]); - const [dealList, setDealList] = useState([]); - - useEffect(() => { - setLoading(true); - if (tab === '0' || tab === '7') { - const params = { - orderBy, - curPage: 1, - isChecked: 1, - pageSize: 5, - status: 1, - type: 7, - title, - flag: 1, //后台管理查询：2；前台展示：1 - }; - getNoticeList({ ...params,achievementSource:'开源项目' }).then(data => { - setCallList(data.rows); - setLoading(false); - }); - getNoticeList({...params,achievementSource:'创客任务'}).then(data => { - setChangeList(data.rows); - }); - getNoticeList({ ...params,achievementSource:'开放竞赛' }).then(data => { - setCompetitionList(data.rows); - }); - getNoticeList({ ...params,achievementSource:'科研成果' }).then(data => { - setCheckList(data.rows); - }); - getNoticeList({ ...params,achievementSource:'其他' }).then(data => { - setAbandonList(data.rows); - setLoading(false); - }); + const handleButtonClick = (button) => { + setSelectedButton(button); + if (button === 'chart') { + showChartComponent(); } else { - const params = { - orderBy, - curPage, - isChecked: 1, - pageSize: 10, - status: 1, - title, - type: 7, - achievementSource:tab, - flag: 1, //后台管理查询：2；前台展示：1 - }; - getNoticeList(params).then(data => { - setNoticeList(data.rows); - setTotal(data.total); - setLoading(false); - }) + showListComponent(); } - }, [tab, title, orderBy, curPage]); + }; - function changeSort(sortType) { - setOrderBy(sortType); - setCurPage(1); - } + const showChartComponent = () => { + setShowChart(true); + setShowList1(false); + }; - function noticeClick(id) { - props.history.push(`/achievement/noticeDetail/${id}`); - } - - function sortNav() { - return
- 搜索} - onSearch={(value) => setTitle(value)} /> -
-
{ changeSort('publishDateDesc') }}>时间降序
- | -
{ changeSort('publishDateAsc') }}>时间升序
-
-
- } - - function handleClick(e) { - setTab(e.key); - setCurPage(1); - setTitle(''); - setOrderBy('publishDateDesc'); - } - - function click(e){ - setTab(e); - setCurPage(1); - setTitle(''); - setOrderBy('publishDateDesc'); - } - - function cont(param, titleStr, key, svgStr) { - return -
-
- - {titleStr} -
- {param.length === 5 && { handleClick({ key: key }) }}>查看更多 } -
- {param.length > 0 ? : } - - } - - // 成果库具体jsx渲染函数 - function content() { - if (tab === '0') { - if(callList.length === 0 && changeList.length === 0 && competitionList.length === 0 && checkList.length === 0 && abandonList.length === 0){ - return - }else{ - return - {cont(callList, "开源项目", '开源项目', "iconfont icon-zhaobiaogonggao")} - {cont(changeList, "创客任务", '创客任务', "iconfont icon-gengzhenggonggao")} - {cont(competitionList, "开放竞赛", '开放竞赛', "iconfont icon-chengjiaogonggao")} - {cont(checkList, "科研成果", '科研成果', "iconfont icon-zhongbiaogonggao")} - {cont(abandonList, "其他", '其他', "iconfont icon-feibiaogonggao")} - - } - } else { - let titleStr; - let svgStr; - switch (tab) { - case '开源项目': - titleStr = "开源项目"; - svgStr = "iconfont icon-gengzhenggonggao" - break; - case '创客任务': - titleStr = "创客任务"; - svgStr = "iconfont icon-zhongbiaogonggao" - break; - case '开放竞赛': - titleStr = "开放竞赛"; - svgStr = "iconfont icon-chengjiaogonggao" - break; - case '科研成果': - titleStr = "科研成果"; - svgStr = "iconfont icon-feibiaogonggao" - break; - case '其他': - titleStr = "其他"; - svgStr = "iconfont icon-zhaobiaogonggao" - break; - } - return -
-
- - {titleStr} -
-
- - {total > 0 ? total> 10 ?
- { setCurPage(page) }} - current={curPage} - total={total} - showTotal={total => `共 ${total} 条`} - /> -
: "" : } - - } - } + const showListComponent = () => { + setShowChart(false); + setShowList1(true) + }; return ( - 图片加载失败 -
-
- -
-
    -
  • click('0')}>成果来源
    • - { - achieveSource.map(item=>{ - return
  • click(item.code)} key={item.code}>{item.name}
    • - }) - } -
-
- -
- {sortNav()} - {loading ? : content()} -
+ +
+ 图片加载失败 +
+ +
+ {showChart && } + {showList1 && < NoticeList />} + ) } \ No newline at end of file diff --git a/src/military/achievement/overview/index.scss b/src/military/achievement/overview/index.scss index 2c2eabe92..7b25048a3 100644 --- a/src/military/achievement/overview/index.scss +++ b/src/military/achievement/overview/index.scss @@ -1,215 +1,41 @@ -.notice-list{ - .ant-tabs { - .ant-tabs-left-bar{ - border: 1px solid #E5E5E5; - .ant-tabs-nav-container{ - margin-right: 0; - } - .ant-tabs-nav-wrap{ - margin-right: 0; - } - - svg{ - margin-right:.75em; - } - } - .ant-tabs-tab{ - display: flex; - justify-content: start; - align-items: center; - margin-bottom: 0.5rem; - width: 13.5rem; - height: 2.8125rem; - background: #fff; - font-size: 1.125rem; - - } - .ant-tabs-left-content{ - border: 0; - } - .ant-tabs-tab-active{ - background: #1890FF; - color: #fff; - } - .ant-tabs-ink-bar{ - display: none !important; - } - } - - .notice-sort-nav{ - display: flex; - justify-content: space-between; - padding: .3rem 2rem 1.5rem; - margin: 0px -1.25rem; - border-bottom: 1px solid #E0E0E0; - .ant-input:hover{ - border-color: #4154f1; - } - .ant-btn-primary{ - background-color: #4154f1; - &:hover{ - opacity: 0.8; - } - } - } - - .notice-center-content{ - padding:1.25rem; - background: #fff; - flex: auto; - } - - .item-head-title{ - display: flex; - justify-content: space-between; - align-items: center; - padding: 1.25rem 0 .6rem 0; - .item-head-title-content{ - display: flex; - align-items: center; - font-size: 1rem; - span{ - font-weight: bold; - } - i{ - margin-right: .25em; - color: #4154f1; - } - } - } - - .ant-input-group-addon{ - border: 0 !important; - } - - .item-head-title{ - border-bottom: 1px solid #E5E5E5; - } - -} - -.center-right-but{ - caret-color: rgba(0, 0, 0, 0); - .piece{ - margin:0 .8rem; - color: #aaa; - } - .sortLink{ - color: #333; - cursor: pointer; - &:hover{ - color: #4154f1; - } - &.active{ - color: #4154f1; - } - } -} - -.body{ +.banner { display: flex; - justify-content: space-between; - margin-top: -20px; - - .navigationMenu{ - margin-right: 20px; - width: 20.8em; - caret-color: rgba(0, 0, 0, 0); - .menu-ul:last-child{ - margin-top: 12px; - } + justify-content: center; + align-items: center; + height: 622px; + position: relative; + .banner-img { + width: 1200px; + height: 572px; + max-width: 100%; + max-height: 100%; } - - .none_p_title{ - text-align: center; - } -} - -.menu-ul{ - background-color: white; - margin-bottom: 12px; - border-radius:2px; - - .MenuTitle{ - border-bottom: 1px solid #E0E0E0; - - span{ - display: block; + .button-container { + height: 50px; + width: 520px; + display: flex; + justify-content: center; + position: absolute; + bottom: 0px; + .button { width: 50%; - height: 100%; - cursor: pointer; - border-bottom: 0px solid; - i{ - color: #afaaae; - } + background:#f6f7fa; + border:2px solid; + border-color:#ffffff; + border-radius:4px 0px 0px 4px; + box-shadow:0px 0px 15px rgba(30, 47, 162, 0.09); } - - span:hover{ - color: #4154f1; - .iconfont{ - color: #4154f1 !important; - } + .button:hover { + background:#2a3ee9; + color: white; } - } - - li{ - padding:0px 0px 0px 20px; - position: relative; - height: 62px; - line-height: 62px; - font-size: 16px; - color: #333; - span{ - display: block; - height: 62px; - cursor: pointer; - border-bottom: 1px solid #eee; + .button:active { + background:#2a3ee9; + color: white; } - - &:last-child > span{ - border-bottom: none; + .button.selected { + background:#2a3ee9; + color: white; } } - - li:hover{ - background: #fafafa; - } - - .active{ - background-color: #fafafa; - & ::before{ - position: absolute; - left: 0px; - top: 15px; - width: 6px; - content: ''; - height: 30px; - background: #4154f1; - } - } - - & i{ - margin-right: 5px; - } } - -.ant-input-group-addon .ant-btn-lg { - height: 40px; -} - -.edu-txt-center .ant-pagination { - margin: 2rem auto; - text-align: center; - .ant-pagination-item:focus, .ant-pagination-item:hover, .ant-pagination-item-active, .ant-pagination-prev:hover a, .ant-pagination-next:hover a, .ant-pagination-options-quick-jumper input:focus, .ant-pagination-options-quick-jumper input:hover{ - border-color: #4154f1; - } - .ant-pagination-disabled{ - & a, & :hover a, & :focus a, & .ant-pagination-item-link, &:hover .ant-pagination-item-link , &:focus .ant-pagination-item-link { - color: rgba(0, 0, 0, 0.25) !important; - border-color: #d9d9d9; - } - } - .ant-pagination-item-active a{ - color: #4154f1 - } -} \ No newline at end of file