ll

liukangdong

2024-12-31 423155b8134694c2f2e68f6d3f5239ba0541b0cf

 screen/src/views/LogisticsCenter.vue

@@ -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="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="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>
@@ -1255,7 +1276,7 @@
    ],
    series: [
      {
        name: '总库存',
        name: '总库容',
        type: 'bar',
        barWidth: 10,
        barGap: '60%',
@@ -2854,4 +2875,4 @@
  object-fit: cover;
  z-index: -1;
}
</style>
</style>