actual.vue 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161
  1. <template>
  2. <el-scrollbar class="hc-main-scrollbar">
  3. <div class="hc-main-row">
  4. <el-row :gutter="14" style="justify-content: flex-end;">
  5. <div class="ml-4">
  6. <el-button size="large" type="primary" @click="importModalClick">
  7. <HcIcon name="upload-cloud" />
  8. <span>导入</span>
  9. </el-button>
  10. </div>
  11. <div class="w-36 ml-4">
  12. <el-select v-model="checkyear" block clearable placeholder="选择年份" size="large" @change="selectYear">
  13. <el-option v-for="(item, index) in yearoptions" :key="index" :label="item" :value="item" />
  14. </el-select>
  15. </div>
  16. </el-row>
  17. <el-row :gutter="14" class="mt-4">
  18. <el-col :span="6">
  19. <HcGradientCard color="purple1">
  20. <div class="hc-card-item-sub">
  21. <div class="item-sub-title">
  22. 总经营收入预算
  23. </div>
  24. <div class="item-sub-num">
  25. <span class="num">{{ totalObj?.budgetInput }}</span>
  26. <span class="text">元</span>
  27. </div>
  28. </div>
  29. </HcGradientCard>
  30. </el-col>
  31. <el-col :span="6">
  32. <HcGradientCard color="blue1">
  33. <div class="hc-card-item-sub">
  34. <div class="item-sub-title">
  35. 总经营支出预算
  36. </div>
  37. <div class="item-sub-num">
  38. <span class="num">{{ totalObj?.budgetOutput }}</span>
  39. <span class="text">元</span>
  40. </div>
  41. </div>
  42. </HcGradientCard>
  43. </el-col>
  44. <el-col :span="6">
  45. <HcGradientCard color="red1">
  46. <div class="hc-card-item-sub">
  47. <div class="item-sub-title">
  48. 总经营实际收入
  49. </div>
  50. <div class="item-sub-num">
  51. <span class="num">{{ totalObj?.practicalInput }}</span>
  52. <span class="text">元</span>
  53. </div>
  54. </div>
  55. </HcGradientCard>
  56. </el-col>
  57. <el-col :span="6">
  58. <HcGradientCard color="purple1">
  59. <div class="hc-card-item-sub">
  60. <div class="item-sub-title">
  61. 总经营实际支出
  62. </div>
  63. <div class="item-sub-num">
  64. <span class="num">{{ totalObj?.practicalOutput }}</span>
  65. <span class="text">元</span>
  66. </div>
  67. </div>
  68. </HcGradientCard>
  69. </el-col>
  70. </el-row>
  71. </div>
  72. <HcTabsSimple :cur="tabsKey" :datas="tabsData" class="mt-6 tableui" @tab-click="tabsClick">
  73. <template #tab-all>
  74. <TabAll />
  75. </template>
  76. <template #tab-month>
  77. <TabMonth :cur="tabsKey" :checkyear="checkyear" />
  78. </template>
  79. <template #tab-decost>
  80. <TabDecost :cur="tabsKey" :checkyear="checkyear" />
  81. </template>
  82. <template #tab-mannager>
  83. <TabManager :cur="tabsKey" :checkyear="checkyear" />
  84. </template>
  85. </HcTabsSimple>
  86. </el-scrollbar>
  87. </template>
  88. <script setup>
  89. import { onActivated, ref } from 'vue'
  90. import TabAll from './components/tab-all.vue'
  91. import TabMonth from './components/tab-month.vue'
  92. import TabDecost from './components/tab-decost.vue'
  93. import TabManager from './components/tab-mannager.vue'
  94. import mainApi from '~api/home/index'
  95. import mainApi1 from '~api/static/actual.js'
  96. import { getArrValue, getObjValue } from 'js-fast-way'
  97. onActivated(async ()=>{
  98. await getYearList()
  99. budgetAndPracticalByBusiness()
  100. })
  101. const importModalClick = ()=>{
  102. }
  103. const checkyear = ref('')
  104. const yearoptions = ref([
  105. ])
  106. const selectYear = ()=>{
  107. budgetAndPracticalByBusiness()
  108. }
  109. //获取年度列表
  110. const getYearList = async () => {
  111. const { error, code, data } = await mainApi.yearList()
  112. //判断状态
  113. if (!error && code === 200) {
  114. const arr = getArrValue(data)
  115. yearoptions.value = arr
  116. if ( yearoptions.value.length > 0) {
  117. checkyear.value = yearoptions.value[0]
  118. }
  119. } else {
  120. yearoptions.value = []
  121. }
  122. }
  123. //获取总经营数据
  124. const totalObj = ref({})
  125. const budgetAndPracticalByBusiness = async () => {
  126. const { error, code, data } = await mainApi1.budgetAndPracticalByBusiness(
  127. { year:checkyear.value },
  128. )
  129. //判断状态
  130. if (!error && code === 200) {
  131. console.log(data, 'data')
  132. totalObj.value = getObjValue(data)
  133. } else {
  134. totalObj.value = {}
  135. }
  136. }
  137. const tabsKey = ref('all')
  138. const tabsData = ref([
  139. { icon: 'bar-chart-box', label: '汇总统计', key: 'all' },
  140. { icon: 'bar-chart-box', label: '月度统计', key: 'month' },
  141. { icon: 'bar-chart-box', label: '部门支出统计', key: 'decost' },
  142. { icon: 'bar-chart-box', label: '人工/管理统计支出占比', key: 'mannager' },
  143. ])
  144. const tabsClick = (key) => {
  145. tabsKey.value = key
  146. }
  147. </script>
  148. <style lang="scss" scoped>
  149. @import "~src/styles/static/actual.scss";
  150. </style>
  151. <style lang="scss">
  152. .tableui.hc-sb-table .el-tabs .el-tabs__content {
  153. height:auto;
  154. }
  155. </style>