1.仓库管理看板静态页面初步实现2.采购订单看板静态页面初步实现

loulijun2021

2022-07-30 377d4c4027610c69ccc9e1af913bab579a4d5e17

 src/views/kb/zhkb.vue

@@ -16,12 +16,6 @@
          <!-- 1-->
          <div class="kb_left_top_title01">生产产线：</div>
          <div class="kb_left_top kb_pd10">
            <!--            <div v-for="item in leftTopData" :key="item.id">-->
            <!--              <div class="kb_block ">-->
            <!--                <div>{{ item.name }}</div>-->
            <!--                <div style="margin-top: 10px">{{ item.value }}</div>-->
            <!--              </div>-->
            <!--            </div>-->
            <div class="kb_left_top_block">
              <div class="kb_block01 kb_pd10">
                <div>
@@ -507,36 +501,21 @@
                    </div>
                  </div>

                  <!--                  <div class="kb_block03_02_content flex_c_c">-->
                  <!--                    <div class="content02">-->
                  <!--                      <div class="circle" />-->
                  <!--                      <div class="line" />-->
                  <!--                    </div>-->
                  <!--                  </div>-->

                  <!--                  <div class="kb_block03_02_content flex_c_c">-->
                  <!--                    <div class="content03">-->
                  <!--                      &lt;!&ndash;                      <div class="circle" :class="circleMarginLeft" />&ndash;&gt;-->
                  <!--                      <div class="circle" style="background-color: #fff" />-->
                  <!--                      &lt;!&ndash;                      <div class="line" :class="lineWidth" />&ndash;&gt;-->
                  <!--                      <div class="line" />-->
                  <!--                    </div>-->
                  <!--                  </div>-->

                </div>

              </div>
            </div>
          </div>
          <!-- 2-->
          <div class="kb_left_top_title02">在制订单：</div>
          <div class="kb_left_bottom kb_pd10">
            <div class="kb_left_bottom_content">
              <div class="content_head">在制订单</div>
              <el-table
                :data="tableData"
                style="width: 100%;"
                :header-cell-style="headerCellStyle"
                :cell-style="cellStyle"
                height="310"
              >
                <el-table-column
                  prop="xh"
@@ -617,15 +596,17 @@
              <div class="content_head">当日车间产线产品数量排行</div>
              <div class="content_body">
                <el-table
                  ref="tableDataRank"
                  :data="tableDataRank"
                  style="width: 100%;"
                  :header-cell-style="headerCellStyle"
                  :cell-style="cellStyle"
                  height="400"
                >
                  <el-table-column
                    prop="xh"
                    label="序号"
                    width="70"
                    width="75"
                  />
                  <el-table-column
                    prop="cj"
@@ -851,7 +832,19 @@
        { xh: 'NO.5', cj: '锂电车间', cx: '锂电1线', cp: 'F09锂电', sl: 1000 },
        { xh: 'NO.6', cj: '锂电车间', cx: '锂电1线', cp: 'F09锂电', sl: 1000 },
        { xh: 'NO.7', cj: '锂电车间', cx: '锂电1线', cp: 'F09锂电', sl: 1000 },
        { xh: 'NO.8', cj: '锂电车间', cx: '锂电1线', cp: 'F09锂电', sl: 1000 }
        { xh: 'NO.8', cj: '锂电车间', cx: '锂电1线', cp: 'F09锂电', sl: 1000 },
        { xh: 'NO.9', cj: '锂电车间', cx: '锂电1线', cp: 'F09锂电', sl: 1000 },
        { xh: 'NO.10', cj: '锂电车间', cx: '锂电1线', cp: 'F09锂电', sl: 1000 },
        { xh: 'NO.11', cj: '锂电车间', cx: '锂电1线', cp: 'F09锂电', sl: 1000 },
        { xh: 'NO.12', cj: '锂电车间', cx: '锂电1线', cp: 'F09锂电', sl: 1000 },
        { xh: 'NO.13', cj: '锂电车间', cx: '锂电1线', cp: 'F09锂电', sl: 1000 },
        { xh: 'NO.14', cj: '锂电车间', cx: '锂电1线', cp: 'F09锂电', sl: 1000 },
        { xh: 'NO.15', cj: '锂电车间', cx: '锂电1线', cp: 'F09锂电', sl: 1000 },
        { xh: 'NO.16', cj: '锂电车间', cx: '锂电1线', cp: 'F09锂电', sl: 1000 },
        { xh: 'NO.17', cj: '锂电车间', cx: '锂电1线', cp: 'F09锂电', sl: 1000 },
        { xh: 'NO.18', cj: '锂电车间', cx: '锂电1线', cp: 'F09锂电', sl: 1000 },
        { xh: 'NO.19', cj: '锂电车间', cx: '锂电1线', cp: 'F09锂电', sl: 1000 },
        { xh: 'NO.20', cj: '锂电车间', cx: '锂电1线', cp: 'F09锂电', sl: 1000 }
      ]

    }
