DigitalMgnt
/
tfse-admin-webapp-v0.2
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

mode

This commit is contained in:
xuyucheng 2022-04-21 16:42:33 +08:00
parent b4be06bc65
commit e27868b730
12 changed files with 689 additions and 134 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

133
src/pages/home/branch/manage/company/companyDetails.js
View File

@ -1,133 +0,0 @@
import React, { Component } from 'react'
import { Descriptions, Card, Tag, } from 'antd'
import api from "@/api/request"
import FeTable from '@/components/table'
import Pdf from "@/components/pdf"
import { connect } from 'react-redux';
import store from "@/store/index"
import { operationAction } from "@/action/index"
class CompanyDetails extends Component {
constructor(props) {
super(props)
this.state = {
data: {},
businessInformation: [],
shareholdersInformation: [],
companyMember: [],
evaluationRecords: [],
file: "",
visible: false
}
}
isJump = false
componentDidMount() {
api.post("/admin/company/index", { cid: this.props.cid })
.then(res => {
this.setState({
data: res.result,
businessInformation: Object.keys(res.result["基本信息"]["工商信息"]).map((key, i) => {
return <Descriptions.Item label={key} key={i}>{res.result["基本信息"]["工商信息"][key]}</Descriptions.Item>
}),
shareholdersInformation: res.result["基本信息"]["股东信息"],
companyMember: res.result["基本信息"]["主要成员"],
evaluationRecords: res.result["评价记录"]
})
}).catch(err => {
console.log(err)
})
}
analysisColumns(val, index) {
if (val !== [] && val) {
if (val[0]) {
const col = Object.keys(val[0]).map((key, i) => {
return key === "证书" || key === "报告" ? {
title: key,
dataIndex: key,
key: i,
align: 'center',
render: (record) => <span style={{ color: '#108ee9',cursor:'pointer' }} onClick={this.handleClick.bind(this, record)}>预 览</span>,
} : {
title: key, dataIndex: key, align: 'center', key: i
}
})
if (index === 1) {
col.push({
title: '详 情',
dataIndex: '详 情',
key: col.length,
align: 'center',
render: () => <span style={{ color: '#108ee9',cursor:'pointer' }}>详 情</span>
})
}
return col
}
}
}
handleClick(value) {
this.isJump = true
this.setState({
visible: true,
}, () => {
api.BlobGet("/admin" + value).then(res => {
this.setState({
file: res
})
})
})
}
setVisible(value) {
this.setState({
visible: value
})
}
callback(e, value) {
if (!this.isJump) {
if (e === "详 情") {
const newPanes = [...this.props.panes]
const state = newPanes.every(item => {
return item.title === value["评价项目"] + '(' + value["评价ID"] + ')' ? false : true
})
if (state) {
newPanes.push({ title: value["评价项目"] + '(' + value["评价ID"] + ')', content: "/manage/rate/details", key: (Number(newPanes[newPanes.length - 1].key) + 1).toString() });
store.dispatch(operationAction(newPanes, (newPanes[newPanes.length - 1].key)))
} else {
return null
}
}
}
this.isJump = false
}
render() {
return (
<React.Fragment>
<Card>
<Pdf file={this.state.file} visible={this.state.visible} callback={this.setVisible.bind(this)}></Pdf>
<Descriptions title={this.state.data["企业名称"]} bordered extra={<Tag color={this.state.data["已认证"] === '是' ? '#108ee9' : '#f50 '}>已认证：{this.state.data["已认证"]}</Tag>}>
{this.state.businessInformation}
</Descriptions>
<p>股东信息</p>
<FeTable data={this.state.shareholdersInformation} columns={this.analysisColumns(this.state.shareholdersInformation, 0)}></FeTable>
<p>主要成员</p>
<FeTable data={this.state.companyMember} columns={this.analysisColumns(this.state.companyMember, 0)}></FeTable>
<p>评价记录</p>
<FeTable data={this.state.evaluationRecords} columns={this.analysisColumns(this.state.evaluationRecords, 1)} callback={this.callback.bind(this)}></FeTable>
</Card>
</React.Fragment>
)
}
}
const mapStateToProps = (state) => {
return state;
};
export default connect(mapStateToProps)(CompanyDetails);

