mode

2022-04-25 17:05:17 +08:00 · 2022-04-25 17:05:17 +08:00 · ad9c64ce2e
parent f164cd69ce
commit ad9c64ce2e
11 changed files with 275 additions and 66 deletions
--- a/src/components/table.js
+++ b/src/components/table.js
@ -20,7 +20,7 @@ class FeTable extends Component {
        total: props.total,
        defaultPageSize: props.defaultPageSize ||10,
        current: props.current || 1,
-        maxHeight: props.maxHeight || 'auto'
+        minHeight: props.minHeight || 'auto'
      }
    }
    return null
@ -46,7 +46,7 @@ class FeTable extends Component {
  render() {
    return (
      <React.Fragment>
-        <Table bordered style={{ marginBottom: 20 }} dataSource={this.state.data} columns={this.state.columns} scroll={{y:this.state.maxHeight}} onRow={record => {return {
+        <Table bordered style={{ marginBottom: 20 }} dataSource={this.state.data} columns={this.state.columns} scroll={{y:this.state.minHeight}} onRow={record => {return {
            onClick: event => this.jumpRow(event, record)
          }
        }} pagination={{defaultPageSize:this.state.defaultPageSize,current:this.state.current,total: this.state.total,onChange:this.onChange.bind(this),showSizeChanger:true,
--- a/src/pages/home/branch/dashboard/dashboard.js
+++ b/src/pages/home/branch/dashboard/dashboard.js
@ -290,7 +290,7 @@ class Dashboard extends Component {
          </Col>
          <Col span={16}>
            <Card title="新增企业信息" style={{ height: 575 }}>
-              <FeTable maxHeight={350} defaultPageSize={5} data={this.state.company} columns={this.state.columns} current={this.state.form.page_no} callback={this.callback.bind(this)} total={this.state.total} pageChange={this.pageChange.bind(this)} onShowSizeChange={this.onShowSizeChange.bind(this)}></FeTable>
+              <FeTable minHeight={350} defaultPageSize={5} data={this.state.company} columns={this.state.columns} current={this.state.form.page_no} callback={this.callback.bind(this)} total={this.state.total} pageChange={this.pageChange.bind(this)} onShowSizeChange={this.onShowSizeChange.bind(this)}></FeTable>
            </Card>
          </Col>
        </Row>
--- a/src/pages/home/branch/manage/company/companyDetails/businessInformation.js
+++ b/src/pages/home/branch/manage/company/companyDetails/businessInformation.js
@ -6,7 +6,15 @@ import "./index.css"
 import { getColumn } from "@/utils/utils"

 function BusinessInformation(props) {
-  const [value, setValue] = useState({})
+  const [value, setValue] = useState({ })
+  const [stockholderPage,setStockholderPage] = useState({
+    current: 1,
+    pageSize: 10
+  })
+  const [memberPage,setMemberPage] = useState({
+    current: 1,
+    pageSize: 10
+  })

  useEffect(() => {
    if (!Array.isArray(props.updateTime)) {
@ -16,20 +24,53 @@ function BusinessInformation(props) {
        })
      }
    }
-  }, [props.cid,props.updateTime,props.table])
+  }, [props.cid, props.updateTime, props.table])
+
+  function pageChange(current, pageSize) {
+    setMemberPage({
+      current,
+      pageSize
+    })
+  }
+
+  function onShowSizeChange(current, pageSize) {
+    setMemberPage({
+      current,
+      pageSize
+    })
+  }
+
+  function stockPageChange(current, pageSize) {
+    setStockholderPage({
+      current,
+      pageSize
+    })
+  }
+
+  function onStockShowSizeChange(current, pageSize) {
+    setStockholderPage({
+      current,
+      pageSize
+    })
+  }
+
+  function getPageData(data, page, size) {
+    return data.slice((page - 1) * size, page * size)
+  }

  return (
    <>
      <h1 className='title_h'>工商信息</h1>
      <Descriptions>
        {value['工商信息'] && Object.keys(value['工商信息']).map((key, index) => {
-          return <Descriptions.Item label={key}>{value['工商信息'][key]}</Descriptions.Item>
+          return key !== "经营范围" ? <Descriptions.Item label={key}>{value['工商信息'][key]}</Descriptions.Item> : null
        })}
+        {value['工商信息'] && <Descriptions.Item label="经营范围">{value['工商信息']['经营范围']}</Descriptions.Item>}
      </Descriptions>
      <h1 className='title_h'>股东信息</h1>
-      <FeTable data={value['股东信息']} columns={getColumn(value['股东信息'])} />
+      {value['股东信息'] && <FeTable data={getPageData(value['股东信息'], stockholderPage.current, stockholderPage.pageSize)} columns={getColumn(value['股东信息'])} current={stockholderPage.current} pageChange={stockPageChange} onShowSizeChange={onStockShowSizeChange} total={value['股东信息'].length}/>}
      <h1 className='title_h'>主要成员</h1>
-      <FeTable data={value['主要成员']} columns={getColumn(value['主要成员'])} />
+      {value['主要成员'] && <FeTable data={getPageData(value['主要成员'], memberPage.current, memberPage.pageSize)} columns={getColumn(value['主要成员'])} current={memberPage.current} pageChange={pageChange} onShowSizeChange={onShowSizeChange} total={value['主要成员'].length} />}
    </>
  )
 }
--- a/src/pages/home/branch/manage/company/companyDetails/creditAnalysis.js
+++ b/src/pages/home/branch/manage/company/companyDetails/creditAnalysis.js
@ -97,6 +97,7 @@ function CreditAnalysis(props) {
          })
        }
      </Row>
+      <p style={{ fontWeight: 800 }}>历史级别</p>
      <FeTable data={value['历史级别']} columns={getColumn(value['历史级别'])} />
    </>
  )
--- a/src/pages/home/branch/manage/company/companyDetails/esgAnalysis.js
+++ b/src/pages/home/branch/manage/company/companyDetails/esgAnalysis.js
@ -1,9 +1,9 @@
 import React, { useState, useEffect } from 'react'
-import { Row, Col, Descriptions,Empty } from 'antd'
-import api from "@/api/request"
+import { Empty } from 'antd'
+// import api from "@/api/request"
 import "./index.css"
-import { getColumn } from "@/utils/utils"
-import FeTable from "@/components/table"
+// 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"
@ -53,17 +53,17 @@ const issueScore = [
 ]

 function EsgAnalysis(props) {
-  const [value, setValue] = useState({})
+  // 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++) {
+    // 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) {
--- a/src/pages/home/branch/manage/company/companyDetails/financialAnalysis.js
+++ b/src/pages/home/branch/manage/company/companyDetails/financialAnalysis.js
@ -12,13 +12,19 @@ import { getColumn } from "@/utils/utils"

 function FinancialAnalysis(props) {
  const [value, setValue] = useState({})
+  const [page,setPage] = useState(1)
+  const [size,setSize] = useState(10)

  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) {
-          // initDoubleBar("bar-1", res["财务得分去年比较"])
+          var data = {}
+          res["财务得分年度比较"].forEach(item=>{
+            data[Object.keys(item)[0]] = item[Object.keys(item)[0]]
+          })
+          initDoubleBar("bar-1", data)
          initDoubleBar("bar-2", res["财务得分同行比较"])
          initBar("bar-3", res["财务得分较去年变化"])
          initBar("bar-4", res["财务得分较同行差异"])
@ -94,7 +100,6 @@ function FinancialAnalysis(props) {
    }
  }

-
  function initBar(id, param) {
    const myChart = echarts.init(document.getElementById(id))
    myChart.setOption({
@ -151,6 +156,20 @@ function FinancialAnalysis(props) {
    }
  }

+  function pageChange(current, pageSize){
+    setPage(current)
+    setSize(pageSize)
+  }
+
+  function onShowSizeChange(current, pageSize){
+    setPage(current)
+    setSize(pageSize)
+  }
+
+  function getPageData(data,page,size){
+    return data.slice((page-1)*size,page*size)
+  }
+
  return (
    <>
      <Descriptions>
@ -177,7 +196,7 @@ function FinancialAnalysis(props) {
          <div id='bar-4' style={{ height: 250 }}></div>
        </Col>
      </Row>
-      <FeTable data={value['指标详情']} columns={getColumn(value['指标详情'])} />
+      {value['指标详情']&&<FeTable data={getPageData(value['指标详情'],page,size)} columns={getColumn(value['指标详情'])} current={page} pageChange={pageChange} onShowSizeChange={onShowSizeChange} total={value['指标详情'].length}/>}
    </>
  )
 }
--- a/src/pages/home/branch/manage/company/companyDetails/financialData.js
+++ b/src/pages/home/branch/manage/company/companyDetails/financialData.js
@ -1,9 +1,8 @@
 import React, { useState, useEffect } from 'react'
-import { } from 'antd'
 import api from "@/api/request"
 import "./index.css"
-import { getColumn } from "@/utils/utils"
 import FeTable from "@/components/table"
+import { Empty } from 'antd'

 function FinancialData(props) {
  const [profits, setProfits] = useState([])
@ -12,18 +11,33 @@ function FinancialData(props) {
  const [supplement, setSupplement] = useState([])

  useEffect(() => {
-    if (props.table === '财务数据' && props.updateTime !== "") {
-      api.post("/admin/company/financial_data", { cid: props.cid, report_date: props.updateTime }).then(res => {
-        if (res) {
-          setProfits([...profits, res['资产负债表']])
-          setAssets([...assets, res['利润表']])
-          setFinancial([...financial, res['财务指标']])
-          setSupplement([...supplement, res['补充数据表']])
-        }
-      })
+    if (props.table === '财务数据') {
+      const pro = []
+      const ass = []
+      const fin = []
+      const sup = []
+      for (let i in props.updateTime) {
+        getFinancial(function (data) {
+          pro.push(data['资产负债表'])
+          ass.push(data['利润表'])
+          fin.push(data['财务指标'])
+          sup.push(data['补充数据表'])
+          setTimeout(() => {
+            setProfits(pro)
+            setAssets(ass)
+            setFinancial(fin)
+            setSupplement(sup)
+          }, 100)
+        }, { cid: props.cid, report_date: props.updateTime[i] })
+      }
    }
  }, [props.cid, props.updateTime, props.table])

+  function getFinancial(callback, params) {
+    api.post("/admin/company/financial_data", params).then(res => {
+      callback(res)
+    })
+  }

  function analysisArray(params) {
    var columns = []
@ -72,13 +86,29 @@ function FinancialData(props) {
  return (
    <>
      <p>资产负债表</p>
-      {profits.length !== 0 && analysisArray(profits)}
+      {profits.length !== 0 ? analysisArray(profits) : <Empty description={
+        <span>
+          请选择时间
+        </span>
+      } style={{height:300}}/>}
      <p>利润表</p>
-      {assets.length!==0&&analysisArray(assets)}
+      {assets.length !== 0 ? analysisArray(assets): <Empty description={
+        <span>
+          请选择时间
+        </span>
+      } style={{height:300}}/>}
      <p>财务指标</p>
-      {financial.length!==0&&analysisArray(financial)}
+      {financial.length !== 0 ? analysisArray(financial): <Empty description={
+        <span>
+          请选择时间
+        </span>
+      } style={{height:300}}/>}
      <p>补充数据表</p>
-      {supplement.length!==0&&analysisArray(supplement)}
+      {supplement.length !== 0 ? analysisArray(supplement): <Empty description={
+        <span>
+          请选择时间
+        </span>
+      } style={{height:300}}/>}
    </>
  )
 }
--- a/src/pages/home/branch/manage/company/companyDetails/index.css
+++ b/src/pages/home/branch/manage/company/companyDetails/index.css
@ -10,4 +10,8 @@
 .table-span{
  margin: 5px 0;
  display: block;
+}
+
+.ant-checkbox-wrapper{
+  margin: 5px 0;
 }
--- a/src/pages/home/branch/manage/company/companyDetails/index.js
+++ b/src/pages/home/branch/manage/company/companyDetails/index.js
@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react'
-import { Card, Tabs, Row, Layout, Descriptions } from 'antd'
+import { Card, Tabs, Row, Layout, Descriptions, Checkbox, Radio } from 'antd'
 import api from "@/api/request"
 import BusinessInformation from './businessInformation';
 import FinancialData from "./financialData"
@ -15,19 +15,20 @@ 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} /> } },
+  { 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 [updateTimeArray, setUpdateTimeArray] = useState([])
  const [targetUpdateTime, setTargetUpdateTime] = useState("")

  useEffect(() => {
@ -39,8 +40,11 @@ function CompanyDetails(props) {
  useEffect(() => {
    api.post("/admin/company/update_time", { cid: props.cid, table: tabPane }).then(res => {
      if (res.update_time) {
-        // setTargetUpdate(res.update_time[0])
-        setUpdateTime(res.update_time)
+        const data = res.update_time.map(item => {
+          return { label: item, value: item }
+        })
+        setUpdateTime(data)
+        setTargetUpdateTime(res.update_time[0])
      } else {
        setUpdateTime([])
      }
@ -51,8 +55,12 @@ function CompanyDetails(props) {
    setTabPane(tab[key].title)
  }

-  function setTargetUpdate(param) {
-    setTargetUpdateTime(param)
+  function setTargetUpdate(e) {
+    setTargetUpdateTime(e.target.value)
+  }
+
+  function setTargetUpdateArray(e) {
+    setUpdateTimeArray(e)
  }

  return (
@ -73,14 +81,14 @@ function CompanyDetails(props) {
        {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>
+              <Content style={{ background: '#fff', margin: "0 0 40px 0", padding: "20px 20px 20px 0" }}>{tabPane === '财务数据' ? item.content(props.cid, updateTimeArray, tabPane) : 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)} style={{cursor:"pointer"}}>{item}</span></p>
-                  })
-                }
+                <p>{
+                  tabPane === '财务数据' ? <Checkbox.Group options={updateTime} onChange={setTargetUpdateArray} /> : <Radio.Group onChange={setTargetUpdate} value={targetUpdateTime}>{updateTime.map(item => {
+                    return <Radio value={item.value}>{item.label}</Radio>
+                  })}</Radio.Group>
+                }</p>
                <Row align='middle'><span>返回条数</span><p style={{ margin: "0 5px" }}>{updateTime.length}</p><span>条</span></Row>
              </Sider>
            </Layout>
--- a/src/pages/home/branch/manage/company/companyDetails/operationalRisk.js
+++ b/src/pages/home/branch/manage/company/companyDetails/operationalRisk.js
@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react'
-import { Descriptions, Row, Col } from 'antd'
+import { Descriptions, Row, Col, Drawer, Button } from 'antd'
 import FeTable from "@/components/table"
 import api from "@/api/request"
 import { getColumn } from "@/utils/utils"
@ -7,6 +7,25 @@ import "./index.css"

 function OperationalRisk(props) {
  const [value, setValue] = useState({})
+  const [compliancePage, setCompliancePage] = useState({
+    current: 1,
+    pageSize: 10
+  })
+  const [alterationPage, setAlterationPage] = useState({
+    current: 1,
+    pageSize: 10
+  })
+  const [businessPage, setBusinessPage] = useState({
+    current: 1,
+    pageSize: 10
+  })
+  const [rimPage, setRimPage] = useState({
+    current: 1,
+    pageSize: 10
+  })
+  const [visible, setVisible] = useState(false);
+  const [expand, setExpand] = useState([])
+

  useEffect(() => {
    if (props.table === '经营风险') {
@ -16,6 +35,95 @@ function OperationalRisk(props) {
    }
  }, [props.cid, props.updateTime, props.table])

+  function compliancePageChange(current, pageSize) {
+    setCompliancePage({
+      current,
+      pageSize
+    })
+  }
+
+  function onComplianceShowSizeChange(current, pageSize) {
+    setCompliancePage({
+      current,
+      pageSize
+    })
+  }
+
+  function alterationPageChange(current, pageSize) {
+    setAlterationPage({
+      current,
+      pageSize
+    })
+  }
+
+  function onAlterationShowSizeChange(current, pageSize) {
+    setAlterationPage({
+      current,
+      pageSize
+    })
+  }
+
+  function businessPageChange(current, pageSize) {
+    setBusinessPage({
+      current,
+      pageSize
+    })
+  }
+
+  function onBusinessShowSizeChange(current, pageSize) {
+    setBusinessPage({
+      current,
+      pageSize
+    })
+  }
+
+  function rimPageChange(current, pageSize) {
+    setRimPage({
+      current,
+      pageSize
+    })
+  }
+
+  function onRimShowSizeChange(current, pageSize) {
+    setRimPage({
+      current,
+      pageSize
+    })
+  }
+
+  function getPageData(data, page, size) {
+    return data.slice((page - 1) * size, page * size)
+  }
+
+  function slot() {
+    return <>
+      <Button type="primary">
+        Open
+      </Button>
+      <Drawer title="详情" placement="right" onClose={onClose} visible={visible} key={value['类型']} maskStyle={{ background: 'transparent' }}>
+        {expand.map((item, index) => {
+          return <p><span key={index}>{index + 1}.{item}</span></p>
+        })}
+      </Drawer>
+    </>
+  }
+
+
+  function showDrawer() {
+    setVisible(true);
+  };
+
+  function onClose() {
+    setVisible(false);
+  };
+
+  function callback(e, value) {
+    if (e === "Open") {
+      showDrawer()
+      setExpand(value['详情'])
+    }
+  }
+
  return (
    <>
      <Descriptions column={4}>
@ -27,15 +135,15 @@ function OperationalRisk(props) {
      <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>
+          {value['合规风险统计'] && <FeTable data={getPageData(value['合规风险统计'], compliancePage.current, compliancePage.pageSize)} columns={getColumn(value['合规风险统计'])} minHeight={300} current={compliancePage.current} pageChange={compliancePageChange} onShowSizeChange={onComplianceShowSizeChange} total={value['合规风险统计'].length} />}
          <p>变更记录</p>
-          <FeTable data={value['变更记录统计']} columns={getColumn(value['变更记录统计'])}></FeTable>
+          {value['变更记录统计'] && <FeTable data={getPageData(value['变更记录统计'], alterationPage.current, alterationPage.pageSize)} columns={getColumn(value['变更记录统计'])} minHeight={300} current={alterationPage.current} pageChange={alterationPageChange} onShowSizeChange={onAlterationShowSizeChange} total={value['变更记录统计'].length} />}
        </Col>
        <Col span={12} style={{ paddingLeft: 20 }}>
+          <p>经营风险</p>
+          {value['经营风险统计'] && <FeTable data={getPageData(value['经营风险统计'], businessPage.current, businessPage.pageSize)} columns={getColumn(value['经营风险统计'])} minHeight={300} current={businessPage.current} pageChange={businessPageChange} onShowSizeChange={onBusinessShowSizeChange} total={value['经营风险统计'].length} />}
          <p>周边风险</p>
-          <FeTable data={value['周边风险统计']} columns={getColumn(value['周边风险统计'])}></FeTable>
+          {value['周边风险统计'] && <FeTable data={getPageData(value['周边风险统计'], rimPage.current, rimPage.pageSize)} columns={getColumn(value['周边风险统计'], slot())} minHeight={300} current={rimPage.current} pageChange={rimPageChange} onShowSizeChange={onRimShowSizeChange} total={value['周边风险统计'].length} callback={callback} />}
        </Col>
      </Row>
    </>
--- a/src/utils/utils.js
+++ b/src/utils/utils.js
@ -1,4 +1,4 @@
-export function getColumn(params) {
+export function getColumn(params, slot) {
  return Array.isArray(params) && params.length !== 0 ? Object.keys(params[0]).map((key, index) => {
    return {
      title: key,
@ -6,9 +6,7 @@ export function getColumn(params) {
      key: index,
      align: 'center',
      render: record => {
-        return Array.isArray(record) ? record.map(item => {
-          return <span className='table-span'>{item}</span>
-        }) : <span>{record}</span>
+        return Array.isArray(record) && slot ? slot : <span>{record}</span>
      }
    }
  }) : []