Merge remote-tracking branch 'origin/0.8.X' into 0.8.X
This commit is contained in:
@@ -70,7 +70,7 @@ export const constantRoutes = [
|
|||||||
path: 'index',
|
path: 'index',
|
||||||
component: () => import('@/views/index'),
|
component: () => import('@/views/index'),
|
||||||
name: 'Index',
|
name: 'Index',
|
||||||
meta: { title: '首页', icon: 'dashboard', affix: true }
|
meta: { title: '工作台', icon: 'dashboard', affix: true }
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -8,6 +8,7 @@ const getters = {
|
|||||||
token: state => state.user.token,
|
token: state => state.user.token,
|
||||||
avatar: state => state.user.avatar,
|
avatar: state => state.user.avatar,
|
||||||
name: state => state.user.name,
|
name: state => state.user.name,
|
||||||
|
avatar: state => state.user.avatar,
|
||||||
introduction: state => state.user.introduction,
|
introduction: state => state.user.introduction,
|
||||||
roles: state => state.user.roles,
|
roles: state => state.user.roles,
|
||||||
permissions: state => state.user.permissions,
|
permissions: state => state.user.permissions,
|
||||||
|
|||||||
149
klp-ui/src/views/components/AllApplications.vue
Normal file
149
klp-ui/src/views/components/AllApplications.vue
Normal file
@@ -0,0 +1,149 @@
|
|||||||
|
<template>
|
||||||
|
<div class="all-applications-container">
|
||||||
|
<h3 class="title">全部应用</h3>
|
||||||
|
<el-tabs v-model="activeTabName" class="app-tabs">
|
||||||
|
<el-tab-pane
|
||||||
|
v-for="menu in filteredMenus"
|
||||||
|
:key="menu.path"
|
||||||
|
:label="menu.meta.title"
|
||||||
|
:name="menu.path"
|
||||||
|
>
|
||||||
|
<div class="app-grid">
|
||||||
|
<div
|
||||||
|
v-for="child in menu.children"
|
||||||
|
:key="child.path"
|
||||||
|
class="app-item"
|
||||||
|
@click="handleAppClick(menu, child)"
|
||||||
|
>
|
||||||
|
<div class="app-icon-wrapper">
|
||||||
|
<svg-icon :icon-class="child.meta.icon || 'documentation'" class="app-icon" />
|
||||||
|
</div>
|
||||||
|
<span class="app-name">{{ child.meta.title }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-tab-pane>
|
||||||
|
</el-tabs>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { getRouters } from '@/api/menu'
|
||||||
|
import path from 'path'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'AllApplications',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
allMenus: [],
|
||||||
|
activeTabName: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
filteredMenus() {
|
||||||
|
const filterHidden = (menus) => {
|
||||||
|
return menus
|
||||||
|
.filter(menu => menu.hidden !== true)
|
||||||
|
.map(menu => {
|
||||||
|
if (menu.children) {
|
||||||
|
menu.children = filterHidden(menu.children)
|
||||||
|
}
|
||||||
|
return menu
|
||||||
|
})
|
||||||
|
}
|
||||||
|
const topLevelMenus = filterHidden(this.allMenus).filter(
|
||||||
|
menu => menu.children && menu.children.length > 0
|
||||||
|
)
|
||||||
|
return topLevelMenus
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.fetchMenus()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
fetchMenus() {
|
||||||
|
getRouters().then(response => {
|
||||||
|
this.allMenus = response.data
|
||||||
|
if (this.filteredMenus.length > 0) {
|
||||||
|
this.activeTabName = this.filteredMenus[0].path
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
handleAppClick(parentMenu, childMenu) {
|
||||||
|
const basePath = parentMenu.path
|
||||||
|
const fullPath = path.resolve(basePath, childMenu.path)
|
||||||
|
this.$router.push(fullPath)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.all-applications-container {
|
||||||
|
background-color: #fff;
|
||||||
|
padding: 20px;
|
||||||
|
border-radius: 8px;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 600;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
color: #303133;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
|
||||||
|
gap: 20px;
|
||||||
|
padding-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-item {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 10px;
|
||||||
|
border-radius: 8px;
|
||||||
|
transition: background-color 0.3s ease;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: #f5f7fa;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-icon-wrapper {
|
||||||
|
width: 56px;
|
||||||
|
height: 56px;
|
||||||
|
border-radius: 12px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
background-color: #f0f5ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-icon {
|
||||||
|
font-size: 28px;
|
||||||
|
color: #409eff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-name {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #606266;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .el-tabs__header {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .el-tabs__nav-wrap::after {
|
||||||
|
height: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .el-tabs__item {
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -2,6 +2,14 @@
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="dashboard-root">
|
<div class="dashboard-root">
|
||||||
|
<!-- 第一行:头像+欢迎语 -->
|
||||||
|
<div class="user-greeting-row">
|
||||||
|
<img :src="avatar" class="user-avatar" alt="头像" />
|
||||||
|
<div class="greeting-text">
|
||||||
|
<div class="greeting-title">{{ greeting }},{{ name }}</div>
|
||||||
|
<div class="greeting-desc">愿你天黑有灯,下雨有伞</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<!-- 数据概览区 -->
|
<!-- 数据概览区 -->
|
||||||
<div class="data-overview">
|
<div class="data-overview">
|
||||||
<div v-for="(card, index) in dataCards" :key="index"
|
<div v-for="(card, index) in dataCards" :key="index"
|
||||||
@@ -22,21 +30,16 @@
|
|||||||
<!-- 业务功能区 -->
|
<!-- 业务功能区 -->
|
||||||
<div class="business-modules">
|
<div class="business-modules">
|
||||||
<div v-for="(module, index) in businessModules" :key="index"
|
<div v-for="(module, index) in businessModules" :key="index"
|
||||||
class="business-module">
|
class="business-module" @click="handleLink(module.link)">
|
||||||
<div class="business-module-header">
|
<div :class="['business-module-icon', getModuleBg(module.bgColor)]">
|
||||||
<div :class="['business-module-icon', getModuleBg(module.bgColor)]">
|
<i :class="module.icon"></i>
|
||||||
<i :class="['business-module-icon-inner', module.icon]"></i>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 class="business-module-title">{{ module.title }}</h3>
|
|
||||||
<p class="business-module-desc">{{ module.description }}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
<h3 class="business-module-title">{{ module.title }}</h3>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 监控面板 -->
|
<!-- 监控面板 -->
|
||||||
<div class="monitor-panel">
|
<!-- <div class="monitor-panel">
|
||||||
<div class="monitor-resource">
|
<div class="monitor-resource">
|
||||||
<h3 class="monitor-title">系统资源监控</h3>
|
<h3 class="monitor-title">系统资源监控</h3>
|
||||||
<div class="monitor-resource-charts">
|
<div class="monitor-resource-charts">
|
||||||
@@ -60,38 +63,48 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div> -->
|
||||||
|
|
||||||
|
<!-- 全部应用 -->
|
||||||
|
<AllApplications />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import * as echarts from 'echarts';
|
import * as echarts from 'echarts';
|
||||||
|
import AllApplications from '@/views/components/AllApplications.vue';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
|
components: {
|
||||||
|
AllApplications
|
||||||
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
avatar: '',
|
||||||
|
name: '',
|
||||||
|
greeting: '',
|
||||||
dataCards: [
|
dataCards: [
|
||||||
{
|
{
|
||||||
title: '订单总量',
|
title: '订单总量',
|
||||||
value: '2,384',
|
value: '2,384',
|
||||||
icon: 'fas fa-shopping-cart',
|
icon: 'fas fa-shopping-cart',
|
||||||
color: 'text-blue-500',
|
color: 'text-blue-500',
|
||||||
chartData: [30, 40, 20, 50, 40, 60, 70]
|
chartData: [30, 40, 20, 50, 40, 60, 70],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '库存总量',
|
title: '库存总量',
|
||||||
value: '12,857',
|
value: '12,857',
|
||||||
icon: 'fas fa-box',
|
icon: 'fas fa-box',
|
||||||
color: 'text-green-500',
|
color: 'text-green-500',
|
||||||
chartData: [40, 30, 50, 40, 60, 50, 70]
|
chartData: [40, 30, 50, 40, 60, 50, 70],
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '今日任务',
|
|
||||||
value: '48',
|
|
||||||
icon: 'fas fa-tasks',
|
|
||||||
color: 'text-yellow-500',
|
|
||||||
chartData: [20, 40, 30, 50, 40, 60, 50]
|
|
||||||
},
|
},
|
||||||
|
// {
|
||||||
|
// title: '今日任务',
|
||||||
|
// value: '48',
|
||||||
|
// icon: 'fas fa-tasks',
|
||||||
|
// color: 'text-yellow-500',
|
||||||
|
// chartData: [20, 40, 30, 50, 40, 60, 50],
|
||||||
|
// },
|
||||||
{
|
{
|
||||||
title: '系统状态',
|
title: '系统状态',
|
||||||
value: '正常',
|
value: '正常',
|
||||||
@@ -105,37 +118,43 @@ export default {
|
|||||||
title: '仓库管理',
|
title: '仓库管理',
|
||||||
description: '库存管理与货位管理',
|
description: '库存管理与货位管理',
|
||||||
icon: 'fas fa-warehouse',
|
icon: 'fas fa-warehouse',
|
||||||
bgColor: 'bg-blue-500'
|
bgColor: 'bg-blue-500',
|
||||||
|
link: '/wms/stock'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '订单处理',
|
title: '订单处理',
|
||||||
description: '订单审核与发货管理',
|
description: '订单审核与发货管理',
|
||||||
icon: 'fas fa-clipboard-check',
|
icon: 'fas fa-clipboard-check',
|
||||||
bgColor: 'bg-green-500'
|
bgColor: 'bg-green-500',
|
||||||
|
link: '/wms/order'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '人员管理',
|
title: '人员管理',
|
||||||
description: '员工信息与权限管理',
|
description: '员工信息与权限管理',
|
||||||
icon: 'fas fa-users',
|
icon: 'fas fa-users',
|
||||||
bgColor: 'bg-yellow-500'
|
bgColor: 'bg-yellow-500',
|
||||||
|
link: '/system/user'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '数据分析',
|
title: '订单分析',
|
||||||
description: '业务数据可视化分析',
|
description: '订单数据可视化分析',
|
||||||
icon: 'fas fa-chart-line',
|
icon: 'fas fa-chart-line',
|
||||||
bgColor: 'bg-purple-500'
|
bgColor: 'bg-purple-500',
|
||||||
|
link: '/wms/order/dashboard'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '设备管理',
|
title: '出库入库',
|
||||||
description: '仓储设备维护管理',
|
description: '出库入库管理',
|
||||||
icon: 'fas fa-tools',
|
icon: 'fas fa-tools',
|
||||||
bgColor: 'bg-red-500'
|
bgColor: 'bg-red-500',
|
||||||
|
link: '/wms/stcokIo'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '系统设置',
|
title: '系统设置',
|
||||||
description: '系统参数配置管理',
|
description: '系统参数配置管理',
|
||||||
icon: 'fas fa-cog',
|
icon: 'fas fa-cog',
|
||||||
bgColor: 'bg-indigo-500'
|
bgColor: 'bg-indigo-500',
|
||||||
|
link: '/system/menu'
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
resourceCharts: [
|
resourceCharts: [
|
||||||
@@ -181,6 +200,9 @@ export default {
|
|||||||
mounted() {
|
mounted() {
|
||||||
this.initCharts();
|
this.initCharts();
|
||||||
this.initResourceCharts();
|
this.initResourceCharts();
|
||||||
|
this.avatar = this.$store.getters.avatar;
|
||||||
|
this.name = this.$store.getters.name;
|
||||||
|
this.greeting = this.getGreeting();
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
getIconColor(color) {
|
getIconColor(color) {
|
||||||
@@ -193,6 +215,19 @@ export default {
|
|||||||
default: return '';
|
default: return '';
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
handleLink(item) {
|
||||||
|
this.$router.push(item);
|
||||||
|
},
|
||||||
|
getGreeting() {
|
||||||
|
const hour = new Date().getHours();
|
||||||
|
if (hour < 6) return '凌晨好';
|
||||||
|
if (hour < 9) return '早上好';
|
||||||
|
if (hour < 12) return '上午好';
|
||||||
|
if (hour < 14) return '中午好';
|
||||||
|
if (hour < 18) return '下午好';
|
||||||
|
if (hour < 21) return '晚上好';
|
||||||
|
return '夜深了';
|
||||||
|
},
|
||||||
getModuleBg(bgColor) {
|
getModuleBg(bgColor) {
|
||||||
switch (bgColor) {
|
switch (bgColor) {
|
||||||
case 'bg-blue-500': return 'bg-blue';
|
case 'bg-blue-500': return 'bg-blue';
|
||||||
@@ -376,37 +411,36 @@ export default {
|
|||||||
|
|
||||||
.business-modules {
|
.business-modules {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(3, 1fr);
|
grid-template-columns: repeat(6, 1fr);
|
||||||
gap: 24px;
|
gap: 24px;
|
||||||
margin-bottom: 32px;
|
margin-bottom: 32px;
|
||||||
}
|
}
|
||||||
.business-module {
|
.business-module {
|
||||||
padding: 24px;
|
display: flex;
|
||||||
border-radius: 16px;
|
align-items: center;
|
||||||
background: linear-gradient(135deg, #fff 0%, #f3f4f6 100%);
|
padding: 16px;
|
||||||
box-shadow: 0 4px 24px 0 rgba(0,0,0,0.06);
|
border-radius: 12px;
|
||||||
border: 1px solid rgba(255,255,255,0.2);
|
background: #fff;
|
||||||
transition: box-shadow 0.2s;
|
box-shadow: 0 2px 12px 0 rgba(0,0,0,0.05);
|
||||||
|
transition: all 0.2s;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
.business-module:hover {
|
.business-module:hover {
|
||||||
box-shadow: 0 8px 32px 0 rgba(0,0,0,0.10);
|
box-shadow: 0 4px 16px 0 rgba(0,0,0,0.1);
|
||||||
}
|
transform: translateY(-2px);
|
||||||
.business-module-header {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 16px;
|
|
||||||
}
|
}
|
||||||
.business-module-icon {
|
.business-module-icon {
|
||||||
width: 48px;
|
width: 40px;
|
||||||
height: 48px;
|
height: 40px;
|
||||||
border-radius: 50%;
|
border-radius: 8px;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
flex-shrink: 0;
|
||||||
|
margin-right: 12px;
|
||||||
}
|
}
|
||||||
.business-module-icon-inner {
|
.business-module-icon i {
|
||||||
font-size: 24px;
|
font-size: 20px;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
.bg-blue { background: #3b82f6; }
|
.bg-blue { background: #3b82f6; }
|
||||||
@@ -416,13 +450,9 @@ export default {
|
|||||||
.bg-red { background: #ef4444; }
|
.bg-red { background: #ef4444; }
|
||||||
.bg-indigo { background: #6366f1; }
|
.bg-indigo { background: #6366f1; }
|
||||||
.business-module-title {
|
.business-module-title {
|
||||||
font-size: 18px;
|
font-size: 16px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
margin-bottom: 4px;
|
color: #303133;
|
||||||
}
|
|
||||||
.business-module-desc {
|
|
||||||
color: #6b7280;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.monitor-panel {
|
.monitor-panel {
|
||||||
@@ -485,5 +515,41 @@ export default {
|
|||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: #6b7280;
|
color: #6b7280;
|
||||||
}
|
}
|
||||||
|
.user-greeting-row {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 24px;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
}
|
||||||
|
.user-avatar {
|
||||||
|
width: 80px;
|
||||||
|
height: 80px;
|
||||||
|
border-radius: 50%;
|
||||||
|
object-fit: cover;
|
||||||
|
border: 2px solid #e0e0e0;
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
.greeting-text {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.greeting-title {
|
||||||
|
font-size: 28px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
.greeting-desc {
|
||||||
|
font-size: 16px;
|
||||||
|
color: #888;
|
||||||
|
margin-top: 4px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<style>
|
||||||
|
.business-module-header,
|
||||||
|
.business-module-icon-inner,
|
||||||
|
.business-module-desc {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
|||||||
103
klp-ui/src/views/wms/order/components/CustomerRegion.vue
Normal file
103
klp-ui/src/views/wms/order/components/CustomerRegion.vue
Normal file
@@ -0,0 +1,103 @@
|
|||||||
|
<template>
|
||||||
|
<div class="chart-container">
|
||||||
|
<div ref="chart" style="width: 100%; height: 400px;"></div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import * as echarts from 'echarts'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'CustomerRegion',
|
||||||
|
props: {
|
||||||
|
customerData: {
|
||||||
|
type: Array,
|
||||||
|
default: () => []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
chart: null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
customerData: {
|
||||||
|
deep: true,
|
||||||
|
handler(val) {
|
||||||
|
if (val) {
|
||||||
|
this.initChart()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.initChart()
|
||||||
|
},
|
||||||
|
beforeDestroy() {
|
||||||
|
if (!this.chart) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.chart.dispose()
|
||||||
|
this.chart = null
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
initChart() {
|
||||||
|
if (!this.$refs.chart) return
|
||||||
|
this.chart = echarts.init(this.$refs.chart)
|
||||||
|
const option = {
|
||||||
|
title: {
|
||||||
|
text: '客户区域分布',
|
||||||
|
left: 'center'
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'item',
|
||||||
|
formatter: '{a} <br/>{b}: {c} ({d}%)'
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
orient: 'vertical',
|
||||||
|
left: 10,
|
||||||
|
data: this.customerData.map(item => item.region)
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '客户数量',
|
||||||
|
type: 'pie',
|
||||||
|
radius: ['50%', '70%'],
|
||||||
|
avoidLabelOverlap: false,
|
||||||
|
label: {
|
||||||
|
show: false,
|
||||||
|
position: 'center'
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
fontSize: '30',
|
||||||
|
fontWeight: 'bold'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
labelLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
data: this.customerData.map(item => ({
|
||||||
|
name: item.region,
|
||||||
|
value: item.customerCount
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
this.chart.setOption(option)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.chart-container {
|
||||||
|
background-color: #ffffff;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 20px;
|
||||||
|
box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
|
||||||
|
height: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
117
klp-ui/src/views/wms/order/components/MaterialAnalysis.vue
Normal file
117
klp-ui/src/views/wms/order/components/MaterialAnalysis.vue
Normal file
@@ -0,0 +1,117 @@
|
|||||||
|
<template>
|
||||||
|
<div class="chart-container">
|
||||||
|
<div ref="chart" style="width: 100%; height: 400px;"></div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import * as echarts from 'echarts'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'MaterialAnalysis',
|
||||||
|
props: {
|
||||||
|
materialData: {
|
||||||
|
type: Object,
|
||||||
|
default: () => ({
|
||||||
|
categories: [],
|
||||||
|
usageFrequency: [],
|
||||||
|
stockQuantity: [],
|
||||||
|
purchaseCycle: []
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
chart: null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
materialData: {
|
||||||
|
deep: true,
|
||||||
|
handler(val) {
|
||||||
|
if (val) {
|
||||||
|
this.initChart()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.initChart()
|
||||||
|
},
|
||||||
|
beforeDestroy() {
|
||||||
|
if (!this.chart) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.chart.dispose()
|
||||||
|
this.chart = null
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
initChart() {
|
||||||
|
if (!this.$refs.chart) return
|
||||||
|
this.chart = echarts.init(this.$refs.chart)
|
||||||
|
const option = {
|
||||||
|
title: {
|
||||||
|
text: '物料使用分析',
|
||||||
|
left: 'center'
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
type: 'cross'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
data: ['使用频率', '库存量', '采购周期'],
|
||||||
|
top: 30
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
data: this.materialData.categories
|
||||||
|
},
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
type: 'value',
|
||||||
|
name: '数量/频率',
|
||||||
|
position: 'left'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'value',
|
||||||
|
name: '采购周期(天)',
|
||||||
|
position: 'right'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '使用频率',
|
||||||
|
type: 'bar',
|
||||||
|
data: this.materialData.usageFrequency
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '库存量',
|
||||||
|
type: 'bar',
|
||||||
|
data: this.materialData.stockQuantity
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '采购周期',
|
||||||
|
type: 'line',
|
||||||
|
yAxisIndex: 1,
|
||||||
|
data: this.materialData.purchaseCycle
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
this.chart.setOption(option)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.chart-container {
|
||||||
|
background-color: #ffffff;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 20px;
|
||||||
|
box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
|
||||||
|
height: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -6,12 +6,12 @@
|
|||||||
<div class="content-left">
|
<div class="content-left">
|
||||||
<div class="summary-title">总订单数</div>
|
<div class="summary-title">总订单数</div>
|
||||||
<div class="summary-value">
|
<div class="summary-value">
|
||||||
<strong>{{ dataInfo.totalOrders.toLocaleString() }}</strong>
|
<strong>{{ dataInfo.totalOrderCount.toLocaleString() }}</strong>
|
||||||
<span class="growth">
|
<span class="growth">
|
||||||
<svg class="arrow-up" viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="#38c172" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
|
<svg class="arrow-up" viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="#38c172" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
|
||||||
<polyline points="6 15 12 9 18 15"></polyline>
|
<polyline points="6 15 12 9 18 15"></polyline>
|
||||||
</svg>
|
</svg>
|
||||||
12.5%
|
{{ dataInfo.totalOrderCountGrowthRate }}%
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -28,12 +28,12 @@
|
|||||||
<div class="content-left">
|
<div class="content-left">
|
||||||
<div class="summary-title">本月完成订单</div>
|
<div class="summary-title">本月完成订单</div>
|
||||||
<div class="summary-value">
|
<div class="summary-value">
|
||||||
<strong>{{ dataInfo.completedThisMonth.toLocaleString() }}</strong>
|
<strong>{{ dataInfo.monthFinishedOrderCount.toLocaleString() }}</strong>
|
||||||
<span class="growth">
|
<span class="growth">
|
||||||
<svg class="arrow-up" viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="#38c172" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
|
<svg class="arrow-up" viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="#38c172" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
|
||||||
<polyline points="6 15 12 9 18 15"></polyline>
|
<polyline points="6 15 12 9 18 15"></polyline>
|
||||||
</svg>
|
</svg>
|
||||||
8.3%
|
{{ dataInfo.monthFinishedOrderCountGrowthRate }}%
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -49,12 +49,12 @@
|
|||||||
<div class="content-left">
|
<div class="content-left">
|
||||||
<div class="summary-title">订单完成度</div>
|
<div class="summary-title">订单完成度</div>
|
||||||
<div class="summary-value">
|
<div class="summary-value">
|
||||||
<strong>{{ dataInfo.completionRate.toFixed(1) }}%</strong>
|
<strong>{{ dataInfo.finishedRate.toFixed(1) }}%</strong>
|
||||||
<span class="growth">
|
<span class="growth">
|
||||||
<svg class="arrow-up" viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="#38c172" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
|
<svg class="arrow-up" viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="#38c172" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
|
||||||
<polyline points="6 15 12 9 18 15"></polyline>
|
<polyline points="6 15 12 9 18 15"></polyline>
|
||||||
</svg>
|
</svg>
|
||||||
2.1%
|
{{ dataInfo.finishedRateGrowthRate }}%
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -74,7 +74,14 @@ export default {
|
|||||||
dataInfo: {
|
dataInfo: {
|
||||||
type: Object,
|
type: Object,
|
||||||
required: true,
|
required: true,
|
||||||
default: () => ({ totalOrders: 0, completedThisMonth: 0, completionRate: 0 })
|
default: () => ({
|
||||||
|
totalOrderCount: 0,
|
||||||
|
monthFinishedOrderCount: 0,
|
||||||
|
finishedRate: 0,
|
||||||
|
totalOrderCountGrowthRate: 0,
|
||||||
|
monthFinishedOrderCountGrowthRate: 0,
|
||||||
|
finishedRateGrowthRate: 0,
|
||||||
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,14 +1,17 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="product-sales-chart">
|
<div class="product-sales-chart">
|
||||||
<el-card shadow="hover">
|
<el-card shadow="hover">
|
||||||
<div class="chart-title">产品销量排行</div>
|
<div v-if="!productSales || productSales.length === 0" class="no-data-placeholder">
|
||||||
<div ref="chart" class="chart-container"></div>
|
暂无产品销量数据
|
||||||
|
</div>
|
||||||
|
<div v-show="productSales && productSales.length > 0" ref="chart" class="chart-container"></div>
|
||||||
</el-card>
|
</el-card>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import * as echarts from 'echarts'
|
import * as echarts from 'echarts'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'ProductSales',
|
name: 'ProductSales',
|
||||||
props: {
|
props: {
|
||||||
@@ -18,81 +21,131 @@ export default {
|
|||||||
default: () => []
|
default: () => []
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
data () {
|
data() {
|
||||||
return {
|
return {
|
||||||
chartInstance: null,
|
chartInstance: null
|
||||||
chartOptions: {
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
productSales: {
|
||||||
|
deep: true,
|
||||||
|
handler(newVal) {
|
||||||
|
if (newVal && newVal.length > 0) {
|
||||||
|
// Use nextTick to ensure the DOM is updated before rendering the chart
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.renderChart(newVal)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
// The watcher handles the initial render.
|
||||||
|
// Add resize listener.
|
||||||
|
window.addEventListener('resize', this.handleResize)
|
||||||
|
},
|
||||||
|
beforeDestroy() {
|
||||||
|
// Dispose chart instance and remove listener
|
||||||
|
if (this.chartInstance) {
|
||||||
|
this.chartInstance.dispose()
|
||||||
|
this.chartInstance = null
|
||||||
|
}
|
||||||
|
window.removeEventListener('resize', this.handleResize)
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
renderChart(data) {
|
||||||
|
const chartDom = this.$refs.chart
|
||||||
|
if (!chartDom) return
|
||||||
|
|
||||||
|
// Initialize chart instance if it doesn't exist
|
||||||
|
if (!this.chartInstance) {
|
||||||
|
this.chartInstance = echarts.init(chartDom)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Resize the chart to fit the container, especially after v-show makes it visible
|
||||||
|
this.chartInstance.resize()
|
||||||
|
|
||||||
|
const productNames = data.map(item => item.productName)
|
||||||
|
const salesData = data.map(item => item.totalSales)
|
||||||
|
|
||||||
|
const option = {
|
||||||
|
title: {
|
||||||
|
text: '产品销量排行',
|
||||||
|
left: 'center',
|
||||||
|
textStyle: {
|
||||||
|
color: '#333',
|
||||||
|
fontWeight: 'bold',
|
||||||
|
fontSize: 18
|
||||||
|
}
|
||||||
|
},
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: 'axis',
|
trigger: 'axis',
|
||||||
axisPointer: {
|
axisPointer: {
|
||||||
type: 'shadow'
|
type: 'shadow'
|
||||||
}
|
},
|
||||||
|
formatter: '{b}: {c}件'
|
||||||
},
|
},
|
||||||
grid: {
|
grid: {
|
||||||
left: '10%',
|
left: '3%',
|
||||||
right: '10%',
|
right: '4%',
|
||||||
bottom: '10%',
|
bottom: '3%',
|
||||||
containLabel: true
|
containLabel: true
|
||||||
},
|
},
|
||||||
xAxis: {
|
xAxis: {
|
||||||
type: 'category',
|
type: 'category',
|
||||||
data: []
|
data: productNames,
|
||||||
|
axisLabel: {
|
||||||
|
interval: 0,
|
||||||
|
rotate: 30,
|
||||||
|
color: '#666'
|
||||||
|
}
|
||||||
},
|
},
|
||||||
yAxis: {
|
yAxis: {
|
||||||
type: 'value'
|
type: 'value',
|
||||||
|
axisLine: {
|
||||||
|
show: true
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
type: 'dashed'
|
||||||
|
}
|
||||||
|
}
|
||||||
},
|
},
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
name: '销量',
|
name: '销量',
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
data: [],
|
data: salesData,
|
||||||
barWidth: '40%',
|
barWidth: '60%',
|
||||||
label: {
|
label: {
|
||||||
show: true,
|
show: true,
|
||||||
position: 'top'
|
position: 'top',
|
||||||
|
color: '#333'
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{ offset: 0, color: '#83bff6' },
|
||||||
|
{ offset: 0.5, color: '#188df0' },
|
||||||
|
{ offset: 1, color: '#188df0' }
|
||||||
|
])
|
||||||
},
|
},
|
||||||
emphasis: {
|
emphasis: {
|
||||||
focus: 'series'
|
focus: 'series',
|
||||||
|
itemStyle: {
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{ offset: 0, color: '#2378f7' },
|
||||||
|
{ offset: 0.7, color: '#2378f7' },
|
||||||
|
{ offset: 1, color: '#83bff6' }
|
||||||
|
])
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
}
|
this.chartInstance.setOption(option, true) // Use true to clear previous canvas
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
productSales: {
|
|
||||||
immediate: true,
|
|
||||||
handler(newVal) {
|
|
||||||
this.updateChart()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted () {
|
|
||||||
this.initChart()
|
|
||||||
},
|
|
||||||
beforeDestroy () {
|
|
||||||
if (this.chartInstance) {
|
|
||||||
this.chartInstance.dispose()
|
|
||||||
}
|
|
||||||
window.removeEventListener('resize', this.handleResize)
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
initChart () {
|
|
||||||
const chartDom = this.$refs.chart
|
|
||||||
if (!chartDom) return
|
|
||||||
this.chartInstance = echarts.init(chartDom)
|
|
||||||
this.updateChart()
|
|
||||||
window.addEventListener('resize', this.handleResize)
|
|
||||||
},
|
},
|
||||||
updateChart () {
|
handleResize() {
|
||||||
if (!this.chartInstance) return
|
|
||||||
const dataAxis = this.productSales.map(item => item.productName)
|
|
||||||
const totalData = this.productSales.map(item => item.totalProductCount)
|
|
||||||
this.chartOptions.xAxis.data = dataAxis
|
|
||||||
this.chartOptions.series[0].data = totalData
|
|
||||||
this.chartInstance.setOption(this.chartOptions)
|
|
||||||
},
|
|
||||||
handleResize () {
|
|
||||||
if (this.chartInstance) {
|
if (this.chartInstance) {
|
||||||
this.chartInstance.resize()
|
this.chartInstance.resize()
|
||||||
}
|
}
|
||||||
@@ -106,15 +159,18 @@ export default {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
.chart-title {
|
|
||||||
font-size: 18px;
|
|
||||||
font-weight: bold;
|
|
||||||
margin-bottom: 8px;
|
|
||||||
}
|
|
||||||
.chart-container {
|
.chart-container {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 400px;
|
height: 400px;
|
||||||
}
|
}
|
||||||
|
.no-data-placeholder {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
height: 400px;
|
||||||
|
color: #909399;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
.el-card {
|
.el-card {
|
||||||
border-radius: 16px;
|
border-radius: 16px;
|
||||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
|
||||||
|
|||||||
@@ -1,13 +1,22 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="order-analysis-dashboard">
|
<div
|
||||||
|
class="order-analysis-dashboard"
|
||||||
|
v-loading="loading"
|
||||||
|
>
|
||||||
|
<!-- 顶部操作栏:刷新和定时刷新设置按钮 -->
|
||||||
|
<el-row :gutter="20" class="top-row" style="margin-bottom: 0;">
|
||||||
|
<el-col :span="24" style="display: flex; justify-content: flex-end; align-items: center; margin-bottom: 10px;">
|
||||||
|
<el-button type="primary" icon="el-icon-refresh" @click="handleRefresh">刷新</el-button>
|
||||||
|
<el-button icon="el-icon-setting" style="margin-left: 10px;" @click="drawerVisible = true">定时刷新设置</el-button>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
<!-- 顶部:3 张summary卡片 -->
|
<!-- 顶部:3 张summary卡片 -->
|
||||||
<el-row :gutter="20" class="top-row">
|
<el-row :gutter="20" class="top-row">
|
||||||
<el-col :span="24">
|
<el-col :span="24">
|
||||||
<OrderSummary :data-info="orderSummaryData" />
|
<OrderSummary :data-info="orderSummaryData" />
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
|
<!-- 第一行图表 -->
|
||||||
<!-- 第二行:3 个图表 -->
|
|
||||||
<el-row :gutter="20" class="chart-row">
|
<el-row :gutter="20" class="chart-row">
|
||||||
<el-col :span="8">
|
<el-col :span="8">
|
||||||
<OrderCompletion :completion-rate="orderSummaryData.completionRate" />
|
<OrderCompletion :completion-rate="orderSummaryData.completionRate" />
|
||||||
@@ -16,8 +25,29 @@
|
|||||||
<ProductSales :product-sales="productSalesData" />
|
<ProductSales :product-sales="productSalesData" />
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="8">
|
<el-col :span="8">
|
||||||
|
<CustomerRegion :customer-data="customerClusterData" />
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
|
<!-- 定时刷新设置抽屉 -->
|
||||||
|
<el-drawer
|
||||||
|
title="定时刷新设置"
|
||||||
|
:visible.sync="drawerVisible"
|
||||||
|
direction="rtl"
|
||||||
|
size="350px"
|
||||||
|
>
|
||||||
|
<el-form label-width="100px">
|
||||||
|
<el-form-item label="启用定时刷新">
|
||||||
|
<el-switch v-model="autoRefresh" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="刷新间隔(秒)">
|
||||||
|
<el-input-number v-model="refreshInterval" :min="5" :max="3600" :step="1" :disabled="!autoRefresh" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button type="primary" @click="saveRefreshSetting">保存</el-button>
|
||||||
|
<el-button @click="drawerVisible = false">取消</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</el-drawer>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -25,6 +55,7 @@
|
|||||||
import OrderSummary from './components/OrderSummary.vue'
|
import OrderSummary from './components/OrderSummary.vue'
|
||||||
import OrderCompletion from './components/OrderCompletion.vue'
|
import OrderCompletion from './components/OrderCompletion.vue'
|
||||||
import ProductSales from './components/ProductSales.vue'
|
import ProductSales from './components/ProductSales.vue'
|
||||||
|
import CustomerRegion from './components/CustomerRegion.vue'
|
||||||
import { getDashboardData } from '@/api/wms/order'
|
import { getDashboardData } from '@/api/wms/order'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
@@ -33,6 +64,7 @@ export default {
|
|||||||
OrderSummary,
|
OrderSummary,
|
||||||
OrderCompletion,
|
OrderCompletion,
|
||||||
ProductSales,
|
ProductSales,
|
||||||
|
CustomerRegion,
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
@@ -42,24 +74,93 @@ export default {
|
|||||||
completionRate: 0
|
completionRate: 0
|
||||||
},
|
},
|
||||||
productSalesData: [],
|
productSalesData: [],
|
||||||
materialAnalysisData: {
|
customerClusterData: [],
|
||||||
categories: [],
|
// 新增定时刷新相关数据
|
||||||
usageFrequency: [],
|
drawerVisible: false,
|
||||||
stockQuantity: [],
|
autoRefresh: false,
|
||||||
bundleRate: [],
|
refreshInterval: 30, // 默认30秒
|
||||||
purchaseCycle: [],
|
refreshTimer: null,
|
||||||
yAxisUsageMax: 0
|
loading: false
|
||||||
},
|
|
||||||
customerClusterData: []
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
this.fetchAllData()
|
this.fetchAllData()
|
||||||
|
this.loadRefreshSetting()
|
||||||
|
this.startAutoRefresh()
|
||||||
|
},
|
||||||
|
beforeDestroy() {
|
||||||
|
this.clearAutoRefresh()
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
async fetchAllData() {
|
async fetchAllData() {
|
||||||
const res = await getDashboardData()
|
this.loading = true
|
||||||
console.log(res)
|
try {
|
||||||
|
const res = await getDashboardData()
|
||||||
|
const data = res
|
||||||
|
this.orderSummaryData = {
|
||||||
|
totalOrders: data.orderSummary.totalOrderCount,
|
||||||
|
completedThisMonth: data.orderSummary.monthFinishedOrderCount,
|
||||||
|
completionRate: data.orderSummary.finishedRate,
|
||||||
|
...data.orderSummary
|
||||||
|
}
|
||||||
|
this.productSalesData = data.productRank
|
||||||
|
this.customerClusterData = data.customerRegion
|
||||||
|
this.materialAnalysisData = {
|
||||||
|
categories: data.orderMaterial.map(item => item.materialName),
|
||||||
|
usageFrequency: data.orderMaterial.map(item => item.usedCount),
|
||||||
|
stockQuantity: data.orderMaterial.map(item => item.stockCount),
|
||||||
|
purchaseCycle: data.orderMaterial.map(item => item.purchaseCycle)
|
||||||
|
}
|
||||||
|
} finally {
|
||||||
|
this.loading = false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handleRefresh() {
|
||||||
|
this.fetchAllData()
|
||||||
|
},
|
||||||
|
// 定时刷新相关
|
||||||
|
startAutoRefresh() {
|
||||||
|
this.clearAutoRefresh()
|
||||||
|
if (this.autoRefresh) {
|
||||||
|
this.refreshTimer = setInterval(() => {
|
||||||
|
this.fetchAllData()
|
||||||
|
}, this.refreshInterval * 1000)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
clearAutoRefresh() {
|
||||||
|
if (this.refreshTimer) {
|
||||||
|
clearInterval(this.refreshTimer)
|
||||||
|
this.refreshTimer = null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
saveRefreshSetting() {
|
||||||
|
// 可持久化到localStorage
|
||||||
|
localStorage.setItem('orderDashboardAutoRefresh', JSON.stringify({
|
||||||
|
autoRefresh: this.autoRefresh,
|
||||||
|
refreshInterval: this.refreshInterval
|
||||||
|
}))
|
||||||
|
this.drawerVisible = false
|
||||||
|
this.startAutoRefresh()
|
||||||
|
},
|
||||||
|
loadRefreshSetting() {
|
||||||
|
const setting = localStorage.getItem('orderDashboardAutoRefresh')
|
||||||
|
if (setting) {
|
||||||
|
const { autoRefresh, refreshInterval } = JSON.parse(setting)
|
||||||
|
this.autoRefresh = autoRefresh
|
||||||
|
this.refreshInterval = refreshInterval
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
autoRefresh(val) {
|
||||||
|
if (!val) {
|
||||||
|
this.clearAutoRefresh()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
refreshInterval(val) {
|
||||||
|
if (this.autoRefresh) {
|
||||||
|
this.startAutoRefresh()
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -17,8 +17,8 @@
|
|||||||
@keyup.enter.native="handleQuery"
|
@keyup.enter.native="handleQuery"
|
||||||
/>
|
/>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="销售经理" prop="salesManager">
|
<el-form-item label="owner" prop="salesManager">
|
||||||
<UserSelect v-model="queryParams.salesManager" :multiple="false" placeholder="请选择销售经理" />
|
<el-input v-model="queryParams.owner" :multiple="false" placeholder="请选择销售经理" />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="基础材质" prop="baseMaterialId">
|
<el-form-item label="基础材质" prop="baseMaterialId">
|
||||||
<CategorySelect v-model="queryParams.baseMaterialId" categoryType="base_material" placeholder="请选择基础材质分类" clearable />
|
<CategorySelect v-model="queryParams.baseMaterialId" categoryType="base_material" placeholder="请选择基础材质分类" clearable />
|
||||||
@@ -172,8 +172,8 @@
|
|||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="12">
|
<el-col :span="12">
|
||||||
<el-form-item label="销售经理" prop="salesManager">
|
<el-form-item label="负责人" prop="owner">
|
||||||
<UserSelect v-model="form.salesManager" :multiple="false" placeholder="请选择销售经理" />
|
<el-input v-model="form.owner" :multiple="false" placeholder="请选择负责人" />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="12">
|
<el-col :span="12">
|
||||||
|
|||||||
@@ -10,7 +10,7 @@
|
|||||||
/>
|
/>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="负责人" prop="owner">
|
<el-form-item label="负责人" prop="owner">
|
||||||
<UserSelect v-model="queryParams.owner" :multiple="false" placeholder="请选择负责人" clearable />
|
<el-input v-model="queryParams.owner" :multiple="false" placeholder="请选择负责人" clearable />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="关联订单ID" prop="orderId">
|
<el-form-item label="关联订单ID" prop="orderId">
|
||||||
<el-input
|
<el-input
|
||||||
@@ -82,7 +82,7 @@
|
|||||||
<el-table-column label="采购计划编号" align="center" prop="planCode" />
|
<el-table-column label="采购计划编号" align="center" prop="planCode" />
|
||||||
<el-table-column label="负责人" align="center" prop="owner" />
|
<el-table-column label="负责人" align="center" prop="owner" />
|
||||||
<!-- <el-table-column label="关联订单ID" align="center" prop="orderId" /> -->
|
<!-- <el-table-column label="关联订单ID" align="center" prop="orderId" /> -->
|
||||||
<el-table-column label="状态" align="center" prop="status" />
|
<!-- <el-table-column label="状态" align="center" prop="status" /> -->
|
||||||
<el-table-column label="备注" align="center" prop="remark" />
|
<el-table-column label="备注" align="center" prop="remark" />
|
||||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||||
<template slot-scope="scope">
|
<template slot-scope="scope">
|
||||||
@@ -123,7 +123,7 @@
|
|||||||
<el-input v-model="form.planCode" placeholder="请输入采购计划编号" />
|
<el-input v-model="form.planCode" placeholder="请输入采购计划编号" />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="负责人" prop="owner">
|
<el-form-item label="负责人" prop="owner">
|
||||||
<UserSelect v-model="form.owner" :multiple="false" placeholder="请选择负责人" />
|
<el-input v-model="form.owner" :multiple="false" placeholder="请选择负责人" />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="关联订单ID" prop="orderId">
|
<el-form-item label="关联订单ID" prop="orderId">
|
||||||
<el-input v-model="form.orderId" placeholder="请输入关联订单ID" />
|
<el-input v-model="form.orderId" placeholder="请输入关联订单ID" />
|
||||||
@@ -158,7 +158,7 @@
|
|||||||
/>
|
/>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="销售经理" prop="salesManager">
|
<el-form-item label="销售经理" prop="salesManager">
|
||||||
<UserSelect v-model="orderQueryParams.salesManager" :multiple="false" placeholder="请选择销售经理" clearable />
|
<el-input v-model="orderQueryParams.salesManager" :multiple="false" placeholder="请选择销售经理" clearable />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="订单状态" prop="orderStatus">
|
<el-form-item label="订单状态" prop="orderStatus">
|
||||||
<el-select v-model="orderQueryParams.orderStatus" placeholder="请选择订单状态" clearable>
|
<el-select v-model="orderQueryParams.orderStatus" placeholder="请选择订单状态" clearable>
|
||||||
|
|||||||
@@ -8,7 +8,7 @@
|
|||||||
<el-input v-model="mainForm.planCode" placeholder="请输入计划编号" style="width: 200px;" />
|
<el-input v-model="mainForm.planCode" placeholder="请输入计划编号" style="width: 200px;" />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="负责人" prop="owner">
|
<el-form-item label="负责人" prop="owner">
|
||||||
<UserSelect v-model="mainForm.owner" :multiple="false" placeholder="请选择负责人" style="width: 200px;" />
|
<el-input v-model="mainForm.owner" :multiple="false" placeholder="请选择负责人" style="width: 200px;" />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="备注" prop="remark">
|
<el-form-item label="备注" prop="remark">
|
||||||
<el-input v-model="mainForm.remark" placeholder="请输入备注" style="width: 300px;" />
|
<el-input v-model="mainForm.remark" placeholder="请输入备注" style="width: 300px;" />
|
||||||
@@ -77,7 +77,7 @@
|
|||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column prop="owner" label="负责人">
|
<el-table-column prop="owner" label="负责人">
|
||||||
<template #default="scope">
|
<template #default="scope">
|
||||||
<UserSelect v-model="scope.row.owner" :multiple="false" placeholder="请选择负责人" size="small" />
|
<el-input v-model="scope.row.owner" :multiple="false" placeholder="请选择负责人" size="small" />
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column prop="remark" label="备注">
|
<el-table-column prop="remark" label="备注">
|
||||||
|
|||||||
@@ -132,7 +132,7 @@
|
|||||||
<RawMaterialSelect v-model="form.rawMaterialId" placeholder="请选择原材料" @change="onRawMaterialChange" />
|
<RawMaterialSelect v-model="form.rawMaterialId" placeholder="请选择原材料" @change="onRawMaterialChange" />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="负责人" prop="owner">
|
<el-form-item label="负责人" prop="owner">
|
||||||
<UserSelect v-model="form.owner" :multiple="false" placeholder="请选择负责人" />
|
<el-input v-model="form.owner" :multiple="false" placeholder="请选择负责人" />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="计划采购数量" prop="quantity">
|
<el-form-item label="计划采购数量" prop="quantity">
|
||||||
<el-input v-model="form.quantity" placeholder="请输入计划采购数量" />
|
<el-input v-model="form.quantity" placeholder="请输入计划采购数量" />
|
||||||
|
|||||||
@@ -113,7 +113,6 @@
|
|||||||
|
|
||||||
<el-table v-loading="loading" :data="rawMaterialList" @selection-change="handleSelectionChange">
|
<el-table v-loading="loading" :data="rawMaterialList" @selection-change="handleSelectionChange">
|
||||||
<el-table-column type="selection" width="55" align="center" />
|
<el-table-column type="selection" width="55" align="center" />
|
||||||
<el-table-column label="主键ID" align="center" prop="rawMaterialId" v-if="true"/>
|
|
||||||
<el-table-column label="原材料编号" align="center" prop="rawMaterialCode" />
|
<el-table-column label="原材料编号" align="center" prop="rawMaterialCode" />
|
||||||
<el-table-column label="原材料名称" align="center" prop="rawMaterialName" />
|
<el-table-column label="原材料名称" align="center" prop="rawMaterialName" />
|
||||||
<el-table-column label="计量单位" align="center" prop="unit" />
|
<el-table-column label="计量单位" align="center" prop="unit" />
|
||||||
|
|||||||
@@ -12,6 +12,7 @@ import com.klp.domain.WmsPurchasePlanDetail;
|
|||||||
import com.klp.domain.vo.WmsOrderDetailVo;
|
import com.klp.domain.vo.WmsOrderDetailVo;
|
||||||
import com.klp.domain.vo.WmsPurchasePlanDetailVo;
|
import com.klp.domain.vo.WmsPurchasePlanDetailVo;
|
||||||
import com.klp.mapper.WmsPurchasePlanDetailMapper;
|
import com.klp.mapper.WmsPurchasePlanDetailMapper;
|
||||||
|
import com.klp.mapper.WmsRawMaterialMapper;
|
||||||
import com.klp.service.*;
|
import com.klp.service.*;
|
||||||
import lombok.RequiredArgsConstructor;
|
import lombok.RequiredArgsConstructor;
|
||||||
import org.springframework.beans.BeanUtils;
|
import org.springframework.beans.BeanUtils;
|
||||||
@@ -47,6 +48,9 @@ public class WmsPurchasePlanServiceImpl implements IWmsPurchasePlanService {
|
|||||||
@Resource
|
@Resource
|
||||||
private WmsPurchasePlanDetailMapper wmsPurchasePlanDetailMapper;
|
private WmsPurchasePlanDetailMapper wmsPurchasePlanDetailMapper;
|
||||||
|
|
||||||
|
@Resource
|
||||||
|
private WmsRawMaterialMapper wmsRawMaterialMapper;
|
||||||
|
|
||||||
@Transactional
|
@Transactional
|
||||||
@Override
|
@Override
|
||||||
public Boolean insertWithDetails(WmsPurchasePlanVo planVo) {
|
public Boolean insertWithDetails(WmsPurchasePlanVo planVo) {
|
||||||
@@ -80,6 +84,8 @@ public class WmsPurchasePlanServiceImpl implements IWmsPurchasePlanService {
|
|||||||
vo.setRawMaterialId(bom.getRawMaterialId());
|
vo.setRawMaterialId(bom.getRawMaterialId());
|
||||||
vo.setQuantity(vo.getQuantity() == null ? needQty : vo.getQuantity().add(needQty));
|
vo.setQuantity(vo.getQuantity() == null ? needQty : vo.getQuantity().add(needQty));
|
||||||
vo.setUnit(bom.getUnit());
|
vo.setUnit(bom.getUnit());
|
||||||
|
vo.setRawMaterialName(wmsRawMaterialMapper.selectById(bom.getRawMaterialId()).getRawMaterialName());
|
||||||
|
vo.setRawMaterialCode(wmsRawMaterialMapper.selectById(bom.getRawMaterialId()).getRawMaterialCode());
|
||||||
materialMap.put(bom.getRawMaterialId(), vo);
|
materialMap.put(bom.getRawMaterialId(), vo);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user