37
src/pages/home/branch/manage/company/companyDetails/businessInformation.js Normal file
View File

@ -0,0 +1,37 @@
import React, { useState, useEffect } from 'react'
import { Descriptions } from 'antd'
import api from "@/api/request"
import FeTable from "@/components/table"
import "./index.css"
import { getColumn } from "@/utils/utils"
function BusinessInformation(props) {
const [value, setValue] = useState({})
useEffect(() => {
if (!Array.isArray(props.updateTime)) {
if (props.table === '工商信息') {
api.post("/admin/company/basic_info", { cid: props.cid, update_time: props.updateTime }).then(res => {
setValue(res)
})
}
}
}, [props.cid,props.updateTime,props.table])
return (
<>
<h1 className='title_h'>工商信息</h1>
<Descriptions>
{value['工商信息'] && Object.keys(value['工商信息']).map((key, index) => {
return <Descriptions.Item label={key}>{value['工商信息'][key]}</Descriptions.Item>
})}
</Descriptions>
<h1 className='title_h'>股东信息</h1>
<FeTable data={value['股东信息']} columns={getColumn(value['股东信息'])} />
<h1 className='title_h'>主要成员</h1>
<FeTable data={value['主要成员']} columns={getColumn(value['主要成员'])} />
</>
)
}
export default BusinessInformation

105
src/pages/home/branch/manage/company/companyDetails/creditAnalysis.js Normal file
View File

@ -0,0 +1,105 @@
import React, { useState, useEffect } from 'react'
import { Row, Col, Descriptions } from 'antd'
import api from "@/api/request"
import "./index.css"
import { getColumn } from "@/utils/utils"
import FeTable from "@/components/table"
import * as echarts from 'echarts/lib/echarts'
import "echarts/lib/chart/radar";
import "echarts/lib/component/tooltip"
function CreditAnalysis(props) {
const [value, setValue] = useState({})
useEffect(() => {
if (props.table === '综合信用分析') {
api.post("/admin/company/cc_rating", { cid: props.cid, update_time: props.updateTime }).then(res => {
setValue(res)
if(Object.keys(res).length !== 0){
initRadar("radar", res['指标雷达'])
}
})
}
}, [props.cid,props.updateTime,props.table])
function initRadar(id, param) {
const myChart = echarts.init(document.getElementById(id))
myChart.setOption({
tooltip: {
show: true,
trigger: "item",
showContent: true,
borderColor: "#fff",
},
label: {
show: false
},
radar: {
indicator: Object.keys(param['最大分数']).map(key => {
return {
name: key,
max: param['最大分数'][key]
}
})
},
series: [
{
name: 'Budget vs spending',
type: 'radar',
data: [
{
name: "指标",
value: Object.keys(param['指标得分']).map(key => {
return param['指标得分'][key]
})
}
]
}
]
})
window.onresize = function () {
myChart.resize()
}
}
return (
<>
<Descriptions>
<Descriptions.Item label="评价ID">{value['评价ID']}</Descriptions.Item>
<Descriptions.Item label='企业名称'>{value['企业名称']}</Descriptions.Item>
</Descriptions>
<Row justify='space-between'>
<Col span={11}>
<div id="radar" style={{ height: 500 }}></div>
</Col>
<Col span={11}>
<Descriptions bordered column={1}>
{value["信用分析"] && Object.keys(value['信用分析']).map(key => {
return <Descriptions.Item label={key}>{value['信用分析'][key]}</Descriptions.Item>
})}
</Descriptions>
</Col>
</Row>
<Row justify='space-between'>
{
value['指标表格'] && Object.keys(value['指标表格']).map(key => {
return <Col span={7}>
<Descriptions bordered column={2} title={key}>
{value['指标表格'] && Object.keys(value['指标表格'][key]).map(k => {
return <Descriptions.Item label={k}>{value['指标表格'][key][k]}</Descriptions.Item>
})}
</Descriptions>
</Col>
})
}
</Row>
<FeTable data={value['历史级别']} columns={getColumn(value['历史级别'])} />
</>
)
}
export default CreditAnalysis

161
src/pages/home/branch/manage/company/companyDetails/esgAnalysis.js Normal file
View File

