jiangping
2025-01-08 a35b8eec96aac2793de732c3fb7513cd6c5b2e4c
screen/src/views/LogisticsCenter.vue
@@ -148,14 +148,14 @@
                <img src="@/assets/images/LogisticsCenter/ic_jinrijihua@2x.png" alt="">
                <div class="content">
                  <div class="name">当日订单量</div>
                  <div class="num"><span class="blue">{{ cneterData.currentOrderNum }}</span>万支</div>
                  <div class="num"><span class="blue" v-if="cneterData.currentOrderNum">{{ 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>{{ cneterData.currentPlanNum }}</span>万支</div>
                  <div class="num"><span v-if="cneterData.currentPlanNum">{{ cneterData.currentPlanNum.toFixed(0) }}</span>箱</div>
                  <div class="unit">车次:{{ cneterData.currentPlanCarNum }}</div>
                </div>
              </div>
@@ -163,7 +163,7 @@
                <img src="@/assets/images/LogisticsCenter/ic_jinrichuku@2x.png" alt="">
                <div class="content">
                  <div class="name">今日出库量</div>
                  <div class="num"><span class="finish">{{ cneterData.crrentOutNum }}</span>万支</div>
                  <div class="num"><span v-if="cneterData.crrentOutNum" class="finish">{{ cneterData.crrentOutNum.toFixed(0) }}</span>箱</div>
                  <div class="unit">车次:{{ cneterData.crrentOutCarNum }}</div>
                </div>
              </div>
@@ -171,7 +171,7 @@
                <img src="@/assets/images/LogisticsCenter/ic_jinriweichu@2x.png" alt="">
                <div class="content">
                  <div class="name">剩余任务量</div>
                  <div class="num"><span class="today">{{ cneterData.crrentRestNum }}</span>万支</div>
                  <div class="num"><span v-if="cneterData.crrentRestNum" class="today">{{ cneterData.crrentRestNum.toFixed(0) }}</span>箱</div>
                  <div class="unit">车次:{{ cneterData.crrentRestCarNum }}</div>
                </div>
              </div>
@@ -278,7 +278,7 @@
              <div class="side">
                全省:
                <span>{{ data5.currentNum }}</span>
                <span class="unit">万支 | </span>
                <span class="unit">箱 | </span>
                <span v-if="data5.totalNum">{{ ((data5.currentNum / data5.totalNum) * 100).toFixed(1) }}%</span>
              </div>
            </div>
@@ -295,7 +295,7 @@
              <div class="side">
                全省:
                <span>{{ data6.currentNum }}</span>
                <span class="unit">万支 | </span>
                <span class="unit">箱 | </span>
                <span v-if="data6.totalNum">{{ ((data6.currentNum / data6.totalNum) * 100).toFixed(1) }}%</span>
              </div>
            </div>
@@ -518,14 +518,23 @@
    { name: '澳门特别行政区', code:'820003',value: 0 },
    { name: '南海诸岛', code:'',value: 0 },
  ]
  let totalNum = 0
  mapList.value.forEach(i => {
    totalNum += i.yearNum
  })
  mapData.forEach(item => {
    item.monthNum = 0
    item.yearNum = 0
    mapList.value.forEach(ite => {
      if (item.code == ite.code) {
        item.value = ite.yearNum
        item.value = 0
        item.monthNum = ite.monthNum
        item.yearNum = ite.yearNum
        if(totalNum > 0){
          item.rate = ((ite.yearNum / totalNum) * 100).toFixed(2)
          item.value = (ite.yearNum / totalNum).toFixed(4)
        }
      }
    })
  })
@@ -535,10 +544,14 @@
    visualMap: {
      type: 'piecewise',
      pieces: [
        { min: 100000, max: 99999999999, label: '出库量10w以上', color: '#be6f2b' },
        { min: 50000, max: 100000, label: '出库量5-10w', color: '#c39332' },
        { min: 20000, max: 50000, label: '出库量2-5w', color: '#5ecbaf' },
        { min: -1, max: 20000, label: '出库量2w以下', color: '#3561a4' },
        { min: 0.05, max: 99999999999, label: '调拨量占比5%以上', color: '#be6f2b' },
        { min: 0.02, max: 0.05, label: '调拨量占比2%~5%', color: '#c39332' },
        { min: 0.01, max: 0.02, label: '调拨量占比1%~2%', color: '#5ecbaf' },
        { min: -1, max: 0.01, label: '调拨量占比1%以下', color: '#3561a4' },
        // { min: 100000, max: 99999999999, label: '出库量10w以上', color: '#be6f2b' },
        // { min: 50000, max: 100000, label: '出库量5-10w', color: '#c39332' },
        // { min: 20000, max: 50000, label: '出库量2-5w', color: '#5ecbaf' },
        // { min: -1, max: 20000, label: '出库量2w以下', color: '#3561a4' },
      ],
      itemWidth: 22,
      itemHeight: 22,
@@ -644,15 +657,22 @@
                        <div class="item-state-con">
                          <span class="dot bj"></span>
                          <span class="item-state-num">
                            <span class="text">本月出库量:</span>
                            <span class="num">${params.data.monthNum}万支</span>
                            <span class="text">本月调拨量:</span>
                            <span class="num">${params.data.monthNum}箱</span>
                          </span>
                        </div>
                         <div class="item-state-con">
                        <div class="item-state-con">
                          <span class="dot yj"></span>
                          <span class="item-state-num">
                           <span class="text">本年出库量:</span>
                            <span class="num">${params.data.yearNum}万支</span>
                           <span class="text">本年调拨量:</span>
                            <span class="num">${params.data.yearNum}箱</span>
                          </span>
                        </div>
                        <div class="item-state-con">
                          <span class="dot yj"></span>
                          <span class="item-state-num">
                           <span class="text">调拨量占比:</span>
                            <span class="num">${params.data.rate || 0}%</span>
                          </span>
                        </div>
                       </div>`
@@ -1154,7 +1174,7 @@
      // icon: 'circle',
      right: '12%',
      top: '0%',
      data: ['总库存', '当前库存', '库存利用率'],
      data: ['总库容', '当前库存', '库存利用率'],
      itemWidth: 20,
      itemHeight: 10,
      textStyle: {
@@ -1175,7 +1195,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: #5e9bca;margin-right: 4px;"></div><div>${item.seriesName}</div></div>
@@ -1220,7 +1240,7 @@
        nameTextStyle: {
          color: '#869CC9',
        },
        name: '万支',
        name: '箱',
        nameGap: 16,
        type: 'value',
        axisLabel: {
@@ -1256,7 +1276,7 @@
    ],
    series: [
      {
        name: '总库存',
        name: '总库容',
        type: 'bar',
        barWidth: 10,
        barGap: '60%',
@@ -1422,7 +1442,7 @@
    }],
    yAxis: [
      {
        name: '万支',
        name: '箱',
        nameGap: 16,
        type: 'value',
        axisLabel: {
@@ -2139,7 +2159,6 @@
      .static_wrap {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 30px 0 14px;
        .item {
@@ -2243,7 +2262,7 @@
              align-items: center;
              justify-content: center;
              min-width: 76px;
              border: 1px solid #fff;
              border: 1px solid #FECE01;
              .icon {
                position: absolute;
@@ -2260,7 +2279,7 @@
            .tag1 {
              background-color: #28F0CC;
              border: 1px solid #28F0CC;
              .icon {
                background-color: #28F0CC;
              }