前端页面

liuying

2024-11-25 84138b3f42b218ecc2efaa54ec31a1c1be29e326

 LA24030_LuLiPackageLine_Web/src/views/home/index.vue

@@ -1,12 +1,12 @@
<template>
   <div class="home-container layout-pd">
      <el-row :gutter="15" class="home-card-one mb15">		
      <el-row :gutter="15" class="home-card-one mb15">
         <el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8" class="home-media home-media-lg">
            <div class="home-card-item flex">
               <div class="flex-margin flex w100" :class="` home-one-animation${1}`">
                  <div class="flex-auto">
                     <span class="ml5 font16">当日订单总数</span>
                     <div class="font30">{{state.orderNum}}</div>
                     <div class="font30">{{ state.orderNum }}</div>
                  </div>
               </div>
            </div>
@@ -14,13 +14,13 @@
         <el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8" v-for="(v, k) in state.homeOne" :key="k" :class="{ 'home-media home-media-lg': k > 1, 'home-media-sm': k === 1 }">
            <div class="home-card-item flex">
               <div class="flex-margin flex w100" :class="` home-one-animation${k}`">
                  <div class="flex-auto">							
                  <div class="flex-auto">
                     <div class="mt10">{{ v.num3 }}</div>
                     <span class="font30">{{ v.num2 }}</span>
                     <div class="font16" :style="{ color: v.color1 }">已完成{{ v.num1 }}</div>						
                     <div class="font16" :style="{ color: v.color1 }">已完成{{ v.num1 }}</div>
                  </div>
                  <div class="home-card-item-icon flex">
                     <el-progress type="circle" width="80" :stroke-width="10" :percentage="v.numA" :color="v.color1"/>						
                     <el-progress type="circle" width="80" :stroke-width="10" :percentage="v.numA" :color="v.color1" />
                  </div>
               </div>
            </div>
@@ -33,7 +33,6 @@
            </div>
         </el-col>
         <el-col :xs="24" :sm="10" :md="10" :lg="8" :xl="8" class="home-media">

            <div class="home-card-item">
               <div class="home-card-item-title">快捷导航工具</div>
               <div class="home-monitor">
@@ -50,36 +49,34 @@
                  </div>
               </div>
            </div>

			
         </el-col>
      </el-row>
      <el-row :gutter="15" class="home-card-three">
         <el-col :xs="24" :sm="10" :md="10" :lg="8" :xl="8">
            <div class="home-card-item">					
            <div class="home-card-item">
               <div style="height: 100%" ref="homePieRef"></div>
            </div>
         </el-col>
         <el-col :xs="24" :sm="14" :md="14" :lg="16" :xl="16" class="home-media">
            <div class="home-card-item" >					
               <el-tabs v-model="activeName" @tab-click="handleClick" :lazy="true">	
            <div class="home-card-item">
               <el-tabs v-model="activeName" @tab-click="handleClick" :lazy="true">
                  <el-tab-pane label="日" name="1">
                     <div class="home-card-item" >					
                        <div style="height: 100%" ref="homeBarRef" id="homeBarRef" v-if="activeName=='1'"></div>
                     <div class="home-card-item">
                        <div style="height: 100%" ref="homeBarRef" id="homeBarRef" v-if="activeName == '1'"></div>
                     </div>
                  </el-tab-pane>
                  <el-tab-pane label="周" name="2">
                     <div class="home-card-item" >					
                        <div style="height: 100%" ref="homeBarRef" id="homeBarRef" v-if="activeName=='2'"></div>
                     <div class="home-card-item">
                        <div style="height: 100%" ref="homeBarRef" id="homeBarRef" v-if="activeName == '2'"></div>
                     </div>
                  </el-tab-pane>
                  <el-tab-pane label="月" name="3">
                     <div class="home-card-item" >					
                        <div style="height: 100%" ref="homeBarRef" id="homeBarRef" v-if="activeName=='3'"></div>
                     <div class="home-card-item">
                        <div style="height: 100%" ref="homeBarRef" id="homeBarRef" v-if="activeName == '3'"></div>
                     </div>
                  </el-tab-pane>
               </el-tabs>
            </div>			
            </div>
         </el-col>
      </el-row>
   </div>