@ -0,0 +1,161 @@
import React, { useState, useEffect } from 'react'
import { Row, Col, Descriptions,Empty } from 'antd'
import api from "@/api/request"
import "./index.css"
import { getColumn } from "@/utils/utils"
import FeTable from "@/components/table"
import * as echarts from 'echarts/lib/echarts'
import "echarts/lib/chart/pie";
import "echarts/lib/component/tooltip"
import "echarts/lib/component/title"
import "echarts/lib/component/legend"
const issueScore = [
{
color: [
"rgb(75,226,197,1)",
"rgb(75,226,197,0.5)",
"rgb(75,226,197,0.2)",
],
radius: [
["50%", "55%"],
["40%", "45%"],
["30%", "35%"],
],
name: "环境",
},
{
color: [
"rgb(125,155,221,1)",
"rgb(125,155,221,0.5)",
"rgb(125,155,221,0.2)",
],
radius: [
["50%", "55%"],
["40%", "45%"],
["30%", "35%"],
],
name: "社会",
},
{
color: [
"rgb(0,216,255,1)",
"rgb(0,216,255,0.5)",
"rgb(0,216,255,0.2)",
],
radius: [
["50%", "55%"],
["40%", "45%"],
["30%", "35%"],
],
name: "治理",
},
]
function EsgAnalysis(props) {
const [value, setValue] = useState({})
useEffect(() => {
if (props.table === 'ESG评价分析') {
api.post("/admin/company/esg_rating", { cid: props.cid, update_time: props.updateTime }).then(res => {
setValue(res)
for (let i = 0; i < 3; i++) {
// initRing("ring" + i, res['实质性议题得分情况'][issueScore[i].name], i)
}
})
}
}, [props.cid,props.updateTime,props.table])
function initRing(id, param, i) {
const myChart = echarts.init(document.getElementById(id))
myChart.setOption({
tooltip: {
show: true,
trigger: "item",
// formatter: function (params) {
// return params.data.value;
// },
},
title: {
show: true,
text: issueScore[i].name,
x: "center",
left: "49%",
top: "center",
textAlign: "center",
textStyle: {
color: issueScore[i].color[0],
},
},
color: issueScore[i].color,
legend: {
orient: 'vertical',
x: "center",
y: "bottom",
itemHeight: 10,
itemGap: 8,
background: "#fff",
},
series: Object.keys(param).map((key, index) => {
return {
name: param[key].name,
type: "pie",
radius: issueScore[i].radius[index],
label: {
show: false,
position: "center",
},
labelLine: {
normal: {
show: false,
},
},
emphasis: {
label: {
show: true,
fontSize: "20",
fontWeight: "bold",
},
},
data: [
{
value: param[key].value,
name: param[key].name,
},
],
};
}),
})
window.onresize = function () {
myChart.resize()
}
}
return (
<>
{/* <Descriptions title="ESG评级" column={4}>
<Descriptions.Item label="评价ID">{value['评价ID']}</Descriptions.Item>
<Descriptions.Item label="ESG评级">{value['ESG评级']['ESG评级']}</Descriptions.Item>
<Descriptions.Item label='ESG综合得分'>{value['ESG评级']['ESG综合得分']}</Descriptions.Item>
<Descriptions.Item label='行业'>{value['ESG评级']['行业']}</Descriptions.Item>
</Descriptions>
<p style={{ fontWeight: 800 }}>实质性议题</p>
<FeTable data={value['实质性议题']} columns={getColumn(value['实质性议题'])} />
<p style={{ fontWeight: 800 }}>实质性议题得分情况</p>
<Row justify='space-between' style={{ marginBottom: 40 }}>
{
issueScore.map((item, index) => {
return <Col span={7}><div id={'ring' + index} style={{ height: 400 }} /></Col>
})
}
</Row>
<div id='ring'></div>
<p style={{ fontWeight: 800 }}>维度得分情况</p>
<FeTable data={value['维度得分情况']} columns={getColumn(value['维度得分情况'])} /> */}
<Empty></Empty>
</>
)
}
export default EsgAnalysis

26
src/pages/home/branch/manage/company/companyDetails/evaluationRecords.js Normal file
View File

