From 71e2dc4402fd647ed3d580c3b1e3b686cc1202db Mon Sep 17 00:00:00 2001 From: xuyucheng Date: Mon, 9 May 2022 17:01:12 +0800 Subject: [PATCH] mode --- .../home/branch/manage/company/company.js | 4 +- .../home/branch/manage/rate/branch/index.js | 6 +- .../branch/manage/rate/branch/rateProcess.js | 209 +++++++++++------- src/pages/home/content.js | 2 +- src/pages/home/side.js | 27 ++- 5 files changed, 153 insertions(+), 95 deletions(-) diff --git a/src/pages/home/branch/manage/company/company.js b/src/pages/home/branch/manage/company/company.js index 72837f4..5648bfa 100644 --- a/src/pages/home/branch/manage/company/company.js +++ b/src/pages/home/branch/manage/company/company.js @@ -101,10 +101,10 @@ class ManageCompany extends Component { if (e === '详 情') { const newPanes = [...this.props.panes] const state = newPanes.every(item => { - return item.title === value["企业名称"] + '(' + value["企业ID"] + ')' ? false : true + return item.title === value["企业名称"]? false : true }) if (state) { - newPanes.push({ title: value["企业名称"] + '(' + value["企业ID"] + ')', content: "/manager/company/details", key: (Number(newPanes[newPanes.length - 1].key) + 1).toString(), id: { cid: value["企业ID"] } }); + newPanes.push({ title: value["企业名称"], content: "/manager/company/details", key: (Number(newPanes[newPanes.length - 1].key) + 1).toString(), id: { cid: value["企业ID"] } }); store.dispatch(operationAction(newPanes, (newPanes[newPanes.length - 1].key))) } else { return null diff --git a/src/pages/home/branch/manage/rate/branch/index.js b/src/pages/home/branch/manage/rate/branch/index.js index 16779d7..16de13a 100644 --- a/src/pages/home/branch/manage/rate/branch/index.js +++ b/src/pages/home/branch/manage/rate/branch/index.js @@ -11,9 +11,7 @@ const { TabPane } = Tabs; class RateTabs extends Component { constructor(props) { super(props) - this.state = { - - } + this.setState={} } render() { @@ -21,7 +19,7 @@ class RateTabs extends Component { - + diff --git a/src/pages/home/branch/manage/rate/branch/rateProcess.js b/src/pages/home/branch/manage/rate/branch/rateProcess.js index 155a4e8..1a0310b 100644 --- a/src/pages/home/branch/manage/rate/branch/rateProcess.js +++ b/src/pages/home/branch/manage/rate/branch/rateProcess.js @@ -1,85 +1,140 @@ -import React, { Component } from 'react' +import React, { useEffect } from 'react'; +import ReactFlow, { + addEdge, + Controls, + Background, + useNodesState, + useEdgesState, +} from 'react-flow-renderer'; import api from "@/api/request" -import { Row, Space } from 'antd' -class RateProcess extends Component { - constructor(props) { - super(props) - this.state = { - data: [ - ], - form: this.props.value - } - } +function RateProcess1(props) { + const [nodes, setNodes, onNodesChange] = useNodesState([]); + const [edges, setEdges, onEdgesChange] = useEdgesState([]); + const onConnect = (params) => setEdges((eds) => addEdge(params, eds)); - componentDidMount() { - api.post("/admin/rating/get_company_process", this.state.form) + useEffect(() => { + api.post("/admin/rating/get_company_process", props.value) .then(res => { - this.setState({ - data: res.info - }, () => { + let count = 1 + const nodes = [] + const edges = [ + { + "id": "e1-2", + "source": "1", + "target": "2", + "animated": true + }, + { + "id": "e1-3", + "source": "1", + "target": "3", + "animated": true + }, + { + "id": "e1-4", + "source": "1", + "target": "4", + "animated": true + }, + { + "id": "e2-5", + "source": "2", + "target": "5", + "animated": true + }, + { + "id": "e3-5", + "source": "3", + "target": "5", + "animated": true + }, + { + "id": "e4-5", + "source": "4", + "target": "5", + "animated": true + }, + { + "id": "e5-6", + "source": "5", + "target": "6", + "animated": true, + }, + { + "id": "e6-7", + "source": "6", + "target": "7", + "animated": true + }, + { + "id": "e7-8", + "source": "7", + "target": "8", + "animated": true + }, + { + "id": "e7-9", + "source": "7", + "target": "9", + "animated": true + }, + { + "id": "e7-10", + "source": "7", + "target": "10", + "animated": true + }, + { + "id": "e7-11", + "source": "7", + "target": "11", + "animated": true + } + ] + res.info.forEach((item, index) => { + Object.keys(item).forEach((key, i) => { + nodes.push({ + id: count.toString(), + data: { label: key }, + type: index === 0 ? "input" : index === res.info.length - 1 ? "output" : "default", + position: { x: (i+1) * 200, y: (index + 1) * 100 }, + style: item[key] === 1 ? { + background: '#87d068', + color: '#fff', + border: '1px solid #87d068', + width: 180, + } : { + background: '#f5f5f5', + color: '#000', + border: '1px solid #f5f5f5', + width: 180, + }, + }) + count++ + }) }) + setNodes(nodes) + setEdges(edges) }) - } - - parseProcess = (item, index, key) => { - switch (index) { - case 0: - return
-
{key}
-
-
-
- case 5: - return
-
-
-
{key}
- default: - return <> -
-
-
-
{key}
-
-
-
- - } - } - - render() { - return ( - - - -
正常 -
等待 -
异常 - - - -
- {this.state.data.map((item, index) => { - const width = "calc(" + (Object.keys(item).length - 1) * 100 / Object.keys(item).length + "% - 32px)" - const left = "calc(" + (100 - (Object.keys(item).length - 1) * 100 / Object.keys(item).length) / 2 + '% + 16px)' - return <>
- - {Object.keys(item).map(key => { - return this.parseProcess(item, index, key) - })} -
- - {index === this.state.data.length - 1 ? null :
} - - })} -
- - - ) - } -} - -export default RateProcess + }, [props.value]) + return ( +
+ + + + +
+ ); +}; +export default RateProcess1; diff --git a/src/pages/home/content.js b/src/pages/home/content.js index d7345a0..99688ad 100644 --- a/src/pages/home/content.js +++ b/src/pages/home/content.js @@ -103,7 +103,7 @@ class Main extends Component { case "/manager/company/details": return case "/manage/rate": - return + return case "/manage/rate/details": return case "/manage/industry": diff --git a/src/pages/home/side.js b/src/pages/home/side.js index eb173ea..52742e4 100644 --- a/src/pages/home/side.js +++ b/src/pages/home/side.js @@ -1,5 +1,6 @@ import { Menu, PageHeader } from 'antd'; import React, { Component } from 'react'; +// import store from "@/store/index" import { connect } from 'react-redux'; import { AreaChartOutlined, UserOutlined, BookOutlined, FundProjectionScreenOutlined, GlobalOutlined, BranchesOutlined, ApartmentOutlined, SettingOutlined } from '@ant-design/icons'; @@ -24,16 +25,20 @@ class Side extends Component { } componentDidUpdate(preProps, preState) { - if (preProps.activeKey !== preState.currentKey) { - // const title = preProps.panes.filter(item => { - // return item.key === preProps.activeKey ? item.title : null - // }) - // this.setState({ - // currentKey:preState.data.filter((item,index)=>{ - // return title === item.title?index.toString():'0' - // }) - // }) - } + // if (preProps.activeKey !== preState.currentKey) { + // const target = store.getState().panes.filter(item => { + // return item.key === store.getState().activeKey ? item : null + // }) + // for (let i in preState.data) { + // if (target[0].title === preState.data[i].title) { + // return this.setState({ + // currentKey: i.toString() + // }) + // } else { + // continue + // } + // } + // } } handleClick = e => { @@ -48,7 +53,7 @@ class Side extends Component { } render() { - var menus,menuItem + var menus, menuItem if (localStorage.getItem("menus")) { menus = localStorage.getItem("menus").split(',') || ['Board', 'Manage', 'Model', 'Test', 'Setting']