@@ -91,105 +88,105 @@
import { storeToRefs } from 'pinia';
import { useThemeConfig } from '/@/stores/themeConfig';
import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
import { wmsStockPassMap,wmsHomePageQuery,wmsHomePlaceQuery,wmsTransitionDiagramQuery } from '/@/api/main/inventoryWarning/inventoryWarning';
import type { TabsPaneContext } from 'element-plus'
import { wmsStockPassMap, wmsHomePageQuery, wmsHomePlaceQuery, wmsTransitionDiagramQuery } from '/@/api/main/inventoryWarning/inventoryWarning';
import type { TabsPaneContext } from 'element-plus';
import { useRoute, useRouter } from 'vue-router';
const router = useRouter();
// 接口数据
const loadingwms = ref(false);
// 查询
const handleQuery1 = async () => {
    loadingwms.value = true;
    var res = await wmsHomePageQuery();
    if(res.data.type=="success"){	
      let result = res.data.result || [];
      state.orderNum = result.allOrderNumber || 0
      state.homeOne[0].num1 = result.outtingPlaceNumber || 0
      state.homeOne[0].num2 = result.allOuttingNumber || 0
      state.homeOne[0].numA = Math.round((result.outtingPlaceNumber || 0) / (result.allOuttingNumber || 0) * 10000) / 100 || 0
      state.homeOne[1].num1 = result.warehousingNumber || 0
      state.homeOne[1].num2 = result.allWarehousingNumber || 0
      state.homeOne[1].numA = Math.round((result.warehousingNumber || 0) / (result.allWarehousingNumber || 0)* 10000) / 100 || 0
	
   }
    loadingwms.value = false;
   loadingwms.value = true;
   // var res = await wmsHomePageQuery();
   // if(res.data.type=="success"){
   //    let result = res.data.result || [];
   //    state.orderNum = result.allOrderNumber || 0
   //    state.homeOne[0].num1 = result.outtingPlaceNumber || 0
   //    state.homeOne[0].num2 = result.allOuttingNumber || 0
   //    state.homeOne[0].numA = Math.round((result.outtingPlaceNumber || 0) / (result.allOuttingNumber || 0) * 10000) / 100 || 0
   //    state.homeOne[1].num1 = result.warehousingNumber || 0
   //    state.homeOne[1].num2 = result.allWarehousingNumber || 0
   //    state.homeOne[1].numA = Math.round((result.warehousingNumber || 0) / (result.allWarehousingNumber || 0)* 10000) / 100 || 0

   // }
   loadingwms.value = false;
};
const handleQuery2 = async () => {
loadingwms.value = true;
var res = await wmsHomePlaceQuery();
if(res.data.type=="success"){
   let result = res.data.result || {};	
   nextTick(() => {
      setTimeout(() => {
         initPieChart(result);
      }, 500);
   });
}
loadingwms.value = false;
   loadingwms.value = true;
   // var res = await wmsHomePlaceQuery();
   // if (res.data.type == 'success') {
   //    let result = res.data.result || {};
   //    nextTick(() => {
   //       setTimeout(() => {
   //          initPieChart(result);
   //       }, 500);
   //    });
   // }
   loadingwms.value = false;
};
const dataAll = ref({
   arr1:[],
   arr2:[],
   arr3:[],
   arr4:[],
   arr5:[]
})
const handleQuery3 = async (val:any) => {
   arr1: [],
   arr2: [],
   arr3: [],
   arr4: [],
   arr5: [],
});
const handleQuery3 = async (val: any) => {
   dataAll.value.arr1 = [];
   dataAll.value.arr2 = [];
   dataAll.value.arr3 = [];
   dataAll.value.arr4 = [];
   dataAll.value.arr5 = [];
   loadingwms.value = true;
   let para = {DayOrWeekOrMonth:Number(val)}
   let para = { DayOrWeekOrMonth: Number(val) };
   var res = await wmsStockPassMap(para);
   if(res.data.type=="success"){	
   if (res.data.type == 'success') {
      let result = res.data.result || [];
      result.forEach((item:any,index:number) => {			
         dataAll.value.arr1.push({value:item.inWare,stationName:'s'+item.time})
         dataAll.value.arr2.push({value:item.outWare,stationName:'s'+item.time})
         dataAll.value.arr3.push({value:item.stockNum,stationName:'s'+item.time})	
         dataAll.value.arr4.push({value:item.aveStockNum,stationName:'s'+item.time})		
         dataAll.value.arr5.push(item.date)		
      })	
      result.forEach((item: any, index: number) => {
         dataAll.value.arr1.push({ value: item.inWare, stationName: 's' + item.time });
         dataAll.value.arr2.push({ value: item.outWare, stationName: 's' + item.time });
         dataAll.value.arr3.push({ value: item.stockNum, stationName: 's' + item.time });
         dataAll.value.arr4.push({ value: item.aveStockNum, stationName: 's' + item.time });
         dataAll.value.arr5.push(item.date);
      });
      nextTick(() => {
         setTimeout(() => {
            if (!state.global.dispose.some((b: any) => b === state.global.homeCharThree)) state.global.homeCharThree.dispose();
            initChart()
            initChart();
         }, 500);
      });
   }
   loadingwms.value = false;
};
const handleQuery4 = async () => {
loadingwms.value = true;
var res = await wmsTransitionDiagramQuery();
if(res.data.type=="success"){
   let arr1: any[] = [];
   let arr2: any = [];
   let arrA: any = [];
   let result = res.data.result || [];
   result.forEach((item:any,index:number) => {			
      arr1.push(item.receiptNumber)
      arr2.push(item.deliveryNumber)		
      arrA.push(item.day.slice(0, 10))		
   })
   nextTick(() => {
      setTimeout(() => {
         initLineChart(arr1,arr2,arrA);
      }, 500);
   });
}
loadingwms.value = false;
};  
handleQuery1();
handleQuery2();
handleQuery3('1');
handleQuery4();
const activeName = ref('1')
   loadingwms.value = true;
   var res = await wmsTransitionDiagramQuery();
   if (res.data.type == 'success') {
      let arr1: any[] = [];
      let arr2: any = [];
      let arrA: any = [];
      let result = res.data.result || [];
      result.forEach((item: any, index: number) => {
         arr1.push(item.receiptNumber);
         arr2.push(item.deliveryNumber);
         arrA.push(item.day.slice(0, 10));
      });
      nextTick(() => {
         setTimeout(() => {
            initLineChart(arr1, arr2, arrA);
         }, 500);
      });
   }
   loadingwms.value = false;
};
// handleQuery1();
// handleQuery2();
// handleQuery3('1');
// handleQuery4();
const activeName = ref('1');
const handleClick = (tab: TabsPaneContext, event: Event) => {
  handleQuery3(tab.props.name);
}
   handleQuery3(tab.props.name);
};

