1.车间看板优化

loulijun2021

2022-09-07 fed911357bda5169f00d0c6f32f8ca011389bbf6

 src/views/kb/zhkb.vue

@@ -25,151 +25,77 @@
          </div>

          <div class="kb_left_top kb_pd10">

            <div v-if="false" class="kb_left_top_block">
              <div class="kb_block02 kb_pd10">
                <div>
                  <div>销售单号:{{ lineContent01.children !== undefined ? lineContent01.children.saleordercode : '' }}</div>
                  <div class="kb_mt5">
                    加工单号:{{ lineContent01.children !== undefined ? lineContent01.children.workcode : '' }}
                  </div>
                  <div class="kb_mt5">
                    产品名称:{{ lineContent01.children !== undefined ? lineContent01.children.partname : '' }}
                  </div>

                  <div v-if="lineContent01.children&&lineContent01.children.length===0" class="kb_mt5">
                    任务数量:
                  </div>
                  <div v-else class="kb_mt5">
                    任务数量:{{ lineContent01.children ? parseFloat(lineContent01.children.qty) : '' }}
                  </div>
                </div>
              </div>
              <div class="kb_block03 kb_pd10 ">
                <div v-if="lineContent01.children!==undefined" class="flex_s_c">
                  <div
                    v-for="item in lineContent01.children.children"
                    :key="item.stepseq"
                    class="kb_block03_content flex_c_c"
                  >
                    <div>
                      <div class="content01">{{ item.stepname }}</div>
            <div class="kb_left_top02">
              <div v-for="item in lineContent4" :key="item.workcode" class="kb_left_top_block">
                <div class="kb_block02 kb_pd10">
                  <div>
                    <div>销售单号:{{ item.saleordercode }}</div>
                    <div class="kb_mt5">
                      加工单号:{{ item.workcode }}
                    </div>
                    <div class="content02Parent">
                      <div class="content02">
                        <div class="content02_1 ">任务</div>
                        <div class="content02_2 borderTop ">{{ parseFloat(item.planqty) }}</div>
                      </div>
                      <div class="content02">
                        <div class="content02_1 ">合格</div>
                        <div class="content02_2 borderTop ">{{ parseFloat(item.goodqty) }}</div>
                      </div>
                      <div class="content02" style="border-right: 0">
                        <div class="content02_1 ">不良</div>
                        <div class="content02_2 borderTop ">{{ parseFloat(item.ngqty) }}</div>
                      </div>
                    <div class="kb_mt5">
                      产品名称:{{ item.partname }}
                    </div>
                    <div class="kb_mt5">
                      任务数量:{{ parseFloat(item.qty) }}
                    </div>
                  </div>
                </div>
                <div v-if="lineContent01.children!==undefined" class="kb_block03_02 flex_s_c">
                  <div
                    v-for="item in lineContent01.children.children"
                    :key="item.stepseq"
                    class="kb_block03_02_content flex_c_c"
                  >
                    <div class="flex_c_c content01">
                      <div
                        v-if="item.status==='START'&&(parseFloat(item.ngqty)===0||item.ngqty==='')&&(parseFloat(item.goodqty)===0||item.goodqty==='')"
                        class="circle"
                        style="background-color: blue;"
                      />
                      <div
                        v-else-if="item.status==='ALLO'&&(parseFloat(item.ngqty)===0||item.ngqty==='')&&(parseFloat(item.goodqty)===0||item.goodqty==='')"
                        class="circle"
                        style="background-color: rgb(255 255 255)"
                      />
                      <div
                        v-else-if="parseFloat(item.ngqty)+parseFloat(item.goodqty)>=parseFloat(item.planqty)"
                        class="circle"
                      />
                      <div v-else class="circleYellow" />
                <div class="kb_block03 kb_pd10 ">
                  <div v-if="item.children&&item.children.length>0" class="flex_s_c">
                    <div
                      v-for="(it,ind) in item.children"
                      :key="ind"
                      class="kb_block03_content flex_c_c"
                    >
                      <div>
                        <div class="content01">{{ it.stepname }}</div>
                      </div>
                      <div class="content02Parent">
                        <div class="content02">
                          <div class="content02_1 ">任务</div>
                          <div class="content02_2 borderTop ">{{ parseFloat(it.planqty) }}</div>
                        </div>
                        <div class="content02">
                          <div class="content02_1 ">合格</div>
                          <div class="content02_2 borderTop ">{{ parseFloat(it.goodqty) }}</div>
                        </div>
                        <div class="content02" style="border-right: 0">
                          <div class="content02_1 ">不良</div>
                          <div class="content02_2 borderTop ">{{ parseFloat(it.ngqty) }}</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                  <div v-if="item.children&&item.children.length>0" class="kb_block03_02 flex_s_c">
                    <div
                      v-for="(it,ind) in item.children"
                      :key="ind"
                      class="kb_block03_02_content flex_c_c"
                    >
                      <div class="flex_c_c content01">
                        <div
                          v-if="it.status==='START'&&(parseFloat(it.ngqty)===0||it.ngqty==='')&&(parseFloat(it.goodqty)===0||it.goodqty==='')"
                          class="circle"
                          style="background-color: blue;"
                        />
                        <div
                          v-else-if="it.status==='ALLO'&&(parseFloat(it.ngqty)===0||it.ngqty==='')&&(parseFloat(it.goodqty)===0||it.goodqty==='')"
                          class="circle"
                          style="background-color: rgb(255 255 255)"
                        />
                        <div
                          v-else-if="parseFloat(it.ngqty)+parseFloat(it.goodqty)>=parseFloat(it.planqty)"
                          class="circle"
                        />
                        <div v-else class="circleYellow" />
                      </div>
                    </div>
                  </div>

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

            <div v-for="item in lineContent4" :key="item.workcode" class="kb_left_top_block">
              <div class="kb_block02 kb_pd10">
                <div>
                  <div>销售单号:{{ item.saleordercode }}</div>
                  <div class="kb_mt5">
                    加工单号:{{ item.workcode }}
                  </div>
                  <div class="kb_mt5">
                    产品名称:{{ item.partname }}
                  </div>
                  <div class="kb_mt5">
                    任务数量:{{ parseFloat(item.qty) }}
                  </div>
                </div>
              </div>
              <div class="kb_block03 kb_pd10 ">
                <div v-if="item.children&&item.children.length>0" class="flex_s_c">
                  <div
                    v-for="(it,ind) in item.children"
                    :key="ind"
                    class="kb_block03_content flex_c_c"
                  >
                    <div>
                      <div class="content01">{{ it.stepname }}</div>
                    </div>
                    <div class="content02Parent">
                      <div class="content02">
                        <div class="content02_1 ">任务</div>
                        <div class="content02_2 borderTop ">{{ parseFloat(it.planqty) }}</div>
                      </div>
                      <div class="content02">
                        <div class="content02_1 ">合格</div>
                        <div class="content02_2 borderTop ">{{ parseFloat(it.goodqty) }}</div>
                      </div>
                      <div class="content02" style="border-right: 0">
                        <div class="content02_1 ">不良</div>
                        <div class="content02_2 borderTop ">{{ parseFloat(it.ngqty) }}</div>
                      </div>
                    </div>
                  </div>
                </div>
                <div v-if="item.children&&item.children.length>0" class="kb_block03_02 flex_s_c">
                  <div
                    v-for="(it,ind) in item.children"
                    :key="ind"
                    class="kb_block03_02_content flex_c_c"
                  >
                    <div class="flex_c_c content01">
                      <div
                        v-if="it.status==='START'&&(parseFloat(it.ngqty)===0||it.ngqty==='')&&(parseFloat(it.goodqty)===0||it.goodqty==='')"
                        class="circle"
                        style="background-color: blue;"
                      />
                      <div
                        v-else-if="it.status==='ALLO'&&(parseFloat(it.ngqty)===0||it.ngqty==='')&&(parseFloat(it.goodqty)===0||it.goodqty==='')"
                        class="circle"
                        style="background-color: rgb(255 255 255)"
                      />
                      <div
                        v-else-if="parseFloat(it.ngqty)+parseFloat(it.goodqty)>=parseFloat(it.planqty)"
                        class="circle"
                      />
                      <div v-else class="circleYellow" />
                    </div>
                  </div>
                </div>

              </div>
            </div>

          </div>
          <!-- 2-->
          <div class="kb_left_bottom kb_pd10">
