kanban-vue/src/views/warehouse/up2.vue

<template>
  <div id="up2">
    <div class="bg-color-black">
      <div class="up mt-4">
        <div class="d-flex pt-1 pl-2 jc-center mb-5">
          <span class="fs-xxl text mx-2 fw-b">出入库情况</span>
        </div>
        <div class="body-box d-flex">
          <div class="item d-flex jc-center flex-column">
            <div class="location">
              <div class="circle-hollow">
                <div class="info">
                  <h2 class="pb-2">{{inQty}}</h2>
                  <p class="fs-xxl pt-2">
                    入库数量
                  </p>
                </div>
              </div>
            </div>
          </div>
          <div class="item d-flex jc-center flex-column">
            <div class="circle-hollow">
              <div class="info">
                <h2 class="pb-2">{{outQty}}</h2>
                <p class="fs-xxl pt-2">
                  出货数量
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="down">
        <div class="body-box">
          <div class="d-flex jc-center fs-xxl fw-b rate flex-column">
            <div>需备料单据数：{{finishQty}} </div>
            <div class="mt-3">已完成备料数：{{unfinishQty}}</div>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>


<script>

export default {
  data() {
    return {
      timing:null,
      finishQty:0,
      unfinishQty:0,
      inQty:10000,
      outQty:10000,
    }
  },
  components: {},
  mounted() {
    this.refreshdata();
  },
  beforeDestroy () {
    clearInterval(this.timing)
  },
  methods: {
    refreshdata() {
      this.setdata(); //获取数据
      this.timing = setInterval(() => {
        this.setdata(); //获取-主题词
      }, 15000);
    },

    async setdata() {
      this.finishQty = 0;
      this.unfinishQty = 0;
      this.inQty = 0;
      this.outQty = 0;

      //备料完成情况
      caller = 'KB!WHPREMADEData1';
      await this.$http.get("kanban/datalist.action?caller="+caller+"&_noc=1&page=1&pageSize=100",{
        params: {
          condition: "1=1"
        }
      }).then((result) => {
            let dataList = JSON.parse(result.data.data);
            if(dataList.length>0){
              this.inQty = dataList[0].inqty;
              this.outQty = dataList[0].outqty;
            }
          }, (result) => {
            console.error(result)
          }
      );

      //备料单据数
      var caller = 'KB!WHPREMADEData2';
      await this.$http.get("kanban/datalist.action?caller="+caller+"&_noc=1&page=1&pageSize=100",{
        params: {
          condition: "1=1"
        }
      }).then((result) => {
            let dataList = JSON.parse(result.data.data);
            if(dataList.length>0){
              this.finishQty = dataList[0].finishqty;
              this.unfinishQty = dataList[0].unfinishqty;
            }
          }, (result) => {
            console.error(result)
          }
      );

    }
  }
}
</script>

<style lang="scss" scoped>
$box-height: 475px;
$box-width: 100%;
#up2 {
  padding: 13px;
  // padding: 5px;
  height: $box-height;
  width: $box-width;
  border-radius: 5px;

  .bg-color-black {
    padding: 5px;
    height: $box-height - 25px;
    //  width: width - 5px;
    border-radius: 10px;
  }

  .text {
    color: #c3cbde;
    font-size: 25px;
  }

  .down {
    width: 100%;
    margin-top: 60px;
    .rate{
      justify-content: center; /* 水平居中 */
      align-items: center;
    }
  }

  .up{
    .body-box {
      margin-top: 30px;
      flex-wrap: wrap;
      justify-content: space-around;
    }

    .item {
      width: 50%;
      align-items: center;
      /*.location{
         position: absolute;
         left: 20%;
      }*/
      .circle-hollow {
        width: 170px;
        height: 170px;
        border: 3px solid #4ecdc4; /* 边框样式 */
        border-radius: 50%;
        background-color: transparent; /* 透明背景 */
        display: flex;
        justify-content: center;
        align-items: center;
        letter-spacing:2px;
        flex-direction: column; /* 文字垂直排列 */
        box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* 阴影效果 */
        .info{
          text-align: center;
          width: 140px;
          p{
            border-top: 1px solid #ddd;
          }
        }
      }
    }
  }
  .body-box {
    border-radius: 10px;


    .percent {
      width: 100%;
      display: flex;
      flex-wrap: wrap;

      .item {
        width: 33.3%;
        height: 120px;

        span {
          //margin-top: 8px;
          font-size: 20px;
          display: flex;
          justify-content: center;
        }
      }
    }
  }
}
</style>