// 定义变量内容
const homeLineRef = ref();
@@ -200,7 +197,7 @@
const { themeConfig } = storeToRefs(storesThemeConfig);
const { isTagsViewCurrenFull } = storeToRefs(storesTagsViewRoutes);
const state = reactive({
   orderNum:{},
   orderNum: {},
   global: {
      homeChartOne: null,
      homeChartTwo: null,
@@ -211,7 +208,7 @@
      {
         num1: '0',
         num2: '0',
         numA:0,
         numA: 0,
         num3: '出库单数',
         num4: 'fa fa-meetup',
         color1: '#FF6462',
@@ -222,7 +219,7 @@
      {
         num1: '0',
         num2: '0',
         numA:0,
         numA: 0,
         num3: '入库单数',
         num4: 'iconfont icon-ditu',
         color1: '#6690F9',
@@ -254,7 +251,7 @@
         // label: '浅粉红',
         label: '基础数据',
         value: '库位信息',
         route:'/wmsbase/wmsplace',
         route: '/wmsbase/wmsplace',
         // value: '2.1%OBS/M',
         iconColor: '#F72B3F',
      },
@@ -263,7 +260,7 @@
         // label: '深红(猩红)',
         label: '单据管理',
         value: '上架单',
         route:'/wmsOrder/wmsordermovement',
         route: '/wmsOrder/wmsordermovement',
         // value: '30℃',
         iconColor: '#91BFF8',
      },
@@ -273,7 +270,7 @@
         // label: '淡紫红',
         // value: '57%RH',
         value: '库位视图',
         route:'/reportCenter/storageView',
         route: '/reportCenter/storageView',
         iconColor: '#88D565',
      },
      {
@@ -282,7 +279,7 @@
         label: '盘点管理',
         value: '盘点单据',
         // value: '107w',
         route:'/Check/wmsinventorycheckorder',
         route: '/Check/wmsinventorycheckorder',
         iconColor: '#88D565',
      },
      {
@@ -291,7 +288,7 @@
         // label: '中紫罗兰红',
         value: '跟踪码打印',
         // value: '57DB',
         route:'/printCenter/wmsstockquanPrint',
         route: '/printCenter/wmsstockquanPrint',
         iconColor: '#FBD4A0',
      },
      // {
@@ -328,7 +325,7 @@
});