@@ -222,7 +148,7 @@
                  <el-table-column
                    prop="wo_code"
                    label="加工单号"
                    width="170"
                    width="175"
                  />
                  <el-table-column
                    prop="partname"
@@ -232,7 +158,7 @@
                  <el-table-column
                    prop="partspec"
                    label="规格"
                    width="130"
                    width="125"
                  >
                    <template slot-scope="{row}">
                      <div v-if="row.partspec" class="ellipsis">{{ row.partspec }}</div>
@@ -374,14 +300,6 @@
    return {
      headTime: '',

      lineArr: [],
      // lineContent01: {},
      lineContent01: {
        linename: '',
        lineworkcont: '',
        children: undefined
      },

      lineContent: [],
      lineContent4: [],

@@ -438,7 +356,6 @@
              this.ShopArr.push(item.org_code)
            })
          }
          console.log(this.ShopArr, 997)
        })
      }, 1000 * 30)
    },
@@ -450,27 +367,24 @@
        length = this.lineContent.length
        count = Math.ceil(length / 4) // 需要轮播的组数   4个为一组
        this.lineContent4 = this.lineContent.slice(0, 4)
        // this.lineContent4[0].children.push({})
      })

      let start = 0
      const task = setInterval(() => {
        if (Math.floor(start / 4) === count) {
          // clearInterval(task)
          // this.getShopSearchLine()
        if (Math.floor(start / 4) === count && count !== 0) {
          start = 0
          LineSearchTopLeftData({ shopcode: this.ShopArr.join(',') }).then(res => {
            this.lineContent = res.data
            length = this.lineContent.length
            count = Math.ceil(length / 4) // 需要轮播的组数   4个为一组
            this.lineContent4 = this.lineContent.slice(0, 4)
            console.log(count)
          })
        } else if (count === 0) {
          clearInterval(task)
          this.getShopSearchLine()
        }
        this.lineContent4 = this.lineContent.slice(start, start + 4)
        start = start + 4
        console.log(start)
        console.log('执行了！！！')
      }, 1000 * 3)
    },

