kanban-vue/src/views/prodline/bottom1.vue

<template>
  <div id="pbottom1">
    <div class="bg-color-black1">
      <div class="up">
          <div class ="left">
            <div class="vertical-text">
              <span>当日</span>
              <span>产线</span>
              <span>计划</span>
              <span>未完</span>
              <span>成订</span>
              <span>单明</span>
              <span>细</span>
            </div>
          </div>
          <div class="body-box">
            <dv-scroll-board :config="config" ref="scroll-board" :key="componentKey" />
          </div>
      </div>

      <div class="down1">
        <div>{{shop}}</div>
        <div>今日计划数 <span class="spec">{{finishrate2}}</span> </div>
        <div>急单数   <span class="spec">{{finishrate}} </span> </div>
        <div>今日完成数 <span class="spec">{{finishrate3}} </span> </div>
        <div>今日完成率 <span class="spec">{{finishrate4}}% </span>  </div>
        <div>今日订单数 <span class="spec">{{finishrate3}} </span> </div>
        <div>昨日达成率  <span class="spec">{{finishrate5}}% </span>  </div>
      </div>

      <div class="ticker-wrapper">
        <div class="ticker-mask ticker-mask-left"></div>
        <div class="ticker-mask ticker-mask-right"></div>
        <div class="down2" v-html="msg">

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

