123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161 |
- <template>
- <el-scrollbar class="hc-main-scrollbar">
- <div class="hc-main-row">
- <el-row :gutter="14" style="justify-content: flex-end;">
- <div class="ml-4">
- <el-button size="large" type="primary" @click="importModalClick">
- <HcIcon name="upload-cloud" />
- <span>导入</span>
- </el-button>
- </div>
- <div class="w-36 ml-4">
- <el-select v-model="checkyear" block clearable placeholder="选择年份" size="large" @change="selectYear">
- <el-option v-for="(item, index) in yearoptions" :key="index" :label="item" :value="item" />
- </el-select>
- </div>
- </el-row>
- <el-row :gutter="14" class="mt-4">
- <el-col :span="6">
- <HcGradientCard color="purple1">
- <div class="hc-card-item-sub">
- <div class="item-sub-title">
- 总经营收入预算
- </div>
- <div class="item-sub-num">
- <span class="num">{{ totalObj?.budgetInput }}</span>
- <span class="text">元</span>
- </div>
- </div>
- </HcGradientCard>
- </el-col>
- <el-col :span="6">
- <HcGradientCard color="blue1">
- <div class="hc-card-item-sub">
- <div class="item-sub-title">
- 总经营支出预算
- </div>
- <div class="item-sub-num">
- <span class="num">{{ totalObj?.budgetOutput }}</span>
- <span class="text">元</span>
- </div>
- </div>
- </HcGradientCard>
- </el-col>
- <el-col :span="6">
- <HcGradientCard color="red1">
- <div class="hc-card-item-sub">
- <div class="item-sub-title">
- 总经营实际收入
- </div>
- <div class="item-sub-num">
- <span class="num">{{ totalObj?.practicalInput }}</span>
- <span class="text">元</span>
- </div>
- </div>
- </HcGradientCard>
- </el-col>
- <el-col :span="6">
- <HcGradientCard color="purple1">
- <div class="hc-card-item-sub">
- <div class="item-sub-title">
- 总经营实际支出
- </div>
- <div class="item-sub-num">
- <span class="num">{{ totalObj?.practicalOutput }}</span>
- <span class="text">元</span>
- </div>
- </div>
- </HcGradientCard>
- </el-col>
- </el-row>
- </div>
- <HcTabsSimple :cur="tabsKey" :datas="tabsData" class="mt-6 tableui" @tab-click="tabsClick">
- <template #tab-all>
- <TabAll />
- </template>
- <template #tab-month>
- <TabMonth :cur="tabsKey" :checkyear="checkyear" />
- </template>
- <template #tab-decost>
- <TabDecost :cur="tabsKey" :checkyear="checkyear" />
- </template>
- <template #tab-mannager>
- <TabManager :cur="tabsKey" :checkyear="checkyear" />
- </template>
- </HcTabsSimple>
- </el-scrollbar>
- </template>
- <script setup>
- import { onActivated, ref } from 'vue'
- import TabAll from './components/tab-all.vue'
- import TabMonth from './components/tab-month.vue'
- import TabDecost from './components/tab-decost.vue'
- import TabManager from './components/tab-mannager.vue'
- import mainApi from '~api/home/index'
- import mainApi1 from '~api/static/actual.js'
- import { getArrValue, getObjValue } from 'js-fast-way'
- onActivated(async ()=>{
- await getYearList()
- budgetAndPracticalByBusiness()
- })
- const importModalClick = ()=>{
- }
- const checkyear = ref('')
- const yearoptions = ref([
-
- ])
- const selectYear = ()=>{
- budgetAndPracticalByBusiness()
- }
- //获取年度列表
- const getYearList = async () => {
- const { error, code, data } = await mainApi.yearList()
- //判断状态
- if (!error && code === 200) {
- const arr = getArrValue(data)
- yearoptions.value = arr
- if ( yearoptions.value.length > 0) {
- checkyear.value = yearoptions.value[0]
- }
- } else {
- yearoptions.value = []
-
- }
- }
- //获取总经营数据
- const totalObj = ref({})
- const budgetAndPracticalByBusiness = async () => {
- const { error, code, data } = await mainApi1.budgetAndPracticalByBusiness(
- { year:checkyear.value },
- )
- //判断状态
- if (!error && code === 200) {
- console.log(data, 'data')
- totalObj.value = getObjValue(data)
- } else {
- totalObj.value = {}
- }
- }
- const tabsKey = ref('all')
- const tabsData = ref([
- { icon: 'bar-chart-box', label: '汇总统计', key: 'all' },
- { icon: 'bar-chart-box', label: '月度统计', key: 'month' },
- { icon: 'bar-chart-box', label: '部门支出统计', key: 'decost' },
- { icon: 'bar-chart-box', label: '人工/管理统计支出占比', key: 'mannager' },
- ])
- const tabsClick = (key) => {
- tabsKey.value = key
- }
- </script>
- <style lang="scss" scoped>
- @import "~src/styles/static/actual.scss";
- </style>
- <style lang="scss">
- .tableui.hc-sb-table .el-tabs .el-tabs__content {
- height:auto;
- }
- </style>
|