ll

liukangdong

2024-12-24 abfe6985b2678445ea8da974b204d9fe2ffdb887

 screen/src/views/LogisticsCenter.vue

@@ -21,6 +21,7 @@
            <img src="@/assets/images/title@2x.png" class="bg" alt="" />
          </div>
          <div class="left_box_one">
            <Loading v-if="loading1" />
            <div class="second_title">
              <div class="title">
                <img src="@/assets/images/LogisticsCenter/ic_title@2x.png" class="icon" alt="" />
@@ -36,7 +37,7 @@
            </div>
            <div class="content_wrap">
              <div class="num_wrap">
                <div class="num_list" v-if="StockOutData.currentNum">
                <div class="num_list" v-if="StockOutData.currentNum || StockOutData.currentNum == 0">
                  <div class="num" v-for="i in StockOutData.currentNum + ''">
                    {{ i }}
                    <img class="bg" src="@/assets/images/LogisticsCenter/bg_number@2x.png" alt="">
@@ -89,7 +90,7 @@
            <div class="second_title">
              <div class="title">
                <img src="@/assets/images/LogisticsCenter/ic_title@2x.png" class="icon" alt="" />
                <div>当前运输任务</div>
                <div>当前订单任务</div>
              </div>
              <div class="search_wrap">
                <img src="@/assets/images/LogisticsCenter/ic_search@2x.png" alt="">
@@ -117,7 +118,12 @@
                  </div>
                </div>
              </div>

              <template v-if="isLoadingTask || transportTask.length == 0">
                <Loading v-if="isLoadingTask" />
                <div class="empty" v-else>
                  <img src="@/assets/images/default_nodata.png" alt="">
                </div>
              </template>
            </div>
          </div>
        </div>
@@ -172,7 +178,7 @@
            </div>
            <div class="footer">
              <div class="wrap">
                <div class="content" :style='{ width: cneterData.level1}'>
                <div class="content" :style='{ width: cneterData.level1 }'>
                  <div class="scale">0</div>
                  <!-- <div class="node">
                    <div>8h</div>
@@ -181,13 +187,14 @@
                      <div class="icon icon2"></div>
                    </div>
                  </div> -->
                  <div :style="{width: cneterData.level3}" :class="{box23: cneterData.crrentOutNum >= cneterData.hoursAbility}" class="box" >
                  <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 :style="{width: cneterData.level2}" class="box box1">
                  <div :style="{ width: cneterData.level2 }" class="box box1">
                    <div v-if="cneterData.hoursAbility >= cneterData.currentPlanNum" class="tag tag1">
                      <div class="icon"></div>
                      <span>当日计划</span>
@@ -195,13 +202,15 @@
                  </div>
                </div>
                <div class="side">
                  <div v-if="cneterData.crrentOutNum >= cneterData.hoursAbility" :style="{width: cneterData.level33}" class="box box22" >
                  <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 v-if="cneterData.hoursAbility <= cneterData.currentPlanNum"
                    :style="{ width: cneterData.level22 }" class="box box1 box11">
                    <div class="tag tag1">
                      <div class="icon"></div>
                      <span>当日计划</span>
@@ -220,13 +229,13 @@
              <div class="list">
                <div class="head line">
                  <div class="item">车牌号</div>
                  <div class="item contract">合同号</div>
                  <div class="item">目的地</div>
                  <div class="item">合同号</div>
                  <div class="item addr">目的地</div>
                </div>
                <div class="line" v-for="item in active1List">
                  <div class="item">{{ item.platNumber }}</div>
                  <div class="item contract">{{ item.contractNumber }}</div>
                  <div class="item">{{ item.repertotyName }}</div>
                  <div class="item">{{ item.contractNumber }}</div>
                  <div class="item addr">{{ item.repertotyName }}</div>
                </div>
              </div>
            </div>
@@ -266,7 +275,7 @@
              </div>
              <div class="side">
                全省：
                <span>{{ data5.totalNum }}</span>
                <span>{{ data5.currentNum }}</span>
                <span class="unit">万支 | </span>
                <span v-if="data5.totalNum">{{ ((data5.currentNum / data5.totalNum) * 100).toFixed(1) }}%</span>
              </div>