// 折线图
const initLineChart = (arr1:any,arr2:any,arrA:any) => {
const initLineChart = (arr1: any, arr2: any, arrA: any) => {
   if (!state.global.dispose.some((b: any) => b === state.global.homeChartOne)) state.global.homeChartOne.dispose();
   state.global.homeChartOne = markRaw(echarts.init(homeLineRef.value, state.charts.theme));
   const option = {
@@ -410,21 +407,21 @@
   state.myCharts.push(state.global.homeChartOne);
};
// 饼图
const initPieChart = (arr:any) => {
   if(arr==null) return false;
const initPieChart = (arr: any) => {
   if (arr == null) return false;
   if (!state.global.dispose.some((b: any) => b === state.global.homeChartTwo)) state.global.homeChartTwo.dispose();
   state.global.homeChartTwo = markRaw(echarts.init(homePieRef.value, state.charts.theme));
   var getname = ['空库位数量', '空容器库位数量', '存货数量','总库位：1000'];
   var getvalue = [arr.emptyPlaceNumber,arr.containerPlaceNumber, arr.stockPlaceNumber];
   var getname = ['空库位数量', '空容器库位数量', '存货数量', '总库位：1000'];
   var getvalue = [arr.emptyPlaceNumber, arr.containerPlaceNumber, arr.stockPlaceNumber];
   var data = [];
   for (var i = 0; i < getname.length-1; i++) {
   for (var i = 0; i < getname.length - 1; i++) {
      data.push({ name: getname[i], value: getvalue[i] });
   }
   const colorList = ['#51A3FC', '#36C78B', '#FEC279', '#968AF5', '#E790E8'];
   const option = {
      backgroundColor: state.charts.bgColor,
      title: {
         text: '库位占比  总库位：'+arr.allPlaceNumber,
         text: '库位占比  总库位：' + arr.allPlaceNumber,
         x: 'left',
         textStyle: { fontSize: '15', color: state.charts.color },
      },
@@ -506,7 +503,7 @@
   },
   tooltip: { trigger: 'axis' },
   //legend: { data: ['入库','出库', '库存', '平均'], right: 0 },
   legend: { data: ['上架','下架'], right: 0 },
   legend: { data: ['上架', '下架'], right: 0 },
   grid: { top: 50, right: 80, bottom: 100, left: 60 },
   // grid: { top: 70, right: 80, bottom: 30, left: 80 },
   xAxis: [
@@ -514,7 +511,7 @@
         type: 'category',
         // data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
         // data:dataAll.value.arr5,
         data:[],
         data: [],
         boundaryGap: true,
         axisTick: { show: false },
      },
@@ -568,7 +565,7 @@
         //    { value: 2, stationName: 's6' },
         // ],
         // data:dataAll.value.arr1
         data:[],
         data: [],
      },
      {
         name: '下架',
@@ -595,7 +592,7 @@
            color: '#3bbc86',
         },
         // data:dataAll.value.arr2
         data:[],
         data: [],
      },
      // {
      //    name: '平均',
@@ -637,22 +634,22 @@
};
const initChart = () => {
   if (!state.global.dispose.some((b: any) => b === state.global.homeCharThree)) state.global.homeCharThree.dispose();
   const chart = document.getElementById("homeBarRef")
   if (chart!=null) chart.removeAttribute('_echarts_instance_')//解决切换页面echarts不显示的问题
   const chart = document.getElementById('homeBarRef');
   if (chart != null) chart.removeAttribute('_echarts_instance_'); //解决切换页面echarts不显示的问题
   state.global.homeCharThree = markRaw(echarts.init(chart, state.charts.theme));
   //手动赋值
   option.xAxis[0].data = dataAll.value.arr5
   option.series[0].data = dataAll.value.arr1
   option.series[1].data = dataAll.value.arr2
   option.xAxis[0].data = dataAll.value.arr5;
   option.series[0].data = dataAll.value.arr1;
   option.series[1].data = dataAll.value.arr2;
   // option.series[2].data = dataAll.value.arr3
   // option.series[3].data = dataAll.value.arr4
   // 绘制图表
   state.global.homeCharThree.setOption(option);
   state.myCharts.push(state.global.homeCharThree);	
}
   state.myCharts.push(state.global.homeCharThree);
};

// 批量设置 echarts resize
const routerJupm = (v:any) => {
const routerJupm = (v: any) => {
   router.push(v.route);
};

@@ -675,21 +672,21 @@
let timeInter: any = null;
// 页面加载时
onMounted(() => {
   initEchartsResize();
   // initEchartsResize();

   timeInter = setInterval(() => {
      nextTick(() => {
         handleQuery1();
         handleQuery2();
         handleQuery3('1');
         handleQuery4();
      });
   }, 15000); //调用频率改为 15秒一次查询。
   // timeInter = setInterval(() => {
   //    nextTick(() => {
   //       handleQuery1();
   //       handleQuery2();
   //       handleQuery3('1');
   //       handleQuery4();
   //    });
   // }, 15000); //调用频率改为 15秒一次查询。
});

onUnmounted(() => {
  clearInterval(timeInter); //销毁
  timeInter = null;
   clearInterval(timeInter); //销毁
   timeInter = null;
});

// 由于页面缓存原因，keep-alive
@@ -727,8 +724,6 @@
      immediate: true,
   }
);


</script>

<style scoped lang="scss">
@@ -832,4 +827,4 @@
   color: var(--el-text-color-primary);
   border: 1px solid var(--next-border-color-light);
}
</style>
</style>