@@ -868,8 +861,10 @@
    // setInterval(this.handleData, 2000)

    this.getEcharts()
    // this.gettableDataRankRoll()
  },
  methods: {

    // 处理数据
    handleData() {
      console.log(this.leftTopDataCurrentNumber)
@@ -882,11 +877,25 @@
      }
    },

    // 产线产品数量排行滚动效果
    gettableDataRankRoll() {
      const divData = this.$refs.tableDataRank.bodyWrapper
      // 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果(此配置为每100毫秒移动1像素)
      setInterval(() => {
        // 元素自增距离顶部1像素
        divData.scrollTop += 40
        // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
        if (divData.clientHeight + divData.scrollTop === divData.scrollHeight) {
          // 重置table距离顶部距离
          divData.scrollTop = 0
          console.log('该请求接口了！')
        }
      }, 2000)
    },
    // 获取echarts
    getEcharts() {
      loadEcharts('bar02', bar02())
    },

    // 获取当前时间
    getNowTime() {
      const dt = new Date()
@@ -904,10 +913,9 @@
      this.headTime = `${y}-${m}-${d}  ${hh}:${mm}:${ss}   ${week}`
    },
    headerCellStyle() {
      // return { backgroundColor: 'transparent', padding: '0', textAlign: 'center' }
      return {
        backgroundColor: '#000',
        padding: '17px 0',
        padding: '10px 0',
        textAlign: 'center',
        color: '#fff',
        borderRight: '1px solid rgba(255,255,255,0.6)'
@@ -944,12 +952,7 @@
    .kb_left_top_title01 {
      position: absolute;
      top: -3px;
      left:15px;
    }
    .kb_left_top_title02{
      position: absolute;
      top: 483px;
      left:15px;
      left: 15px;
    }

    .kb_left_top {
@@ -962,36 +965,35 @@
        width: 100%;
        height: 100px;
        display: flex;
        border: 1px solid rgba(255,255,255,0.6);
        border: 1px solid rgba(255, 255, 255, 0.6);

        .kb_block01 {
          width: 171px;
          display: flex;
          align-items: center;
          border-right: 1px solid rgba(255,255,255,0.6);
          border-right: 1px solid rgba(255, 255, 255, 0.6);
        }

        .kb_block02 {
          width: 304px;
          display: flex;
          align-items: center;
          border-right: 1px solid rgba(255,255,255,0.6);
          border-right: 1px solid rgba(255, 255, 255, 0.6);
        }

        .kb_block03 {
          width: 843px;
          display: flex;
          flex-direction: column;
          //text-align: center;

          .kb_block03_content {
            border: 1px solid rgba(255,255,255,0.6);
            border: 1px solid rgba(255, 255, 255, 0.6);
            width: 200px;
            height: 50px;

            .content01 {
              width: 50px;
              border-right: 1px solid rgba(255,255,255,0.6);
              border-right: 1px solid rgba(255, 255, 255, 0.6);
              display: flex;
              align-items: center;
              justify-content: center;
@@ -999,7 +1001,7 @@

            .content02 {
              width: 50px;
              border-right: 1px solid rgba(255,255,255,0.6);
              border-right: 1px solid rgba(255, 255, 255, 0.6);

              .content02_1 {
                display: flex;
@@ -1016,7 +1018,7 @@
              }

              .borderTop {
                border-top: 1px solid rgba(255,255,255,0.6);
                border-top: 1px solid rgba(255, 255, 255, 0.6);
              }
            }
          }
@@ -1069,8 +1071,17 @@
      height: 495px;

      .kb_left_bottom_content {
        border: 1px solid rgba(255,255,255,0.6);
        height: 460px;
        display: flex;
        flex-direction: column;
        border: 1px solid rgba(255, 255, 255, 0.6);

        .content_head {
          line-height: 55px;
          border-bottom: 1px solid rgba(255, 255, 255, 0.6);
          text-align: center;
          font-size: 26px;
        }
      }
    }
  }
@@ -1084,16 +1095,16 @@
      width: 100%;

      .kb_right_top_content {
        border: 1px solid rgba(255,255,255,0.6);
        border: 1px solid rgba(255, 255, 255, 0.6);
        height: 100%;
        display: flex;
        flex-direction: column;

        .content_head {
          font-size: 26px;
          height: 76px;
          line-height: 76px;
          border-bottom: 1px solid rgba(255,255,255,0.6);
          height: 55px;
          line-height: 55px;
          border-bottom: 1px solid rgba(255, 255, 255, 0.6);
          text-align: center;
        }
      }
@@ -1104,7 +1115,7 @@
      margin-top: 8px;

      .kb_right_bottom_content {
        border: 1px solid rgba(255,255,255,0.6);
        border: 1px solid rgba(255, 255, 255, 0.6);
        width: 100%;
        height: 100%;
      }
@@ -1112,4 +1123,8 @@
  }
}

::v-deep .el-table__body-wrapper {
  background-color: #000;
}

</style>