| | |
| | | <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> |
| | |
| | | <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> |
| | |
| | | <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> |
| | |
| | | <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> |
| | |
| | | <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> |
| | |
| | | { 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) |
| | | |
| | | } |
| | | } |
| | | }) |
| | | }) |
| | |
| | | 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, |
| | |
| | | <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>` |
| | |
| | | // icon: 'circle', |
| | | right: '12%', |
| | | top: '0%', |
| | | data: ['总库存', '当前库存', '库存利用率'], |
| | | data: ['总库容', '当前库存', '库存利用率'], |
| | | itemWidth: 20, |
| | | itemHeight: 10, |
| | | textStyle: { |
| | |
| | | // 遍历悬浮时的所有点,定制化显示内容 |
| | | 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> |
| | |
| | | nameTextStyle: { |
| | | color: '#869CC9', |
| | | }, |
| | | name: '万支', |
| | | name: '箱', |
| | | nameGap: 16, |
| | | type: 'value', |
| | | axisLabel: { |
| | |
| | | ], |
| | | series: [ |
| | | { |
| | | name: '总库存', |
| | | name: '总库容', |
| | | type: 'bar', |
| | | barWidth: 10, |
| | | barGap: '60%', |
| | |
| | | }], |
| | | yAxis: [ |
| | | { |
| | | name: '万支', |
| | | name: '箱', |
| | | nameGap: 16, |
| | | type: 'value', |
| | | axisLabel: { |
| | |
| | | .static_wrap { |
| | | display: flex; |
| | | justify-content: space-between; |
| | | align-items: center; |
| | | margin: 30px 0 14px; |
| | | |
| | | .item { |
| | |
| | | align-items: center; |
| | | justify-content: center; |
| | | min-width: 76px; |
| | | border: 1px solid #fff; |
| | | border: 1px solid #FECE01; |
| | | |
| | | .icon { |
| | | position: absolute; |
| | |
| | | |
| | | .tag1 { |
| | | background-color: #28F0CC; |
| | | |
| | | border: 1px solid #28F0CC; |
| | | .icon { |
| | | background-color: #28F0CC; |
| | | } |