统计优化

yangfeng

2023-12-02 a04ff48322d7b4fbe1c56821dbc7405519f3bfe3

统计优化

 src/views/cockpitPage/components/OrderCompleteRadio.vue

@@ -14,6 +14,7 @@
              :percentage="item.radio"
              :define-back-color="'#083f55'"
              :text-color="'#fec718'"
              :class="item.radio < 90 ? 'setTitle-right' : 'setTitle-left'"
            ></el-progress>
          </div>
        </div>
@@ -33,8 +34,8 @@
    return {
      tableList: [
        { title: "DD19070047", radio: 50.6 },
        { title: "DD19070048", radio: 70 },
        { title: "DD19070049", radio: 85 },
        { title: "DD19070048", radio: 89 },
        { title: "DD19070049", radio: 100 },
        { title: "DD19070050", radio: 30 },
      ],
    };
@@ -63,6 +64,7 @@
      height: calc(20% - 10px);
      width: 100%;
      border-radius: 50px;
      transition: all 1s ease-in-out 0s;
      .left {
        width: 20%;
        margin: 0 10px;
@@ -86,13 +88,18 @@
    background: url("../../../../public/cockpitPage/order-bg.png") no-repeat
      center center / cover;
  }
  .el-progress-bar__innerText {
  .setTitle-right .el-progress-bar__innerText {
    position: absolute;
    top: 2px;
    right: -70px;
    right: -66px;
    text-align: left;
    font-size: 18px;
    width: 60px;
  }
  .setTitle-left .el-progress-bar__innerText {
    color: rgb(226, 146, 27) !important;
    font-size: 18px;
    width: 60px;
  }
}
</style>

 src/views/cockpitPage/components/StatisticalBox.vue

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