22

schangxiang@126.com

2024-12-16 ce21109b355a4948f11471d4db53c0226417f04e

 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,7 +77,7 @@
import { wmsStockPassMap, wmsHomePageQuery, wmsHomePlaceQuery, wmsTransitionDiagramQuery } from '/@/api/main/inventoryWarning/inventoryWarning';
import type { TabsPaneContext } from 'element-plus';
import { useRoute, useRouter } from 'vue-router';
import { getStorageView } from '/@/api/main/ReportCenter/storageView';
import { getQueryOffOrderList, getStorageView } from '/@/api/main/ReportCenter/storageView';
const router = useRouter();
// 接口数据
const loadingwms = ref(false);
@@ -156,12 +147,11 @@
   ],
};

var offOrderInfo = ref([])
onMounted(() => {
   nextTick(async () => {


      var res = await getStorageView();
      debugger
      debugger;
      if (res.data.code == 200) {
         const { data } = res;
         const result = data.result;
@@ -169,11 +159,6 @@
         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: '有货库位',
@@ -184,19 +169,20 @@
               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);
         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');
});

// 查询
@@ -285,7 +271,7 @@
};
// handleQuery1();
// handleQuery2();
// handleQuery3('1');
// 
// handleQuery4();
const activeName = ref('1');
const handleClick = (tab: TabsPaneContext, event: Event) => {
@@ -330,24 +316,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,
@@ -531,13 +499,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: [
@@ -571,38 +539,38 @@
      // },
   ],
   series: [
      // {
      //    name: '上线',
      //    type: 'line',
      //    smooth: true,
      //    showSymbol: true,
      //    // 矢量画五角星
      //    symbol: 'path://M150 0 L80 175 L250 75 L50 75 L220 175 Z',
      //    symbolSize: 12,
      //    yAxisIndex: 0,
      //    areaStyle: {
      //       color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
      //          { offset: 0, color: 'rgba(250,180,101,0.3)' },
      //          { offset: 1, color: 'rgba(250,180,101,0)' },
      //       ]),
      //       shadowColor: 'rgba(250,180,101,0.2)',
      //       shadowBlur: 20,
      //    },
      //    itemStyle: { color: '#FF8000' },
      //    // data中可以使用对象，value代表相应的值，另外可加入自定义的属性
      //    // data: [
      //    //    { value: 1, stationName: 's1' },
      //    //    { value: 3, stationName: 's2' },
      //    //    { value: 4, stationName: 's3' },
      //    //    { value: 9, stationName: 's4' },
      //    //    { value: 3, stationName: 's5' },
      //    //    { value: 2, stationName: 's6' },
      //    // ],
      //    // data:dataAll.value.arr1
      //    data: [],
      // },
      {
         name: '上架',
         type: 'line',
         smooth: true,
         showSymbol: true,
         // 矢量画五角星
         symbol: 'path://M150 0 L80 175 L250 75 L50 75 L220 175 Z',
         symbolSize: 12,
         yAxisIndex: 0,
         areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
               { offset: 0, color: 'rgba(250,180,101,0.3)' },
               { offset: 1, color: 'rgba(250,180,101,0)' },
            ]),
            shadowColor: 'rgba(250,180,101,0.2)',
            shadowBlur: 20,
         },
         itemStyle: { color: '#FF8000' },
         // data中可以使用对象，value代表相应的值，另外可加入自定义的属性
         // data: [
         //    { value: 1, stationName: 's1' },
         //    { value: 3, stationName: 's2' },
         //    { value: 4, stationName: 's3' },
         //    { value: 9, stationName: 's4' },
         //    { value: 3, stationName: 's5' },
         //    { value: 2, stationName: 's6' },
         // ],
         // data:dataAll.value.arr1
         data: [],
      },
      {
         name: '下架',
         name: '下线订单',
         type: 'line',
         smooth: true,
         showSymbol: true,
@@ -673,8 +641,8 @@
   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.series[0].data = dataAll.value.arr2;
   //option.series[1].data = dataAll.value.arr2;
   // option.series[2].data = dataAll.value.arr3
   // option.series[3].data = dataAll.value.arr4
   // 绘制图表
@@ -768,7 +736,7 @@
   .home-card-three {
      .home-card-item {
         width: 100%;
         height: 130px;
         height: 160px;
         border-radius: 4px;
         transition: all ease 0.3s;
         padding: 20px;
@@ -810,7 +778,7 @@
   .home-card-two,
   .home-card-three {
      .home-card-item {
         height: 400px;
         height: 500px;
         width: 100%;
         overflow: hidden;
         .home-monitor {
@@ -860,4 +828,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>