最新版本541200007

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>
@@ -465,7 +465,7 @@
  time.value = dayjs().format('HH:mm:ss')

}, 1000)
// 
//
const mapList = ref([])
const mapEchart = ref()
const initMap = () => {
@@ -481,51 +481,60 @@
    { value: [103.9526, 30.7617, 1901], itemStyle: { color: '#fff' }, name: '四川', total: 18, bj: 0, yj: 0, yx: 18, tj: 0, dw: 0 }
  ]
  const mapData = [
    { name: '北京市', value: 0 },
    { name: '天津市', value: 0 },
    { name: '上海市', value: 0 },
    { name: '重庆市', value: 0 },
    { name: '河北省', value: 0 },
    { name: '河南省', value: 0 },
    { name: '云南省', value: 0 },
    { name: '辽宁省', value: 0 },
    { name: '黑龙江省', value: 0 },
    { name: '湖南省', value: 0 },
    { name: '安徽省', value: 0 },
    { name: '山东省', value: 0 },
    { name: '新疆维吾尔自治区', value: 0 },
    { name: '江苏省', value: 0 },
    { name: '浙江省', value: 0 },
    { name: '江西省', value: 0 },
    { name: '湖北省', value: 0 },
    { name: '广西壮族自治区', value: 0 },
    { name: '甘肃省', value: 0 },
    { name: '山西省', value: 0 },
    { name: '内蒙古自治区', value: 0 },
    { name: '陕西省', value: 0 },
    { name: '吉林省', value: 0 },
    { name: '福建省', value: 0 },
    { name: '贵州省', value: 0 },
    { name: '广东省', value: 0 },
    { name: '青海省', value: 0 },
    { name: '西藏自治区', value: 0 },
    { name: '宁夏回族自治区', value: 0 },
    { name: '四川省', value: 0 },
    { name: '宁夏省', value: 0 },
    { name: '海南省', value: 0 },
    { name: '台湾省', value: 0 },
    { name: '香港特别行政区', value: 0 },
    { name: '澳门特别行政区', value: 0 },
    { name: '南海诸岛', value: 0 },
    { name: '北京市',code:'110000', value: 0 },
    { name: '天津市',code:'120000', value: 0 },
    { name: '上海市', code:'310000',value: 0 },
    { name: '重庆市', code:'500000',value: 0 },
    { name: '河北省',code:'130000', value: 0 },
    { name: '河南省',code:'410000', value: 0 },
    { name: '云南省',code:'530000', value: 0 },
    { name: '辽宁省',code:'210000', value: 0 },
    { name: '黑龙江省', code:'230000',value: 0 },
    { name: '湖南省',code:'430000', value: 0 },
    { name: '安徽省', code:'340000',value: 0 },
    { name: '山东省',code:'370000', value: 0 },
    { name: '新疆维吾尔自治区', code:'650000',value: 0 },
    { name: '江苏省',code:'320000', value: 0 },
    { name: '浙江省', code:'330000', value: 0 },
    { name: '江西省', code:'360000', value: 0 },
    { name: '湖北省', code:'420000', value: 0 },
    { name: '广西壮族自治区',code:'450000', value: 0 },
    { name: '甘肃省', code:'620000', value: 0 },
    { name: '山西省', code:'140000', value: 0 },
    { name: '内蒙古自治区', code:'150000', value: 0 },
    { name: '陕西省', code:'610000', value: 0 },
    { name: '吉林省',code:'220000', value: 0 },
    { name: '福建省', code:'350000', value: 0 },
    { name: '贵州省', code:'520000', value: 0 },
    { name: '广东省', code:'440000', value: 0 },
    { name: '青海省', code:'630000', value: 0 },
    { name: '西藏自治区',code:'540000', value: 0 },
    { name: '宁夏回族自治区',code:'640000', value: 0 },
    { name: '四川省',code:'510000', value: 0 },
    { name: '宁夏省', code:'640000',value: 0 },
    { name: '海南省', code:'460000',value: 0 },
    { name: '台湾省', code:'710000',value: 0 },
    { name: '香港特别行政区', code:'810000',value: 0 },
    { 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.name == ite.name) {
        item.value = ite.yearNum
      if (item.code == ite.code) {
        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,
@@ -639,20 +652,27 @@
            return `<div class="map-tip-box">
                        <div class="item-state-con title">
                          <div class="icon"></div>
                          <span>${params.data.name}</span>  
                          <span>${params.data.name}</span>
                        </div>
                        <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>`
@@ -682,6 +702,7 @@
    mapList.value = temp.map(item => {
      item.value = item.monthNum
      item.name = item.provinceName
      item.code=item.provinceCode
      return item
    })
    initMap()
@@ -1153,7 +1174,7 @@
      // icon: 'circle',
      right: '12%',
      top: '0%',
      data: ['总库存', '当前库存', '库存利用率'],
      data: ['总库容', '当前库存', '库存利用率'],
      itemWidth: 20,
      itemHeight: 10,
      textStyle: {
@@ -1174,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>
@@ -1219,7 +1240,7 @@
        nameTextStyle: {
          color: '#869CC9',
        },
        name: '万支',
        name: '箱',
        nameGap: 16,
        type: 'value',
        axisLabel: {
@@ -1255,7 +1276,7 @@
    ],
    series: [
      {
        name: '总库存',
        name: '总库容',
        type: 'bar',
        barWidth: 10,
        barGap: '60%',
@@ -1421,7 +1442,7 @@
    }],
    yAxis: [
      {
        name: '万支',
        name: '箱',
        nameGap: 16,
        type: 'value',
        axisLabel: {
@@ -2138,7 +2159,6 @@
      .static_wrap {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 30px 0 14px;

        .item {
@@ -2242,7 +2262,7 @@
              align-items: center;
              justify-content: center;
              min-width: 76px;
              border: 1px solid #fff;
              border: 1px solid #FECE01;

              .icon {
                position: absolute;
@@ -2259,7 +2279,7 @@

            .tag1 {
              background-color: #28F0CC;

              border: 1px solid #28F0CC;
              .icon {
                background-color: #28F0CC;
              }
@@ -2854,4 +2874,4 @@
  object-fit: cover;
  z-index: -1;
}
</style>
</style>