GScreenWEB_TPMes/src/components/baozuo-demo/BottomCharts.vue

<template>
  <div class="bottom-charts">
    <div class="bc-chart-item" v-if="isChange">
      <div class="bcci-header">机芯派工单执行进度</div>
      <dv-scroll-board :config="config1" style="height:90%;margin-left: 2%;width:96%" />
    </div>
    <!-- <dv-decoration-2 class="decoration-1" :reverse="true" style="width:5px;" /> -->

    <div class="bc-chart-item" v-if="!isChange">
      <div class="bcci-header">盖板派工单执行进度</div>
      <dv-scroll-board :config="config2" style="height:90%;margin-left: 2%;width:96%" />
    </div>
  </div>
</template>

<script>
import LabelTag from './LabelTag'
let timer = null;
export default {
  name: 'BottomCharts',
  components: {
    LabelTag
  },
  data() {
    function generateRandomData(N, title) {
      const data = [];
      let date = new Date(); // 从今天的日期开始
      for (let i = 1; i <= N; i++) {
        // 格式化日期为'YYYY-MM-DD'
        const formattedDate = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
        const formattedDate2 = `${date.getFullYear()}${String(date.getMonth() + 1).padStart(2, '0')}${String(date.getDate()).padStart(2, '0')}`;

        // 订单量随机在20到200之间，步长为10
        const orderQuantity = Math.floor(Math.random() * 19 + 2) * 10;

        // 完成数量随机但不超过订单量
        const completedQuantity = Math.floor(Math.random() * (orderQuantity / 10)) * 10;

        // 计算完成百分比
        const completionRate = ((completedQuantity / orderQuantity) * 100).toFixed(2) + '%';
        function createProgressCircle(percentage) {
          let color, content;
          if (percentage === 0) {
            color = 'gray';
            content = '0%';
            return `
              <div class="circle-progress" style="border-color: ${color}; ">
                <div class="circle-content" style="color: ${color}; ">${content}</div>
              </div>
            `;
          } else if (percentage === 100) {
            color = '#1afa29';
            content = '√';
            return `
            <div class="circle-progress" style="border-color: ${color}; ">
              <div class="circle-img"></div>
            </div>
          `;
          } else {
            color = '#1e80ff';
            content = `${percentage}%`;
            return `
            <div class="circle-progress" style="border-color: ${color}; ">
              <div class="circle-content" style="color: ${color}; ">${content}</div>
            </div>
          `;
          }


          
        }

        //随机三个百分比 从大到小
        const completionRate1 = Math.floor(Math.random() * 100);
        const completionRate2 = Math.floor(Math.random() * 100);
        const completionRate3 = Math.floor(Math.random() * 100);
        const newDataItem = [];
        // 创建新的数据项
        if(title === 'U1机芯'){
          newDataItem = [
          `PS-${formattedDate2}${String(i).padStart(3, '0')}`,  // 编号
          title,  // 固定值
          formattedDate,  // 日期
          orderQuantity,  // 订单量
          completionRate,  // 完成率
          createProgressCircle(100),
          createProgressCircle(completionRate2),
          createProgressCircle(0),
          completedQuantity  // 完成数量
        ];
        }else{
           newDataItem = [
          `PS-${formattedDate2}${String(i).padStart(3, '0')}`,  // 编号
          title,  // 固定值
          formattedDate,  // 日期
          orderQuantity,  // 订单量
          completionRate,  // 完成率
          createProgressCircle(100),
          createProgressCircle(completionRate2),
          createProgressCircle(completionRate2),
          createProgressCircle(0),
          completedQuantity  // 完成数量
        ];
        }
        

        data.push(newDataItem);

        // 更新日期至下一天
        date.setDate(date.getDate() + 1);
      }
      return data;
    }


    return {
      isChange: true,
      config1: {
        header: ['工单号', '产品名称', '派工日期', '派工数量', '工序进度','组装','QC','老化','剩下数量'],
        data: generateRandomData(60, 'U1机芯'),
        index: true,
        columnWidth: [50],
        align: ['center'],
        waitTime: 30000,
      },

      config2: {
        header: ['工单号', '产品名称', '派工日期', '派工数量', '工序进度','组装','安规','综合测试','老化','剩下数量'],
        data: generateRandomData(30, 'U1盖板'),
        index: true,
        columnWidth: [50],
        align: ['center']
      },


    }
  },
  created() {
    let that = this;
    timer = setInterval(()=>{
      that.isChange = !that.isChange
    },60000)
  },
  beforeDestroy() {
    clearInterval(timer)
  }
}
</script>

<style lang="less">
.bottom-charts {
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;

  .bc-chart-item {
    width: 100%;
    height: 100%;
    padding-top: 20px;
    box-sizing: border-box;
  }

  .bcci-header {
    height: 50px;
    text-align: center;
    line-height: 50px;
    font-size: 20px;
  }

  .dv-active-ring-chart {
    height: calc(~"100% - 80px");
  }

  .label-tag {
    height: 30px;
  }

  .active-ring-name {
    font-size: 18px !important;
  }

  .decoration-1,
  .decoration-2,
  .decoration-3 {
    display: absolute;
    left: 0%;
  }
}
.circle-progress {
  top: 50%;
  transform: translateY(-50%);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    position: relative;
    // background: conic-gradient(from 90deg at 50% 50%, transparent 0, rgba(18, 3, 117, 0.107) 0);
    transition: all 0.5s ease;
    border: 6px solid;
  }
.circle-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.16rem;
  color: #333;
}
.circle-img{
  width: 80%;
  height: 80%;
  background-image: url('./img/icon_success.png');
  background-repeat: no-repeat;
  background-size:contain;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.ceil{
  font-size: 0.2rem;
}
</style>