mode
This commit is contained in:
xuyucheng
parent
e27868b730
commit
f164cd69ce
|
|
@ -2,10 +2,10 @@ 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/chart/bar";
|
||||
import 'echarts/lib/component/grid'
|
||||
import "echarts/lib/component/tooltip"
|
||||
import "echarts/lib/component/legend"
|
||||
import api from "@/api/request"
|
||||
import FeTable from "@/components/table"
|
||||
import { getColumn } from "@/utils/utils"
|
||||
|
|
@ -18,17 +18,16 @@ function FinancialAnalysis(props) {
|
|||
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["财务得分较同行差异"])
|
||||
// initDoubleBar("bar-1", res["财务得分去年比较"])
|
||||
initDoubleBar("bar-2", res["财务得分同行比较"])
|
||||
initBar("bar-3", res["财务得分较去年变化"])
|
||||
initBar("bar-4", res["财务得分较同行差异"])
|
||||
}
|
||||
})
|
||||
}
|
||||
}, [props.cid, props.updateTime, props.table])
|
||||
|
||||
|
||||
function initLine(id, param) {
|
||||
function initDoubleBar(id, param) {
|
||||
const myChart = echarts.init(document.getElementById(id))
|
||||
myChart.setOption({
|
||||
tooltip: {
|
||||
|
|
@ -36,6 +35,17 @@ function FinancialAnalysis(props) {
|
|||
trigger: "item",
|
||||
showContent: true,
|
||||
borderColor: "#fff",
|
||||
formatter: (params) => {
|
||||
return `<span>${params.name} ${params.data}%</span>`
|
||||
}
|
||||
},
|
||||
legend:{
|
||||
show:true,
|
||||
x: "right",
|
||||
y: "top",
|
||||
itemHeight: 10,
|
||||
itemGap: 8,
|
||||
background: "#fff",
|
||||
},
|
||||
grid: {
|
||||
top: '20px',
|
||||
|
|
@ -45,7 +55,6 @@ function FinancialAnalysis(props) {
|
|||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: Object.keys(param[Object.keys(param)[0]]).map(key => {
|
||||
return key
|
||||
}),
|
||||
|
|
@ -70,14 +79,14 @@ function FinancialAnalysis(props) {
|
|||
},
|
||||
series: Object.keys(param).map(key => {
|
||||
return {
|
||||
name: key,
|
||||
type: 'line',
|
||||
type: 'bar',
|
||||
barWidth: "20%",
|
||||
name:key,
|
||||
data: Object.keys(param[key]).map(k => {
|
||||
return param[key][k]
|
||||
})
|
||||
}
|
||||
}),
|
||||
|
||||
})
|
||||
})
|
||||
|
||||
window.onresize = function () {
|
||||
|
|
@ -85,7 +94,8 @@ function FinancialAnalysis(props) {
|
|||
}
|
||||
}
|
||||
|
||||
function initPie(id, param) {
|
||||
|
||||
function initBar(id, param) {
|
||||
const myChart = echarts.init(document.getElementById(id))
|
||||
myChart.setOption({
|
||||
tooltip: {
|
||||
|
|
@ -93,39 +103,47 @@ function FinancialAnalysis(props) {
|
|||
trigger: "item",
|
||||
showContent: true,
|
||||
borderColor: "#fff",
|
||||
formatter: (params) => {
|
||||
return `<span>${params.name} ${params.data}%</span>`
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
top: '20px',
|
||||
left: '50px',
|
||||
right: '50px',
|
||||
bottom: '20px',
|
||||
width: '100%',
|
||||
height: '100%'
|
||||
},
|
||||
label: {
|
||||
show: false
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: Object.keys(param).map(key => {
|
||||
return key
|
||||
}),
|
||||
axisLine: {
|
||||
show: true
|
||||
},
|
||||
axisTick: {
|
||||
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)
|
||||
}
|
||||
}),
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
show: true
|
||||
}
|
||||
]
|
||||
},
|
||||
series: [{
|
||||
type: 'bar',
|
||||
barWidth: "20%",
|
||||
data: Object.keys(param).map(key => {
|
||||
return param[key]
|
||||
})
|
||||
}]
|
||||
})
|
||||
|
||||
window.onresize = function () {
|
||||
|
|
@ -142,21 +160,21 @@ function FinancialAnalysis(props) {
|
|||
<Row style={{ marginBottom: 40 }}>
|
||||
<Col span={10}>
|
||||
<p style={{ fontWeight: 800 }}>财务得分去年比较</p>
|
||||
<div id='line-1' style={{ height: 250 }}></div>
|
||||
<div id='bar-1' style={{ height: 250 }}></div>
|
||||
</Col>
|
||||
<Col span={10} offset={2}>
|
||||
<p style={{ fontWeight: 800 }}>财务得分同行比较</p>
|
||||
<div id='line-2' style={{ height: 250 }}></div>
|
||||
<div id='bar-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>
|
||||
<div id='bar-3' style={{ height: 250 }}></div>
|
||||
</Col>
|
||||
<Col span={10} offset={2}>
|
||||
<p style={{ fontWeight: 800 }}>财务得分较同行差异</p>
|
||||
<div id='pie-2' style={{ height: 250 }}></div>
|
||||
<div id='bar-4' style={{ height: 250 }}></div>
|
||||
</Col>
|
||||
</Row>
|
||||
<FeTable data={value['指标详情']} columns={getColumn(value['指标详情'])} />
|
||||
|
|
|
|||
|
|
@ -3,21 +3,82 @@ import { } from 'antd'
|
|||
import api from "@/api/request"
|
||||
import "./index.css"
|
||||
import { getColumn } from "@/utils/utils"
|
||||
import FeTable from "@/components/table"
|
||||
|
||||
function FinancialData(props) {
|
||||
const [value, setValue] = useState({})
|
||||
const [profits, setProfits] = useState([])
|
||||
const [assets, setAssets] = useState([])
|
||||
const [financial, setFinancial] = useState([])
|
||||
const [supplement, setSupplement] = useState([])
|
||||
|
||||
useEffect(() => {
|
||||
if (props.table === '财务数据' && props.updateTime) {
|
||||
if (props.table === '财务数据' && props.updateTime !== "") {
|
||||
api.post("/admin/company/financial_data", { cid: props.cid, report_date: props.updateTime }).then(res => {
|
||||
setValue(res)
|
||||
if (res) {
|
||||
setProfits([...profits, res['资产负债表']])
|
||||
setAssets([...assets, res['利润表']])
|
||||
setFinancial([...financial, res['财务指标']])
|
||||
setSupplement([...supplement, res['补充数据表']])
|
||||
}
|
||||
})
|
||||
}
|
||||
}, [props.cid, props.updateTime, props.table])
|
||||
|
||||
|
||||
function analysisArray(params) {
|
||||
var columns = []
|
||||
const matrixData = params.map((row) => {
|
||||
var arr = [];
|
||||
for (var i in row) {
|
||||
columns.push(i)
|
||||
arr.push(row[i]);
|
||||
}
|
||||
return arr;
|
||||
});
|
||||
|
||||
const transData = matrixData[0].map((col, i) => {
|
||||
return [
|
||||
columns[i],
|
||||
...matrixData.map((row) => {
|
||||
return row[i];
|
||||
}),
|
||||
];
|
||||
});
|
||||
|
||||
const transTitle = transData[0].map((item, i) => {
|
||||
return {
|
||||
title: item, dataIndex: item, align: 'center', key: i
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
const data = transData.map((item, i) => {
|
||||
var obj = {}
|
||||
item.forEach((child, j) => {
|
||||
Object.assign(obj, {
|
||||
[transTitle[j].title]: child,
|
||||
key: i
|
||||
})
|
||||
})
|
||||
return obj
|
||||
})
|
||||
|
||||
data.shift()
|
||||
|
||||
return <React.Fragment><FeTable data={data} columns={transTitle}></FeTable></React.Fragment>
|
||||
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
|
||||
<p>资产负债表</p>
|
||||
{profits.length !== 0 && analysisArray(profits)}
|
||||
<p>利润表</p>
|
||||
{assets.length!==0&&analysisArray(assets)}
|
||||
<p>财务指标</p>
|
||||
{financial.length!==0&&analysisArray(financial)}
|
||||
<p>补充数据表</p>
|
||||
{supplement.length!==0&&analysisArray(supplement)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ function CompanyDetails(props) {
|
|||
const [value, setValue] = useState({})
|
||||
const [tabPane, setTabPane] = useState(tab[0].title)
|
||||
const [updateTime, setUpdateTime] = useState([])
|
||||
const [targetUpdateTime, setTargetUpdateTime] = useState([])
|
||||
const [targetUpdateTime, setTargetUpdateTime] = useState("")
|
||||
|
||||
useEffect(() => {
|
||||
api.get("/admin/company/head_info", { cid: props.cid }).then(res => {
|
||||
|
|
@ -39,8 +39,8 @@ 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)
|
||||
setTargetUpdate(res.update_time[0])
|
||||
} else {
|
||||
setUpdateTime([])
|
||||
}
|
||||
|
|
@ -78,7 +78,7 @@ function CompanyDetails(props) {
|
|||
<p>更新日期</p>
|
||||
{
|
||||
updateTime.map(item => {
|
||||
return <p><span onClick={setTargetUpdate.bind(this, item)}>{item}</span></p>
|
||||
return <p><span onClick={setTargetUpdate.bind(this, item)} style={{cursor:"pointer"}}>{item}</span></p>
|
||||
})
|
||||
}
|
||||
<Row align='middle'><span>返回条数</span><p style={{ margin: "0 5px" }}>{updateTime.length}</p><span>条</span></Row>
|
||||
|
|
|
|||
Loading…
Reference in New Issue