ll

liukangdong

2025-01-07 9b80c42df73cb99b37d95b5c0a186ceec5e45a27

 screen/src/views/LogisticsCenter.vue

@@ -25,7 +25,18 @@
            <div class="second_title">
              <div class="title">
                <img src="@/assets/images/LogisticsCenter/ic_title@2x.png" class="icon" alt="" />
                <div>累计出库量</div>
                <div>累计出库量(箱)</div>
                <div class="question">
                  <img src="@/assets/images/ic_question@2x.png" style="margin-left: 6px;" class="icon" alt="">
                  <div class="hover_wrap">
                    <div class="triangle"></div>
                    <div class="title">出库能力统计说明：</div>
                    <div>当前订单量：截至昨日未完成订单+当日下达的订单数量；</div>
                    <div>当日任务量：截至昨日已配载未出库+当日已配载未出库数量+无需配载的任务；</div>
                    <div>今日出库量：当日按实际出库量（以电子锁上锁为准）</div>
                    <div>剩余任务量：当日任务量-今日出库量</div>
                  </div>
                </div>
              </div>
              <div class="tabs">
                <div class="tab" :class="{ active: activeTab1 == 1 }" @click="tab1Click(1)">本周</div>
@@ -114,7 +125,7 @@
                    <span class="item">{{ item.contractNumber }}</span>
                    <span class="item status">{{ item.statusDesc }}</span>
                    <span class="item">{{ item.receiveEnterprise }}</span>
                    <span class="item">{{ item.transportDate }}</span>
                    <span class="item">{{ item.transportDate || '-' }}</span>
                  </div>
                </div>
              </div>
@@ -133,6 +144,17 @@
              <div class="left">
                <img src="@/assets/images/ic_title@2x.png" class="icon" alt="" />
                <span>出库能力</span>
                <div class="question">
                  <img src="@/assets/images/ic_question@2x.png" style="margin-left: 4px;" class="icon" alt="">
                  <div class="hover_wrap">
                    <div class="triangle"></div>
                    <div class="title">出库能力统计说明：</div>
                    <div>当前订单量：截至昨日未完成订单+当日下达的订单数量；</div>
                    <div>当日任务量：截至昨日已配载未出库+当日已配载未出库数量+无需配载的任务；</div>
                    <div>今日出库量：当日按实际出库量（以电子锁上锁为准）</div>
                    <div>剩余任务量：当日任务量-今日出库量</div>
                  </div>
                </div>
              </div>
              <div class="right">
                <img @click="showPro = !showPro" src="@/assets/images/LogisticsCenter/position.png" class="posi" alt="">
@@ -147,15 +169,18 @@
              <div class="item">
                <img src="@/assets/images/LogisticsCenter/ic_jinrijihua@2x.png" alt="">
                <div class="content">
                  <div class="name">当日订单量</div>
                  <div class="num"><span class="blue" v-if="cneterData.currentOrderNum">{{ cneterData.currentOrderNum.toFixed(0) }}</span>箱</div>
                  <div class="name">当前订单量</div>
                  <div class="num"><span class="blue"
                      v-if="cneterData.currentOrderNum || cneterData.currentOrderNum == 0">{{
                        cneterData.currentOrderNum.toFixed(0) }}</span>箱</div>
                </div>
              </div>
              <div class="item">
                <img src="@/assets/images/LogisticsCenter/ic_jinrijihua@2.png" alt="">
                <div class="content">
                  <div class="name">当日计划量</div>
                  <div class="num"><span v-if="cneterData.currentPlanNum">{{ cneterData.currentPlanNum.toFixed(0) }}</span>箱</div>
                  <div class="name">当前任务量</div>
                  <div class="num"><span v-if="cneterData.currentPlanNum || cneterData.currentPlanNum == 0">{{
                    cneterData.currentPlanNum.toFixed(0) }}</span>箱</div>
                  <div class="unit">车次：{{ cneterData.currentPlanCarNum }}</div>
                </div>
              </div>
@@ -163,7 +188,9 @@
                <img src="@/assets/images/LogisticsCenter/ic_jinrichuku@2x.png" alt="">
                <div class="content">
                  <div class="name">今日出库量</div>
                  <div class="num"><span v-if="cneterData.crrentOutNum" class="finish">{{ cneterData.crrentOutNum.toFixed(0) }}</span>箱</div>
                  <div class="num"><span v-if="cneterData.crrentOutNum || cneterData.crrentOutNum == 0"
                      class="finish">{{
                        cneterData.crrentOutNum.toFixed(0) }}</span>箱</div>
                  <div class="unit">车次：{{ cneterData.crrentOutCarNum }}</div>
                </div>
              </div>
