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">1000000</div>
          <div class="unit">万元</div>
        </div>
        <div class="inflow">
          <div class="title">现金流出</div>
          <div class="number">1000000</div>
          <div class="unit">万元</div>
        </div>
        <div class="inflow">
          <div class="title">净现金流</div>
          <div class="number">1000000</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="3479.61%" :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';

const lineOption = ref();
const barOption = ref();

const getCapitalData = (data?: any) => {
  // const xData = data.map((item) => item.time);
  // const yData = data.map((item) => item.content);
  const lineData = {
    xLabel: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
    line1: [
      [100, 200, 150, 300, 250, 350, 400, 350, 450, 500, 400, 550],
      [220, 250, 230, 280, 270, 300, 350, 320, 380, 400, 450, 500],
      [300, 350, 320, 380, 400, 450, 500, 480, 520, 550, 600, 650]
    ]

    // line2: ['20', '50', '12', '65', '30', '60']
  };
  lineOption.value = getLineOption(lineData);
};
const getTurnoverList = (data?: any) => {
  // 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 barData = {
    name: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
    value: [
      [2, 5, 15, 30, 25, 35, 40, 35, 45, 50, 40, 55],
      [4, 3, 6, 11, 15, 22, 30, 14, 48, 22, 25, 60]
    ]
  };
  barOption.value = getBarOptions(barData);
};
onMounted(() => {
  getCapitalData();
  getTurnoverList();
});

//资金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>