kd-aiot-frontend-eom/src/views/home/index.vue

<template>
  <div class="ele-body">
    <el-row :gutter="5">
      <el-col :span="13" style="height: 50%">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>采销统计</span>
          </div>
          <v-chart ref="barRef" style="height: 100%" :option="barOption" />
        </el-card>
      </el-col>

      <el-col :span="11" style="height: 50%">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>销售订单进度情况</span>
          </div>
          <ele-pro-table
            ref="table"
            :pageSize="20"
            :columns="columns"
            :datasource="datasource"
            :toolbar="false"
            height="calc(100% - 45px)"
          >
          </ele-pro-table>
        </el-card>
      </el-col>

      <el-col :span="11" style="height: 50%; margin-top: 5px">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>采购订单进度情况</span>
          </div>
          <ele-pro-table
            ref="table"
            :columns="columns1"
            :pageSize="20"
            :datasource="datasource1"
            :toolbar="false"
            height="calc(100% - 45px)"
          >
          </ele-pro-table>
        </el-card>
      </el-col>
      <el-col :span="13" style="height: 50%; margin-top: 5px">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>应收应付统计</span>
          </div>
          <v-chart ref="barRef1" style="height: 100%" :option="barOption1" />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
  import { pieOption, barOption, columns, columns1 } from './data';
  import { use } from 'echarts/core';
  import { CanvasRenderer } from 'echarts/renderers';
  import { BarChart } from 'echarts/charts';
  import {
    GridComponent,
    TooltipComponent,
    LegendComponent
  } from 'echarts/components';

  import VChart from 'vue-echarts';
  import { echartsMixin } from '@/utils/echarts-mixin';
  import { indexGroup } from '@/api/main/index.js';
  import { init } from 'echarts';
  import { getTableList } from '@/api/purchasingManage/purchaseOrder';
  import { getTableListHome } from '@/api/saleManage/saleorder';
  // 按需加载 echarts
  use([
    CanvasRenderer,
    BarChart,
    GridComponent,
    TooltipComponent,
    LegendComponent
  ]);
  export default {
    mixins: [echartsMixin(['barRef', 'barRef1'])],

    components: { VChart },
    data() {
      return {
        columns,
        columns1,
        barOption: {},
        barOption1: {},
        timer: null
      };
    },

    created() {},
    mounted() {
      this.init();
      this.timer = setInterval(() => {
        this.init();
      }, 3600000);
    },
    beforeDestroy() {
      clearInterval(this.timer);
    },
    methods: {
      init() {
        indexGroup().then((res) => {
          console.log(res, 'res');
          this.barOption = barOption(
            res.saleAndPurchaseGroup?.monthName,
            [
              {
                name: '采购',
                barWidth: '25%',
                data: res.saleAndPurchaseGroup.purchaseCounts,
                type: 'bar',
                yAxisIndex: 0, // 使用第一个Y轴
                itemStyle: {
                  color: '#f9cd5d'
                }
              },
              {
                name: '销售',
                barWidth: '25%',
                data: res.saleAndPurchaseGroup.saleCounts,
                type: 'bar',
                yAxisIndex: 0, // 使用第一个Y轴
                itemStyle: {
                  color: '#5893eb'
                }
              }
            ],
          );
          this.barOption1 = barOption(
            res.payableAndReceivableGroup?.monthName,
            [
              {
                name: '应收',
                barWidth: '25%',
                data: res.payableAndReceivableGroup?.receivableCounts,
                type: 'bar',
                yAxisIndex: 0 // 使用第一个Y轴
              },
              {
                name: '应付',
                barWidth: '25%',
                data: res.payableAndReceivableGroup?.payableCounts,
                type: 'bar',
                yAxisIndex: 0 // 使用第一个Y轴
              }
            ],
            '(万元)'
          );
          setTimeout(() => {
            this.$refs.barRef.resize();
            this.$refs.barRef1.resize();
          }, 300);
        });
      },
      datasource({ page, where, limit }) {
        return getTableListHome({
          ...where,
          pageNum: page,
          size: limit,
          // progress: 1000
        });
      },
      datasource1({ page, where, limit }) {
        return getTableList({
          ...where,
          pageNum: page,
          size: limit,
          // progress: 1000
        });
      }
    }
  };
</script>
<style lang="scss" scoped>
  .clearfix {
    font-size: 0.7vw;

    > span {
      font-weight: bold;
    }
    :deep(.el-radio-button__inner) {
      font-size: 0.7vw;
    }
  }
  .ele-body {
    height: calc(100vh - 100px);
    > .el-row {
      height: 100%;
    }
    .el-card {
      height: 100%;
      :deep(.el-card__body) {
        padding: 0.3vw;
      }
      :deep(.el-card__header) {
        padding: 0.6vw;
      }
      :deep(.el-card__body) {
        height: calc(100% - 2.3vw);
      }
      :deep(.ele-pro-table) {
        height: 99%;
      }
      :deep(.el-table) {
        font-size: 0.62vw;
      }
    }
  }
</style>