mode
This commit is contained in:
xuyucheng
parent
ac5ad75f0b
commit
71e2dc4402
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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 {
|
|||
<Card>
|
||||
<Tabs defaultActiveKey="0">
|
||||
<TabPane tab="评价流程" key="0">
|
||||
<RateProcess value={this.props.value} />
|
||||
<RateProcess value={this.props.value}/>
|
||||
</TabPane>
|
||||
<TabPane tab="评价结果" key="1">
|
||||
<RateResult value={this.props.value} />
|
||||
|
|
|
|||
|
|
@ -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 <div className='process' style={{ flexWrap: 'wrap', width: 100 / Object.keys(item).length + '%' }}>
|
||||
<div className='process-box' style={{ backgroundColor: item[key] === 0 ? "#bfbfbf" : item[key] === 1 ? "#1890ff" : "#f5222d" }}>{key}</div>
|
||||
<div className='process-line'>
|
||||
<div className='line' ></div>
|
||||
</div></div>
|
||||
case 5:
|
||||
return <div className='process' style={{ flexWrap: 'wrap', width: 100 / Object.keys(item).length + '%' }}>
|
||||
<div className='process-line'>
|
||||
<div className='line' ></div>
|
||||
</div><div className='process-box' style={{ backgroundColor: item[key] === 0 ? "#bfbfbf" : item[key] === 1 ? "#1890ff" : "#f5222d" }}>{key}</div></div>
|
||||
default:
|
||||
return <>
|
||||
<div className='process' style={{ flexWrap: 'wrap', width: 100 / Object.keys(item).length + '%' }}>
|
||||
<div className='process-line'>
|
||||
<div className='line'></div>
|
||||
</div><div className='process-box' style={{ backgroundColor: item[key] === 0 ? "#bfbfbf" : item[key] === 1 ? "#1890ff" : "#f5222d" }}>{key}</div><div className='process-line'>
|
||||
<div className='line' ></div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Row justify='center' >
|
||||
<Row style={{ width: '100%', marginBottom: 20 }} justify="end">
|
||||
<Space>
|
||||
<div className='badge' style={{ background: '#1890ff' }}></div><span>正常</span>
|
||||
<div className='badge' style={{ background: '#bfbfbf' }}></div><span>等待</span>
|
||||
<div className='badge' style={{ background: '#f5222d' }}></div><span>异常</span>
|
||||
</Space>
|
||||
</Row>
|
||||
<Row justify='center' style={{ width: '100%', marginBottom: 40, }}>
|
||||
<div style={{ width: '100%' }}>
|
||||
{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 <><div className='connect' style={{ width: width, left:left }}><div className='connect-line' style={{ width: '100%' }}></div></div><Row justify="center" style={{ flexWrap: 'nowrap' }}>
|
||||
<Row justify="center" style={{ flexWrap: 'nowrap' }}></Row>
|
||||
{Object.keys(item).map(key => {
|
||||
return this.parseProcess(item, index, key)
|
||||
})}
|
||||
<div className='connect' style={{ width: width, left:left }}><div className='connect-line' style={{ width: '100%' }}></div></div>
|
||||
</Row>
|
||||
{index === this.state.data.length - 1 ? null : <div className='connect' style={{width: width, left:left }}><div className='connect-line' style={{ width: '100%' }}></div></div>}
|
||||
</>
|
||||
})}
|
||||
</div>
|
||||
</Row>
|
||||
</Row>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default RateProcess
|
||||
}, [props.value])
|
||||
|
||||
return (
|
||||
<div style={{ width: "100%",height:600 }}>
|
||||
<ReactFlow
|
||||
nodes={nodes}
|
||||
edges={edges}
|
||||
onNodesChange={onNodesChange}
|
||||
onEdgesChange={onEdgesChange}
|
||||
onConnect={onConnect}
|
||||
fitView
|
||||
attributionPosition="top-right"
|
||||
>
|
||||
<Controls />
|
||||
<Background color="#aaa" gap={16} />
|
||||
</ReactFlow>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default RateProcess1;
|
||||
|
|
|
|||
|
|
@ -103,7 +103,7 @@ class Main extends Component {
|
|||
case "/manager/company/details":
|
||||
return <CompanyDetails cid={params.id.cid} />
|
||||
case "/manage/rate":
|
||||
return <ManageRate />
|
||||
return <ManageRate/>
|
||||
case "/manage/rate/details":
|
||||
return <RateTabs value={params.value}/>
|
||||
case "/manage/industry":
|
||||
|
|
|
|||
|
|
@ -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']
|
||||
|
|
|
|||
Loading…
Reference in New Issue