kd-aiot-frontend-aps/src/components/statistics/PlanStatistics.vue

<template>
  <div class="statistics">
    <el-row :gutter="15">
      <el-col :span="cardSpan">
        <el-card shadow="hover" class="cardItem">
          <div>
            <div class="cardText">待排产计划数量</div>
            <div class="cardNum">{{ planStatistics.waitPlanNum || 0 }}</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="cardSpan">
        <el-card shadow="hover" class="cardItem">
          <div>
            <div class="cardText">计划生产数量</div>
            <div class="cardNum">{{ planStatistics.planNum || 0 }}</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="cardSpan">
        <el-card shadow="hover" class="cardItem">
          <div>
            <div class="cardText">已下发生产数量</div>
            <div class="cardNum">{{ planStatistics.issueNum || 0 }}</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="cardSpan">
        <el-card shadow="hover" class="cardItem">
          <div>
            <div class="cardText">待派工数量</div>
            <div class="cardNum">0</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="cardSpan">
        <el-card shadow="hover" class="cardItem">
          <div>
            <div class="cardText">待完工生产数量</div>
            <div class="cardNum">{{ planStatistics.waitFinishNum || 0 }}</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="cardSpan">
        <el-card shadow="hover" class="cardItem">
          <div>
            <div class="cardText">待领料数量</div>
            <div class="cardNum">0</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="cardSpan">
        <el-card shadow="hover" class="cardItem">
          <div>
            <div class="cardText">已完工数量</div>
            <div class="cardNum">{{ planStatistics.finishNum || 0 }}</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="cardSpan">
        <el-card shadow="hover" class="cardItem">
          <div>
            <div class="cardText">已入库数量</div>
            <div class="cardNum">{{ planStatistics.stockNum || 0 }}</div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getPlanStatistics } from '@/api/productionPlan';

export default {
  props: [],
  data() {
    return {
      planStatistics: {
        waitPlanNum: 0,
        planNum: 0,
        issueNum: 0,
        waitFinishNum: 0,
        finishNum: 0,
        stockNum: 0
      },
      cardSpan: 3
    };
  },
  created() {
    this.getPlanStatistics();
  },
  methods: {
    async getPlanStatistics() {
      let res = await getPlanStatistics();
      this.planStatistics = res;
    }
  }
};
</script>

<style scoped lang="scss">
// .statistics {
//   padding: 10px 10px 20px;
// }
// .cardItem {
//   border: 1px solid rgb(225, 225, 225);
//   text-align: center;
//   color: white;
//   background-color: rgba(24, 144, 255, 0.8);
// }
// .cardText {
//   font-size: 16px;
// }
// .cardNum {
//   font-size: 32px;
//   font-style: italic;
// }
.statistics {
  padding: 10px 10px 20px;
}

.cardItem {
  border: 1px solid rgb(225, 225, 225);
  text-align: center;
  color: white;
  background-color: rgba(24, 144, 255, 0.8);
  overflow: hidden;
  padding: 10px;
}

.cardText {
  font-size: 16px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.cardNum {
  font-size: 32px;
  font-style: italic;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

@media (max-width: 768px) {
  .cardText {
    font-size: 14px;
  }

  .cardNum {
    font-size: 24px;
  }
}

::v-deep .el-card__body {
  padding: 17px 12px !important;
}
</style>