ll

liukangdong

2024-12-23 37752f6c417b3d9dd13e815413d006e388d76939

 screen/src/views/LogisticsCenter.vue

@@ -3,7 +3,7 @@
    <div class="main_app">
      <img src="@/assets/images/LogisticsCenter/bg@2x.png" class="main_bg" alt="" />
      <div class="main_header">
        <!-- <img src="@/assets/images/maintitle.gif" class="main_header_bg" alt="" /> -->
        <img src="@/assets/images/maintitle.gif" class="main_header_bg" alt="" />
        <div class="title">全省物流在途</div>
        <div class="time_wrap">
          <span class="date">{{ date }}</span>
@@ -172,7 +172,7 @@
            </div>
            <div class="footer">
              <div class="wrap">
                <div class="content">
                <div class="content" :style='{ width: cneterData.level1}'>
                  <div class="scale">0</div>
                  <!-- <div class="node">
                    <div>8h</div>
@@ -181,24 +181,36 @@
                      <div class="icon icon2"></div>
                    </div>
                  </div> -->
                  <div class="box">
                    <div class="tag">
                  <div :style="{width: cneterData.level3}" :class="{box23: cneterData.crrentOutNum >= cneterData.hoursAbility}" class="box" >
                    <div v-if="cneterData.crrentOutNum < cneterData.hoursAbility" class="tag">
                      <div class="icon"></div>
                      <span>今日出库</span>
                    </div>
                  </div>
                  <div class="box box1">
                    <div class="tag tag1">
                  <div :style="{width: cneterData.level2}" class="box box1">
                    <div v-if="cneterData.hoursAbility >= cneterData.currentPlanNum" class="tag tag1">
                      <div class="icon"></div>
                      <span>当日计划</span>
                    </div>
                  </div>
                </div>
                <!-- <div class="side">
                  <div class="box"></div>
                <div class="side">
                  <div v-if="cneterData.crrentOutNum >= cneterData.hoursAbility" :style="{width: cneterData.level33}" class="box box22" >
                    <div class="tag">
                      <div class="icon"></div>
                      <span>今日出库</span>
                    </div>
                  </div>
                  <div v-if="cneterData.hoursAbility <= cneterData.currentPlanNum" :style="{width: cneterData.level22}" class="box box1 box11">
                    <div class="tag tag1">
                      <div class="icon"></div>
                      <span>当日计划</span>
                    </div>
                  </div>
                  <!-- <div class="box"></div> -->
                  <div class="scale" style="left: -12px;">8h</div>
                  <div class="scale scale1">最大</div>
                </div> -->
                </div>
              </div>
            </div>
          </div>
@@ -334,7 +346,7 @@
          </div>
          <div id="map-container" ref="mapContainer"></div>
          <div class="fu_list">
            <div class="fu_item" v-for="item, i in modalInfo.cicleStatusList">
            <div class="fu_item" v-for="item, k in modalInfo.cicleStatusList">
              <div class="item_title">
                <div class="icon">
                  <img v-if="item.key == 0 && k != 0" src="@/assets/images/LogisticsCenter/ic_dingdan@2x.png"
@@ -379,8 +391,9 @@
          </div>
        </div>
      </div>
      <div class="modal_mask" v-if="showModal" @click="showModal = false"></div>
      <div class="modal_mask" v-if="showModal" @click="closeModal"></div>
    </div>
    <!-- <Loading v-if="isLoading" /> -->
  </v-scale-screen>
</template>

@@ -396,6 +409,9 @@
import chinaJSON from '@/assets/china.json'
import fahuoImg from '@/assets/images/LogisticsCenter/ic_fahuodi@2x.png'
import shouImg from '@/assets/images/LogisticsCenter/ic_huowu@2x.png'
// import { Loading } from 'vue3-loading-spinner';
// import 'vue3-loading-spinner/dist/style.css';

