ll

liukangdong

2025-01-17 440bf888a2a9fa73663014883f2ccf92a35ff69e

 screen/src/views/LogisticsCenter.vue

@@ -45,7 +45,6 @@
            </div>
            <div class="content_wrap">
              <div class="num_wrap">

                <div class="question1">
                  <div class="hover_con">
                    <div class="num_list" v-if="StockOutData.currentNum || StockOutData.currentNum == 0">
@@ -56,8 +55,10 @@
                    </div>
                    <div class="hover_wrap">
                      <div class="triangle"></div>
                      <div class="title" v-if="StockOutData.currentProvinceNum || StockOutData.currentProvinceNum == 0">调拨出库量：{{ StockOutData.currentProvinceNum.toFixed(0) }}箱</div>
                      <div class="title" v-if="StockOutData.currentOtherNum || StockOutData.currentOtherNum == 0">其他出库量：{{ StockOutData.currentOtherNum.toFixed(0) }}箱</div>
                      <div class="title" v-if="StockOutData.currentProvinceNum || StockOutData.currentProvinceNum == 0">
                        调拨出库量：{{ StockOutData.currentProvinceNum.toFixed(0) }}箱</div>
                      <div class="title" v-if="StockOutData.currentOtherNum || StockOutData.currentOtherNum == 0">
                        其他出库量：{{ StockOutData.currentOtherNum.toFixed(0) }}箱</div>
                    </div>
                  </div>

@@ -157,10 +158,10 @@
                  <div class="hover_wrap">
                    <div class="triangle"></div>
                    <div class="title">出库能力统计说明：</div>
                    <div>当前订单量：截至昨日未完成订单+当日下达的订单数量；</div>
                    <div>当日任务量：截至昨日已配载未出库+当日已配载未出库数量+无需配载的任务；</div>
                    <div>今日出库量：当日按实际出库量（以电子锁上锁为准）</div>
                    <div>剩余任务量：当日任务量-今日出库量</div>
                    <div>1、当前订单量：截至目前未配载的订单量</div>
                    <div>2、当前任务量：所有已下达运输且未出库的任务量：截止目前已配载未出库+无需配载的任务(同城任务量)</div>
                    <div>3、今日出库量：今日实际出库量：以电子锁上锁为准</div>
                    <div>4、剩余任务量：数据同当前任务量（弹窗分别展示同库和运输任务量</div>
                  </div>
                </div>
              </div>
@@ -202,14 +203,21 @@
                  <div class="unit">车次：{{ cneterData.crrentOutCarNum }}</div>
                </div>
              </div>
              <div class="item">
                <img src="@/assets/images/LogisticsCenter/ic_jinriweichu@2x.png" alt="">
                <div class="content">
                  <div class="name">剩余任务量</div>
                  <div class="num"><span v-if="cneterData.crrentRestNum || cneterData.crrentRestNum == 0"
                      class="today">{{
                        cneterData.crrentRestNum }}</span>箱</div>
                  <div class="unit">车次：{{ cneterData.crrentRestCarNum }}</div>
              <div class="tooltip_wrap">
                <div class="item">
                  <img src="@/assets/images/LogisticsCenter/ic_jinriweichu@2x.png" alt="">
                  <div class="content">
                    <div class="name">剩余任务量</div>
                    <div class="num"><span v-if="cneterData.crrentRestNum || cneterData.crrentRestNum == 0"
                        class="today">{{
                          cneterData.crrentRestNum }}</span>箱</div>
                    <div class="unit">车次：{{ cneterData.crrentRestCarNum }}</div>
                  </div>
                </div>
                <div class="tooltip">
                  <div class="triangle"></div>
                  <div>运输任务量：{{ cneterData.needTransportOrderNum }}箱</div>
                  <div>同城共库任务量：{{ cneterData.noNeedTransportOrderNum }}箱</div>
                </div>
              </div>
            </div>