@@ -580,8 +494,6 @@
</script>

<style scoped lang="scss">
//$kbBorderColor: #3A0088;
//$kbBorderColor: #09d8f2;
$kbBorderColor: rgba(9, 216, 242, 0.4);
$kbBackgroundColor: rgba(30, 33, 46, 0.6);
.kb_content {
@@ -589,9 +501,7 @@
  position: relative;
  height: 990px;
  width: 100%;
  //background-color: #000;
  letter-spacing: 2px;
  //color: #d8d7d9;
  color: #fff;

  .kb_left {
@@ -621,120 +531,111 @@
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      //justify-content: flex-end;
      //padding-top: 30px;
      padding-top: 70px;
      //padding-bottom: 25px;

      .kb_left_top_block {
        //margin-top: 10px;
        width: 100%;
        height: 100px;
      .kb_left_top02 {
        display: flex;
        border-radius: 5px;
        font-size: 14px;
        //padding: 10px 0;
        //border: 1px solid rgba(255, 255, 255, 0.6);
        //border: 1px solid $kbBorderColor;
        //border-bottom: 1px solid $kbBorderColor;
        border-top: 1px solid $kbBorderColor;
        border-right: 1px solid $kbBorderColor;
        border-left: 1px solid $kbBorderColor;
        flex-direction: column;
        justify-content: flex-start;
        border: 1px solid $kbBorderColor;
        height: 400px;
        border-radius: 5px;
        background-color: $kbBackgroundColor;

        .kb_block02 {
          width: 304px;
        .kb_left_top_block {
          width: 100%;
          height: 100px;
          display: flex;
          align-items: center;
          border-right: 1px solid $kbBorderColor;
          background-color: $kbBackgroundColor;
        }
          font-size: 14px;
          border-bottom: 1px solid $kbBorderColor;
          justify-content: flex-start;

        .kb_block03 {
          width: 1020px;
          //width: 100%;
          display: flex;
          flex-direction: column;
          font-size: 12px;
          background-color: $kbBackgroundColor;
          border-radius: 5px;
          .kb_block02 {
            width: 304px;
            display: flex;
            align-items: center;
            border-right: 1px solid $kbBorderColor;
          }

          .kb_block03_content {
            border: 1px solid $kbBorderColor;
            //width: 152px;
            width: 180px;
            height: 50px;
            margin-right: 15px;
            //margin-right: 20px;
          .kb_block03 {
            width: 1020px;

            display: flex;
            flex-direction: column;
            font-size: 12px;
            border-radius: 5px;

            .content01 {
              //width: 50px;
              width: 100%;
              height: 18px;
              border-bottom: 1px solid $kbBorderColor;
            .kb_block03_content {
              border: 1px solid $kbBorderColor;
              width: 180px;
              height: 50px;
              margin-right: 15px;
              display: flex;
              align-items: center;
              justify-content: center;
            }
              flex-direction: column;

            .content02Parent {
              display: flex;
              //height:30px;
              .content02 {
                width: 60px;
                border-right: 1px solid $kbBorderColor;

                .content02_1 {
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  height: 50%;
                }

                .content02_2 {
                  height: 50%;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                }

                .borderTop {
                  border-top: 1px solid $kbBorderColor;
                }
              .content01 {
                width: 100%;
                height: 18px;
                border-bottom: 1px solid $kbBorderColor;
                display: flex;
                align-items: center;
                justify-content: center;
              }
            }

          }
        }
              .content02Parent {
                display: flex;
                .content02 {
                  width: 60px;
                  border-right: 1px solid $kbBorderColor;

        .kb_block03_02 {
          margin-top: 7px;
          display: flex;
                  .content02_1 {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    height: 50%;
                  }

          .kb_block03_02_content {
            //width: 152px;
            width: 180px;
            margin-right: 15px;
                  .content02_2 {
                    height: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                  }

            .content01 {
              .circle {
                width: 26px;
                height: 26px;
                background-color: #00ff8b;
                border-radius: 50%;
                  .borderTop {
                    border-top: 1px solid $kbBorderColor;
                  }
                }
              }

            }

          }

          .kb_block03_02 {
            margin-top: 7px;
            display: flex;

            .kb_block03_02_content {
              width: 180px;
              margin-right: 15px;

              .content01 {
                .circle {
                  width: 26px;
                  height: 26px;
                  background-color: #00ff8b;
                  border-radius: 50%;
                }

              }

            }
          }

        }

      }

      .kb_left_top_block:last-child{
        border-bottom: 1px solid $kbBorderColor;
        .kb_left_top_block:nth-child(4n) {
          border-bottom: none !important;
        }
      }
    }

@@ -745,20 +646,10 @@
        height: 460px;
        display: flex;
        flex-direction: column;
        //border: 1px solid $kbBorderColor;

        .content_head {
          ////font-size: 26px;
          //font-size: 18px;
          //height: 55px;
          //line-height: 55px;
          ////border-bottom: 1px solid $kbBorderColor;
          ////text-align: center;
          //padding-left: 10px;

          font-size: 18px;
          line-height: 20px;
          //padding-left: 10px;
          margin-bottom: 10px;
          margin-top: -10px;
          color: #00ffff;
@@ -783,7 +674,6 @@
      width: 100%;

      .kb_right_top_content {
        //border: 1px solid $kbBorderColor;
        height: 430px;
        display: flex;
        flex-direction: column;
@@ -791,7 +681,6 @@
        .content_head {
          font-size: 18px;
          line-height: 20px;
          //padding-left: 10px;
          margin-bottom: 10px;
          margin-top: -10px;
          color: #00ffff;
@@ -799,7 +688,6 @@

        .content_body {
          border: 1px solid $kbBorderColor;
          //border-radius: 5px;
        }
      }
    }
@@ -821,7 +709,6 @@
        width: 100%;
        border-radius: 5px;
        background-color: $kbBackgroundColor;
        //height: 100%;
      }
    }
  }
@@ -832,7 +719,6 @@
}

::v-deep .el-table__body-wrapper {
  //background-color: #044563;
  background-color: rgba(30, 33, 46);
}

@@ -845,64 +731,10 @@
  padding: 0 !important;
}

//
///* 定义keyframes动画，命名为blink*/
//@keyframes blink {
//  0% {
//    opacity: 1
//  }
//  100% {
//    opacity: 0
//  }
//}
//
///*添加兼容性前缀*/
//@-webkit-keyframes blink {
//  0% {
//    opacity: 1
//  }
//  100% {
//    opacity: 0
//  }
//}
//
//@-o-keyframes blink {
//  0% {
//    opacity: 1
//  }
//  100% {
//    opacity: 0
//  }
//}
//
//@-moz-keyframes blink {
//  0% {
//    opacity: 1
//  }
//  100% {
//    opacity: 0
//  }
//}
//
//@-ms-keyframes blink {
//  0% {
//    opacity: 1
//  }
//  100% {
//    opacity: 0
//  }
//}
//
.circleYellow {
  width: 26px;
  height: 26px;
  background-color: rgb(255 255 0);
  border-radius: 50%;

  //animation: blink 2s linear infinite;
  //-webkit-animation: blink 2s linear infinite;
  //-moz-animation: blink 2s linear infinite;
  //-ms-animation: blink 2s linear infinite;
  //-o-animation: blink 2s linear infinite;
}
</style>