mode
This commit is contained in:
parent
ac5ad75f0b
commit
71e2dc4402
|
@ -101,10 +101,10 @@ class ManageCompany extends Component {
|
||||||
if (e === '详 情') {
|
if (e === '详 情') {
|
||||||
const newPanes = [...this.props.panes]
|
const newPanes = [...this.props.panes]
|
||||||
const state = newPanes.every(item => {
|
const state = newPanes.every(item => {
|
||||||
return item.title === value["企业名称"] + '(' + value["企业ID"] + ')' ? false : true
|
return item.title === value["企业名称"]? false : true
|
||||||
})
|
})
|
||||||
if (state) {
|
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)))
|
store.dispatch(operationAction(newPanes, (newPanes[newPanes.length - 1].key)))
|
||||||
} else {
|
} else {
|
||||||
return null
|
return null
|
||||||
|
|
|
@ -11,9 +11,7 @@ const { TabPane } = Tabs;
|
||||||
class RateTabs extends Component {
|
class RateTabs extends Component {
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
super(props)
|
super(props)
|
||||||
this.state = {
|
this.setState={}
|
||||||
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
|
@ -21,7 +19,7 @@ class RateTabs extends Component {
|
||||||
<Card>
|
<Card>
|
||||||
<Tabs defaultActiveKey="0">
|
<Tabs defaultActiveKey="0">
|
||||||
<TabPane tab="评价流程" key="0">
|
<TabPane tab="评价流程" key="0">
|
||||||
<RateProcess value={this.props.value} />
|
<RateProcess value={this.props.value}/>
|
||||||
</TabPane>
|
</TabPane>
|
||||||
<TabPane tab="评价结果" key="1">
|
<TabPane tab="评价结果" key="1">
|
||||||
<RateResult value={this.props.value} />
|
<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 api from "@/api/request"
|
||||||
import { Row, Space } from 'antd'
|
|
||||||
|
|
||||||
class RateProcess extends Component {
|
function RateProcess1(props) {
|
||||||
constructor(props) {
|
const [nodes, setNodes, onNodesChange] = useNodesState([]);
|
||||||
super(props)
|
const [edges, setEdges, onEdgesChange] = useEdgesState([]);
|
||||||
this.state = {
|
const onConnect = (params) => setEdges((eds) => addEdge(params, eds));
|
||||||
data: [
|
|
||||||
],
|
|
||||||
form: this.props.value
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
componentDidMount() {
|
useEffect(() => {
|
||||||
api.post("/admin/rating/get_company_process", this.state.form)
|
api.post("/admin/rating/get_company_process", props.value)
|
||||||
.then(res => {
|
.then(res => {
|
||||||
this.setState({
|
let count = 1
|
||||||
data: res.info
|
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)
|
||||||
|
})
|
||||||
|
}, [props.value])
|
||||||
|
|
||||||
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 (
|
return (
|
||||||
<Row justify='center' >
|
<div style={{ width: "100%",height:600 }}>
|
||||||
<Row style={{ width: '100%', marginBottom: 20 }} justify="end">
|
<ReactFlow
|
||||||
<Space>
|
nodes={nodes}
|
||||||
<div className='badge' style={{ background: '#1890ff' }}></div><span>正常</span>
|
edges={edges}
|
||||||
<div className='badge' style={{ background: '#bfbfbf' }}></div><span>等待</span>
|
onNodesChange={onNodesChange}
|
||||||
<div className='badge' style={{ background: '#f5222d' }}></div><span>异常</span>
|
onEdgesChange={onEdgesChange}
|
||||||
</Space>
|
onConnect={onConnect}
|
||||||
</Row>
|
fitView
|
||||||
<Row justify='center' style={{ width: '100%', marginBottom: 40, }}>
|
attributionPosition="top-right"
|
||||||
<div style={{ width: '100%' }}>
|
>
|
||||||
{this.state.data.map((item, index) => {
|
<Controls />
|
||||||
const width = "calc(" + (Object.keys(item).length - 1) * 100 / Object.keys(item).length + "% - 32px)"
|
<Background color="#aaa" gap={16} />
|
||||||
const left = "calc(" + (100 - (Object.keys(item).length - 1) * 100 / Object.keys(item).length) / 2 + '% + 16px)'
|
</ReactFlow>
|
||||||
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>
|
</div>
|
||||||
</Row>
|
);
|
||||||
</Row>
|
};
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default RateProcess
|
|
||||||
|
|
||||||
|
|
||||||
|
export default RateProcess1;
|
||||||
|
|
|
@ -103,7 +103,7 @@ class Main extends Component {
|
||||||
case "/manager/company/details":
|
case "/manager/company/details":
|
||||||
return <CompanyDetails cid={params.id.cid} />
|
return <CompanyDetails cid={params.id.cid} />
|
||||||
case "/manage/rate":
|
case "/manage/rate":
|
||||||
return <ManageRate />
|
return <ManageRate/>
|
||||||
case "/manage/rate/details":
|
case "/manage/rate/details":
|
||||||
return <RateTabs value={params.value}/>
|
return <RateTabs value={params.value}/>
|
||||||
case "/manage/industry":
|
case "/manage/industry":
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
import { Menu, PageHeader } from 'antd';
|
import { Menu, PageHeader } from 'antd';
|
||||||
import React, { Component } from 'react';
|
import React, { Component } from 'react';
|
||||||
|
// import store from "@/store/index"
|
||||||
import { connect } from 'react-redux';
|
import { connect } from 'react-redux';
|
||||||
import { AreaChartOutlined, UserOutlined, BookOutlined, FundProjectionScreenOutlined, GlobalOutlined, BranchesOutlined, ApartmentOutlined, SettingOutlined } from '@ant-design/icons';
|
import { AreaChartOutlined, UserOutlined, BookOutlined, FundProjectionScreenOutlined, GlobalOutlined, BranchesOutlined, ApartmentOutlined, SettingOutlined } from '@ant-design/icons';
|
||||||
|
|
||||||
|
@ -24,16 +25,20 @@ class Side extends Component {
|
||||||
}
|
}
|
||||||
|
|
||||||
componentDidUpdate(preProps, preState) {
|
componentDidUpdate(preProps, preState) {
|
||||||
if (preProps.activeKey !== preState.currentKey) {
|
// if (preProps.activeKey !== preState.currentKey) {
|
||||||
// const title = preProps.panes.filter(item => {
|
// const target = store.getState().panes.filter(item => {
|
||||||
// return item.key === preProps.activeKey ? item.title : null
|
// return item.key === store.getState().activeKey ? item : null
|
||||||
// })
|
// })
|
||||||
// this.setState({
|
// for (let i in preState.data) {
|
||||||
// currentKey:preState.data.filter((item,index)=>{
|
// if (target[0].title === preState.data[i].title) {
|
||||||
// return title === item.title?index.toString():'0'
|
// return this.setState({
|
||||||
|
// currentKey: i.toString()
|
||||||
// })
|
// })
|
||||||
// })
|
// } else {
|
||||||
}
|
// continue
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// }
|
||||||
}
|
}
|
||||||
|
|
||||||
handleClick = e => {
|
handleClick = e => {
|
||||||
|
@ -48,7 +53,7 @@ class Side extends Component {
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
var menus,menuItem
|
var menus, menuItem
|
||||||
|
|
||||||
if (localStorage.getItem("menus")) {
|
if (localStorage.getItem("menus")) {
|
||||||
menus = localStorage.getItem("menus").split(',') || ['Board', 'Manage', 'Model', 'Test', 'Setting']
|
menus = localStorage.getItem("menus").split(',') || ['Board', 'Manage', 'Model', 'Test', 'Setting']
|
||||||
|
|
Loading…
Reference in New Issue