@@ -171,7 +198,9 @@
                <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" class="today">{{ cneterData.crrentRestNum.toFixed(0) }}</span>箱</div>
                  <div class="num"><span v-if="cneterData.crrentRestNum || cneterData.crrentRestNum == 0"
                      class="today">{{
                        cneterData.crrentRestNum.toFixed(0) }}</span>箱</div>
                  <div class="unit">车次：{{ cneterData.crrentRestCarNum }}</div>
                </div>
              </div>
@@ -197,7 +226,7 @@
                  <div :style="{ width: cneterData.level2 }" class="box box1">
                    <div v-if="cneterData.hoursAbility >= cneterData.currentPlanNum" class="tag tag1">
                      <div class="icon"></div>
                      <span>当日计划</span>
                      <span>当前任务</span>
                    </div>
                  </div>
                </div>
@@ -213,7 +242,7 @@
                    :style="{ width: cneterData.level22 }" class="box box1 box11">
                    <div class="tag tag1">
                      <div class="icon"></div>
                      <span>当日计划</span>
                      <span>当前任务</span>
                    </div>
                  </div>
                  <!-- <div class="box"></div> -->
@@ -1210,7 +1239,7 @@
          } else if (item.seriesName === '库存利用率') {
            result += `
            <div style="display: flex;align-items: center;justify-content: space-between;margin-top: 2px;">
              <div style="display: flex;align-items: center;"><div style="width: 10px;height: 10px; border-radius: 50%;background-color: #5a6fc0;margin-right: 4px;"></div><div>${item.seriesName}</div></div>
              <div style="display: flex;align-items: center;"><div style="width: 10px;height: 10px; border-radius: 50%;background-color: #b2bcd1;margin-right: 4px;"></div><div>${item.seriesName}</div></div>
              <div><strong>${item.value}%</strong></div>
            </div>`
          }
@@ -1580,7 +1609,7 @@
      // icon: 'circle',
      right: '10%',
      top: '0%',
      data: ['总运力资源', '当日提报运力', '车辆利用率'],
      data: ['当日可用运力', '当日提报运力', '车辆利用率'],
      itemWidth: 20,
      itemHeight: 10,
      textStyle: {
@@ -1594,7 +1623,7 @@
        // 遍历悬浮时的所有点，定制化显示内容
        let result = `<div style="width: 160px">${params[0].name}</div>`
        params.forEach((item) => {
          if (item.seriesName === '总运力资源') {
          if (item.seriesName === '当日可用运力') {
            result += `
            <div style="display: flex;align-items: center;justify-content: space-between;margin-top: 2px;">
              <div style="display: flex;align-items: center;"><div style="width: 10px;height: 10px; border-radius: 50%;background-color: #88d9cc;margin-right: 4px;"></div><div>${item.seriesName}</div></div>
@@ -1686,7 +1715,7 @@
    ],
    series: [
      {
        name: '总运力资源',
        name: '当日可用运力',
        type: 'bar',
        barWidth: 10,
        barGap: '60%',
@@ -2111,6 +2140,9 @@
        .left {
          display: flex;
          align-items: center;
          position: relative;



          img {
            width: 16px;
@@ -2280,6 +2312,7 @@
            .tag1 {
              background-color: #28F0CC;
              border: 1px solid #28F0CC;

              .icon {
                background-color: #28F0CC;
              }
@@ -2405,6 +2438,55 @@
          height: 192px;
          width: 410px;
        }
      }
    }
  }

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

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

    .hover_wrap {
      display: none;
      position: absolute;
      left: 130px;
      z-index: 999;
      top: -5px;
      width: 407px;
      height: 134px;
      background: rgba(0, 30, 63, 0.6);
      border: 1px solid #003F82;
      backdrop-filter: blur(3px);
      padding: 10px;
      font-size: 13px;
      color: #e2ebfd;
      line-height: 19px;
      font-weight: 400;
      border-radius: 6px;

      .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 {
        font-weight: bold;
        font-size: 14px;
        color: #e2ebfd;
      }
    }
  }
@@ -2752,6 +2834,11 @@
    font-weight: 500;
    font-size: 16px;
    color: #FFFFFF;
    position: relative;

    .hover_wrap {
      left: 175px;
    }

    .icon {
      width: 16px;