74 lines
1.8 KiB
Vue
74 lines
1.8 KiB
Vue
<template>
|
|
<div class="leftPage">
|
|
<!-- -->
|
|
<div class="kpi_box">
|
|
<TitleComponent :title="'支付KPI'" style="margin-bottom: 20px;"/>
|
|
<ProgressComponent
|
|
title="应收账款"
|
|
value="123,456.78"
|
|
percentageChange="+25.30%"
|
|
progressPercentage="75"
|
|
progressColor="rgba(255, 77, 79, 1)"
|
|
/>
|
|
<ProgressComponent
|
|
title="应付账款"
|
|
value="123,456.78"
|
|
percentageChange="+25.30%"
|
|
progressPercentage="25"
|
|
progressColor="rgba(29, 214, 255, 1)"
|
|
/>
|
|
<ProgressComponent
|
|
title="本月付款"
|
|
value="123,456.78"
|
|
percentageChange="+25.30%"
|
|
progressPercentage="45"
|
|
progressColor="rgba(0, 227, 150, 1)"
|
|
/>
|
|
<ProgressComponent
|
|
title="本月收款"
|
|
value="123,456.78"
|
|
percentageChange="+25.30%"
|
|
progressPercentage="10"
|
|
progressColor="rgba(255, 147, 42, 1)"
|
|
/>
|
|
</div>
|
|
<div class="contract_box">
|
|
<EchartBox :option="barOption" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, reactive, onMounted, computed, toRefs, getCurrentInstance, nextTick } from 'vue';
|
|
// import echarts from 'echarts';
|
|
import TitleComponent from './TitleComponent.vue';
|
|
import ProgressComponent from './ProgressComponent.vue';
|
|
import EchartBox from '@/components/EchartBox/index.vue';
|
|
import { getBarOptions2 } from './optionList';
|
|
const barOption = ref();
|
|
const getCapitalData = (data) => {
|
|
barOption.value = getBarOptions2();
|
|
};
|
|
onMounted(() => {
|
|
getCapitalData();
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.leftPage {
|
|
width: 100%;
|
|
height: 100%;
|
|
.kpi_box{
|
|
margin-bottom: 10px;
|
|
}
|
|
.contract_box{
|
|
height: 35vh;
|
|
}
|
|
.kpi_box,.contract_box {
|
|
padding: 10px;
|
|
box-sizing: border-box;
|
|
border: 1px solid rgba(29, 214, 255, 0.3);
|
|
}
|
|
}
|
|
</style>
|