hac/src/views/home/budget-chart.vue

<template>
    <HcCard scrollbar>
        <template #header>
            <div class="w-36">
                <el-select v-model="annual" block clearable placeholder="选择年度" size="large">
                    <el-option v-for="item in annuals" :label="item.name" :value="item.key"/>
                </el-select>
            </div>
        </template>
        <template #extra>
            <el-button size="large" type="info" hc-btn @click="goBackClick">
                <HcIcon name="arrow-go-back"/>
                <span>返回列表</span>
            </el-button>
        </template>
        <div class="hc-main-row">
            <el-row :gutter="14">
                <el-col :span="8">
                    <HcCardItem body-ui="h-96-i">
                        <BarLabelChart :datas="contractDatas"/>
                    </HcCardItem>
                </el-col>
                <el-col :span="8">
                    <HcCardItem body-ui="h-96-i">
                        <BarLabelChart :datas="manageDatas"/>
                    </HcCardItem>
                </el-col>
                <el-col :span="8">
                    <HcCardItem body-ui="h-96-i">
                        <BarLabelChart :datas="profitDatas"/>
                    </HcCardItem>
                </el-col>
            </el-row>
            <el-row :gutter="14" class="mt-4">
                <el-col :span="12">
                    <HcCardItem body-ui="h-96-i">
                        <PieSimple :datas="pieSimpleDatas"/>
                    </HcCardItem>
                </el-col>
                <el-col :span="12">
                    <HcCardItem body-ui="h-96-i">
                        <AreaStack :datas="areaStackDatas"/>
                    </HcCardItem>
                </el-col>
            </el-row>
        </div>
    </HcCard>
</template>

<script setup>
import {onActivated, ref} from "vue";
import {useRouter} from 'vue-router'
import BarLabelChart from "~com/echarts/BarLabelChart.vue";
import PieSimple from "~com/echarts/PieSimple.vue";
import AreaStack from "~com/echarts/AreaStack.vue";

const router = useRouter()

const annual = ref('2023')
const annuals = ref([
    {name: '2023年', key: '2023'},
    {name: '2022年', key: '2022'},
    {name: '2021年', key: '2021'}
])

//缓存页面被激活时
onActivated(() => {

})

//合同指标、实际合同额
const contractDatas = ref([
    {name: '合同指标', value: 190000},
    {name: '实际合同额', value: 8000}
])

//经营预算
const manageDatas = ref([
    {name: '经营预算', value: 120000},
    {name: '实际支出', value: 80000}
])

//利润指标
const profitDatas = ref([
    {name: '利润指标', value: 90010},
    {name: '实际利润', value: 38230}
])

//管理费用项目分摊
const pieSimpleDatas = ref([
    { value: 1048, name: '已分摊' },
    { value: 735, name: '未分摊' },
])

//管理费用支出
const areaStackDatas = ref([
    {
        name: '剩余预算',
        value: [120, 132, 101, 134, 90, 230, 210, 210, 210, 210, 132, 101]
    },
    {
        name: '已支出预警',
        value: [220, 182, 191, 234, 290, 330, 310, 310, 310, 310, 182, 191]
    }
])

//返回列表
const goBackClick = () => {
    router.back()
}
</script>

<style lang="scss" scoped>

</style>

<style lang="scss">
.hc-main-row {
    .h-96-i {
        height: 24rem !important;
    }
}
</style>