新增成果概览页面

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 {
             )}
           ></Route>
 
+          <Route
+            path="/achievement/chart"
+            render={(props) => (
+              <AchivChart {...this.props} {...props} />
+            )}
+          ></Route>
+
           <Route
             path="/achievement/list"
             render={(props) => (

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 (
+    <div id='mainContent'>
+      <div id='leftBox'>
+        <div className='count-top'>
+          <div className="count-icon">
+            <img alt="icon" src={topCountPng}></img>
+          </div>
+          <div className='count-main'>
+            <p id='count-num'>5896</p>
+            <p className='count-title'>收录成果数</p>
+          </div>
+        </div>
+        <div className='count-bot'>
+          <div className="count-icon">
+            <img alt="icon" src={botCountPng}></img>
+          </div>
+          <div className='count-main'>
+            <p id='count-num'>159</p>
+            <p className='count-title'>成果总浏览数</p>
+          </div>
+        </div>
+      </div>
+      <div id="chartBox"></div>
+      <div id="blankBox"></div>
+    </div>
+  )
+}
+
+export default AchivChart;

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

src/military/achievement/achivList/index.jsx

@@ -0,0 +1,12 @@
+import React, { useEffect } from 'react';
+import './index.scss';
+
+function AchivList() {
+  useEffect(() => {
+    console.log('进来成果列表页面了')
+  }, []);
+
+  return <div id="listBox">成果列表页面。。。</div>;
+}
+
+export default AchivList;

src/military/achievement/achivList/index.scss

@@ -0,0 +1,5 @@
+
+#listBox {
+    width: 800px;
+    height: 600px;
+}

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 (
     <React.Fragment>
-      <img alt="图片加载失败" src={noticePng} width="100%"></img>
       <div className="centerbox notice-list clearfix">
         <div className="body">
         <Affix className="affix-list-left" offsetTop={90}>

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 <div className="notice-sort-nav">
-      <Search
-        size="large"
-        maxLength={20}
-        style={{ width: "56%" }}
-        placeholder="输入标题关键字，不能超过20字符"
-        enterButton={<span><Icon type="search" className="mr5" /> 搜索</span>}
-        onSearch={(value) => setTitle(value)} />
-      <div className="center-right-but">
-        <div className={classNames({ sortLink: true, active: orderBy === 'publishDateDesc' })} onClick={() => { changeSort('publishDateDesc') }}>时间降序<Icon type="arrow-down" /></div>
-        <span className="piece">|</span>
-        <div className={classNames({ sortLink: true, active: orderBy === 'publishDateAsc' })} onClick={() => { changeSort('publishDateAsc') }}>时间升序<Icon type="arrow-up" /></div>
-      </div>
-    </div>
-  }
-
-  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 <React.Fragment>
-      <div className="item-head-title">
-        <div className="item-head-title-content">
-          <i className={svgStr}></i>
-          <span>{titleStr}</span>
-        </div>
-        {param.length === 5 && <span className="link" onClick={() => { handleClick({ key: key }) }}>查看更多 <Icon type="arrow-right" /></span>}
-      </div>
-      {param.length > 0 ? <ItemList
-        list={param}
-        itemClick={noticeClick}
-      /> : <Nodata _html="暂无数据" />}
-    </React.Fragment>
-  }
-
-  // 成果库具体jsx渲染函数
-  function content() {
-    if (tab === '0') {
-      if(callList.length === 0 && changeList.length === 0 && competitionList.length === 0 && checkList.length === 0 && abandonList.length === 0){
-        return <React.Fragment><Nodata _html="暂无数据" /></React.Fragment>
-      }else{
-        return <React.Fragment>
-          {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")}
-        </React.Fragment>
-      }
-    } 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 <React.Fragment>
-        <div className="item-head-title">
-          <div className="item-head-title-content">
-            <i className={svgStr}></i>
-            <span>{titleStr}</span>
-          </div>
-        </div>
-        <ItemList
-          list={noticeList}
-          itemClick={noticeClick}
-        />
-        {total > 0 ? total> 10 ? <div className="edu-txt-center mt30 mb30">
-          <Pagination
-            showQuickJumper
-            onChange={(page) => { setCurPage(page) }}
-            current={curPage}
-            total={total}
-            showTotal={total => `共 ${total} 条`}
-          />
-        </div> : "" : <Nodata _html="暂无数据" />}
-      </React.Fragment>
-    }
-  }
+  const showListComponent = () => {
+    setShowChart(false);
+    setShowList1(true)
+  };
 
   return (
     <React.Fragment>
-      <img alt="图片加载失败" src={noticePng} width="100%"></img>
-      <div className="centerbox notice-list clearfix">
-        <div className="body">
-        <Affix className="affix-list-left" offsetTop={90}>
-          <div className="navigationMenu">
-            <ul className="menu-ul">
-              <li className="MenuTitle" onClick={()=>click('0')}><span><i className="iconfont icon-xiangmugonggao"></i>成果来源</span></li>
-              {
-                achieveSource.map(item=>{
-                  return <li className={tab == item.code ? "active" : ""} onClick={()=>click(item.code)} key={item.code}><span>{item.name}</span></li>
-                })
-              }
-            </ul>
-          </div>
-          </Affix>
-          <div className="notice-center-content">
-            {sortNav()}
-            {loading ? <Loading /> : content()}
-          </div>
+
+      <div className="banner">
+        <img alt="图片加载失败" src={noticePng} className="banner-img"></img>
+        <div className="button-container">
+          <button className={`button ${selectedButton === 'chart' ? 'selected' : ''}`} onClick={() => handleButtonClick('chart')}>成果概览</button>
+          <button className={`button ${selectedButton === 'list' ? 'selected' : ''}`} onClick={() => handleButtonClick('list')}>成果列表</button>        
         </div>
       </div>
+      {showChart && <AchivChart />}
+      {showList1 && < NoticeList />}
+
     </React.Fragment>
   )
 }

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
-  }
-}