td_official/src/views/largeScreen/components/rightPage.vue

<template>
  <div class="rightPage">
    <div class="funds">
      <TitleComponent :title="'资金KPI'" />
      <div class="funds_echarts">
        <EchartBox :option="lineOption" />
      </div>
    </div>
    <div class="cashFlow">
      <TitleComponent :title="'现金流概述'" />
      <div class="inflowData">
        <div class="inflow">
          <div class="title">现金流入</div>
          <div class="number">{{ bigDataObj.incomeCash }}</div>
          <div class="unit">万元</div>
        </div>
        <div class="inflow">
          <div class="title">现金流出</div>
          <div class="number">{{ bigDataObj.expensesCash }}</div>
          <div class="unit">万元</div>
        </div>
        <div class="inflow">
          <div class="title">净现金流</div>
          <div class="number">{{ bigDataObj.profitCash }}</div>
          <div class="unit">万元</div>
        </div>
      </div>
      <div class="inflow_echarts">
        <EchartBox :option="barOption" />
      </div>
      <div class="progress">
        <!-- <div class="progress_item">
          <div class="title">项目进度</div>
          <div class="number">100%</div>
        </div> -->
        <ProgressComponent title="现金比率" value="123,456.78" percentageChange="98.11%" :progressPercentage="100"
          progressColor="rgba(29, 214, 255, 1)" :isShowPrice="false" class="progress_text" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
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, cashTotal } from '@/api/largeScreen';

const lineOption = ref();
const barOption = ref();
const bigDataObj = ref<any>({});

const getCapitalData = async () => {
  const { data } = await monthMoney()
  const month = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
  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 lineData = {
    xLabel: month,
    line1: [
      income,
      expenses,
      profit
    ]

    // line2: ['20', '50', '12', '65', '30', '60']
  };
  lineOption.value = getLineOption(lineData);
};
const getTurnoverList = async () => {
  // const xData = data.map((item) => item.time);
  // const yData = data.map((item) => {
  //   // 先将content转换为数字，再调用toFixed
  //   const num = Number(item.content);
  //   return isNaN(num) ? 0 : Number(num.toFixed(2));
  // });
  const { data } = await monthCash()
  // const month = data.map((item: any) => item.month);
  const month = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];

  const income = data.map((item: any) => item.incomeAmount);
  const expenses = data.map((item: any) => item.expensesAmount);
  const barData = {
    name: month,
    value: [
      income,
      expenses
    ]
  };
  barOption.value = getBarOptions(barData);
};
const getTotalAmonunt = async () => {
  const { data } = await cashTotal()
  bigDataObj.value = data
};
onMounted(() => {
  getCapitalData();
  getTurnoverList();
  getTotalAmonunt();
});

//资金KPI
</script>

<style scoped lang="scss">
.rightPage {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  // padding: 5px;
}

.funds {
  width: 100%;
  // height: 40%;
  border: 1px solid rgba(29, 214, 255, 0.3);
  box-sizing: border-box;
  padding: 10px 5px;
}

.funds_echarts {
  width: 100%;
  height: 25vh;
  padding: 10px 0 0 0;
}

.cashFlow {
  width: 100%;
  // height: 50%;
  border: 1px solid rgba(29, 214, 255, 0.3);
  box-sizing: border-box;
  padding: 10px 5px;
  margin-top: 10px;
}

.inflowData {
  width: 100%;
  height: 12vh;
  // background: #fff;
  padding-top: 20px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;

  .inflow {
    width: 100%;
    height: 100%;
    // background: #f5f5f5;
    padding: 10px;
    box-sizing: border-box;
    background: rgba(29, 214, 255, 0.1);
    border-left: 1px solid rgba(29, 214, 255, 1);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .title {
      font-size: 14px;
      // font-weight: 500;
      color: #fff;
      padding-bottom: 10px;
    }

    .number {
      font-size: 24px;
      // font-weight: 500;
      color: #fff;
      padding-bottom: 10px;
    }

    .unit {
      font-size: 12px;
      // font-weight: 500;
      color: rgba(255, 255, 255, 0.5);
    }
  }
}

.inflow_echarts {
  width: 100%;
  height: 25vh;
  margin-top: 20px;
}

.progress {
  width: 100%;
  margin-top: 10px;
}

:deep(.progress_text) {
  .roboto {
    color: #fff;
  }
}
</style>