mode

package.json

@@ -57,7 +57,7 @@
     "react-app-polyfill": "^2.0.0",
     "react-dev-utils": "^11.0.3",
     "react-dom": "^17.0.2",
-    "react-flow-renderer": "^10.0.0",
+    "react-flow-renderer": "^10.0.1",
     "react-pdf": "^5.6.0",
     "react-redux": "^7.2.6",
     "react-refresh": "^0.8.3",

src/assets/style/general.css

@@ -205,11 +205,11 @@ span {
 }
 
 .process {
-  width: 200px;
+  width: 100%;
   height: auto;
   display: flex;
-  justify-content: center;
+  justify-content: space-around;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
 }
 
 .process-box {
@@ -223,16 +223,32 @@ span {
 }
 
 .process-line {
-  width: 150px;
+  width: 100%;
   height: 30px;
-  margin: 5px 0; 
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
 }
 
 .line {
-  width: 2px;
+  width: 1px;
   height: 30px;
   background: #1890ff;
 }
+
+.connect{
+  width: 100%;
+  position: absolute;
+}
+
+.connect-line{
+  width: 100%;
+  height: 1px;
+  background: #1890ff;
+}
+
+.process-middle{
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}

src/pages/home/branch/manage/rate/branch/rateProcess.js

@@ -1,38 +1,89 @@
 import React, { Component } from 'react'
 import api from "@/api/request"
+import { Row } from 'antd'
 
 class RateProcess extends Component {
   constructor(props) {
     super(props)
     this.state = {
-      data: {}
+      data: [
+        { '综合评价流程': 1 },
+        {
+          "问卷填报": 1,
+          "财务数据填报": 1,
+          "清洗风险数据": 1
+        },
+        {
+          "模型打分": 1,
+        },
+        { "报告生成": 1 },
+        { "证书生成": 1 },
+        {
+          "综合信用评价主页": 1,
+          "财务要素评价主页": 1,
+          "公司风险分析主页": 1,
+          "分析指标明细主页": 1
+        }
+      ]
     }
   }
 
   componentDidMount() {
-    api.post("/admin/rating/get_company_process", { rid: this.props.rid, cid: this.props.cid, types: "综合评价流程" })
+    // api.post("/admin/rating/get_company_process", { rid: this.props.rid, cid: this.props.cid, types: "综合评价流程" })
-      .then(res => {
+    //   .then(res => {
-        this.setState({
+    //     this.setState({
-          data: res.info[0]
+    //       data: res.info
-        })
+    //     }, () => {
-      })
+    //       console.log(this.state.data)
+    //     })
+    //   })
+  }
+
+  parseProcess = (item, index, key) => {
+    switch (index) {
+      case 0:
+        return <div className='process' style={{ flexWrap: 'wrap' }}>
+          <div className='process-box'>{key}</div>
+          <div className='process-line'>
+            <div className='line'></div>
+          </div></div>
+      case 5:
+        return <div className='process' style={{ flexWrap: 'wrap' }}>
+          <div className='process-line'>
+            <div className='line'></div>
+          </div><div className='process-box'>{key}</div></div>
+      default:
+        return <>
+          <div className='process' style={{ flexWrap: 'wrap' }}>
+            <div className='process-line'>
+              <div className='line'></div>
+            </div><div className='process-box'>{key}</div><div className='process-line'>
+              <div className='line'></div>
+            </div>
+          </div>
+        </>
+    }
   }
 
   render() {
     return (
       <div>
-        {this.state.data['评价流程'] && Object.keys(this.state.data['评价流程']).map(key => {
+        {this.state.data.map((item, index) => {
-          return <div className='process'>
+          return <><div className='connect' style={{ left: (100 - (Object.keys(item).length - 1) * 100 / Object.keys(item).length) / 2 + '%' }}><div className='connect-line' style={{ width: (Object.keys(item).length - 1) * 100 / Object.keys(item).length + '%', }}></div></div><Row justify="space-between" style={{ flexWrap: 'nowrap' }}>
-            <div className='process-box'>{key}</div>
+            <Row justify="space-between" style={{ flexWrap: 'nowrap' }}></Row>
-            <div className='process-line'>
+            {Object.keys(item).map(key => {
-              <div className='line'></div>
+              return this.parseProcess(item, index, key)
-            </div>
+            })}
-            </div>
+            <div className='connect' style={{ left: (100 - (Object.keys(item).length - 1) * 100 / Object.keys(item).length) / 2 + '%' }}><div className='connect-line' style={{ width: (Object.keys(item).length - 1) * 100 / Object.keys(item).length + '%', }}></div></div>
-            
+          </Row>
+            {index === this.state.data.length-1 ? null :<div className='connect' style={{ left: (100 - (Object.keys(item).length - 1) * 100 / Object.keys(item).length) / 2 + '%' }}><div className='connect-line' style={{ width: (Object.keys(item).length - 1) * 100 / Object.keys(item).length + '%', }}></div></div>}
+          </>
         })}
       </div>
     )
   }
 }
 
-        export default RateProcess
+export default RateProcess
+
+