DeXun/klp-oa
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

扫码枪结果读取改用网页

Browse Source
This commit is contained in:
砂糖
2025-08-23 10:35:43 +08:00
parent ef15eaa853
commit f00c31e606
4 changed files with 986 additions and 424 deletions
Download Patch File Download Diff File Expand all files Collapse all files

262
klp-ui/src/views/index.vue
View File

@@ -73,153 +73,14 @@ export default {
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],
},
{
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],
// },
{
title: '系统状态',
value: '正常',
icon: 'fas fa-server',
color: 'text-purple-500',
chartData: [50, 30, 40, 50, 60, 70, 60]
}
],
businessModules: [
{
title: '仓库管理',
description: '库存管理与货位管理',
icon: 'fas fa-warehouse',
bgColor: 'bg-blue-500',
link: '/wms/stock'
},
{
title: '订单处理',
description: '订单审核与发货管理',
icon: 'fas fa-clipboard-check',
bgColor: 'bg-green-500',
link: '/shop/order'
},
{
title: '人员管理',
description: '员工信息与权限管理',
icon: 'fas fa-users',
bgColor: 'bg-yellow-500',
link: '/system/user'
},
{
title: '订单分析',
description: '订单数据可视化分析',
icon: 'fas fa-chart-line',
bgColor: 'bg-purple-500',
link: '/shop/order/dashboard'
},
{
title: '出库入库',
description: '出库入库管理',
icon: 'fas fa-tools',
bgColor: 'bg-red-500',
link: '/wms/stockIo'
},
{
title: '系统设置',
description: '系统参数配置管理',
icon: 'fas fa-cog',
bgColor: 'bg-indigo-500',
link: '/system/menu'
},
// {
// title: 'WebSocket测试',
// description: '实时通信功能测试',
// icon: 'fas fa-comments',
// bgColor: 'bg-teal-500',
// link: '/websocket-test.html'
// }
],
resourceCharts: [
{ name: 'CPU使用率', value: 65 },
{ name: '内存使用率', value: 45 },
{ name: '存储使用率', value: 78 },
{ name: '网络使用率', value: 32 }
],
operationRecords: [
{
action: '张经理审批了采购订单 #38271',
time: '10分钟前',
icon: 'fas fa-check',
bgColor: 'bg-green-500'
},
{
action: '李工程师更新了系统配置',
time: '25分钟前',
icon: 'fas fa-cog',
bgColor: 'bg-blue-500'
},
{
action: '王主管确认了入库单 #92731',
time: '40分钟前',
icon: 'fas fa-box',
bgColor: 'bg-yellow-500'
},
{
action: '系统完成了日常数据备份',
time: '1小时前',
icon: 'fas fa-database',
bgColor: 'bg-purple-500'
},
{
action: '陈经理导出了月度报表',
time: '2小时前',
icon: 'fas fa-file-export',
bgColor: 'bg-indigo-500'
}
]
};
},
mounted() {
this.initCharts();
this.initResourceCharts();
this.avatar = this.$store.getters.avatar;
this.name = this.$store.getters.name;
this.greeting = this.getGreeting();
},
methods: {
getIconColor(color) {
// 统一映射为自定义 class
switch (color) {
case 'text-blue-500': return 'icon-blue';
case 'text-green-500': return 'icon-green';
case 'text-yellow-500': return 'icon-yellow';
case 'text-purple-500': return 'icon-purple';
default: return '';
}
},
handleLink(item) {
// 如果是外部链接（以http开头或.html结尾），则在新窗口打开
if (item.startsWith('http') || item.endsWith('.html')) {
window.open(item, '_blank');
} else {
this.$router.push(item);
}
},
getGreeting() {
const hour = new Date().getHours();
if (hour < 6) return '凌晨好';
@@ -230,129 +91,6 @@ export default {
if (hour < 21) return '晚上好';
return '夜深了';
},
getModuleBg(bgColor) {
switch (bgColor) {
case 'bg-blue-500': return 'bg-blue';
case 'bg-green-500': return 'bg-green';
case 'bg-yellow-500': return 'bg-yellow';
case 'bg-purple-500': return 'bg-purple';
case 'bg-red-500': return 'bg-red';
case 'bg-indigo-500': return 'bg-indigo';
case 'bg-teal-500': return 'bg-teal';
default: return '';
}
},
initCharts() {
this.$nextTick(() => {
const charts = document.querySelectorAll('.chart-inner');
this.dataCards.forEach((card, index) => {
const chart = echarts.init(charts[index]);
const option = {
animation: false,
grid: {
left: 0,
right: 0,
top: 0,
bottom: 0
},
xAxis: {
type: 'category',
show: false
},
yAxis: {
type: 'value',
show: false
},
series: [{
data: card.chartData,
type: 'line',
smooth: true,
showSymbol: false,
lineStyle: {
color: this.getColor(index)
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: this.getColor(index, 0.2)
}, {
offset: 1,
color: this.getColor(index, 0.1)
}])
}
}]
};
chart.setOption(option);
});
});
},
initResourceCharts() {
this.$nextTick(() => {
const charts = document.querySelectorAll('.monitor-resource-chart .chart-inner');
this.resourceCharts.forEach((item, index) => {
const chart = echarts.init(charts[index]);
const option = {
animation: false,
series: [{
type: 'gauge',
startAngle: 90,
endAngle: -270,
pointer: {
show: false
},
progress: {
show: true,
overlap: false,
roundCap: true,
clip: false,
itemStyle: {
color: this.getColor(index)
}
},
axisLine: {
lineStyle: {
width: 18
}
},
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
title: {
offsetCenter: [0, '70%'],
fontSize: 14,
color: '#666'
},
detail: {
offsetCenter: [0, '0%'],
valueAnimation: true,
formatter: '{value}% ',
color: '#666'
},
data: [{
value: item.value,
name: item.name
}]
}]
};
chart.setOption(option);
});
});
},
getColor(index, alpha = 1) {
const colors = [
`rgba(59, 130, 246, ${alpha})`,
`rgba(34, 197, 94, ${alpha})`,
`rgba(234, 179, 8, ${alpha})`,
`rgba(168, 85, 247, ${alpha})`
];
return colors[index % colors.length];
}
}
};
</script>