月度计划预算统计

src/api/modules/static/actual.js

@@ -0,0 +1,14 @@
+import { httpApi } from '../../request/httpApi'
+
+export default {
+    //预算与实际统计-月度统计
+    async budgetAndPracticalByMonth(form) {
+        return httpApi({
+            url: '/api//blade-control/annualBudget/budgetAndPracticalByMonth',
+            method: 'get',
+            params: form,
+        }, false)
+    },
+
+
+}

src/views/static/actual.vue

@@ -10,7 +10,7 @@
                 </div>
                 <div class="w-36 ml-4">
                     <el-select v-model="checkyear" block clearable placeholder="选择年份" size="large">
-                        <el-option v-for="item in yearoptions" :key="item.key" :label="item.name" :value="item.key" />
+                        <el-option v-for="item in yearoptions" :key="item" :label="item" :value="item" />
                     </el-select>
                 </div>
             </el-row>
@@ -74,7 +74,7 @@
                 <TabAll />
             </template>
             <template #tab-month>
-                <TabMonth />
+                <TabMonth :cur="tabsKey" :checkyear="checkyear" />
             </template>
             <template #tab-decost>
                 <TabDecost />
@@ -87,12 +87,16 @@
 </template>
 
  <script setup>
- import { ref } from 'vue'
+ 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 { getArrValue } from 'js-fast-way'
+onActivated(()=>{
+    getYearList()
+})
 const importModalClick = ()=>{
 
 }
@@ -102,6 +106,19 @@ const yearoptions = ref([
     { name:'2022年', key:2022 },
     { name:'2023年', key:2023 },
 ])
+//获取年度列表
+
+const getYearList = async () => {
+    const { error, code, data } = await mainApi.yearList()
+    //判断状态
+    if (!error && code === 200) {
+        const arr = getArrValue(data)
+        yearoptions.value = arr
+    } else {
+        yearoptions.value = []
+     
+    }
+}
 const tabsKey = ref('all')
 const tabsData = ref([
     { icon: 'bar-chart-box', label: '汇总统计', key: 'all' },

src/views/static/components/tab-month.vue

@@ -20,45 +20,51 @@
 
 <script setup>
 import { nextTick, ref, watch } from 'vue'
-
+import mainApi from '~api/static/actual.js'
+import { getArrValue } from 'js-fast-way'
 const props = defineProps({
 cur: {
   type: [String, Number],
   default: '',
 },
+checkyear:{
+  type: [String, Number],
+  default: '',
+},
 })
 
 const tabsKey = ref(props.cur)
+const year = ref('')
 
 //监听
 watch(() => [
 props.cur,
-], ([key]) => {
+props.checkyear,
+], ([key, checkyear]) => {
 tabsKey.value = key
-console.log(key)
+year.value = checkyear
+  if (key === 'month') {
+    console.log('获取月度计划')
+    budgetAndPracticalByMonth()
+  }
 })
 
 
 const tableData = ref([
-// { time:'一月', beginremain:'2000' },
-// { time:'二月', beginremain:'2000' },
-// { time:'三月', beginremain:'2000' },
-// { time:'四月', beginremain:'2000' },
-// { time:'五月', beginremain:'2000' },
-// { time:'六月', beginremain:'2000' },  
-// { time:'七月', beginremain:'2000' },
-// { time:'八月', beginremain:'2000' },
-// { time:'九月', beginremain:'2000' },
-// { time:'十月', beginremain:'2000' },
-// { time:'十一月', beginremain:'2000' },
-// { time:'十二月', beginremain:'2000' },
-// { time:'总计', beginremain:'2000' },
-{ time:'一月', income1:1000, disburse1:1000, income2:2000, disburse2:2000, income3:300, disburse3:3000 },
-
-
-
-
 ])
+//获取月度统计
+const budgetAndPracticalByMonth = async () => {
+    const { error, code, data } = await mainApi.budgetAndPracticalByMonth(
+     { year:year.value },
+    )
+    //判断状态
+    if (!error && code === 200) {
+      tableData.value = getArrValue(data)
+  
+    } else {
+      tableData.value = []
+    }
+}
 const tableColData = ref([
   {
     id:'time',