feat(largeScreen): 添加现金流总和接口并更新右侧面板数据

- 在 api/largeScreen/index.js 中添加 cashTotal 接口
- 在 rightPage.vue 中引入 cashTotal 接口并获取数据
- 更新 rightPage.vue 中的现金流数据显示，使用从接口获取的数据

src/api/largeScreen/index.js

@@ -20,3 +20,11 @@ export const monthCash = () => {
         method: 'get',
     });
 };
+// 现金流总和
+
+export const cashTotal = () => {
+    return request({
+        url: '/money/big/screen/cashTotal',
+        method: 'get',
+    });
+};

src/views/largeScreen/components/rightPage.vue

@@ -11,17 +11,17 @@
       <div class="inflowData">
         <div class="inflow">
           <div class="title">现金流入</div>
-          <div class="number">1000000</div>
+          <div class="number">{{ bigDataObj.incomeCash }}</div>
           <div class="unit">万元</div>
         </div>
         <div class="inflow">
           <div class="title">现金流出</div>
-          <div class="number">1000000</div>
+          <div class="number">{{ bigDataObj.expensesCash }}</div>
           <div class="unit">万元</div>
         </div>
         <div class="inflow">
           <div class="title">净现金流</div>
-          <div class="number">1000000</div>
+          <div class="number">{{ bigDataObj.profitCash }}</div>
           <div class="unit">万元</div>
         </div>
       </div>
@@ -45,10 +45,11 @@ import TitleComponent from './TitleComponent.vue';
 import EchartBox from '@/components/EchartBox/index.vue';
 import { getLineOption, getBarOptions } from './optionList';
 import ProgressComponent from './ProgressComponent.vue';
-import { monthMoney, monthCash } from '@/api/largeScreen';
+import { monthMoney, monthCash, cashTotal } from '@/api/largeScreen';
 
 const lineOption = ref();
 const barOption = ref();
+const bigDataObj = ref<any>({});
 
 const getCapitalData = async () => {
   const { data } = await monthMoney()
@@ -56,8 +57,7 @@ const getCapitalData = async () => {
   const income = data.map((item: any) => item.incomeAmount);
   const expenses = data.map((item: any) => item.expensesAmount);
   const profit = data.map((item: any) => item.profitAmount);
-  // const xData = data.map((item) => item.time);
-  // const yData = data.map((item) => item.content);
+
   const lineData = {
     xLabel: month,
     line1: [
@@ -81,7 +81,6 @@ const getTurnoverList = async () => {
   const month = data.map((item: any) => item.month);
   const income = data.map((item: any) => item.incomeAmount);
   const expenses = data.map((item: any) => item.expensesAmount);
-  // const profit = data.map((item: any) => item.profitAmount);
   const barData = {
     name: month,
     value: [
@@ -91,9 +90,14 @@ const getTurnoverList = async () => {
   };
   barOption.value = getBarOptions(barData);
 };
+const getTotalAmonunt = async () => {
+  const { data } = await cashTotal()
+  bigDataObj.value = data
+};
 onMounted(() => {
   getCapitalData();
   getTurnoverList();
+  getTotalAmonunt();
 });
 
 //资金KPI

src/views/largeScreen/index.vue

@@ -21,6 +21,7 @@ import leftPage from './components/leftPage.vue';
 import centerPage from './components/centerPage.vue';
 import rightPage from './components/rightPage.vue';
 // import '@/assets/styles/element.scss';
+
 </script>
 
 <style scoped lang="scss">
@@ -31,6 +32,7 @@ import rightPage from './components/rightPage.vue';
   background-size: 100% 100%;
   background-color: rgba(4, 7, 17, 1);
 }
+
 .nav {
   width: 100%;
   height: calc(100vh - 80px);