import {
  getStoreOperationList,
  getStorearriveGoodsList,
@@ -424,67 +440,7 @@
  time.value = dayjs().format('HH:mm:ss')

}, 1000)

const initEchart2 = () => {
  const myChart = echarts.init(document.getElementById('echart1'))
  const option = {
    series: [
      {
        type: 'pie',
        radius: ['86%', '100%'],
        label: {
          show: false,
          position: 'center'
        },
        padAngle: 5,
        itemStyle: {
          borderRadius: 10
        },
        color: colors,
        labelLine: {
          show: false
        },
        data: [
          { value: 1048, name: 'Search Engine' },
          { value: 735, name: 'Direct' },
          { value: 580, name: 'Email' }
        ]
      }
    ]
  }
  myChart.setOption(option)
  window.addEventListener('resize', function () { // 执行
    myChart.resize()
  })
}
const initEchart3 = () => {
  const myChart = echarts.init(document.getElementById('echart3'))
  const option = {
    tooltip: {
      trigger: 'item'
    },
    series: [
      {
        type: 'pie',
        radius: ['80%', '96%'],
        label: {
          show: false,
          position: 'center'
        },
        color: ['#72ecc5', '#19373a'],
        labelLine: {
          show: false
        },
        data: [3, 7]
      }
    ]
  }
  myChart.setOption(option)
  window.addEventListener('resize', function () { // 执行
    myChart.resize()
  })
}

const isLoading = ref(false);
// 
const mapList = ref([])
const mapEchart = ref()
@@ -536,6 +492,7 @@
    { name: '台湾省', value: 0 },
    { name: '香港特别行政区', value: 0 },
    { name: '澳门特别行政区', value: 0 },
    { name: '南海诸岛', value: 0 },
  ]
  mapData.forEach(item => {
    item.monthNum = 0
@@ -557,7 +514,7 @@
        { 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: '#325a9b' },
        { min: -1, max: 20000, label: '出库量2w以下', color: '#3561a4' },
      ],
      itemWidth: 22,
      itemHeight: 22,
@@ -595,8 +552,8 @@
      center: [105.194115019531, 36.582111640625], // 地图中心位置， 此处的纬度与下面的center相差1度是形成阴影的距离，可自己随意调整
      itemStyle: {
        areaColor: '#152e4a', //地图阴影的颜色
        borderColor: '#f7f7f7', // 省份边框颜色
        borderWidth: 0.1, // 省份边框宽度
        borderColor: '#779dc8', // 省份边框颜色
        borderWidth: 0.5, // 省份边框宽度
        // shadowBlur: 5, // 省份边框聚焦
      },
      emphasis: {
@@ -902,18 +859,22 @@
  page: 0,
  rows: 10
})
const modalTabClick = (val) => {
  modalTab.value = val
}
const taskClick = (item) => {
  isLoading.value = true
  kzorderInfo({ contractNumber: item.contractNumber }).then(res => {
    modalInfo.value = res.data
    showModal.value = true
    console.log('modalInfo.value', modalInfo.value)
    isLoading.value = false
    nextTick(() => {
      initGdMap()
    })
  }, () => {
    isLoading.value = false
  })
}
const closeModal = () => {
  showModal.value = false
  modalInfo.value = {}
}