@@ -281,7 +290,12 @@
                <img src="@/assets/images/LogisticsCenter/ic_title@2x.png" class="icon" alt="" />
                <div>出库能力利用率</div>
              </div>
              <div class="side">全省：<span>100<span class="unit">万支 |</span> 40.6%</span></div>
              <div class="side">
                全省：
                <span>{{ data6.currentNum }}</span>
                <span class="unit">万支 | </span>
                <span v-if="data6.totalNum">{{ ((data6.currentNum / data6.totalNum) * 100).toFixed(1) }}%</span>
              </div>
            </div>
            <div class="echart5_wrap">
              <div class="echart5" id="echart6"></div>
@@ -293,7 +307,12 @@
                <img src="@/assets/images/LogisticsCenter/ic_title@2x.png" class="icon" alt="" />
                <div>运用资源利用率</div>
              </div>
              <div class="side">全省：<span>100<span class="unit">万支 |</span> 40.6%</span></div>
              <div class="side">
                全省：
                <span>{{ data7.currentNum }}</span>
                <span class="unit">辆 | </span>
                <span v-if="data7.totalNum">{{ ((data7.currentNum / data7.totalNum) * 100).toFixed(1) }}%</span>
              </div>
            </div>
            <div class="echart5_wrap">
              <div class="echart5" id="echart7"></div>
@@ -390,10 +409,10 @@
            </div>
          </div>
        </div>
        <Loading v-if="modalLoading" />
      </div>
      <div class="modal_mask" v-if="showModal" @click="closeModal"></div>
    </div>
    <!-- <Loading v-if="isLoading" /> -->
  </v-scale-screen>
</template>

@@ -409,12 +428,12 @@
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 Loading from 'vue-loading-overlay'
// import 'vue-loading-overlay/dist/css/index.css'
import Loading from '@/components/Loading.vue'