@ -0,0 +1,26 @@
import React, { useState, useEffect } from 'react'
import { } from 'antd'
import api from "@/api/request"
import FeTable from "@/components/table"
import "./index.css"
import { getColumn } from "@/utils/utils"
function EvaluationRecords(props) {
const [value, setValue] = useState([])
useEffect(() => {
if (props.table === '评价记录') {
api.get("/admin/company/rating_records", { cid: props.cid }).then(res => {
setValue(res['评价记录'])
})
}
}, [props.cid,props.table])
return (
<>
<FeTable data={value} columns={getColumn(value)} />
</>
)
}
export default EvaluationRecords

167
src/pages/home/branch/manage/company/companyDetails/financialAnalysis.js Normal file
View File

@ -0,0 +1,167 @@
import React, { useState, useEffect } from 'react'
import "./index.css"
import { Row, Col, Descriptions } from 'antd'
import * as echarts from 'echarts/lib/echarts'
import "echarts/lib/chart/line";
import "echarts/lib/chart/pie";
import 'echarts/lib/component/grid'
import "echarts/lib/component/tooltip"
import api from "@/api/request"
import FeTable from "@/components/table"
import { getColumn } from "@/utils/utils"
function FinancialAnalysis(props) {
const [value, setValue] = useState({})
useEffect(() => {
if (props.table === '财务分析') {
api.post("/admin/company/financial_analysis", { cid: props.cid, update_time: props.updateTime }).then(res => {
setValue(res)
if (Object.keys(res).length !== 0) {
initLine("line-1", res["财务得分去年比较"])
initLine("line-2", res["财务得分同行比较"])
initPie("pie-1", res["财务得分较去年变化"])
initPie("pie-2", res["财务得分较同行差异"])
}
})
}
}, [props.cid, props.updateTime, props.table])
function initLine(id, param) {
const myChart = echarts.init(document.getElementById(id))
myChart.setOption({
tooltip: {
show: true,
trigger: "item",
showContent: true,
borderColor: "#fff",
},
grid: {
top: '20px',
left: '50px',
right: '50px',
bottom: '20px',
},
xAxis: {
type: 'category',
boundaryGap: false,
data: Object.keys(param[Object.keys(param)[0]]).map(key => {
return key
}),
axisLine: {
show: true
},
axisTick: {
show: false
},
},
yAxis: {
type: 'value',
axisLine: {
show: false
},
axisTick: {
show: false
},
splitLine: {
show: true
}
},
series: Object.keys(param).map(key => {
return {
name: key,
type: 'line',
data: Object.keys(param[key]).map(k => {
return param[key][k]
})
}
}),
})
window.onresize = function () {
myChart.resize()
}
}
function initPie(id, param) {
const myChart = echarts.init(document.getElementById(id))
myChart.setOption({
tooltip: {
show: true,
trigger: "item",
showContent: true,
borderColor: "#fff",
},
grid: {
top: '20px',
left: '50px',
right: '50px',
bottom: '20px',
width: '100%',
height: '100%'
},
label: {
show: false
},
series: [
{
name: 'Data',
type: 'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
labelLine: {
show: false
},
itemStyle: {
borderWidth: 5,
borderColor: '#fff',
},
data: Object.keys(param).map(key => {
return {
name: key,
value: param[key].substring(0, param[key].length - 1)
}
}),
}
]
})
window.onresize = function () {
myChart.resize()
}
}
return (
<>
<Descriptions>
<Descriptions.Item label="评价ID">{value['评价ID']}</Descriptions.Item>
<Descriptions.Item label='财报期'>{value['财报期']}</Descriptions.Item>
</Descriptions>
<Row style={{ marginBottom: 40 }}>
<Col span={10}>
<p style={{ fontWeight: 800 }}>财务得分去年比较</p>
<div id='line-1' style={{ height: 250 }}></div>
</Col>
<Col span={10} offset={2}>
<p style={{ fontWeight: 800 }}>财务得分同行比较</p>
<div id='line-2' style={{ height: 250 }}></div>
</Col>
</Row>
<Row style={{ marginBottom: 40 }}>
<Col span={10}>
<p style={{ fontWeight: 800 }}>财务得分较去年变化</p>
<div id='pie-1' style={{ height: 250 }}></div>
</Col>
<Col span={10} offset={2}>
<p style={{ fontWeight: 800 }}>财务得分较同行差异</p>
<div id='pie-2' style={{ height: 250 }}></div>
</Col>
</Row>
<FeTable data={value['指标详情']} columns={getColumn(value['指标详情'])} />
</>
)
}
export default FinancialAnalysis