@@ -226,36 +234,70 @@
                  </div> -->
                  <div :style="{ width: cneterData.level3 }"
                    :class="{ box23: cneterData.crrentOutNum >= cneterData.hoursAbility }" class="box">
                    <div v-if="cneterData.crrentOutNum < cneterData.hoursAbility" class="tag">
                      <div class="icon"></div>
                      <span>今日出库</span>
                    <div class="tooltip_wrap">
                      <div v-if="cneterData.crrentOutNum < cneterData.hoursAbility" class="tag">
                        <div class="icon"></div>
                        <span>今日出库</span>
                      </div>
                      <div class="tooltip">
                        <div class="triangle"></div>今日出库量：{{ cneterData.crrentOutNum }}箱
                      </div>
                    </div>
                  </div>
                  <div :style="{ width: cneterData.level2 }" class="box box1">
                    <div v-if="cneterData.hoursAbility >= cneterData.currentPlanNum" class="tag tag1">
                      <div class="icon"></div>
                      <span>当前任务</span>
                    <div class="tooltip_wrap">
                      <div v-if="cneterData.hoursAbility >= cneterData.currentPlanNum" class="tag tag1">
                        <div class="icon"></div>
                        <span>当前任务</span>
                      </div>
                      <div class="tooltip">
                        <div class="triangle"></div>当前任务量：{{ cneterData.currentPlanNum }}箱
                      </div>
                    </div>
                  </div>
                </div>
                <div class="side">
                  <div v-if="cneterData.crrentOutNum >= cneterData.hoursAbility" :style="{ width: cneterData.level33 }"
                    class="box box22">
                    <div class="tag">
                      <div class="icon"></div>
                      <span>今日出库</span>
                    <div class="tooltip_wrap">
                      <div class="tag">
                        <div class="icon"></div>
                        <span>今日出库</span>
                      </div>
                      <div class="tooltip">
                        <div class="triangle"></div>今日出库量：{{ cneterData.crrentOutNum }}箱
                      </div>
                    </div>
                  </div>
                  <div v-if="cneterData.hoursAbility <= cneterData.currentPlanNum"
                    :style="{ width: cneterData.level22 }" class="box box1 box11">
                    <div class="tag tag1">
                      <div class="icon"></div>
                      <span>当前任务</span>
                    <div class="tooltip_wrap">
                      <div class="tag tag1">
                        <div class="icon"></div>
                        <span>当前任务</span>
                      </div>
                      <div class="tooltip">
                        <div class="triangle"></div>当前任务量：{{ cneterData.currentPlanNum }}箱
                      </div>
                    </div>
                  </div>
                  <!-- <div class="box"></div> -->
                  <div class="scale" style="left: -12px;">8h</div>
                  <div class="scale scale1">最大</div>
                  <div class="scale" style="left: -12px;">
                    <div class="tooltip_wrap">
                      <span>8h</span>
                      <div class="tooltip">
                        <div class="triangle"></div>8小时出库能力：{{ cneterData.hoursAbility }}箱
                      </div>
                    </div>
                  </div>
                  <div class="scale scale1">
                    <div class="tooltip_wrap">
                      <span>最大</span>
                      <div class="tooltip">
                        <div class="triangle"></div>最大出库能力：{{ cneterData.maxAbility }}箱
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
@@ -1179,7 +1221,7 @@
    // 8小时 计划 今日
    // obj.hoursAbility = 6000
    // obj.maxAbility = 8000
    // obj.currentPlanNum = 5000
    // obj.currentPlanNum = 22000
    // obj.crrentOutNum = 7000

    obj.level1 = ((obj.hoursAbility / obj.maxAbility) * 100).toFixed(2) + '%'