import {
  getStoreOperationList,
  getStorearriveGoodsList,
  getStorecenterData,
  getStoreenergyDataList,
  getStorelastMonthOil,
@@ -440,7 +459,6 @@
  time.value = dayjs().format('HH:mm:ss')

}, 1000)
const isLoading = ref(false);
// 
const mapList = ref([])
const mapEchart = ref()
@@ -694,6 +712,9 @@
    },
    xAxis: {
      type: 'value',
      axisLabel: {
        color: '#D2E0FF'
      },
      splitLine: {
        show: true,
        lineStyle: {
@@ -706,6 +727,9 @@
    yAxis: {
      axisTick: {
        show: false,
      },
      axisLabel: {
        color: '#D2E0FF'
      },
      type: 'category',
      axisLine: {
@@ -842,7 +866,7 @@

const dataList1 = ref([])
const getData1 = () => {
  getStorearriveGoodsList({
  arriveGoodsList({
    factoryCode: activeCity.value.code
  }).then(res => {
    dataList1.value = res.data || []
@@ -853,23 +877,25 @@
const transportTask = ref([])
const taskCode = ref('')
const showModal = ref(false)
const modalLoading = ref(false)
const modalInfo = ref({})
const modalTab = ref(0)
const pager = ref({
  page: 0,
  rows: 10
  rows: 50
})
const taskClick = (item) => {
  isLoading.value = true
  modalLoading.value = true
  showModal.value = true
  kzorderInfo({ contractNumber: item.contractNumber }).then(res => {
    modalInfo.value = res.data
    showModal.value = true
    isLoading.value = false

    modalLoading.value = false
    nextTick(() => {
      initGdMap()
    })
  }, () => {
    isLoading.value = false
    modalLoading.value = false
  })
}
const closeModal = () => {
@@ -957,8 +983,9 @@
  })
  map.add(polyline)
}
const isLoadingTask = ref(false)
const getData2 = () => {

  isLoadingTask.value = true
  getStoreTaskList({
    pager: pager.value,
    parameters: {
@@ -966,6 +993,7 @@
      facrotyCodeList: activeCity.value.code ? [activeCity.value.code] : []
    }
  }).then(res => {
    isLoadingTask.value = false
    let temp = res.data.rows || []
    transportTask.value = temp.map(item => {
      if (item.transportDate) {
@@ -973,6 +1001,10 @@
      }
      return item
    })
    console.log('isLoadingTask', isLoadingTask.value)

  }, () => {
    isLoadingTask.value = false
  })
}

@@ -981,7 +1013,7 @@
const cityList = ref()
const getCity = () => {
  kzfactoryList().then(res => {
    cityList.value = res.data
    cityList.value = [{ name: '全省', code: '' }, ...res.data]
  })
}
const activeCity = ref({ name: '全省', code: '' })
@@ -1021,9 +1053,12 @@
}

const activeTab1 = ref(0)
const loading1 = ref(false)
const StockOutData = ref({})
const getStockOut = () => {
  loading1.value = true
  kztotalOutQtyNum({ type: activeTab1.value, factoryCode: activeCity.value.code }).then(res => {
    loading1.value = false
    if (res.code == 200) {
      let obj = res.data
      obj.currentNum = (obj.currentOutNum + obj.currentInNum).toFixed(0) * 1
@@ -1038,6 +1073,8 @@
      initEchart1()
    }

  }, () => {
    loading1.value = false
  })
}
const tab1Click = (val) => {
@@ -1050,38 +1087,38 @@
    factoryCode: activeCity.value.code
  }).then(res => {
    const obj = res.data || {}
    console.log('obj', obj);
    
    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.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) + '%' 
    } else {
      obj.level2 = ((obj.currentPlanNum / obj.hoursAbility) * 100).toFixed(2) + '%'
      obj.level22 = 0
    }
    if(obj.crrentOutNum >= obj.hoursAbility){
    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) + '%' 
    } 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);
    

    // 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

  })
@@ -1098,7 +1135,7 @@
    legend: {
      itemGap: 12,
      // icon: 'circle',
      right: '16%',
      right: '12%',
      top: '0%',
      data: ['总库存', '当前库存', '库存利用率'],
      itemWidth: 20,
@@ -1128,8 +1165,7 @@
        },
      },
      axisLabel: {
        color: '#869CC9'
        // fontSize: 24,
        color: '#D2E0FF'
      },
      axisTick: {
        show: false,
@@ -1145,7 +1181,6 @@
        nameGap: 16,
        type: 'value',
        axisLabel: {
          show: true,
          color: "#869CC9",
        },
        axisLine: {
@@ -1165,10 +1200,13 @@
        name: '%',
        nameGap: 16,
        min: 0,
        max: 100,
        interval: 25,
        // max: 100,
        axisLabel: {
          formatter: '{value}'
          color: "#869CC9",
        },
        nameTextStyle: {
          color: '#869CC9',
          padding: [0, 0, 0, 12]
        },
        splitLine: false
      }
@@ -1272,7 +1310,7 @@
      // icon: 'circle',
      right: '10%',
      top: '0',
      data: ['出库能力', '当日出库量', '库存利用率'],
      data: ['出库能力', '当日出库量', '出库利用率'],
      itemWidth: 20,
      itemHeight: 10,
      textStyle: {
@@ -1300,8 +1338,10 @@
        },
      },
      axisLabel: {
        color: '#869CC9'
        // fontSize: 24,
        color: "#869CC9",
      },
      nameTextStyle: {
        color: '#869CC9',
      },
      axisTick: {
        show: false,
@@ -1310,15 +1350,15 @@
    }],
    yAxis: [
      {
        nameTextStyle: {
          color: '#869CC9',
        },
        name: '万支',
        nameGap: 16,
        type: 'value',
        axisLabel: {
          show: true,
          color: "#869CC9",
        },
        nameTextStyle: {
          color: '#869CC9',
          padding: [0, 0, 0, 12]
        },
        axisLine: {
          show: true,
@@ -1337,10 +1377,12 @@
        name: '%',
        nameGap: 16,
        min: 0,
        max: 100,
        interval: 25,
        axisLabel: {
          formatter: '{value}'
          color: "#869CC9",
        },
        nameTextStyle: {
          color: '#869CC9',
          padding: [0, 0, 0, 12]
        },
        splitLine: false
      }
@@ -1413,7 +1455,7 @@
        barGap: '-100%' // 设置柱子完全重叠
      },
      {
        name: '库存利用率',
        name: '出库利用率',
        type: 'line',
        smooth: false,
        showAllSymbol: true,
@@ -1445,9 +1487,9 @@
    legend: {
      itemGap: 12,
      // icon: 'circle',
      right: '16%',
      right: '10%',
      top: '0%',
      data: ['总库存', '当前库存', '库存利用率'],
      data: ['总运力资源', '当日提报运力', '车辆利用率'],
      itemWidth: 20,
      itemHeight: 10,
      textStyle: {
@@ -1475,8 +1517,11 @@
        },
      },
      axisLabel: {
        color: '#869CC9'
        // fontSize: 24,
        color: "#869CC9",
      },
      nameTextStyle: {
        color: '#869CC9',
        padding: [0, 0, 0, 12]
      },
      axisTick: {
        show: false,
@@ -1488,7 +1533,7 @@
        nameTextStyle: {
          color: '#869CC9',
        },
        name: '万支',
        name: '辆',
        nameGap: 16,
        type: 'value',
        axisLabel: {
@@ -1512,17 +1557,19 @@
        name: '%',
        nameGap: 16,
        min: 0,
        max: 100,
        interval: 25,
        axisLabel: {
          formatter: '{value}'
          color: "#869CC9",
        },
        nameTextStyle: {
          color: '#869CC9',
          padding: [0, 0, 0, 12]
        },
        splitLine: false
      }
    ],
    series: [
      {
        name: '总库存',
        name: '总运力资源',
        type: 'bar',
        barWidth: 10,
        barGap: '60%',
@@ -1536,11 +1583,11 @@
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: '#2e6bf3'
              color: '#73f0c6'
            },
            {
              offset: 1,
              color: '#5fcbab'
              color: '#3f8ca6'
            }
          ], false),
          lineStyle: {
@@ -1552,7 +1599,7 @@
        data: data7.value.detailList.map(i => i.totalNum)
      },
      {
        name: '当前库存',
        name: '当日提报运力',
        type: 'bar',
        barWidth: 10,
        label: {
@@ -1565,15 +1612,15 @@
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: '#eda13a'
              color: '#ed7e32'
            },
            {
              offset: 0.6,
              color: '#dfb44e'
              color: '#e99b5c'
            },
            {
              offset: 1,
              color: '#ccc16c'
              color: '#e7a774'
            }
          ], false),
          lineStyle: {
@@ -1585,7 +1632,7 @@
        data: data7.value.detailList.map(i => i.currentNum)
      },
      {
        name: '库存利用率',
        name: '车辆利用率',
        type: 'line',
        smooth: false,
        showAllSymbol: true,
@@ -1613,21 +1660,29 @@
  kzinventoryUseRate().then(res => {
    data5.value = res.data
    data5.value.detailList.forEach(item => {
      item.useRate = item.useRate * 100
      if (item.useRate) {
        item.useRate = (item.useRate * 100).toFixed(1)
      }

    })
    initEchart5()
  })
  outAbilityUseRate().then(res => {
    data6.value = res.data
    data6.value.detailList.forEach(item => {
      item.useRate = item.useRate * 100
      if (item.useRate) {
        item.useRate = (item.useRate * 100).toFixed(1)
      }
    })
    initEchart6()
  })
  tranportAbilityUseRate().then(res => {
    data7.value = res.data
    data7.value.detailList.forEach(item => {
      item.useRate = item.useRate * 100
      // item.useRate = item.useRate * 100
      if (item.useRate) {
        item.useRate = (item.useRate * 100).toFixed(1)
      }
    })
    initEchart7()
  })
@@ -1732,6 +1787,7 @@
    .left_box_one {
      margin-top: 20px;
      padding: 0px 10px 30px 20px;
      position: relative;

      .content_wrap {
        display: flex;
@@ -1851,9 +1907,22 @@
      }

      .list_wrap {
        position: relative;

        .list {
          height: 200px;
          overflow: hidden;
        }

        .empty {
          display: flex;
          justify-content: center;
          align-items: center;
          height: 200px;

          img {
            width: 144px;
          }
        }

        .line {
@@ -1876,7 +1945,7 @@
          }

          .status {
            flex: 5;
            flex: 3.2;
          }
        }

@@ -2079,6 +2148,7 @@
              justify-content: center;
              min-width: 76px;
              border: 1px solid #fff;

              .icon {
                position: absolute;
                top: 1px;
@@ -2106,13 +2176,16 @@
            z-index: 9;
            background: linear-gradient(270deg, #68dfd3 0%, #006BFF 100%);
          }
          .box11{
            background: linear-gradient(270deg,#75f8cc 0%, #68dfd3 100%);

          .box11 {
            background: linear-gradient(270deg, #75f8cc 0%, #68dfd3 100%);
          }
          .box22{

          .box22 {
            background: linear-gradient(270deg, #f2a43b 0%, #ecbb61 100%);
          }
          .box23{

          .box23 {
            background: linear-gradient(270deg, #f4b34a 0%, #FFEA70 100%);
          }

@@ -2178,7 +2251,14 @@
            }

            .item {
              flex: 2;
              flex: 3;
            }

            .addr {
              flex: 5;
              display: flex;
              flex-wrap: nowrap;
              overflow: hidden;
            }
          }