25
src/pages/home/branch/manage/company/companyDetails/financialData.js Normal file
View File

@ -0,0 +1,25 @@
import React, { useState, useEffect } from 'react'
import { } from 'antd'
import api from "@/api/request"
import "./index.css"
import { getColumn } from "@/utils/utils"
function FinancialData(props) {
const [value, setValue] = useState({})
useEffect(() => {
if (props.table === '财务数据' && props.updateTime) {
api.post("/admin/company/financial_data", { cid: props.cid, report_date: props.updateTime }).then(res => {
setValue(res)
})
}
}, [props.cid, props.updateTime, props.table])
return (
<>
</>
)
}
export default FinancialData

13
src/pages/home/branch/manage/company/companyDetails/index.css Normal file
View File

@ -0,0 +1,13 @@
.sider-box{
border-left:1px solid #f0f0f0;
}
.title_h{
margin: 0 0 20px 0;
}
.table-span{
margin: 5px 0;
display: block;
}

94
src/pages/home/branch/manage/company/companyDetails/index.js Normal file
View File

@ -0,0 +1,94 @@
import React, { useState, useEffect } from 'react'
import { Card, Tabs, Row, Layout, Descriptions } from 'antd'
import api from "@/api/request"
import BusinessInformation from './businessInformation';
import FinancialData from "./financialData"
import OperationalRisk from "./operationalRisk"
import FinancialAnalysis from "./financialAnalysis"
import CreditAnalysis from "./creditAnalysis"
import EsgAnalysis from "./esgAnalysis"
import EvaluationRecords from "./evaluationRecords"
import "./index.css"
const { TabPane } = Tabs;
const { Sider, Content } = Layout;
const tab = [
{ title: "工商信息", key: "0", content: function (cid, updateTime,tabPane) { return <BusinessInformation cid={cid} updateTime={updateTime} table={tabPane} /> } },
{ title: "财务数据", key: "1", content: function (cid, updateTime,tabPane) { return <FinancialData cid={cid} updateTime={updateTime} table={tabPane} /> } },
{ title: "经营风险", key: "2", content: function (cid, updateTime,tabPane) { return <OperationalRisk cid={cid} updateTime={updateTime} table={tabPane} /> } },
{ title: "财务分析", key: "3", content: function (cid, updateTime,tabPane) { return <FinancialAnalysis cid={cid} updateTime={updateTime} table={tabPane} /> } },
{ title: "综合信用分析", key: "4", content: function (cid, updateTime,tabPane) { return <CreditAnalysis cid={cid} updateTime={updateTime} table={tabPane} /> } },
{ title: "ESG评价分析", key: "5", content: function (cid, updateTime,tabPane) { return <EsgAnalysis cid={cid} updateTime={updateTime} table={tabPane} /> } },
{ title: "评价记录", key: "6", content: function (cid, updateTime,tabPane) { return <EvaluationRecords cid={cid} table={tabPane} /> } },
]
function CompanyDetails(props) {
const [value, setValue] = useState({})
const [tabPane, setTabPane] = useState(tab[0].title)
const [updateTime, setUpdateTime] = useState([])
const [targetUpdateTime, setTargetUpdateTime] = useState([])
useEffect(() => {
api.get("/admin/company/head_info", { cid: props.cid }).then(res => {
setValue(res)
})
}, [props.cid])
useEffect(() => {
api.post("/admin/company/update_time", { cid: props.cid, table: tabPane }).then(res => {
if (res.update_time) {
setUpdateTime(res.update_time)
setTargetUpdate(res.update_time[0])
} else {
setUpdateTime([])
}
})
}, [props.cid, tabPane])
function callback(key) {
setTabPane(tab[key].title)
}
function setTargetUpdate(param) {
setTargetUpdateTime(param)
}
return (
<Card>
<p style={{ fontWeight: 800 }} >{value['企业名称']}</p>
<Descriptions>
<Descriptions.Item label="企业ID">
{props.cid}
</Descriptions.Item>
<Descriptions.Item label="邮箱">
{value['账户邮箱']}
</Descriptions.Item>
<Descriptions.Item label="行业">
{value['所属行业']}
</Descriptions.Item>
</Descriptions>
<Tabs defaultActiveKey="0" onChange={callback}>
{tab.map(item => {
return <TabPane tab={item.title} key={item.key}>
<Layout style={{ background: '#fff' }}>
<Content style={{ background: '#fff', margin: "0 0 40px 0", padding: "20px 20px 20px 0" }}>{item.content(props.cid, targetUpdateTime,tabPane)}</Content>
<Sider style={{ background: '#fff', padding: 20 }} className='sider-box'>
<p>更新日期</p>
{
updateTime.map(item => {
return <p><span onClick={setTargetUpdate.bind(this, item)}>{item}</span></p>
})
}
<Row align='middle'><span>返回条数</span><p style={{ margin: "0 5px" }}>{updateTime.length}</p><span>条</span></Row>
</Sider>
</Layout>
</TabPane>
})}
</Tabs>
</Card>
)
}
export default CompanyDetails