<script>
export default {
  data() {
    return {
      config: {
        header: ['销售工单','业务员', '产品名称', '订单数', '计划数','完成数', '提醒事项','异常事项'],
        data: [],
        rowNum: 9,
        headerHeight: 45,
        headerBGC: '#FFFFFF',
        oddRowBGC: '#FFFFFF',
        evenRowBGC: '#FFFFFF',
        columnWidth: [220,120,350,140,140,140,420],
        align: ['center','center','center','center','center','center','center','center'],
        index: false,
        carousel: 'page',
        hoverPause: true,
        // 添加等待时间确保高度计算正确
        waitTime: 10000
      },
      timing: null,
      componentKey: 0,
      finishrate:0,
      finishrate2:0,
      finishrate3:0,
      finishrate4:0,
      finishrate5:0,
      shop: sessionStorage.getItem('li_code'),
      msg: '',
    }
  },
  mounted() {
    this.refreshdata();
  },
  activated() {
    this.componentKey += 1;
    this.refreshdata();
  },
  beforeDestroy() {
    clearInterval(this.timing);
    if (this.$refs['scroll-board'] && this.$refs['scroll-board'].destroy) {
      this.$refs['scroll-board'].destroy();
    }
  },
  methods: {
    refreshdata() {
      this.getdata();
      this.timing = setInterval(() => {
        this.getdata();
      }, 10000);
    },
    async getdata() {
      var caller = 'KB!LongLineDayPlan';
      var licode=  sessionStorage.getItem('li_code');
      await this.$http.get("kanban/datalist.action?caller=" + caller + "&_noc=1&page=1&pageSize=100", {
        params: {
          condition: "V_OUTLINE='"+licode+"'",
        }
      }).then((result) => {
        let dataList = JSON.parse(result.data.data);
        let resultList = [];
        for (let index = 0; index < dataList.length; index++) {
          const element = dataList[index];
          let item = [];
          const cellClass = element.v_remark1 && element.v_remark1 !== "" ? 'colorRed' :
              element.v_blstatus == '加工中' ? 'colorRemind' : element.v_blstatus == '已完成'?'colorGrass':'colorY';

          //item.push(`<span class="cell-text ${cellClass}">${element.v_licode}</span>`);
          item.push(`<span class="cell-text ${cellClass}">${element.v_sacode}</span>`);
          item.push(`<span class="cell-text ${cellClass}">${element.v_seller}</span>`);
          item.push(`<span class="cell-text ${cellClass}">${element.v_jitype}</span>`);
          item.push(`<span class="cell-text ${cellClass}">${element.v_qty}</span>`);
         // item.push(`<span class="cell-text ${cellClass}">${element.v_blstatus}</span>`);
          item.push(`<span class="cell-text ${cellClass}">${element.v_planoutqty}</span>`);
          item.push(`<span class="cell-text ${cellClass}">${element.v_madeqty}</span>`);
         // item.push(`<span class="cell-text ${cellClass}">${element.v_madejd}</span>`);
          //item.push(`<span class="cell-text ${element.v_remark ? 'colorRemind' : cellClass}">${element.v_remark}</span>`);
          item.push(`<span class="cell-text ${cellClass}">${element.v_remark1}</span>`);
          item.push(`<span class="cell-text ${element.v_yc ? 'colorRemind' : cellClass}">${element.v_yc}</span>`);

          resultList.push(item);
        }
        this.$nextTick(() => {
          const scrollBoard = this.$refs['scroll-board'];
          if (scrollBoard) {
            scrollBoard.updateRows(resultList);
            if (scrollBoard.resize) {
              scrollBoard.resize();
            }
          }
        });
      }).catch((error) => {
        console.error(error);
      });

      //设备提醒信息
      caller = 'KB!LINEDEVICEREMIND';
      await this.$http.get("kanban/datalist.action?caller=" + caller + "&_noc=1&page=1&pageSize=100", {
        params: {
          condition: "de_workshop='"+licode+"'"
        }
      }).then((result) => {
          let dataList = JSON.parse(result.data.data);
          let msg = "";
          if (dataList.length > 0) {
              for (let index = 0; index < dataList.length; index++) {
                const element = dataList[index];
                msg += "<div>"+element.de_code + "&nbsp" + element.v_remind + "&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp </div>";
              }
              this.msg = msg;
          }
          }, (result) => {
            console.error(result)
          }
      );

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

<style lang="scss">
$box-height: 630px;
$box-width: 100%;

#pbottom1 {
  padding: 13px;
  height: $box-height;
  width: $box-width;
  border-radius: 5px;
  .bg-color-black1 {
    border-radius: 10px;
    height: 605px;
    padding: 5px;
  }
  .up {
    display: grid;
    grid-template-columns: 0.1fr 2fr ;
    .left {
      display: flex;
      align-items: center;     /* 垂直居中 */
      .vertical-text {
        height: 420px;
        background: linear-gradient(160deg, #0066cc, #0044aa);
        color: white;
        padding: 15px 5px;
        border-radius: 15px;
        display: inline-flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 22px;
        font-weight: bold;
        text-align: center;
        line-height: 2.2;
        letter-spacing: 5px;
        transform: rotateX(10deg);
        transition: all 0.4s ease;
      }
    }
    .text {
      color: #c3cbde;
      font-size: 25px;
    }

    .body-box {
      width: $box-width;
      height: 495px;
      overflow: hidden;
     // border: 1px solid #000000;
      .dv-scroll-board {
        width: 100% !important;
        height: 495px;
        .header {
          font-size: 25px;
          color: #000000 !important;
          font-weight: bold;
          .header-item {
            line-height: 45px !important;
           // border-right: 1px solid #000000 !important;
           // border-bottom: 1px solid #000000 !important; // 加粗表头下边框

            // 表头单元格伪元素解决边框重叠
            &:after {
              content: "";
              position: absolute;
              top: -1px;
              left: -1px;
              right: -1px;
              height: 1px;
              background: #000000;
            }
          }
        }

        .rows {
          .row-item {
            line-height: 40px !important;
            margin: 0 !important;
            padding: 0 !important;
            color: #000000 !important;

            span.cell-text {
              display: inline-block;
              vertical-align: middle;
              font-size: 24px;
              line-height: 1.5;
              padding: 4px 0;
            }

          }

         /* .ceil {
            border-right: 1px solid #000000 !important;
            border-bottom: 1px solid #000000 !important;
          }*/

          // 行底边框
          &:after {
            content: "";
            position: absolute;
            bottom: -1px;
            left: 0;
            right: 0;
            height: 1px;
            background: #000000;
            z-index: 1;
          }
        }
      }
    }
  }
  .down1{
    width:100%;
    height: 50px;
    border-radius: 15px;
    color: white;              /* 文字颜色 */
    padding: 1px 35px;        /* 内边距 */
    background: linear-gradient(160deg, #0ad386, #00aa55);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 23px;
    font-weight: bold;
    .spec{
      width:80px;
      padding: 4px 0px ;
      background: linear-gradient(160deg, #f3fcf8, #effdf6);
      color: #0ad386;
      display: inline-block;
      transition: all 0.3s ease;
      text-align: center;
      border-radius: 8px;
    }
  }

  .ticker-wrapper {
    display: flex;
    position: relative;
    height: 50px;
    align-items: center;
    overflow: hidden;
    color: #f32121;
    padding: 5px 25px 0px 25px;
    background: linear-gradient(160deg, #0066cc, #0044aa);
    font-size: 23px;
    font-weight: bold;
    margin-top: 10px;
    margin-left: -15px;
    margin-right: -15px;
  }

  .ticker-mask {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 80px;
    z-index: 2;
  }

  .ticker-mask-left {
    left: 0;
    background: linear-gradient(to right, rgba(0, 68, 170, 1), rgba(0, 68, 170, 0));
  }

  .ticker-mask-right {
    right: 0;
    background: linear-gradient(to left, rgba(0, 68, 170, 1), rgba(0, 68, 170, 0));
  }

  .down2 {
    display: flex;
    position: absolute;
    white-space: nowrap;
    /* 修改动画名称和时间 */
    animation: scrollRight 30s linear infinite;
    padding: 10px 0;
    /* 确保从左侧开始 */
    left: 100%;
  }

  .down2:hover {
    animation-play-state: paused;
  }

  .down2 > div {
    display: inline-flex;
    align-items: center;
    font-weight: 500;
    position: relative;
    border-radius: 8px;
    margin: 0 10px;
    transition: all 0.3s ease;
  }

  .down2 > div:hover {
    transform: translateY(-3px);
  }

  .down2 > div::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 35px;
    width: 2px;
    background: rgba(255, 255, 255, 0.2);
  }

  .down2 > div:last-child::after {
    display: none;
  }

  /* 新增关键帧动画 */
  @keyframes scrollRight {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-100%);
    }
  }

}
</style>