From 9051d96029c8e860c6e6657b7df2106bfbfdc010 Mon Sep 17 00:00:00 2001
From: chenyong <chenyong@hnkhzn.com>
Date: 星期五, 06 三月 2026 15:20:54 +0800
Subject: [PATCH] 111
---
项目代码/WMS/WIDESEA_WMSClient/src/views/Home.vue | 525 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++-
1 files changed, 516 insertions(+), 9 deletions(-)
diff --git "a/\351\241\271\347\233\256\344\273\243\347\240\201/WMS/WIDESEA_WMSClient/src/views/Home.vue" "b/\351\241\271\347\233\256\344\273\243\347\240\201/WMS/WIDESEA_WMSClient/src/views/Home.vue"
index 820437a..fb0665e 100644
--- "a/\351\241\271\347\233\256\344\273\243\347\240\201/WMS/WIDESEA_WMSClient/src/views/Home.vue"
+++ "b/\351\241\271\347\233\256\344\273\243\347\240\201/WMS/WIDESEA_WMSClient/src/views/Home.vue"
@@ -1,24 +1,531 @@
<template>
- <div class="title"></div>
+ <div id="big-data-container" class="big-data-container">
+ <div class="head">
+ <h1>WMS绯荤粺鐩戞帶涓績</h1>
+ <div class="head-actions">
+ <el-button type="primary" @click="toggleFullScreen" size="small" round>
+ <el-icon><FullScreen /></el-icon>
+ {{ isFullScreen ? '閫�鍑哄叏灞�' : '鍏ㄥ睆鏄剧ず' }}
+ </el-button>
+ </div>
+ </div>
+ <div class="data-container">
+ <div class="data-left">
+ <div class="data-left-item">
+ <div class="title">鍛ㄥ嚭鍏ュ簱缁熻</div>
+ <div id="chart-week-inout" style="height: calc(50% - 10px)"></div>
+ </div>
+ <div class="data-left-item">
+ <div class="title">鏈堝嚭鍏ュ簱瓒嬪娍</div>
+ <div id="chart-month-inout" style="height: calc(50% - 10px)"></div>
+ </div>
+ </div>
+ <div class="data-center">
+ <div class="data-center-item">
+ <div class="title">搴撳瓨鏁版嵁</div>
+ <div class="center-top-num">
+ <div class="item">
+ <div class="text">鎬昏揣浣嶆暟閲�</div>
+ <div class="num">{{ totalLocations }}</div>
+ </div>
+ <div class="item">
+ <div class="text">浠婃棩鍏ュ簱</div>
+ <div class="num">{{ todayInbound }}</div>
+ </div>
+ <div class="item">
+ <div class="text">浠婃棩鍑哄簱</div>
+ <div class="num">{{ todayOutbound }}</div>
+ </div>
+ <div class="item">
+ <div class="text">鏈懆鍏ュ簱</div>
+ <div class="num">{{ weekInbound }}</div>
+ </div>
+ <div class="item">
+ <div class="text">鏈懆鍑哄簱</div>
+ <div class="num">{{ weekOutbound }}</div>
+ </div>
+ <div class="item">
+ <div class="text">鏈湀鍏ュ簱</div>
+ <div class="num">{{ monthInbound }}</div>
+ </div>
+ <div class="item">
+ <div class="text">鏈湀鍑哄簱</div>
+ <div class="num">{{ monthOutbound }}</div>
+ </div>
+ <!-- <div class="item">
+ <div class="text">寰呭鐞嗚鍗�</div>
+ <div class="num">{{ pendingOrders }}</div>
+ </div> -->
+ </div>
+ </div>
+ <div class="data-center-item">
+ <div class="title">鏃ュ嚭鍏ュ簱鏄庣粏</div>
+ <div id="chart-daily-inout" style="height: calc(100% - 30px)"></div>
+ </div>
+ </div>
+ <div class="data-right">
+ <div class="data-right-item">
+ <div class="title">搴撳瓨鍙樺寲瓒嬪娍</div>
+ <div id="chart-stock-trend" style="height: calc(50% - 10px)"></div>
+ </div>
+ <div class="data-right-item">
+ <div class="title">璐т綅鐘舵�佸垎甯�</div>
+ <div id="chart-warehouse-utilization" style="height: calc(50% - 10px)"></div>
+ </div>
+ </div>
+ </div>
+ </div>
</template>
<script>
-import { ref, reactive } from 'vue'
+
+import { ref, reactive, onMounted, onUnmounted } from 'vue'
+import * as echarts from 'echarts'
+import http from '@/api/http.js'
+import { FullScreen } from '@element-plus/icons-vue'
+
+let chartDailyInout, chartWeekInout, chartMonthInout, chartWarehouseUtilization, chartStockTrend
export default {
setup() {
- return {
+ const totalLocations = ref('0')
+ const todayInbound = ref('0')
+ const todayOutbound = ref('0')
+ const weekInbound = ref('0')
+ const weekOutbound = ref('0')
+ const monthInbound = ref('0')
+ const monthOutbound = ref('0')
+ const pendingOrders = ref('0')
+
+ // 鍏ㄥ睆鐘舵��
+ const isFullScreen = ref(false)
+
+ const realTimeTasks = reactive([
+ ])
+
+ // 鍏ㄥ睆鍒囨崲鏂规硶
+ const toggleFullScreen = () => {
+ // 鑾峰彇棣栭〉鍐呭瀹瑰櫒鍏冪礌
+ const element = document.getElementById('big-data-container')
+ if (!element) return
+
+ if (!isFullScreen.value) {
+ // 杩涘叆鍏ㄥ睆
+ if (element.requestFullscreen) {
+ element.requestFullscreen()
+ } else if (element.mozRequestFullScreen) {
+ element.mozRequestFullScreen()
+ } else if (element.webkitRequestFullscreen) {
+ element.webkitRequestFullscreen()
+ } else if (element.msRequestFullscreen) {
+ element.msRequestFullscreen()
+ }
+ } else {
+ // 閫�鍑哄叏灞�
+ if (document.exitFullscreen) {
+ document.exitFullscreen()
+ } else if (document.mozCancelFullScreen) {
+ document.mozCancelFullScreen()
+ } else if (document.webkitExitFullscreen) {
+ document.webkitExitFullscreen()
+ } else if (document.msExitFullscreen) {
+ document.msExitFullscreen()
+ }
+ }
+ }
+
+ // 鐩戝惉鍏ㄥ睆鐘舵�佸彉鍖�
+ const handleFullScreenChange = () => {
+ isFullScreen.value = !!(document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement)
+ // 鍏抽敭锛氬叏灞忕姸鎬佸彉鍖栨椂寮哄埗瑙﹀彂鍥捐〃resize
+ handleResize()
+ }
+
+ // 鑾峰彇瀹炴椂鏁版嵁
+ const fetchData = async () => {
+ try {
+ // 鑾峰彇搴撳瓨缁熻鏁版嵁
+ const stockStatistics = await http.post('/api/Home/GetDt_TaskHty', {}, false)
+
+ console.log('搴撳瓨缁熻鏁版嵁:', stockStatistics)
+
+ if (stockStatistics) {
+ if (stockStatistics.status) {
+ const data = stockStatistics.data;
+ console.log('搴撳瓨鏁版嵁:', data)
+ totalLocations.value = data.totalLocations ? data.totalLocations.toLocaleString() : '0';
+ todayInbound.value = data.todayInbound ? data.todayInbound.toLocaleString() : '0';
+ todayOutbound.value = data.todayOutbound ? data.todayOutbound.toLocaleString() : '0';
+ weekInbound.value = data.weekInbound ? data.weekInbound.toLocaleString() : '0';
+ weekOutbound.value = data.weekOutbound ? data.weekOutbound.toLocaleString() : '0';
+ monthInbound.value = data.monthInbound ? data.monthInbound.toLocaleString() : '0';
+ monthOutbound.value = data.monthOutbound ? data.monthOutbound.toLocaleString() : '0';
+ pendingOrders.value = data.pendingOrders ? data.pendingOrders.toLocaleString() : '0';
+
+ // 鏇存柊鍥捐〃鏁版嵁
+ updateCharts(data);
+ } else {
+ console.error('搴撳瓨缁熻API杩斿洖澶辫触:', stockStatistics.message)
+ }
+ } else {
+ console.error('搴撳瓨缁熻API杩斿洖鏁版嵁涓虹┖')
+ }
+ } catch (error) {
+ console.error('鑾峰彇鏁版嵁澶辫触:', error)
+ // 浣跨敤榛樿鏁版嵁锛岀‘淇濆ぇ灞忔甯告樉绀�
+ console.log('浣跨敤榛樿鏁版嵁鏄剧ず')
+ }
+ }
+ // 鏇存柊鍥捐〃鏁版嵁
+ const updateCharts = (stockData) => {
+ if (!stockData) return
+
+ console.log('鏇存柊鍥捐〃鏁版嵁:', stockData)
+
+ // 鏇存柊搴撳瓨鍙樺寲瓒嬪娍鍥�
+ if (chartStockTrend) {
+ // 鐢熸垚鏈�鏂扮殑鏈�杩�7澶╂棩鏈�
+ const recentDays = generateRecentDays()
+ chartStockTrend.setOption({
+ xAxis: {
+ data: recentDays
+ },
+ series: [{
+ data: stockData.stockTrend || []
+ }]
+ })
+ }
+
+ // 鏇存柊鏃ュ嚭鍏ュ簱鏄庣粏
+ if (chartDailyInout) {
+ chartDailyInout.setOption({
+ series: [
+ { name: '鍏ュ簱', data: stockData.dailyInout?.inbound || [] },
+ { name: '鍑哄簱', data: stockData.dailyInout?.outbound || [] }
+ ]
+ })
+ }
+
+ // 鏇存柊鍛ㄥ嚭鍏ュ簱缁熻
+ if (chartWeekInout) {
+ chartWeekInout.setOption({
+ series: [
+ { name: '鍏ュ簱', data: stockData.weekInout?.inbound || [] },
+ { name: '鍑哄簱', data: stockData.weekInout?.outbound || [] }
+ ]
+ })
+ }
+
+ // 鏇存柊鏈堝嚭鍏ュ簱瓒嬪娍
+ if (chartMonthInout) {
+ chartMonthInout.setOption({
+ series: [
+ { name: '鍏ュ簱', data: stockData.monthInout?.inbound || [] },
+ { name: '鍑哄簱', data: stockData.monthInout?.outbound || [] }
+ ]
+ })
+ }
+
+ // 鏇存柊璐т綅鐘舵�佸垎甯�
+ if (chartWarehouseUtilization) {
+ chartWarehouseUtilization.setOption({
+ series: [{
+ data: [
+ { value: stockData.warehouseUtilization?.inStock || 0, name: '鏈夎揣' },
+ { value: stockData.warehouseUtilization?.free || 0, name: '绌洪棽' },
+ { value: stockData.warehouseUtilization?.inStockLock || 0, name: '鏈夎揣閿佸畾' },
+ // { value: stockData.warehouseUtilization?.lockLocations || 0, name: '閿佸畾' },
+ // { value: stockData.warehouseUtilization?.freeLock || 0, name: '绌洪棽閿佸畾' },
+ // { value: stockData.warehouseUtilization?.palletLock || 0, name: '澶ф墭鐩橀攣瀹�' }
+ ]
+ }]
+ })
+ }
+ }
+
+ // 鐢熸垚鏈�杩�7澶╃殑杩炵画鏃ユ湡锛屾牸寮忎负"dd鏃�"
+ const generateRecentDays = () => {
+ const days = []
+ const today = new Date()
+ // 鐢熸垚鏈�杩�7澶╃殑鏃ユ湡锛屼粠6澶╁墠鍒颁粖澶�
+ for (let i = 6; i >= 0; i--) {
+ const date = new Date(today)
+ date.setDate(today.getDate() - i)
+ days.push(`${date.getDate().toString().padStart(2, '0')}鏃)
+ }
+ return days
+ }
+
+ // 鍒濆鍖栧浘琛�
+ const initCharts = () => {
+ // 鏃ュ嚭鍏ュ簱鏄庣粏 - 鎸夊皬鏃剁粺璁�
+ chartDailyInout = echarts.init(document.getElementById('chart-daily-inout'))
+ chartDailyInout.setOption({
+ tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
+ grid: { left: '0%', top: '10px', right: '0%', bottom: '4%', containLabel: true },
+ xAxis: { type: 'category', data: ['08鏃�', '09鏃�', '10鏃�', '11鏃�', '12鏃�', '13鏃�', '14鏃�', '15鏃�', '16鏃�', '17鏃�'], axisLine: { show: true, lineStyle: { color: 'rgba(255,255,255,.5)' } }, axisLabel: { color: 'rgba(255,255,255,.8)' } },
+ yAxis: { type: 'value', axisLine: { show: true, lineStyle: { color: 'rgba(255,255,255,.5)' } }, axisLabel: { color: 'rgba(255,255,255,.8)' } },
+ series: [
+ { name: '鍏ュ簱', type: 'bar', data: [], barWidth: '25%', itemStyle: { normal: { color: '#2f89cf' } } },
+ { name: '鍑哄簱', type: 'bar', data: [], barWidth: '25%', itemStyle: { normal: { color: '#46d000' } } }
+ ]
+ })
+
+ // 鍛ㄥ嚭鍏ュ簱缁熻
+ chartWeekInout = echarts.init(document.getElementById('chart-week-inout'))
+ chartWeekInout.setOption({
+ tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
+ grid: { left: '0%', top: '10px', right: '0%', bottom: '4%', containLabel: true },
+ xAxis: { type: 'category', data: ['鍛ㄤ竴', '鍛ㄤ簩', '鍛ㄤ笁', '鍛ㄥ洓', '鍛ㄤ簲', '鍛ㄥ叚', '鍛ㄦ棩'], axisLine: { show: true, lineStyle: { color: 'rgba(255,255,255,.5)' } }, axisLabel: { color: 'rgba(255,255,255,.8)' } },
+ yAxis: { type: 'value', axisLine: { show: true, lineStyle: { color: 'rgba(255,255,255,.5)' } }, axisLabel: { color: 'rgba(255,255,255,.8)' } },
+ series: [
+ { name: '鍏ュ簱', type: 'bar', data: [], barWidth: '25%', itemStyle: { normal: { color: '#2f89cf' } } },
+ { name: '鍑哄簱', type: 'bar', data: [], barWidth: '25%', itemStyle: { normal: { color: '#46d000' } } }
+ ]
+ })
+
+ // 鏈堝嚭鍏ュ簱瓒嬪娍
+ chartMonthInout = echarts.init(document.getElementById('chart-month-inout'))
+ chartMonthInout.setOption({
+ tooltip: { trigger: 'axis' },
+ grid: { left: '0%', top: '10px', right: '0%', bottom: '4%', containLabel: true },
+ xAxis: { type: 'category', data: ['01鏃�', '05鏃�', '10鏃�', '15鏃�', '20鏃�', '25鏃�', '30鏃�'], axisLine: { show: true, lineStyle: { color: 'rgba(255,255,255,.5)' } }, axisLabel: { color: 'rgba(255,255,255,.8)' } },
+ yAxis: { type: 'value', axisLine: { show: true, lineStyle: { color: 'rgba(255,255,255,.5)' } }, axisLabel: { color: 'rgba(255,255,255,.8)' } },
+ series: [
+ { name: '鍏ュ簱', type: 'line', data: [], smooth: true, lineStyle: { color: '#2f89cf' }, areaStyle: { color: 'rgba(47, 137, 207, 0.3)' } },
+ { name: '鍑哄簱', type: 'line', data: [], smooth: true, lineStyle: { color: '#46d000' }, areaStyle: { color: 'rgba(70, 208, 0, 0.3)' } }
+ ]
+ })
+
+ // 璐т綅鐘舵�佸垎甯�
+ chartWarehouseUtilization = echarts.init(document.getElementById('chart-warehouse-utilization'))
+ chartWarehouseUtilization.setOption({
+ tooltip: { trigger: 'item' },
+ legend: { orient: 'vertical', left: 'left', textStyle: { color: 'rgba(255,255,255,.8)' } },
+ series: [
+ { name: '璐т綅鐘舵�佸垎甯�', type: 'pie', radius: '60%', data: [], emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } }
+ ]
+ })
+
+ // 搴撳瓨鍙樺寲瓒嬪娍
+ chartStockTrend = echarts.init(document.getElementById('chart-stock-trend'))
+ const recentDays = generateRecentDays()
+ chartStockTrend.setOption({
+ tooltip: { trigger: 'axis' },
+ grid: { left: '0%', top: '10px', right: '0%', bottom: '4%', containLabel: true },
+ xAxis: { type: 'category', data: recentDays, axisLine: { show: true, lineStyle: { color: 'rgba(255,255,255,.5)' } }, axisLabel: { color: 'rgba(255,255,255,.8)' } },
+ yAxis: { type: 'value', axisLine: { show: true, lineStyle: { color: 'rgba(255,255,255,.5)' } }, axisLabel: { color: 'rgba(255,255,255,.8)' } },
+ series: [{ type: 'line', data: [], smooth: true, lineStyle: { color: '#4ecdc4' }, areaStyle: { color: 'rgba(78, 205, 196, 0.3)' } }]
+ })
+ }
+
+ // 绐楀彛澶у皬鍙樺寲鏃堕噸鏂拌皟鏁村浘琛�
+ const handleResize = () => {
+ chartDailyInout && chartDailyInout.resize()
+ chartWeekInout && chartWeekInout.resize()
+ chartMonthInout && chartMonthInout.resize()
+ chartWarehouseUtilization && chartWarehouseUtilization.resize()
+ chartStockTrend && chartStockTrend.resize()
+ }
+
+ let dataTimer = null
+
+ onMounted(() => {
+ initCharts()
+ window.addEventListener('resize', handleResize)
+
+ // 娣诲姞鍏ㄥ睆鐘舵�佸彉鍖栫洃鍚�
+ document.addEventListener('fullscreenchange', handleFullScreenChange)
+ document.addEventListener('mozfullscreenchange', handleFullScreenChange)
+ document.addEventListener('webkitfullscreenchange', handleFullScreenChange)
+ document.addEventListener('msfullscreenchange', handleFullScreenChange)
+
+ // 鍒濆鑾峰彇鏁版嵁
+ fetchData()
+
+
+ dataTimer = setInterval(() => {
+ fetchData()
+ }, 600000)//鍗佸垎閽熸洿鏂颁竴娆�
+ })
+
+ onUnmounted(() => {
+ window.removeEventListener('resize', handleResize)
+
+ // 绉婚櫎鍏ㄥ睆鐘舵�佸彉鍖栫洃鍚�
+ document.removeEventListener('fullscreenchange', handleFullScreenChange)
+ document.removeEventListener('mozfullscreenchange', handleFullScreenChange)
+ document.removeEventListener('webkitfullscreenchange', handleFullScreenChange)
+ document.removeEventListener('msfullscreenchange', handleFullScreenChange)
+
+ // 娓呴櫎瀹氭椂鍣�
+ if (dataTimer) {
+ clearInterval(dataTimer)
+ dataTimer = null
+ }
+
+ // 閿�姣佸浘琛ㄥ疄渚�
+ chartDailyInout && chartDailyInout.dispose()
+ chartWeekInout && chartWeekInout.dispose()
+ chartMonthInout && chartMonthInout.dispose()
+ chartWarehouseUtilization && chartWarehouseUtilization.dispose()
+ chartStockTrend && chartStockTrend.dispose()
+ })
+
+ return {
+ totalLocations,
+ todayInbound,
+ todayOutbound,
+ weekInbound,
+ weekOutbound,
+ monthInbound,
+ monthOutbound,
+ pendingOrders,
+ isFullScreen,
+ toggleFullScreen
}
}
}
</script>
-<style scoped>
-.title {
- line-height: 70vh;
- text-align: center;
- font-size: 28px;
- color: orange;
+<style lang="less" scoped>
+.big-data-container {
+ width: 100%;
+ height: 100vh;
+ background: #000000;
+ color: #fff;
+ padding: 20px;
+ box-sizing: border-box;
+ overflow: hidden;
+
+ .head {
+ height: 60px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ font-size: 24px;
+ font-weight: bold;
+ color: #00ccff;
+ padding: 0 20px;
+ box-sizing: border-box;
+ margin-bottom: 10px;
+ position: relative;
+ }
+
+ .head-actions {
+ position: absolute;
+ right: 20px;
+ display: flex;
+ gap: 10px;
+ }
+
+ .data-container {
+ display: flex;
+ height: calc(100% - 80px);
+ gap: 20px;
+ overflow: hidden;
+
+ .data-left {
+ width: 30%;
+ display: flex;
+ flex-direction: column;
+ gap: 20px;
+
+ .data-left-item {
+ flex: 1;
+ background: rgba(10, 30, 50, 0.6);
+ border-radius: 12px;
+ padding: 10px;
+ box-sizing: border-box;
+ min-height: 0;
+ }
+ }
+
+ .data-center {
+ width: 40%;
+ display: flex;
+ flex-direction: column;
+ gap: 20px;
+
+ .center-top-num {
+ flex: 1;
+ display: grid;
+ grid-template-columns: repeat(4, 1fr);
+ grid-template-rows: repeat(2, 1fr);
+ gap: 15px;
+ background: rgba(10, 30, 50, 0.6);
+ border-radius: 12px;
+ padding: 10px;
+ box-sizing: border-box;
+ min-height: 0;
+
+ .item {
+ background: rgba(10, 40, 70, 0.7);
+ border-radius: 12px;
+ padding: 15px;
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ font-size: 14px;
+
+ .text {
+ margin-bottom: 8px;
+ color: rgba(255, 255, 255, 0.7);
+ }
+
+ .num {
+ font-size: 24px;
+ font-weight: bold;
+ color: #00ccff;
+ }
+ }
+ }
+
+ .data-center-item {
+ flex: 1;
+ background: rgba(10, 30, 50, 0.6);
+ border-radius: 12px;
+ padding: 10px;
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: column;
+ min-height: 0;
+
+ > div[id^="chart-"] {
+ flex: 1;
+ width: 100%;
+ height: 100% !important;
+ }
+ }
+ }
+
+ .data-right {
+ width: 30%;
+ display: flex;
+ flex-direction: column;
+ gap: 20px;
+
+ .data-right-item {
+ flex: 1;
+ background: rgba(10, 30, 50, 0.6);
+ border-radius: 12px;
+ padding: 10px;
+ box-sizing: border-box;
+ min-height: 0;
+ }
+ }
+ }
+
+ .title {
+ height: 30px;
+ line-height: 30px;
+ text-align: center;
+ font-size: 16px;
+ font-weight: bold;
+ color: #00ccff;
+ }
}
</style>
\ No newline at end of file
--
Gitblit v1.9.3