From 2f37586a1bb6dae0bd86be4c3166f31bb6474f19 Mon Sep 17 00:00:00 2001
From: caishi <1149225589@qq.com>
Date: Mon, 16 May 2022 09:42:01 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9C=8D=E5=8A=A1=E2=80=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/forge/Server/data.jsx           | 138 ++++++++++++++++++++++------
 src/forge/Server/detectionModal.jsx |  42 +++++++--
 src/forge/Server/index.scss         |  43 +++++----
 3 files changed, 168 insertions(+), 55 deletions(-)

diff --git a/src/forge/Server/data.jsx b/src/forge/Server/data.jsx
index 0974ddf6..5be21ece 100644
--- a/src/forge/Server/data.jsx
+++ b/src/forge/Server/data.jsx
@@ -2,22 +2,30 @@ import React, { useEffect, useState } from 'react';
 import DataEmpty from './dataEmpty';
 import AgreementModal from './agreementModal';
 import DetectionModal from './detectionModal';
-import { Table } from 'antd';
+import { Table , Spin, message } from 'antd';
 import axios from 'axios';
 
-const source=[
-  {name:"maste2988989898984qwerrfccdr",status:"failure",time:"2022-05-11 17:21"},
-  {name:"maste2988989898984qwerrfccdr",status:"success",time:"2022-05-11 17:21"},
-  {name:"maste2988989898984qwerrfccdr",status:"50",time:"2022-05-11 17:21"},
-  {name:"maste2988989898984qwerrfccdr",status:"80",time:"2022-05-11 17:21"}
-]
+
 function Data(props){
   const [ visible , setVisible ] =  useState(false);
   const [ detectionVisible , setDetectionVisible ] =  useState(false);
-  const [ dataSource , setDataSource ] = useState(source);
+  const [ dataSource , setDataSource ] = useState(undefined);
   const [ page , setPage ] = useState(1);
-  const limit = 15;
+  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 limit = 15;
+
+  useEffect(()=>{
+    if(current_user){
+      setHas_trace_user(has_trace_user);
+    }
+  },[current_user])
 
   function onOk(){
     setVisible(false);
@@ -25,10 +33,13 @@ function Data(props){
   }
 
   function onDetectionOk(){
+    props.showNotification("扫描成功！");
     setDetectionVisible(false);
+    setSpining(true);
+    Init();
   }
 
-  useEffect(()=>{
+  function Init(){
     const url = `/traces/${owner}/${projectsId}/task_results.json`;
     axios.get(url,{
       params:{
@@ -36,9 +47,17 @@ function Data(props){
       }
     }).then(result=>{
       if(result){
-
+        setDataSource(result.data.data);
+        let count = result.data.data && result.data.data.length;
+        setRelayCount(relayCount-count);
+        setSpining(false);
       }
     }).catch(error=>{})
+  }
+
+  useEffect(()=>{
+    setSpining(true);
+    Init();
   },[])
 
   const columns=[
@@ -52,32 +71,35 @@ function Data(props){
     },
     {
       title:"分支名称",
-      dataIndex:"name",
-      key:"name",
+      dataIndex:"branch_tag",
+      key:"branch_tag",
       width:"30%",
       align:"left",
       ellipsis:true
     },
     {
       title:"检测状态",
-      dataIndex:"status",
-      key:"status",
+      dataIndex:"detect_status",
+      key:"detect_status",
       align:"left",
       render: (k,e,e1) => {
         return (
-          k === "failure" ?
+          k === "fail" ?
           <span className="failure">失败</span>
-          : k==="success" ?
-          <span className="success">成功</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>
           :
-          <div className="running"><span style={{width:`${k}%`}}>{k}%</span></div>
+          <span className="success">成功</span>
         )
       }
     },
     {
       title:"检测时间",
-      dataIndex:"time",
-      key:"time",
+      dataIndex:"detect_startdate",
+      key:"detect_startdate",
       align:"left",
     },
     {
@@ -89,15 +111,60 @@ function Data(props){
       render: (k,e,e1) => {
         return(
           <div className="operationBtns">
-            <a>重新扫描</a>
-            <a>查看<i className="iconfont icon-sanjiaoxing-down"></i></a>
-            <a>下载报告</a>
+            <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){
+    if(relayCount <= 0){
+      message.error("无可用检测次数");
+      return;
+    }
+    setRepeatId(project_id);
+    setRepeatBranch(branch);
+    setDetectionVisible(true);
+  }
+
+  // 新建分析：判断是否签订过协议，签订过就弹出检测弹框
+  function createCheck(){
+    if(relayCount <= 0){
+      message.error("无可用检测次数");
+      return;
+    }
+    setRepeatBranch(undefined);
+    setRepeatId(undefined);
+    if(has_trace_user){
+      setVisible(true);
+    }else{
+      setDetectionVisible(true);
+    }
+  }
+
   return(
     <div>
       <AgreementModal visible={visible} onCancel={()=>setVisible(false)} onOk={onOk}/>
@@ -107,15 +174,28 @@ function Data(props){
         onOk={onDetectionOk} 
         owner={owner}
         projectsId={projectsId}
+        relayCount={relayCount}
+        repeatId={repeatId}
+        repeatBranch={repeatBranch}
       />
       <div className="servertitle">
         <span className="systitle">重晴鸟代码溯源系统</span>
-        <a className="btnhover" onClick={()=>setVisible(true)}>新建分析</a>
+        <a className="btnhover" onClick={createCheck}>新建分析</a>
       </div>
-      <div>
-        <Table className="dataTable" columns={columns} dataSource={dataSource} pagination={false}/>
-      </div>
-      <DataEmpty />
+      <Spin spinning={spining}>
+        <div style={{minHeight:"400px"}}>
+          {
+            dataSource && dataSource.length >0 &&
+            <div>
+              <Table className="dataTable" columns={columns} dataSource={dataSource} pagination={false}/>
+            </div>
+          }
+          {
+            dataSource === null || (dataSource && dataSource.length === 0) &&
+            <DataEmpty />
+          }
+        </div>
+      </Spin>
     </div>
   )
 }
diff --git a/src/forge/Server/detectionModal.jsx b/src/forge/Server/detectionModal.jsx
index 1935c26b..34440088 100644
--- a/src/forge/Server/detectionModal.jsx
+++ b/src/forge/Server/detectionModal.jsx
@@ -2,13 +2,12 @@ import React, { useState , forwardRef, useEffect } from 'react';
 import { Modal , Form , Select } from 'antd';
 import axios from 'axios';
 
-function DetectionModal({form , visible , onCancel , onOk , projectsId,owner }){
+function DetectionModal({form , visible , onCancel , onOk , projectsId, owner , relayCount , repeatId , repeatBranch }){
   const { getFieldDecorator, validateFields , setFieldsValue } = form;
   const [ check , setCheck ] =  useState(false);
   const [ branch , setBranch ] = useState("");
   const [ branchList , setBranchList ] = useState([]);
 
-
   const layout = {
     labelCol: { span: 5 },
     wrapperCol: { span: 18 },
@@ -40,7 +39,32 @@ function DetectionModal({form , visible , onCancel , onOk , projectsId,owner }){
       if(!error){
         setCheck(true);
         setBranch(values.branch);
-        // onOk();
+        if(repeatId){
+          // 重新扫描
+          const url = `/traces/${owner}/${projectsId}/reload_task.json`;
+          axios.get(url,{
+            params:{
+              project_id:repeatId,
+              branch_name:repeatBranch
+            }
+          }).then(result=>{
+            if(result){
+              onOk();
+            }
+            setCheck(false);
+          }).catch(error=>{})
+        }else{
+          // 新建分析
+          const url = `/traces/${owner}/${projectsId}/tasks.json`;
+          axios.post(url,{
+            branch_name:values.branch
+          }).then(result=>{
+            if(result){
+              onOk();
+            }
+            setCheck(false);
+          }).catch(error=>{})
+        }
       }
     })
   }
@@ -54,7 +78,7 @@ function DetectionModal({form , visible , onCancel , onOk , projectsId,owner }){
       footer={
         <div className="agreeBtn">
           <a onClick={onCancelFunc}>取消</a>
-          { !check && <a className={"agree btnhover"} onClick={onOkFunc}>开始检测</a> }
+          { !check && relayCount !== 0 && <a className={"agree btnhover"} onClick={onOkFunc}>开始检测</a> }
         </div>
       }
     >
@@ -73,18 +97,18 @@ function DetectionModal({form , visible , onCancel , onOk , projectsId,owner }){
             check ? 
             <p className="lastTimes">正在开启检测，请等待...</p>
             :
-            <p className="lastTimes">剩余扫描次数<span>5</span></p>
+            <p className="lastTimes">剩余扫描次数<span>{relayCount}</span></p>
           }
         </div>
         <div className="formDiv">
           <Form {...layout}>
             {
-              !check &&
+              !check && !repeatBranch && 
               <Form.Item label="检测分支" colon={false} labelAlign={"left"}>
                 {getFieldDecorator("branch",{
                   rules:[{required:true,message:"请选择要检测的分支"}]
                 })(
-                  <Select placeholder="请选择仓库分支" style={{width:"360px"}}>
+                  <Select placeholder="请选择仓库分支" showSearch style={{width:"360px"}}>
                     {
                       branchList && branchList.length >0 ?
                       branchList.map((i,k)=>{
@@ -101,10 +125,10 @@ function DetectionModal({form , visible , onCancel , onOk , projectsId,owner }){
             }
             <div className="checkInfos">
               {
-                check && branch && 
+                (check && branch) || repeatBranch && 
                 <div>
                   <span>检测分支</span>
-                  <p>{branch}</p>
+                  <p>{branch || repeatBranch}</p>
                 </div>
               }
               <div>
diff --git a/src/forge/Server/index.scss b/src/forge/Server/index.scss
index 08feef7b..b19ec7b0 100644
--- a/src/forge/Server/index.scss
+++ b/src/forge/Server/index.scss
@@ -229,7 +229,7 @@
     height: 22px;
     background-color: rgba(75, 75, 75, 0.1);
     border-radius:26px;
-    span{
+    span.percentline{
       position: absolute;
       left: 0px;
       top:0px;
@@ -241,32 +241,41 @@
       color: rgba(51, 51, 51, 1);
     }
   }
+  .percentNum{
+    position: absolute;
+    height: 24px;
+    line-height: 24px;
+  }
   .operationBtns{
     display: flex;
     align-items: center;
     justify-content: center;
-    a{
+    a,span{
       margin:0px 14px;
       position: relative;
       color: rgba(70, 106, 255, 1);
       display: flex;
       align-items: center;
       height: 26px;
-      i{
-        width: 13px;
-      }
-      &::before{
-        position: absolute;
-        content: "";
-        width: 1px;
-        height: 12px;
-        top:7px;
-        background-color: rgba(213, 213, 213, 1);
-        left: -14px;
-      }
-      &:first-child::before{
-        display: none;
-      }
+    }
+    span{
+      color: rgba(197, 204, 225, 1)!important;
+      cursor: default;
+    }
+    a > i,span>i{
+      width: 13px;
+    }
+    a::before,span::before{
+      position: absolute;
+      content: "";
+      width: 1px;
+      height: 12px;
+      top:7px;
+      background-color: rgba(213, 213, 213, 1);
+      left: -14px;
+    }
+    a:first-child::before,span:first-child::before{
+      display: none;
     }
   }
 }