变更首页
This commit is contained in:
砂糖
@@ -70,7 +70,7 @@ export const constantRoutes = [
|
||||
path: 'index',
|
||||
component: () => import('@/views/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,
|
||||
avatar: state => state.user.avatar,
|
||||
name: state => state.user.name,
|
||||
avatar: state => state.user.avatar,
|
||||
introduction: state => state.user.introduction,
|
||||
roles: state => state.user.roles,
|
||||
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>
|
||||
<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 v-for="(card, index) in dataCards" :key="index"
|
||||
@@ -22,21 +30,16 @@
|
||||
<!-- 业务功能区 -->
|
||||
<div class="business-modules">
|
||||
<div v-for="(module, index) in businessModules" :key="index"
|
||||
class="business-module">
|
||||
<div class="business-module-header">
|
||||
<div :class="['business-module-icon', getModuleBg(module.bgColor)]">
|
||||
<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>
|
||||
class="business-module" @click="handleLink(module.link)">
|
||||
<div :class="['business-module-icon', getModuleBg(module.bgColor)]">
|
||||
<i :class="module.icon"></i>
|
||||
</div>
|
||||
<h3 class="business-module-title">{{ module.title }}</h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 监控面板 -->
|
||||
<div class="monitor-panel">
|
||||
<!-- <div class="monitor-panel">
|
||||
<div class="monitor-resource">
|
||||
<h3 class="monitor-title">系统资源监控</h3>
|
||||
<div class="monitor-resource-charts">
|
||||
@@ -60,38 +63,48 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<!-- 全部应用 -->
|
||||
<AllApplications />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts';
|
||||
import AllApplications from '@/views/components/AllApplications.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
AllApplications
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
avatar: '',
|
||||
name: '',
|
||||
greeting: '',
|
||||
dataCards: [
|
||||
{
|
||||
title: '订单总量',
|
||||
value: '2,384',
|
||||
icon: 'fas fa-shopping-cart',
|
||||
color: 'text-blue-500',
|
||||
chartData: [30, 40, 20, 50, 40, 60, 70]
|
||||
chartData: [30, 40, 20, 50, 40, 60, 70],
|
||||
},
|
||||
{
|
||||
title: '库存总量',
|
||||
value: '12,857',
|
||||
icon: 'fas fa-box',
|
||||
color: 'text-green-500',
|
||||
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]
|
||||
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: '正常',
|
||||
@@ -105,37 +118,43 @@ export default {
|
||||
title: '仓库管理',
|
||||
description: '库存管理与货位管理',
|
||||
icon: 'fas fa-warehouse',
|
||||
bgColor: 'bg-blue-500'
|
||||
bgColor: 'bg-blue-500',
|
||||
link: '/wms/stock'
|
||||
},
|
||||
{
|
||||
title: '订单处理',
|
||||
description: '订单审核与发货管理',
|
||||
icon: 'fas fa-clipboard-check',
|
||||
bgColor: 'bg-green-500'
|
||||
bgColor: 'bg-green-500',
|
||||
link: '/wms/order'
|
||||
},
|
||||
{
|
||||
title: '人员管理',
|
||||
description: '员工信息与权限管理',
|
||||
icon: 'fas fa-users',
|
||||
bgColor: 'bg-yellow-500'
|
||||
bgColor: 'bg-yellow-500',
|
||||
link: '/system/user'
|
||||
},
|
||||
{
|
||||
title: '数据分析',
|
||||
description: '业务数据可视化分析',
|
||||
title: '订单分析',
|
||||
description: '订单数据可视化分析',
|
||||
icon: 'fas fa-chart-line',
|
||||
bgColor: 'bg-purple-500'
|
||||
bgColor: 'bg-purple-500',
|
||||
link: '/wms/order/dashboard'
|
||||
},
|
||||
{
|
||||
title: '设备管理',
|
||||
description: '仓储设备维护管理',
|
||||
title: '出库入库',
|
||||
description: '出库入库管理',
|
||||
icon: 'fas fa-tools',
|
||||
bgColor: 'bg-red-500'
|
||||
bgColor: 'bg-red-500',
|
||||
link: '/wms/stcokIo'
|
||||
},
|
||||
{
|
||||
title: '系统设置',
|
||||
description: '系统参数配置管理',
|
||||
icon: 'fas fa-cog',
|
||||
bgColor: 'bg-indigo-500'
|
||||
bgColor: 'bg-indigo-500',
|
||||
link: '/system/setting'
|
||||
}
|
||||
],
|
||||
resourceCharts: [
|
||||
@@ -181,6 +200,9 @@ export default {
|
||||
mounted() {
|
||||
this.initCharts();
|
||||
this.initResourceCharts();
|
||||
this.avatar = this.$store.getters.avatar;
|
||||
this.name = this.$store.getters.name;
|
||||
this.greeting = this.getGreeting();
|
||||
},
|
||||
methods: {
|
||||
getIconColor(color) {
|
||||
@@ -193,6 +215,19 @@ export default {
|
||||
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) {
|
||||
switch (bgColor) {
|
||||
case 'bg-blue-500': return 'bg-blue';
|
||||
@@ -376,37 +411,36 @@ export default {
|
||||
|
||||
.business-modules {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
gap: 24px;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
.business-module {
|
||||
padding: 24px;
|
||||
border-radius: 16px;
|
||||
background: linear-gradient(135deg, #fff 0%, #f3f4f6 100%);
|
||||
box-shadow: 0 4px 24px 0 rgba(0,0,0,0.06);
|
||||
border: 1px solid rgba(255,255,255,0.2);
|
||||
transition: box-shadow 0.2s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 16px;
|
||||
border-radius: 12px;
|
||||
background: #fff;
|
||||
box-shadow: 0 2px 12px 0 rgba(0,0,0,0.05);
|
||||
transition: all 0.2s;
|
||||
cursor: pointer;
|
||||
}
|
||||
.business-module:hover {
|
||||
box-shadow: 0 8px 32px 0 rgba(0,0,0,0.10);
|
||||
}
|
||||
.business-module-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
box-shadow: 0 4px 16px 0 rgba(0,0,0,0.1);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
.business-module-icon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 50%;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
margin-right: 12px;
|
||||
}
|
||||
.business-module-icon-inner {
|
||||
font-size: 24px;
|
||||
.business-module-icon i {
|
||||
font-size: 20px;
|
||||
color: #fff;
|
||||
}
|
||||
.bg-blue { background: #3b82f6; }
|
||||
@@ -416,13 +450,9 @@ export default {
|
||||
.bg-red { background: #ef4444; }
|
||||
.bg-indigo { background: #6366f1; }
|
||||
.business-module-title {
|
||||
font-size: 18px;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.business-module-desc {
|
||||
color: #6b7280;
|
||||
font-size: 14px;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.monitor-panel {
|
||||
@@ -485,5 +515,41 @@ export default {
|
||||
font-size: 12px;
|
||||
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>
|
||||
|
||||
|
||||
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="summary-title">总订单数</div>
|
||||
<div class="summary-value">
|
||||
<strong>{{ dataInfo.totalOrders.toLocaleString() }}</strong>
|
||||
<strong>{{ dataInfo.totalOrderCount.toLocaleString() }}</strong>
|
||||
<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">
|
||||
<polyline points="6 15 12 9 18 15"></polyline>
|
||||
</svg>
|
||||
12.5%
|
||||
{{ dataInfo.totalOrderCountGrowthRate }}%
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -28,12 +28,12 @@
|
||||
<div class="content-left">
|
||||
<div class="summary-title">本月完成订单</div>
|
||||
<div class="summary-value">
|
||||
<strong>{{ dataInfo.completedThisMonth.toLocaleString() }}</strong>
|
||||
<strong>{{ dataInfo.monthFinishedOrderCount.toLocaleString() }}</strong>
|
||||
<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">
|
||||
<polyline points="6 15 12 9 18 15"></polyline>
|
||||
</svg>
|
||||
8.3%
|
||||
{{ dataInfo.monthFinishedOrderCountGrowthRate }}%
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -49,12 +49,12 @@
|
||||
<div class="content-left">
|
||||
<div class="summary-title">订单完成度</div>
|
||||
<div class="summary-value">
|
||||
<strong>{{ dataInfo.completionRate.toFixed(1) }}%</strong>
|
||||
<strong>{{ dataInfo.finishedRate.toFixed(1) }}%</strong>
|
||||
<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">
|
||||
<polyline points="6 15 12 9 18 15"></polyline>
|
||||
</svg>
|
||||
2.1%
|
||||
{{ dataInfo.finishedRateGrowthRate }}%
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -74,7 +74,14 @@ export default {
|
||||
dataInfo: {
|
||||
type: Object,
|
||||
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>
|
||||
<div class="product-sales-chart">
|
||||
<el-card shadow="hover">
|
||||
<div class="chart-title">产品销量排行</div>
|
||||
<div ref="chart" class="chart-container"></div>
|
||||
<div v-if="!productSales || productSales.length === 0" class="no-data-placeholder">
|
||||
暂无产品销量数据
|
||||
</div>
|
||||
<div v-show="productSales && productSales.length > 0" ref="chart" class="chart-container"></div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
|
||||
export default {
|
||||
name: 'ProductSales',
|
||||
props: {
|
||||
@@ -18,81 +21,131 @@ export default {
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
data () {
|
||||
data() {
|
||||
return {
|
||||
chartInstance: null,
|
||||
chartOptions: {
|
||||
chartInstance: null
|
||||
}
|
||||
},
|
||||
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: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
formatter: '{b}: {c}件'
|
||||
},
|
||||
grid: {
|
||||
left: '10%',
|
||||
right: '10%',
|
||||
bottom: '10%',
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: []
|
||||
data: productNames,
|
||||
axisLabel: {
|
||||
interval: 0,
|
||||
rotate: 30,
|
||||
color: '#666'
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
type: 'value',
|
||||
axisLine: {
|
||||
show: true
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type: 'dashed'
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '销量',
|
||||
type: 'bar',
|
||||
data: [],
|
||||
barWidth: '40%',
|
||||
data: salesData,
|
||||
barWidth: '60%',
|
||||
label: {
|
||||
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: {
|
||||
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' }
|
||||
])
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
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)
|
||||
this.chartInstance.setOption(option, true) // Use true to clear previous canvas
|
||||
},
|
||||
updateChart () {
|
||||
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 () {
|
||||
handleResize() {
|
||||
if (this.chartInstance) {
|
||||
this.chartInstance.resize()
|
||||
}
|
||||
@@ -106,15 +159,18 @@ export default {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.chart-title {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.chart-container {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
}
|
||||
.no-data-placeholder {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 400px;
|
||||
color: #909399;
|
||||
font-size: 16px;
|
||||
}
|
||||
.el-card {
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
|
||||
|
||||
@@ -1,13 +1,22 @@
|
||||
<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卡片 -->
|
||||
<el-row :gutter="20" class="top-row">
|
||||
<el-col :span="24">
|
||||
<OrderSummary :data-info="orderSummaryData" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 第二行：3 个图表 -->
|
||||
<!-- 第一行图表 -->
|
||||
<el-row :gutter="20" class="chart-row">
|
||||
<el-col :span="8">
|
||||
<OrderCompletion :completion-rate="orderSummaryData.completionRate" />
|
||||
@@ -16,8 +25,29 @@
|
||||
<ProductSales :product-sales="productSalesData" />
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<CustomerRegion :customer-data="customerClusterData" />
|
||||
</el-col>
|
||||
</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>
|
||||
</template>
|
||||
|
||||
@@ -25,6 +55,7 @@
|
||||
import OrderSummary from './components/OrderSummary.vue'
|
||||
import OrderCompletion from './components/OrderCompletion.vue'
|
||||
import ProductSales from './components/ProductSales.vue'
|
||||
import CustomerRegion from './components/CustomerRegion.vue'
|
||||
import { getDashboardData } from '@/api/wms/order'
|
||||
|
||||
export default {
|
||||
@@ -33,6 +64,7 @@ export default {
|
||||
OrderSummary,
|
||||
OrderCompletion,
|
||||
ProductSales,
|
||||
CustomerRegion,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@@ -42,24 +74,93 @@ export default {
|
||||
completionRate: 0
|
||||
},
|
||||
productSalesData: [],
|
||||
materialAnalysisData: {
|
||||
categories: [],
|
||||
usageFrequency: [],
|
||||
stockQuantity: [],
|
||||
bundleRate: [],
|
||||
purchaseCycle: [],
|
||||
yAxisUsageMax: 0
|
||||
},
|
||||
customerClusterData: []
|
||||
customerClusterData: [],
|
||||
// 新增定时刷新相关数据
|
||||
drawerVisible: false,
|
||||
autoRefresh: false,
|
||||
refreshInterval: 30, // 默认30秒
|
||||
refreshTimer: null,
|
||||
loading: false
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.fetchAllData()
|
||||
this.loadRefreshSetting()
|
||||
this.startAutoRefresh()
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.clearAutoRefresh()
|
||||
},
|
||||
methods: {
|
||||
async fetchAllData() {
|
||||
const res = await getDashboardData()
|
||||
console.log(res)
|
||||
this.loading = true
|
||||
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()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user