45
src/pages/home/branch/manage/company/companyDetails/operationalRisk.js Normal file
View File

@ -0,0 +1,45 @@
import React, { useState, useEffect } from 'react'
import { Descriptions, Row, Col } from 'antd'
import FeTable from "@/components/table"
import api from "@/api/request"
import { getColumn } from "@/utils/utils"
import "./index.css"
function OperationalRisk(props) {
const [value, setValue] = useState({})
useEffect(() => {
if (props.table === '经营风险') {
api.post("/admin/company/operating_risk", { cid: props.cid, update_time: props.updateTime }).then(res => {
setValue(res)
})
}
}, [props.cid, props.updateTime, props.table])
return (
<>
<Descriptions column={4}>
<Descriptions.Item label="评价ID">{value['评价ID']}</Descriptions.Item>
<Descriptions.Item label="风险级别">{value['风险级别']}</Descriptions.Item>
<Descriptions.Item label="风险分数">{value['风险分数']}</Descriptions.Item>
<Descriptions.Item label="列入失信名单">{value['列入失信名单']}</Descriptions.Item>
</Descriptions>
<Row justify='space-between'>
<Col span={12} style={{ paddingRight: 20 }}>
<p>合规风险</p>
<FeTable data={value['合规风险统计']} columns={getColumn(value['合规风险统计'])}></FeTable>
<p>经营风险</p>
<FeTable data={value['经营风险']} columns={getColumn(value['经营风险'])}></FeTable>
<p>变更记录</p>
<FeTable data={value['变更记录统计']} columns={getColumn(value['变更记录统计'])}></FeTable>
</Col>
<Col span={12} style={{ paddingLeft: 20 }}>
<p>周边风险</p>
<FeTable data={value['周边风险统计']} columns={getColumn(value['周边风险统计'])}></FeTable>
</Col>
</Row>
</>
)
}
export default OperationalRisk

2
src/pages/home/content.js
View File

@ -4,7 +4,7 @@ import { operationAction } from "@/action/index"
import Dashboard from './branch/dashboard/dashboard'
import TestCompany from "./branch/test/company"
import ManageCompany from './branch/manage/company/company'
import CompanyDetails from "./branch/manage/company/companyDetails"
import CompanyDetails from "./branch/manage/company/companyDetails/index"
import ManageRate from './branch/manage/rate/rate'
import RateTabs from './branch/manage/rate/branch/index';
import ManageIndustry from "./branch/manage/industry"

15
src/utils/utils.js Normal file
View File

@ -0,0 +1,15 @@
export function getColumn(params) {
return Array.isArray(params) && params.length !== 0 ? Object.keys(params[0]).map((key, index) => {
return {
title: key,
dataIndex: key,
key: index,
align: 'center',
render: record => {
return Array.isArray(record) ? record.map(item => {
return <span className='table-span'>{item}</span>
}) : <span>{record}</span>
}
}
}) : []
}