From 84138b3f42b218ecc2efaa54ec31a1c1be29e326 Mon Sep 17 00:00:00 2001
From: liuying <1427574514@qq.com>
Date: 周一, 25 11月 2024 19:30:59 +0800
Subject: [PATCH] 前端页面
---
LA24030_LuLiPackageLine_Web/src/views/home/index.vue | 255 +++++++++++++++++++++++++--------------------------
1 files changed, 125 insertions(+), 130 deletions(-)
diff --git a/LA24030_LuLiPackageLine_Web/src/views/home/index.vue b/LA24030_LuLiPackageLine_Web/src/views/home/index.vue
index 20d3c5e..6ae4a8f 100644
--- a/LA24030_LuLiPackageLine_Web/src/views/home/index.vue
+++ b/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;
});
// 鐢变簬椤甸潰缂撳瓨鍘熷洜锛宬eep-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>
\ No newline at end of file
+</style>
--
Gitblit v1.9.3