taoge_xiaodi/td_official
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

柱状图

Browse Source
This commit is contained in:
ljx
2025-08-21 20:03:15 +08:00
parent aab67593eb
commit f01487dc50
5 changed files with 285 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
src/views/largeScreen/components/rightPage.vue
View File

@ -8,6 +8,32 @@
</div>
<div class="cashFlow">
<TitleComponent :title="'现金流概述'" />
<div class="inflowData">
<div class="inflow">
<div class="title">现金流入</div>
<div class="number">1000000</div>
<div class="unit">万元</div>
</div>
<div class="inflow">
<div class="title">现金流出</div>
<div class="number">1000000</div>
<div class="unit">万元</div>
</div>
<div class="inflow">
<div class="title">净现金流</div>
<div class="number">1000000</div>
<div class="unit">万元</div>
</div>
</div>
<div class="inflow_echarts">
<EchartBox :option="barOption" />
</div>
<div class="progress">
<div class="progress_item">
<div class="title">项目进度</div>
<div class="number">100%</div>
</div>
</div>
</div>
</div>
</template>
@ -18,6 +44,8 @@ import EchartBox from '@/components/EchartBox/index.vue';
import { getLineOption, getBarOptions } from './optionList';
const lineOption = ref();
const barOption = ref();
const getCapitalData = (data?: any) => {
// const xData = data.map((item) => item.time);
// const yData = data.map((item) => item.content);
@ -33,8 +61,26 @@ const getCapitalData = (data?: any) => {
};
lineOption.value = getLineOption(lineData);
};
const getTurnoverList = (data?: any) => {
// const xData = data.map((item) => item.time);
// const yData = data.map((item) => {
// // 先将content转换为数字，再调用toFixed
// const num = Number(item.content);
// return isNaN(num) ? 0 : Number(num.toFixed(2));
// });
const barData = {
name: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
value: [
[2, 5, 15, 30, 25, 35, 40, 35, 45, 50, 40, 55],
[4, 3, 6, 11, 15, 22, 30, 14, 48, 22, 25, 60]
]
};
barOption.value = getBarOptions(barData);
};
onMounted(() => {
getCapitalData();
getTurnoverList();
});
//资金KPI
@ -57,7 +103,7 @@ onMounted(() => {
}
.funds_echarts {
width: 100%;
height: 35vh;
height: 25vh;
padding: 10px 0 0 0;
}
.cashFlow {
@ -68,4 +114,52 @@ onMounted(() => {
padding: 10px 5px;
margin-top: 20px;
}
.inflowData {
width: 100%;
height: 12vh;
// background: #fff;
padding-top: 20px;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
.inflow {
width: 100%;
height: 100%;
// background: #f5f5f5;
padding: 10px;
box-sizing: border-box;
background: rgba(29, 214, 255, 0.1);
border-left: 1px solid rgba(29, 214, 255, 1);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.title {
font-size: 14px;
// font-weight: 500;
color: #fff;
padding-bottom: 10px;
}
.number {
font-size: 24px;
// font-weight: 500;
color: #fff;
padding-bottom: 10px;
}
.unit {
font-size: 12px;
// font-weight: 500;
color: rgba(255, 255, 255, 0.5);
}
}
}
.inflow_echarts {
width: 100%;
height: 25vh;
margin-top: 20px;
}
.progress {
width: 100%;
}
</style>