甘特图+代码质量分析

src/forge/Gantt/Index.jsx

@@ -0,0 +1,107 @@
+import React, { useEffect } from 'react';
+import * as echarts from 'echarts';
+import './index.scss';
+
+function Index(props) {
+  useEffect(()=>{
+    Init();
+  },[])
+
+  function Init() {
+    var myCharts = document.getElementById('main');
+    var myEcharts = echarts.init(myCharts);
+    var option = {
+      title: {
+        text: '项目实施进度表',
+        left: 10
+      },
+      legend: {
+        y: 'bottom',
+        data: ['计划时间', '实际时间']  //修改的地方1
+      },
+      grid: {
+        containLabel: true,
+        left: 20
+      },
+      xAxis: {
+        type: 'time'
+      },
+      yAxis: {
+        data: ['任务一', '任务二', '任务三', '任务四', '任务五', '任务六', '任务七']
+      },
+      tooltip: {
+        trigger: 'axis',
+        formatter: function(params) {
+          var res = params[0].name + "</br>"
+          var date0 = params[0].data;
+          var date1 = params[1].data;
+          var date2 = params[2].data;
+          var date3 = params[3].data;
+          date0 = date0.getFullYear() + "-" + (date0.getMonth() + 1) + "-" + date0.getDate();
+          date1 = date1.getFullYear() + "-" + (date1.getMonth() + 1) + "-" + date1.getDate();
+          date2 = date2.getFullYear() + "-" + (date2.getMonth() + 1) + "-" + date2.getDate();
+          date3 = date3.getFullYear() + "-" + (date3.getMonth() + 1) + "-" + date3.getDate();
+          res += params[0].seriesName + "~" + params[1].seriesName + ":</br>" + date0 + "~" + date1 + "</br>"
+          res += params[2].seriesName + "~" + params[3].seriesName + ":</br>" + date2 + "~" + date3 + "</br>"
+          console.log(params[0]);
+          return res;
+        }
+      },
+      series: [
+        {
+          name: '计划开始时间',
+          type: 'bar',
+          stack: 'test1',
+          itemStyle: {
+            normal: {
+              color: 'rgba(0,0,0,0)'
+            }
+          },
+          data: []
+        },
+        {
+          name: '计划时间',
+          type: 'bar',
+          stack: 'test1',
+          //修改地方2
+          itemStyle: {
+            normal: {
+              color: '#F98563'
+            }
+          },
+          data: []
+        },
+        {
+          name: '实际开始时间',
+          type: 'bar',
+          stack: 'test2',
+          itemStyle: {
+            normal: {
+              color: 'rgba(0,0,0,0)'
+            }
+          },
+          data: []
+        },
+        {
+          name: '实际时间',
+          type: 'bar',
+          stack: 'test2',
+          //修改地方3
+          itemStyle: {
+              normal: {
+                  color: '#A2E068'
+              }
+          },
+          data: []
+        }
+      ]
+    };
+    myEcharts.setOption(option);
+  }
+  return(
+    <div className="ganttBox">
+      <div id="main" style={{height:"500px"}}></div>
+    </div>
+  )
+}
+export default Index;

src/forge/Gantt/index.scss

@@ -0,0 +1,5 @@
+.ganttBox{
+  width: 1200px;
+  margin:0px auto;
+  padding:22px 0px;
+}

src/forge/Main/Detail.js

@@ -102,6 +102,14 @@ const Contribute = Loadable({
   loader: () => import('./sub/Contribute'),
   loading: Loading,
 })
