From e27868b73027c0be6bc28b517bfb755253a1ca39 Mon Sep 17 00:00:00 2001
From: xuyucheng <Nd17cCxTS4SSDDh21SaA>
Date: Thu, 21 Apr 2022 16:42:33 +0800
Subject: [PATCH] mode

---
 .../branch/manage/company/companyDetails.js   | 133 --------------
 .../companyDetails/businessInformation.js     |  37 ++++
 .../company/companyDetails/creditAnalysis.js  | 105 +++++++++++
 .../company/companyDetails/esgAnalysis.js     | 161 +++++++++++++++++
 .../companyDetails/evaluationRecords.js       |  26 +++
 .../companyDetails/financialAnalysis.js       | 167 ++++++++++++++++++
 .../company/companyDetails/financialData.js   |  25 +++
 .../manage/company/companyDetails/index.css   |  13 ++
 .../manage/company/companyDetails/index.js    |  94 ++++++++++
 .../company/companyDetails/operationalRisk.js |  45 +++++
 src/pages/home/content.js                     |   2 +-
 src/utils/utils.js                            |  15 ++
 12 files changed, 689 insertions(+), 134 deletions(-)
 delete mode 100644 src/pages/home/branch/manage/company/companyDetails.js
 create mode 100644 src/pages/home/branch/manage/company/companyDetails/businessInformation.js
 create mode 100644 src/pages/home/branch/manage/company/companyDetails/creditAnalysis.js
 create mode 100644 src/pages/home/branch/manage/company/companyDetails/esgAnalysis.js
 create mode 100644 src/pages/home/branch/manage/company/companyDetails/evaluationRecords.js
 create mode 100644 src/pages/home/branch/manage/company/companyDetails/financialAnalysis.js
 create mode 100644 src/pages/home/branch/manage/company/companyDetails/financialData.js
 create mode 100644 src/pages/home/branch/manage/company/companyDetails/index.css
 create mode 100644 src/pages/home/branch/manage/company/companyDetails/index.js
 create mode 100644 src/pages/home/branch/manage/company/companyDetails/operationalRisk.js
 create mode 100644 src/utils/utils.js

diff --git a/src/pages/home/branch/manage/company/companyDetails.js b/src/pages/home/branch/manage/company/companyDetails.js
deleted file mode 100644
index 97c1687..0000000
--- a/src/pages/home/branch/manage/company/companyDetails.js
+++ /dev/null
@@ -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);
\ No newline at end of file
diff --git a/src/pages/home/branch/manage/company/companyDetails/businessInformation.js b/src/pages/home/branch/manage/company/companyDetails/businessInformation.js
new file mode 100644
index 0000000..298f317
--- /dev/null
+++ b/src/pages/home/branch/manage/company/companyDetails/businessInformation.js
@@ -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
\ No newline at end of file
diff --git a/src/pages/home/branch/manage/company/companyDetails/creditAnalysis.js b/src/pages/home/branch/manage/company/companyDetails/creditAnalysis.js
new file mode 100644
index 0000000..83d434e
--- /dev/null
+++ b/src/pages/home/branch/manage/company/companyDetails/creditAnalysis.js
@@ -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
\ No newline at end of file
diff --git a/src/pages/home/branch/manage/company/companyDetails/esgAnalysis.js b/src/pages/home/branch/manage/company/companyDetails/esgAnalysis.js
new file mode 100644
index 0000000..2abf658
--- /dev/null
+++ b/src/pages/home/branch/manage/company/companyDetails/esgAnalysis.js
@@ -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
\ No newline at end of file
diff --git a/src/pages/home/branch/manage/company/companyDetails/evaluationRecords.js b/src/pages/home/branch/manage/company/companyDetails/evaluationRecords.js
new file mode 100644
index 0000000..d905d51
--- /dev/null
+++ b/src/pages/home/branch/manage/company/companyDetails/evaluationRecords.js
@@ -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
\ No newline at end of file
diff --git a/src/pages/home/branch/manage/company/companyDetails/financialAnalysis.js b/src/pages/home/branch/manage/company/companyDetails/financialAnalysis.js
new file mode 100644
index 0000000..b599855
--- /dev/null
+++ b/src/pages/home/branch/manage/company/companyDetails/financialAnalysis.js
@@ -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
\ No newline at end of file
diff --git a/src/pages/home/branch/manage/company/companyDetails/financialData.js b/src/pages/home/branch/manage/company/companyDetails/financialData.js
new file mode 100644
index 0000000..32b118f
--- /dev/null
+++ b/src/pages/home/branch/manage/company/companyDetails/financialData.js
@@ -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
\ No newline at end of file
diff --git a/src/pages/home/branch/manage/company/companyDetails/index.css b/src/pages/home/branch/manage/company/companyDetails/index.css
new file mode 100644
index 0000000..d31f2d0
--- /dev/null
+++ b/src/pages/home/branch/manage/company/companyDetails/index.css
@@ -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;
+}
\ No newline at end of file
diff --git a/src/pages/home/branch/manage/company/companyDetails/index.js b/src/pages/home/branch/manage/company/companyDetails/index.js
new file mode 100644
index 0000000..7bfd265
--- /dev/null
+++ b/src/pages/home/branch/manage/company/companyDetails/index.js
@@ -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
\ No newline at end of file
diff --git a/src/pages/home/branch/manage/company/companyDetails/operationalRisk.js b/src/pages/home/branch/manage/company/companyDetails/operationalRisk.js
new file mode 100644
index 0000000..b97f8f4
--- /dev/null
+++ b/src/pages/home/branch/manage/company/companyDetails/operationalRisk.js
@@ -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
\ No newline at end of file
diff --git a/src/pages/home/content.js b/src/pages/home/content.js
index ba3551c..d7345a0 100644
--- a/src/pages/home/content.js
+++ b/src/pages/home/content.js
@@ -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"
diff --git a/src/utils/utils.js b/src/utils/utils.js
new file mode 100644
index 0000000..dac5b08
--- /dev/null
+++ b/src/utils/utils.js
@@ -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>
+      }
+    }
+  }) : []
+}
\ No newline at end of file