update

2022-05-19 10:23:52 +08:00 · 2022-05-19 10:23:52 +08:00 · cdb7746e5e
parent 3fb1b9496e
commit cdb7746e5e
8 changed files with 187 additions and 127 deletions
--- a/src/forge/Main/list.scss
+++ b/src/forge/Main/list.scss
@ -298,7 +298,7 @@
  li{
    text-align: center;
    padding:0px;
-    margin-right: 40px;
+    margin-right: 35px;
    display: flex;
    & > a{
      position: relative;
--- a/src/forge/Main/sub/DetailBanner.jsx
+++ b/src/forge/Main/sub/DetailBanner.jsx
@ -8,11 +8,13 @@ function DetailBanner({ history,list , owner , projectsId , isManager , url , pa
  useEffect(()=>{
    if(list){
      // 没有资源库banner但是通过连接进资源库页面时
-      if(pathname && pathname==="source"){
-        let a = list.filter(item=>item.menu_name === "resources");
-        if(a && a.length === 0){
-          history.push(`/${owner}/${projectsId}`);
-        }
+      let a = list.filter(item=>item.menu_name === "resources");
+      if((pathname && pathname==="source") && (a && a.length === 0)){
+        history.push(`/${owner}/${projectsId}`);
+      }
+      let b = list.filter(item=>item.menu_name === "server");
+      if((pathname && pathname.indexOf("server") > 0) && (b && b.length === 0)){
+        history.push(`/${owner}/${projectsId}`);
      }
      setMenuName(list);
    }
--- a/src/forge/Server/List.jsx
+++ b/src/forge/Server/List.jsx
@ -1,20 +1,44 @@
-import React from 'react';
-import { Link } from 'react-router-dom';
-
+import React,{useState , useEffect} from 'react';
+import AgreementModal from './agreementModal';

 function Main(props){
+  const [ visible , setVisible ] =  useState(false);
  const { owner , projectsId } = props.match.params;
+  const [ has_trace_user , setHas_trace_user ] = useState(false);
+
+  const { current_user , resetUserInfo } = props;
+
+  useEffect(()=>{
+    if(current_user){
+      setHas_trace_user(current_user.has_trace_user);
+    }
+  },[current_user])
+
+  function onOk(){
+    setVisible(false);
+    resetUserInfo && resetUserInfo();
+    props.history.push(`/${owner}/${projectsId}/server/1`);
+  }
+
+  function openDetail(){
+    if(!has_trace_user){
+      setVisible(true);
+    }else{
+      props.history.push(`/${owner}/${projectsId}/server/1`);
+    }
+  }
  return(
    <div>
+      <AgreementModal visible={visible} onCancel={()=>setVisible(false)} onOk={onOk}/>
      <ul className="serverlist">
        <li>
          <span className="servername">
            <img src={require('./img/logo.png')} alt=""/>
-            <Link to={`/${owner}/${projectsId}/server/1`}>重晴鸟代码溯源系统</Link>
+            <a onClick={openDetail}>重晴鸟代码溯源系统</a>
          </span>
          <p className="task-hide-2 serverdesc">支持软件源代码的溯源分析、自主度评估、开源漏洞检测、开源许可证合规性分析等</p>
          <span className="serverbtn">
-            <Link to={`/${owner}/${projectsId}/server/1`} className="btnhover">查看详情</Link>
+            <a onClick={openDetail} className="btnhover">查看详情</a>
          </span>
        </li>
      </ul>
--- a/src/forge/Server/agreementModal.jsx
+++ b/src/forge/Server/agreementModal.jsx
@ -1,8 +1,9 @@
 import React, { useState } from 'react';
 import { Modal , Checkbox } from 'antd';
+import axios from 'axios';


-function AgreementModal({ visible , onCancel , onOk }){
+function AgreementModal({ visible , onCancel , onOk}){
  const [ agree , setAgree ]  =  useState(false);
  function changeAgree(e){
    setAgree(e.target.checked);
@ -12,11 +13,15 @@ function AgreementModal({ visible , onCancel , onOk }){
    setAgree(false);
    onCancel();
  }
-
  // 同意协议
  function agreeFunc(){
-    agree && onOk();
-    setAgree(false);
+    const url = `/traces/trace_users.json`;
+    axios.post(url).then(result=>{
+      if(result){
+        agree && onOk();
+        setAgree(false);
+      }
+    }).catch(error=>{})
  }
  return(
    <Modal
--- a/src/forge/Server/data.jsx
+++ b/src/forge/Server/data.jsx
@ -1,36 +1,23 @@
 import React, { useEffect, useState } from 'react';
 import DataEmpty from './dataEmpty';
-import AgreementModal from './agreementModal';
 import DetectionModal from './detectionModal';
 import { Table , Spin, message } from 'antd';
 import axios from 'axios';


 function Data(props){
-  const [ visible , setVisible ] =  useState(false);
  const [ detectionVisible , setDetectionVisible ] =  useState(false);
  const [ dataSource , setDataSource ] = useState(undefined);
  const [ page , setPage ] = useState(1);
  const [ spining , setSpining ] = useState(true);
-  const [ has_trace_user , setHas_trace_user ] = useState(false);
  const [ relayCount , setRelayCount ] = useState(5);
  const [ repeatId , setRepeatId ] = useState(undefined);
  const [ repeatBranch , setRepeatBranch ] = useState(undefined);

  const { owner , projectsId } = props.match.params;
-  const { current_user } = props;
+  const { current_user , isManager } = props;
  const limit = 15;

-  useEffect(()=>{
-    if(current_user){
-      setHas_trace_user(has_trace_user);
-    }
-  },[current_user])
-
-  function onOk(){
-    setVisible(false);
-    setDetectionVisible(true);
-  }

  function onDetectionOk(){
    props.showNotification("扫描成功！");
@ -48,8 +35,7 @@ function Data(props){
    }).then(result=>{
      if(result){
        setDataSource(result.data.data);
-        let count = result.data.data && result.data.data.length;
-        setRelayCount(relayCount-count);
+        setRelayCount(result.data.left_tasks_count);
        setSpining(false);
      }
    }).catch(error=>{})
@ -60,84 +46,6 @@ function Data(props){
    Init();
  },[])

-  const columns=[
-    {
-      title:"序号",
-      dataIndex:"number",
-      key:"number",
-      width:"7%",
-      align:"center",
-      render: (k,e,e1) => {return e1+1}
-    },
-    {
-      title:"分支名称",
-      dataIndex:"branch_tag",
-      key:"branch_tag",
-      width:"30%",
-      align:"left",
-      ellipsis:true
-    },
-    {
-      title:"检测状态",
-      dataIndex:"detect_status",
-      key:"detect_status",
-      align:"left",
-      render: (k,e,e1) => {
-        return (
-          k === "fail" ?
-          <span className="failure">失败</span>
-          : k==="detecting" ?
-          <div className="running">
-            <span className="percentline" style={{width:`${e.detect_process}%`}}></span>
-            <span className="percentNum" style={{left:`${e.detect_process+5}%`}}>{e.detect_process}%</span>
-          </div>
-          :
-          <span className="success">成功</span>
-        )
-      }
-    },
-    {
-      title:"检测时间",
-      dataIndex:"detect_startdate",
-      key:"detect_startdate",
-      align:"left",
-    },
-    {
-      title:"操作",
-      dataIndex:"operation",
-      key:"operation",
-      align:"center",
-      width:"30%",
-      render: (k,e,e1) => {
-        return(
-          <div className="operationBtns">
-            <a onClick={()=>repeatCheck(e.project_id,e.branch_tag)}>重新扫描</a>
-            {
-              (e.detect_status ==="fail" || e.detect_status ==="detecting") ?
-              <span>查看<i className="iconfont icon-sanjiaoxing-down"></i></span>
-              :
-              <a>查看<i className="iconfont icon-sanjiaoxing-down"></i></a>
-            }
-            {
-              (e.detect_status ==="fail" || e.detect_status ==="detecting") ?
-              <span>下载报告</span>
-              :
-              <a onClick={()=>downloadFunc(e.task_id)}>下载报告</a>
-            }
-          </div>
-        )
-      }
-    }
-  ]
-
-  // 下载报告
-  function downloadFunc(task_id){
-    setSpining(true);
-    const url = `/traces/${owner}/${projectsId}/task_pdf.json?task_id=${task_id}`;
-    axios.get(url).then(result=>{
-      setSpining(false);
-    }).catch(error=>{})
-  }

  // 重新扫描
  function repeatCheck(project_id,branch){
@ -150,7 +58,6 @@ function Data(props){
    setDetectionVisible(true);
  }

-  // 新建分析：判断是否签订过协议，签订过就弹出检测弹框
  function createCheck(){
    if(relayCount <= 0){
      message.error("无可用检测次数");
@ -158,16 +65,21 @@ function Data(props){
    }
    setRepeatBranch(undefined);
    setRepeatId(undefined);
-    if(has_trace_user){
-      setVisible(true);
-    }else{
-      setDetectionVisible(true);
-    }
+    setDetectionVisible(true);
+  }
+
+  function handleDownExcel(task_id){
+    const oa = document.createElement('a');
+    oa.href = `/api/traces/${owner}/${projectsId}/task_pdf.json?task_id=${task_id}`;
+    oa.setAttribute('target', '_blank');
+    oa.setAttribute("download","report.pdf");
+    document.body.appendChild(oa);
+    oa.click();
+    document.body.removeChild(oa);
  }

  return(
    <div>
-      <AgreementModal visible={visible} onCancel={()=>setVisible(false)} onOk={onOk}/>
      <DetectionModal 
        visible={detectionVisible} 
        onCancel={()=>setDetectionVisible(false)} 
@ -180,18 +92,80 @@ function Data(props){
      />
      <div className="servertitle">
        <span className="systitle">重晴鸟代码溯源系统</span>
-        <a className="btnhover" onClick={createCheck}>新建分析</a>
+        { isManager && <a className="btnhover" onClick={createCheck}>新建分析</a> }
      </div>
      <Spin spinning={spining}>
        <div style={{minHeight:"400px"}}>
          {
            dataSource && dataSource.length >0 &&
            <div>
-              <Table className="dataTable" columns={columns} dataSource={dataSource} pagination={false}/>
+              <ul className="dataUl">
+                <li className="dataUlhead">
+                  <span>序号</span>
+                  <span>分支名称</span>
+                  <span>检测状态</span>
+                  <span>检测时间</span>
+                  <span>操作</span>
+                </li>
+                {
+                  dataSource.map((e,key)=>{
+                    return(
+                      <div key={key}>
+                        <li className="dataUlbody">
+                          <span>{key + 1 }</span>
+                          <span title={e.branch_tag}>{e.branch_tag}</span>
+                          <span>
+                            {
+                              e.detect_status === "fail" ?
+                              <span className="failure">失败</span>
+                              : e.detect_status==="detecting" ?
+                              <div className="running">
+                                <span className="percentline" style={{width:`${e.detect_process}%`}}></span>
+                                <span className="percentNum" style={{left:`${e.detect_process+5}%`}}>{e.detect_process}%</span>
+                              </div>
+                              :
+                              <span className="success">成功</span>
+                            }
+                          </span>
+                          <span>{e.detect_startdate}</span>
+                          <span>
+                            {
+                              <div className="operationBtns">
+                              { isManager && (
+                                e.detect_status ==="detecting" ? 
+                                <span>重新扫描</span>
+                                :
+                                <a onClick={()=>repeatCheck(e.project_id,e.branch_tag)}>重新扫描</a>
+                                )
+                              }
+                              {
+                                (e.detect_status ==="fail" || e.detect_status ==="detecting") ?
+                                <span>查看<i className="iconfont icon-sanjiaoxing-down"></i></span>
+                                :
+                                <a>查看<i className="iconfont icon-sanjiaoxing-down"></i></a>
+                              }
+                              {
+                                isManager && (
+                                (e.detect_status ==="fail" || e.detect_status ==="detecting") ?
+                                <span>下载报告</span>
+                                :
+                                <a onClick={()=>handleDownExcel(e.task_id)}>下载报告</a>
+                                )
+                              }
+                            </div>
+                            }
+                          </span>
+                        </li>
+                        {false && <iframe src="www.baidu.com" id={`htmlIframe_${key}`} frameBorder="0" name={`htmlIframe_${key}`} style={{ background: '#fff', height: '100%', width: '100%' }}></iframe>}
+                      </div>
+                    )
+                  })
+                }
+              </ul>
            </div>
          }
          {
-            dataSource === null || (dataSource && dataSource.length === 0) &&
+            (dataSource === null || (dataSource && dataSource.length === 0)) &&
            <DataEmpty />
          }
        </div>
--- a/src/forge/Server/detectionModal.jsx
+++ b/src/forge/Server/detectionModal.jsx
@ -7,7 +7,7 @@ function DetectionModal({form , visible , onCancel , onOk , projectsId, owner ,
  const [ check , setCheck ] =  useState(false);
  const [ branch , setBranch ] = useState("");
  const [ branchList , setBranchList ] = useState([]);
-
+  const source = axios.CancelToken.source();
  const layout = {
    labelCol: { span: 5 },
    wrapperCol: { span: 18 },
@ -26,13 +26,13 @@ function DetectionModal({form , visible , onCancel , onOk , projectsId, owner ,

  // 取消检测
  function onCancelFunc(){
+    source.cancel();
    if(check) {
      setCheck(false);
    } else{
      onCancel();
    } 
  }
-
  // 开始检测
  function onOkFunc(){
    validateFields((error,values)=>{
@ -47,6 +47,8 @@ function DetectionModal({form , visible , onCancel , onOk , projectsId, owner ,
              project_id:repeatId,
              branch_name:repeatBranch
            }
+          },{
+            CancelToken:source.token
          }).then(result=>{
            if(result){
              onOk();
@ -58,6 +60,8 @@ function DetectionModal({form , visible , onCancel , onOk , projectsId, owner ,
          const url = `/traces/${owner}/${projectsId}/tasks.json`;
          axios.post(url,{
            branch_name:values.branch
+          },{
+            CancelToken:source.token
          }).then(result=>{
            if(result){
              onOk();
@ -125,10 +129,10 @@ function DetectionModal({form , visible , onCancel , onOk , projectsId, owner ,
            }
            <div className="checkInfos">
              {
-                (check && branch) || repeatBranch && 
+                ((check && branch) || repeatBranch) && 
                <div>
                  <span>检测分支</span>
-                  <p>{branch || repeatBranch}</p>
+                  <p className="task-hide" title={branch || repeatBranch}>{branch || repeatBranch}</p>
                </div>
              }
              <div>
--- a/src/forge/Server/index.scss
+++ b/src/forge/Server/index.scss
@ -6,7 +6,7 @@
  background-color: #466aff;
  color: #fff!important;
  &:hover{
-    background-color: rgba(26, 71, 255, 1);
+    background-color: rgba(26, 71, 255, 1)!important;
    color: #fff!important;
  }
 }
@ -191,7 +191,7 @@
    }
  }
 }
-.dataTable{
+.dataTable,.dataUl{
  .ant-table-thead > tr > th{
    background-color: #fff;
    div{
@ -199,6 +199,10 @@
      font-size: 16px;
    }
  }
+  .ant-table-tbody > tr:hover > td{
+    background-color: rgba(248, 250, 255, 1)!important;
+  }
+  
  .failure{
    display: block;
    height:32px;
@ -279,6 +283,48 @@
    }
  }
 }
+.dataUl{
+  &>div{
+    border-bottom: 1px solid #eee;
+  }
+  li{
+    display: flex;
+    flex-wrap: wrap;
+    height: 66px;
+    align-items: center;
+    color:#333333;
+    &>span{
+     padding:0px 10px;
+     text-align: left;
+    }
+    &>span:first-child{
+      width: 7%;
+      text-align: center;
+    }
+    &>span:nth-child(2){
+      width: 30%;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+    &>span:nth-child(3),&>span:nth-child(4){
+      width: 16%;
+    }
+    &>span:last-child{
+      width: 30%;
+      text-align: center;
+    }
+    &.dataUlhead{
+      font-size:16px;
+    }
+    &.dataUlbody{
+      font-size: 14px;
+      &:hover{
+        background-color:#f8faff
+      }
+    }
+  }
+}
 .formDiv{
  width: 430px;
  margin:0px auto;
@ -292,6 +338,10 @@
    height: 32px;
    line-height: 32px;
    margin-top: 4px;
+    label{
+      color:#20294a;
+      font-size:15px;
+    }
  }
  .ant-row.ant-form-item{
    margin-bottom: 12px!important;
@ -307,6 +357,8 @@
        width: 70px;
        line-height: 32px;
        text-align: left;
+        color:#20294a;
+        font-size:15px;
      }
      ul{
        display: flex;
--- a/src/forge/users/Infos.js
+++ b/src/forge/users/Infos.js
@ -102,7 +102,7 @@ class Infos extends Component {
    }else if(pathname === `/${username}/followers`){
      this.setState({menuKey:undefined,route_type:"followers"});
    }else{
-      this.setState({menuKey:undefined,route_type:undefined});
+      this.setState({menuKey:"6",route_type:undefined});
    }
  }

@ -244,7 +244,6 @@ class Infos extends Component {
    const { current_user } = this.props;
    const { username } = this.props.match.params;
    const { user, isSpin, route_type , undo_events , menuKey , avatarVisible } = this.state;
-    
    return (
      <div className="newMain clearfix">
        {