页面背景图及饼图显示优化

yangfeng

2023-12-06 93d04e35d6ff02470687b73ff7494b62bdc85f2c

 src/views/cockpitPage/components/CountView.vue

@@ -3,10 +3,15 @@
    <div class="box">
      <div class="left">
        <div class="title-view">
          <div>开机台数</div>
          <div>自有开机台数</div>
        </div>
        <div class="value-view">
          <div class="title-margin-left">200台</div>
          <div class="title-margin-left">
            <span class="value-span">
              {{ totalObject.InternalDeviceRunningAmount + "" }}
            </span>
            <span class="unit-span">台</span>
          </div>
        </div>
      </div>
      <div class="right">
@@ -14,7 +19,12 @@
          <div>外加工台数</div>
        </div>
        <div class="value-view">
          <div class="title-margin-left">500台</div>
          <div class="title-margin-left">
            <span class="value-span">{{
              totalObject.ExternalDeviceRunningAmount
            }}</span>
            <span>台</span>
          </div>
        </div>
      </div>
    </div>
@@ -24,7 +34,12 @@
          <div>计划外加工数</div>
        </div>
        <div class="value-view">
          <div class="title-margin-left">4000件</div>
          <div class="title-margin-left">
            <span class="value-span">{{
              totalObject.OutPlanProductionAmount
            }}</span>
            <span>件</span>
          </div>
        </div>
      </div>
      <div class="right">
@@ -32,7 +47,12 @@
          <div>计划生产数</div>
        </div>
        <div class="value-view">
          <div class="title-margin-left">2000件</div>
          <div class="title-margin-left">
            <span class="value-span">{{
              totalObject.PlanProductionAmount
            }}</span>
            <span>件</span>
          </div>
        </div>
      </div>
    </div>
@@ -42,7 +62,12 @@
          <div>实际外加工数</div>
        </div>
        <div class="value-view">
          <div class="title-margin-left">4000件</div>
          <div class="title-margin-left">
            <span class="value-span">{{
              totalObject.RealExternalProductionAmount
            }}</span>
            <span>件</span>
          </div>
        </div>
      </div>
      <div class="right">
@@ -50,7 +75,12 @@
          <div>实际生产数</div>
        </div>
        <div class="value-view">
          <div class="title-margin-left">2000件</div>
          <div class="title-margin-left">
            <span class="value-span">{{
              totalObject.RealProductionAmount
            }}</span>
            <span>件</span>
          </div>
        </div>
      </div>
    </div>
@@ -60,18 +90,23 @@
<script>
export default {
  components: {},
  props: {},
  props: {
    totalObject: {
      type: Object,
      default: () => {
        return {
          InternalDeviceRunningAmount: 0,
          ExternalDeviceRunningAmount: 0,
          OutPlanProductionAmount: 0,
          PlanProductionAmount: 0,
          RealExternalProductionAmount: 0,
          RealProductionAmount: 0,
        };
      },
    },
  },
  data() {
    return {
      allList: [
        { title: "开机台数", value: 200 },
        { title: "总产量", value: 1200 },
        { title: "生产工单数", value: 200 },
        { title: "延期交付", value: 20 },
        { title: "物料不足", value: 10 },
        { title: "计划达成率", value: 2 },
      ],
    };
    return {};
  },
  mounted() {},
  watch: {},
@@ -130,6 +165,17 @@
        border-radius: 5px;
        .title-margin-left {
          margin-left: 45px;
          // white-space: nowrap;
          display: flex;
          align-items: center;
          .value-span {
            margin-top: 5px;
            height: 100%;
            max-width: 3em;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
        }
      }
    }