From 1b10882a0a46c8b25331ccd2628f7a2a6db8b13f Mon Sep 17 00:00:00 2001
From: schangxiang@126.com <schangxiang@126.com>
Date: 周一, 16 12月 2024 17:35:10 +0800
Subject: [PATCH] 11
---
LA24030_LuLiPackageLine_Web/src/views/home/index.vue | 259 +++++++++++++++++++++++++++++----------------------
1 files changed, 145 insertions(+), 114 deletions(-)
diff --git a/LA24030_LuLiPackageLine_Web/src/views/home/index.vue b/LA24030_LuLiPackageLine_Web/src/views/home/index.vue
index 0571968..0a05a8c 100644
--- a/LA24030_LuLiPackageLine_Web/src/views/home/index.vue
+++ b/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,49 @@
},
},
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: 1,
+ name: '鏈夎揣搴撲綅',
+ value: hasMaterialCount || 0,
+ },
+ {
+ type: 18,
+ name: '鏃犺揣搴撲綅',
+ value: noMaterialCount || 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 +271,7 @@
};
// handleQuery1();
// handleQuery2();
-// handleQuery3('1');
+//
// handleQuery4();
const activeName = ref('1');
const handleClick = (tab: TabsPaneContext, event: Event) => {
@@ -275,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,
@@ -476,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: [
@@ -516,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,
@@ -618,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
// 缁樺埗鍥捐〃
@@ -678,30 +701,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 +736,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 +778,7 @@
.home-card-two,
.home-card-three {
.home-card-item {
- height: 400px;
+ height: 500px;
width: 100%;
overflow: hidden;
.home-monitor {
@@ -805,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>
--
Gitblit v1.9.3