首页

liuying

2024-12-11 3b8b9cba9ebe15ff4ae1a7d8cb483d1f0ffcfa85

 LA24030_LuLiPackageLine_Web/src/views/home/index.vue

@@ -1,17 +1,17 @@
<template>
   <div class="home-container layout-pd">
      <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">
         <el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8" class="home-media home-media-lg" v-for="(v, k) in offOrderInfo" >
            <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>
                     <span class="ml5 font16">{{ v.name }}</span>
                     <div class="font30">{{ v.value }}</div>
                  </div>
               </div>
            </div>
         </el-col>
         <el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8" class="home-media home-media-lg">
         <!-- <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">
@@ -21,16 +21,7 @@
               </div>
            </div>
         </el-col>
         <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>
               </div>
            </div>
         </el-col>
          -->
         <!-- <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}`">
@@ -86,15 +77,38 @@
import { wmsStockPassMap, wmsHomePageQuery, wmsHomePlaceQuery, wmsTransitionDiagramQuery } from '/@/api/main/inventoryWarning/inventoryWarning';
import type { TabsPaneContext } from 'element-plus';
import { useRoute, useRouter } from 'vue-router';
import { getQueryOffOrderList, getStorageView } from '/@/api/main/ReportCenter/storageView';
const router = useRouter();
// 接口数据
const loadingwms = ref(false);
const pieChartRef = ref(null);
let myChart = null;
let countList = ref([
   {
      type: 0,
      name: '总库位',
      value: 0,
   },
   {
      type: 1,
      name: '有货库位',
      value: 0,
   },
   {
      type: 2,
      name: '无货库位',
      value: 0,
   },
   {
      type: 3,
      name: '锁定库位',
      value: 0,
   },
]);
const optionPie = {
   title: {
      text: '缓存岛统计',
      left: 'center',
      text: '缓存岛库存',
      // left: 'center',
      textStyle: {
         color: '#333',
      },
@@ -104,19 +118,20 @@
   },
   legend: {
      orient: 'vertical',
      left: 'left',
      left: 'right',
   },
   series: [
      {
         name: '库位状态',
         type: 'pie',
         radius: ['50%', '70%'],
         data: [
            { name: '总库位360', value: 120 },
            { name: '有货库位', value: 90 },
            { name: '无货库位', value: 60 },
            { name: '锁定库位', value: 30 },
         ],
         radius: ['35%', '55%'],
         data: [],
         // data: [
         //    { name: '总库位360', value: 120 },
         //    { name: '有货库位', value: 90 },
         //    { name: '无货库位', value: 60 },
         //    { name: '锁定库位', value: 30 },
         // ],
         emphasis: {
            itemStyle: {
               shadowBlur: 10,
@@ -125,23 +140,59 @@
            },
         },
         label: {
            formatter: '{b}: {c} ({d}%)',
            // formatter: '{b}: {c} ({d}%)',
            formatter: '{b}: {c}',
         },
      },
   ],
};

var offOrderInfo = ref([])
onMounted(() => {
   nextTick(() => {
      myChart = echarts.init(document.getElementById('homePieChart') as HTMLDivElement);
      const data = [
         { name: '总库位360', value: 120 },
         { name: '有货库位', value: 90 },
         { name: '无货库位', value: 60 },
         { name: '锁定库位', value: 30 },
      ];
      myChart.setOption(optionPie);
   nextTick(async () => {
      var res = await getStorageView();
      debugger;
      if (res.data.code == 200) {
         const { data } = res;
         const result = data.result;
         // 统计
         var hasMaterialCount = result.filter((item: any) => item.stockStatus == 1).length || 0;
         var noMaterialCount = result.length - hasMaterialCount;
         countList.value = [
            {
               type: '',
               name: '总库位',
               value: result.length || 0,
            },
            {
               type: 1,
               name: '有货库位',
               value: hasMaterialCount || 0,
            },
            {
               type: 18,
               name: '无货库位',
               value: noMaterialCount || 0,
            },
            {
               type: 2,
               name: '锁定库位',
               value: result.filter((item: any) => item.stockStatus == 2).length || 0,
            },
         ];
         optionPie.series[0].data = countList.value;
         myChart = echarts.init(document.getElementById('homePieChart') as HTMLDivElement);
         myChart.setOption(optionPie);
      }

      var res = await getQueryOffOrderList();
      // WmsCommonnQuery/QueryOffOrderList
      if (res.data.code == 200) {
         debugger;
         offOrderInfo.value = res.data.result || [];
      }
   });
   handleQuery3('1');
});

// 查询
@@ -230,7 +281,7 @@
};
// handleQuery1();
// handleQuery2();
// handleQuery3('1');
// 
// handleQuery4();
const activeName = ref('1');
const handleClick = (tab: TabsPaneContext, event: Event) => {
@@ -275,24 +326,6 @@
         color2: '--next-color-success-lighter',
         color3: '--el-color-success',
      },
      // {
      //    num1: '125,65',
      //    num2: '+17.32',
      //    num3: '年度计划信息',
      //    num4: 'iconfont icon-zaosheng',
      //    color1: '#6690F9',
      //    color2: '--next-color-warning-lighter',
      //    color3: '--el-color-warning',
      // },
      // {
      //    num1: '520,43',
      //    num2: '-10.01',
      //    num3: '访问统计信息',
      //    num4: 'fa fa-github-alt',
      //    color1: '#FF6462',
      //    color2: '--next-color-danger-lighter',
      //    color3: '--el-color-danger',
      // },
   ],

   myCharts: [] as EmptyArrayType,
@@ -476,13 +509,13 @@
const option = {
   backgroundColor: state.charts.bgColor,
   title: {
      text: '上下架推移图',
      text: '上下线推移图',
      x: 'left',
      textStyle: { fontSize: '12', color: state.charts.color },
   },
   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: [
@@ -517,7 +550,7 @@
   ],
   series: [
      {
         name: '上架',
         name: '上线',
         type: 'line',
         smooth: true,
         showSymbol: true,
@@ -547,7 +580,7 @@
         data: [],
      },
      {
         name: '下架',
         name: '下线',
         type: 'line',
         smooth: true,
         showSymbol: true,
@@ -678,30 +711,30 @@
      initEchartsResizeFun();
   }
);
// 监听 pinia 中是否开启深色主题
watch(
   () => themeConfig.value.isIsDark,
   (isIsDark) => {
      nextTick(() => {
         state.charts.theme = isIsDark ? 'dark' : '';
         state.charts.bgColor = isIsDark ? 'transparent' : '';
         state.charts.color = isIsDark ? '#dadada' : '#303133';
         setTimeout(() => {
            initLineChart(null, null, null);
         }, 500);
         setTimeout(() => {
            initPieChart(null);
         }, 700);
         // setTimeout(() => {
         //    initBarChart(null,null,null,null);
         // }, 1000);
      });
   },
   {
      deep: true,
      immediate: true,
   }
);
// // 监听 pinia 中是否开启深色主题
// watch(
//    () => themeConfig.value.isIsDark,
//    (isIsDark) => {
//       nextTick(() => {
//          state.charts.theme = isIsDark ? 'dark' : '';
//          state.charts.bgColor = isIsDark ? 'transparent' : '';
//          state.charts.color = isIsDark ? '#dadada' : '#303133';
//          setTimeout(() => {
//             initLineChart(null, null, null);
//          }, 500);
//          setTimeout(() => {
//             initPieChart(null);
//          }, 700);
//          // setTimeout(() => {
//          //    initBarChart(null,null,null,null);
//          // }, 1000);
//       });
//    },
//    {
//       deep: true,
//       immediate: true,
//    }
// );
</script>

<style scoped lang="scss">
@@ -713,7 +746,7 @@
   .home-card-three {
      .home-card-item {
         width: 100%;
         height: 130px;
         height: 160px;
         border-radius: 4px;
         transition: all ease 0.3s;
         padding: 20px;
@@ -755,7 +788,7 @@
   .home-card-two,
   .home-card-three {
      .home-card-item {
         height: 400px;
         height: 500px;
         width: 100%;
         overflow: hidden;
         .home-monitor {
@@ -805,4 +838,12 @@
   color: var(--el-text-color-primary);
   border: 1px solid var(--next-border-color-light);
}
.font30{
   font-size: 39px !important;
    margin: 24px 0;
   color: orange;
}
.font16{
   font-size: 24px !important;
}
</style>