饼图样式优化

yangfeng

2023-12-04 6f1229d08cf208bfb9ea71b6909e46620948ad9a

 src/views/cockpitPage/components/StatisticalBox.vue

@@ -2,8 +2,17 @@
  <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-value">{{ item.value }}</div>
        <div class="commom-title">{{ item.label }}</div>
        <div
          class="commom-value"
          :class="
            item.label == '延期交付' || item.label == '物料不足'
              ? 'redColor'
              : ''
          "
        >
          {{ item.value }}
        </div>
      </div>
    </div>
  </div>
@@ -12,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: {},
@@ -59,6 +89,9 @@
        font-family: "Arial Negreta", "Arial Normal", "Arial";
        font-weight: 700;
      }
      .redColor {
        color: #ff0000;
      }
    }
  }
}