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

<template>
  <div id="up2">
    <div class="bg-color-black">
      <div class="d-flex pt-1 pl-2 jc-center">
        <span class="fs-xxl text mx-2 fw-b">当日工序计划进度</span>
      </div>
      <div class="body-box">
        <div class="pt-2 " >
          <BarChart :bardata="bardata"  />
        </div>
        <div class="d-flex jc-center fs-xl fw-b rate flex-column mt-2">
          <div>当日已完成比例：{{finishRate}}% </div>
          <div class="mt-1">当日未达成比例：{{unfinishRate}}%</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import BarChart from '@/components/zzchart/up2Chart'
import {mapState} from "vuex";

export default {
  computed: {
    ...mapState(['factory']),
  },
  data() {
    return {
      timing:null,
      bardata : {
        planData:[],
        actData:[],
        yAxis:[],
        max : 1000,
      },
      finishRate:0,
      unfinishRate:0,
    }
  },
  components: {BarChart},
  mounted() {
    this.refreshdata();
  },
  beforeDestroy () {
    clearInterval(this.timing)
  },
  methods: {
    refreshdata() {
      this.setdata(); //获取数据
      this.timing = setInterval(() => {
        this.setdata(); //获取-主题词
      }, 10000);
    },

    async setdata() {
      //当前工单
      var caller = 'KB!LongLineLinePlan';
      await this.$http.get("kanban/datalist.action?caller="+caller+"&_noc=1&page=1&pageSize=100",{
        params: {
          condition: "V_OUTLINE='组装'" ,
        }
      }).then((result)=>{
            let dataList = JSON.parse(result.data.data);
            if(dataList.length>0){
              let yAxis0 = new Array();
              let series0 = new Array();
              let series1 = new Array();
              var maxnumber=0;
              for (let index = 0; index < dataList.length; index++) {
                const element = dataList[index];
                yAxis0.push(element.v_wccode);
                //计划
                series0.push(element.v_planqty);
                if(element.v_planqty>maxnumber){
                  maxnumber= element.v_planqty;
                }
                //实际
                series1.push(element.v_actqty);
                if(element.v_actqty>maxnumber){
                  maxnumber= element.v_actqty;
                }
              }
              this.bardata.planData = series0;
              this.bardata.actData = series1;
              this.bardata.yAxis = yAxis0;
              this.bardata.max = Math.ceil(maxnumber*1.2);
            }
          },(result)=>{
            console.error(result)
          }
      );

      this.finishRate = 0;
      this.unfinishRate = 0;
      //比例,用的是总看板的达成比例caller，如果不一样，自行修改caller
      caller = 'KB!TOTALDayMakeRate';
      await this.$http.get("kanban/datalist.action?caller="+caller+"&_noc=1&page=1&pageSize=100",{
        params: {
          condition: "V_OUTLINE='组装'"
        }
      }).then((result) => {
            let dataList = JSON.parse(result.data.data);
            if(dataList.length>0){
              this.finishRate = dataList[0].finishrate;
              this.unfinishRate = dataList[0].unfinishrate;
            }
          }, (result) => {
            console.error(result)
          }
      );

    }
  }
}
</script>

<style lang="scss" scoped>
$box-height: 430px;
$box-width: 100%;
#up2 {
  padding: 13px;
  height: $box-height;
  font-size: 40px;
  width: $box-width;
  border-radius: 5px;
  .bg-color-black {
    height: $box-height - 25px;
    //width: $box-width - 10px;
    border-radius: 10px;
    padding: 5px ;
  }

  .text {
    color: #c3cbde;
    font-size: 25px;
  }
  .body-box {
    border-radius: 10px;
    overflow: hidden;
    .rate{
      justify-content: center; /* 水平居中 */
      align-items: center;
    }
  }
}
</style>