接口联调及人员饼图模块样式优化

yangfeng

2023-12-04 bb7f2e3ecbd47edfde477d742990bcbad3d601e1

 src/views/cockpitPage/components/StatisticalBox.vue

@@ -2,11 +2,11 @@
  <div class="statistical-box">
    <div v-for="item in allList" class="all-bg">
      <div class="box">
        <div class="commom-title">{{ item.title }}</div>
        <div class="commom-title">{{ item.label }}</div>
        <div
          class="commom-value"
          :class="
            item.title == '延期交付' || item.title == '物料不足'
            item.label == '延期交付' || item.label == '物料不足'
              ? 'redColor'
              : ''
          "
@@ -21,18 +21,39 @@
<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      allList: [
        { title: "开机台数", value: 200 },
        { title: "总产量", value: 1200 },
        { title: "生产工单数", value: 200 },
        { title: "延期交付", value: 20 },
        { title: "物料不足", value: 10 },
        { title: "计划达成率", value: 2 },
  props: {
    allList: {
      type: Array,
      default: () => [
        {
          value: 200,
          label: "开机台数",
        },
        {
          value: 1200,
          label: "总产量",
        },
        {
          value: 200,
          label: "生产工单数",
        },
        {
          value: 20,
          label: "延期交付",
        },
        {
          value: 10,
          label: "物料不足",
        },
        {
          value: 2,
          label: "计划达成率",
        },
      ],
    };
    },
  },
  data() {
    return {};
  },
  mounted() {},
  watch: {},