@@ -1083,9 +1044,46 @@
  activeTab1.value = val
  getStockOut()
}
//  footer
const getData3 = () => {
  getStorecenterData().then(res => {
    cneterData.value = res.data || {}
  getStorecenterData({
    factoryCode: activeCity.value.code
  }).then(res => {
    const obj = res.data || {}
    console.log('obj', obj);
    
    // 8小时 计划 今日
    // obj.hoursAbility = 6000
    // obj.maxAbility = 8000
    // obj.currentPlanNum = 5000
    // obj.crrentOutNum = 7000

    obj.level1 = ((obj.hoursAbility / obj.maxAbility) * 100).toFixed(2) + '%' 
    if(obj.currentPlanNum >= obj.hoursAbility){
      obj.level2 = '100%'
      obj.level22 = (((obj.currentPlanNum - obj.hoursAbility) / (obj.maxAbility - obj.hoursAbility)) * 100).toFixed(2)
      obj.level22 = obj.level22 > 100 ? '100%' : obj.level22 + '%'
    }else{
      obj.level2 = ((obj.currentPlanNum / obj.hoursAbility)* 100).toFixed(2) + '%' 
      obj.level22 = 0
    }
    if(obj.crrentOutNum >= obj.hoursAbility){
      obj.level3 = '100%'
      obj.level33 = (((obj.crrentOutNum - obj.hoursAbility) / (obj.maxAbility - obj.hoursAbility)) * 100).toFixed(2)
      obj.level33 = obj.level33 > 100 ? '100%' : obj.level33 + '%'
    }else{
      obj.level3 = ((obj.crrentOutNum / obj.hoursAbility)* 100).toFixed(2) + '%' 
      obj.level33 = 0
    }
     
    console.log('obj1', obj.level1);
    console.log('obj2', obj.level2);
    console.log('obj22', obj.level22);
    console.log('obj3', obj.level3);
    console.log('obj33', obj.level33);
    
    cneterData.value = obj

  })
}

@@ -1669,6 +1667,11 @@
  getCity()
  changeCity()
  getData5()
  setInterval(() => {
    getCity()
    changeCity()
    getData5()
  }, 1000 * 60 * 10)
  setTimeout(() => {
    loopFn1()
  }, 12000)
@@ -2041,47 +2044,18 @@
          height: 76px;

          .content {
            flex: 5;
            width: 80%;
            height: 16px;
            background: rgba(255, 255, 255, 0.13);
            border-radius: 8px;
            margin-right: 4px;
            margin-right: 6px;
            display: flex;
            position: relative;

            .node {
              position: absolute;
              left: 69%;
              top: -20px;
              width: 22px;
              height: 70px;
              z-index: 999;
              overflow: hidden;

              .node_icon {
                background-color: #051623;
                height: 16px;

                .icon {
                  background-color: #25333f;
                  height: 16px;
                  width: 16px;
                  position: absolute;
                  top: 20px;
                  right: -8px;
                  border-radius: 50%;
                  overflow: hidden;
                }

                .icon2 {
                  right: 12px;
                }
              }
            }
          }

          .box {
            width: 40%;
            width: 80%;
            height: 16px;
            background: linear-gradient(270deg, #FF9F02 0%, #FFEA70 100%);
            border-radius: 8px;
@@ -2102,7 +2076,9 @@
              border-radius: 12px;
              display: flex;
              align-items: center;

              justify-content: center;
              min-width: 76px;
              border: 1px solid #fff;
              .icon {
                position: absolute;
                top: 1px;
@@ -2126,9 +2102,18 @@
          }

          .box1 {
            width: 70%;
            width: 10%;
            z-index: 9;
            background: linear-gradient(270deg, #15FDC8 0%, #006BFF 100%);
            background: linear-gradient(270deg, #68dfd3 0%, #006BFF 100%);
          }
          .box11{
            background: linear-gradient(270deg,#75f8cc 0%, #68dfd3 100%);
          }
          .box22{
            background: linear-gradient(270deg, #f2a43b 0%, #ecbb61 100%);
          }
          .box23{
            background: linear-gradient(270deg, #f4b34a 0%, #FFEA70 100%);
          }

          .scale {
@@ -2141,10 +2126,11 @@

          .scale1 {
            left: 84%;
            min-width: 36px;
          }

          .side {
            flex: 2;
            flex: 1;
            height: 16px;
            background: rgba(255, 255, 255, 0.13);
            border-radius: 8px;
@@ -2349,7 +2335,8 @@
    top: 220px;
    right: 10px;
    z-index: 999999;
    :deep(.amap-markers){

    :deep(.amap-markers) {
      left: -12px !important;
      top: -32px !important;
    }