+const Gantt = Loadable({
+  loader: () => import('../Gantt/Index'),
+  loading: Loading,
+})
+const Sonar = Loadable({
+  loader: () => import('../Sonar/Index'),
+  loading: Loading,
+})
 
 const CoderRootCommit = Loadable({
 	loader: () => import('./CoderRootCommit'),
@@ -152,6 +160,10 @@ function checkPathname(projectsId,owner,pathname){
       name="devops"
     }else if(url.indexOf(`/source`)>-1){
       name="source"
+    }else if(url.indexOf(`/gantt`)>-1){
+      name="gantt"
+    }else if(url.indexOf(`/sonar`)>-1){
+      name="sonar"
     }
   }
   return name;
@@ -669,6 +681,20 @@ class Detail extends Component {
                   (props) => (<MergeIndexDetail {...this.props} {...props} {...this.state} {...common} />)
                 }
               ></Route>
+
+              {/* 甘特图 */}
+              <Route path="/projects/:owner/:projectsId/gantt"
+                render={
+                  (props) => (<Gantt {...this.props} {...props} {...this.state} {...common} />)
+                }
+              ></Route>
+              {/* 甘特图 */}
+              <Route path="/projects/:owner/:projectsId/sonar"
+                render={
+                  (props) => (<Sonar {...this.props} {...props} {...this.state} {...common} />)
+                }
+              ></Route>
+
               <Route path="/projects/:owner/:projectsId/watchers"
                 render={
                   (props) => (<WatchUsers {...this.props} {...props} {...this.state} {...common} />)

src/forge/Main/Index.js

@@ -265,8 +265,8 @@ class Index extends Component {
           <img src={banner} alt=""/>
           <div className="bannerBox">
             <div class="subjectleft">
-              <span>头歌开源</span>
+              <span>开源社区</span>
-              <span>让师姐开心的玩开源</span>
+              <span>面向高校的教学开源</span>
             </div>
             <Button type={"primary"} size={"large"}>
               <Link to={`/projects/deposit/new`}>新建项目</Link>

src/forge/Main/sub/DetailBanner.jsx

@@ -113,6 +113,24 @@ function DetailBanner({ history,list , owner , projectsId , isManager , url , pa
                       </Link>
                     </li>
                   }
+                  {
+                  item.menu_name === "gantt" &&
+                  <li className={pathname === "gantt" ? "active" : ""}>
+                    <Link to={`/projects/${owner}/${projectsId}/gantt`}>
+                      <i className={url && url.indexOf("/gantt") > 0 ? "iconfont icon-zuzhi color-grey-3 mr5 font-14":"iconfont icon-zuzhi color-grey-6 font-14 mr5"}></i>
+                      <span>甘特图</span>
+                    </Link>
+                  </li>
+                  }
+                  {
+                  item.menu_name === "sonar" &&
+                  <li className={pathname === "sonar" ? "active" : ""}>
+                    <Link to={`/projects/${owner}/${projectsId}/sonar`}>
+                      <i className={url && url.indexOf("/sonar") > 0 ? "iconfont icon-tijiao color-grey-3 mr5 font-18":"iconfont icon-tijiao color-grey-6 font-18 mr5"}></i>
+                      <span>代码质量分析</span>
+                    </Link>
+                  </li>
+                  }
                 </React.Fragment>
               )
             })

src/forge/Sonar/Index.jsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import sonar from '../Images/sonar.png';
+import './index.scss';
+
+function Index(props) {
+  return(
+    <div className="sonarBox">
+      <img src={sonar} alt=""/>
+      <div className="sonarDesc">
+        <p>1. 基于 Sonar 的代码质量分析，支持对项目进行代码行数、重复率统计、代码逻辑缺陷扫描等功能，并给出对应解决报告;</p>
+        <p>2. 目前支持 Java、JavaScript、C++、Go、Python、PHP、Ruby、Groovy、Lua、TypeScript、Web、XML；</p>
+        <p>3. 默认支持代码文本格式全为 UTF-8，其他编码可能会产生乱码；</p>
+        <p>4. 仅保存最近一次分析结果;</p>
+      </div>
+    </div>
+  )
+}
+export default Index;

src/forge/Sonar/index.scss

@@ -0,0 +1,14 @@
+.sonarBox{
+  width: 1200px;
+  margin:0px auto;
+  padding:25px 0px;
+  .sonarDesc{
+    margin-top: 25px;
+    font-size: 15px;
+    color: #333;
+    p{
+      line-height: 22px;
+      margin-bottom: 10px!important;
+    }
+  }
+}