@@ -1954,7 +1996,7 @@
      margin-top: 20px;
      padding: 0px 10px 30px 20px;
      position: relative;

      height: 160px;
      .content_wrap {
        display: flex;
        justify-content: space-between;
@@ -2214,6 +2256,36 @@
        justify-content: space-between;
        margin: 30px 0 14px;

        .tooltip_wrap {
          position: relative;

          &:hover {
            .tooltip {
              display: block;
            }
          }

          .tooltip {
            display: none;
            background: rgba(0, 30, 63, 0.6);
            border: 1px solid #003F82;
            backdrop-filter: blur(3px);
            padding: 10px;
            font-size: 15px;
            color: #fff;
            line-height: 19px;
            font-weight: 400;
            border-radius: 6px;
            width: 230px;
            position: absolute;
            line-height: 24px;
            left: 100%;
            top: 50%;
            transform: translate(20px, -42%);
            z-index: 999999999999999;
          }
        }

        .item {
          display: flex;

@@ -2303,6 +2375,7 @@

            .tag {
              position: absolute;
              z-index: 99999;
              bottom: -30px;
              right: 0;
              transform: translate(50%, 0);
@@ -2329,7 +2402,13 @@
                z-index: -1;
              }
            }

            .tooltip_wrap{
              .tooltip{
                z-index: 9999999999;
                top: 34px;
                transform: translate(70px, -42%);
              }
            }
            .tag1 {
              background-color: #28F0CC;
              border: 1px solid #28F0CC;
@@ -2358,16 +2437,52 @@
            background: linear-gradient(270deg, #f4b34a 0%, #FFEA70 100%);
          }

          .tooltip_wrap {
            /* position: relative; */

            &:hover {
              .tooltip {
                display: block;
              }
            }

            .tooltip {
              display: none;
              background: #071b32;
              border: 1px solid #003F82;
              /* backdrop-filter: blur(3px); */
              padding: 10px;
              font-size: 15px;
              color: #fff;
              line-height: 19px;
              font-weight: 400;
              border-radius: 6px;
              width: 200px;
              position: absolute;
              z-index: 99999999;
              left: 100%;
              top: 50%;
              transform: translate(30px, -42%);
            }
          }

          .scale {
            position: absolute;
            top: -24px;
            left: 0;
            font-size: 16px;
            color: #D2E0FF;

            .tooltip_wrap {
              .tooltip {
                width: 240px;
                transform: translate(20px, -50%);
              }
            }
          }

          .scale1 {
            left: 84%;
            left: 92%;
            min-width: 36px;
          }

@@ -2479,14 +2594,14 @@
      left: 130px;
      z-index: 999;
      top: -5px;
      width: 407px;
      width: 420px;
      height: 148px;
      background: rgba(0, 30, 63, 0.6);
      border: 1px solid #003F82;
      backdrop-filter: blur(3px);
      padding: 10px;
      font-size: 13px;
      color: #e2ebfd;
      color: #ebf1fb;
      line-height: 19px;
      font-weight: 400;
      border-radius: 6px;
@@ -2534,7 +2649,7 @@

  .hover_wrap {
    display: none;
    

    position: absolute;
    left: 108%;
    z-index: 999;
@@ -2546,7 +2661,7 @@
    backdrop-filter: blur(3px);
    padding: 10px;
    font-size: 15px;
    color: #e2ebfd;
    color: #e9f0ff;
    line-height: 19px;
    font-weight: 400;
    border-radius: 6px;
@@ -2555,23 +2670,25 @@
      margin-bottom: 3px;
    }

    .triangle {
      width: 12px;
      height: 12px;
      position: absolute;
      top: 10px;
      left: -6px;
      transform: rotate(45deg);
      border-left: 1px solid #003F82;
      border-bottom: 1px solid #003F82;
      background: rgba(0, 30, 63, 0.6);
      /* backdrop-filter: blur(3px); */
    }

    .title {
      color: #e2ebfd;
    }
  }
}

.triangle {
  width: 12px;
  height: 12px;
  position: absolute;
  top: 36%;
  transform: translate(-50%, -50%);
  left: -6px;
  transform: rotate(45deg);
  border-left: 1px solid #003F82;
  border-bottom: 1px solid #003F82;
  background: rgba(0, 30, 63, 0.6);
  /* backdrop-filter: blur(3px); */
}

.main_header {
@@ -2704,16 +2821,19 @@
      top: -32px !important;
    }
  }
  .stock{

  .stock {
    display: flex;
    align-items: center;
    color: #dd5d2a;
    margin-bottom: 8px;
    img{

    img {
      margin-right: 6px;
      width: 14px;
    }
  }

  .title_head {
    display: flex;
    align-items: center;