测试
This commit is contained in:
砂糖
@@ -42,3 +42,11 @@ export function delOrder(orderId) {
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
|
||||
// dashboard
|
||||
export function getDashboardData() {
|
||||
return request({
|
||||
url: '/wms/product/dashboard/overview',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
112
klp-ui/src/components/KLPService/UserSelect/index.vue
Normal file
112
klp-ui/src/components/KLPService/UserSelect/index.vue
Normal file
@@ -0,0 +1,112 @@
|
||||
<template>
|
||||
<el-select
|
||||
v-model="selectedValue"
|
||||
:multiple="multiple"
|
||||
filterable
|
||||
remote
|
||||
:remote-method="handleSearch"
|
||||
:loading="loading"
|
||||
:placeholder="placeholder"
|
||||
style="width: 100%"
|
||||
@change="handleChange"
|
||||
:clearable="clearable"
|
||||
>
|
||||
<el-option
|
||||
v-for="user in filteredUsers"
|
||||
:key="user.userId"
|
||||
:label="`${user.nickName}（${user.dept && user.dept.deptName ? user.dept.deptName : '无部门'}）`"
|
||||
:value="user.userId"
|
||||
>
|
||||
<span>{{ user.nickName }}</span>
|
||||
<span style="color: #999; font-size: 12px; margin-left: 8px;">{{ user.dept && user.dept.deptName ? user.dept.deptName : '无部门' }}</span>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { selectUser } from '@/api/system/user'
|
||||
|
||||
export default {
|
||||
name: 'UserSelect',
|
||||
props: {
|
||||
value: {
|
||||
type: [String, Number, Array],
|
||||
default: null
|
||||
},
|
||||
multiple: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: '请选择用户'
|
||||
},
|
||||
clearable: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
userList: [],
|
||||
loading: false,
|
||||
searchKeyword: '',
|
||||
filteredUsers: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
selectedValue: {
|
||||
get() {
|
||||
return this.value
|
||||
},
|
||||
set(val) {
|
||||
this.$emit('input', val)
|
||||
this.$emit('change', val)
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
searchKeyword(val) {
|
||||
this.filterUsers(val)
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.fetchUsers()
|
||||
},
|
||||
methods: {
|
||||
fetchUsers() {
|
||||
this.loading = true
|
||||
selectUser({}).then(res => {
|
||||
this.userList = res.data || res.rows || []
|
||||
this.filteredUsers = this.userList
|
||||
this.loading = false
|
||||
}).catch(() => {
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
handleSearch(query) {
|
||||
this.searchKeyword = query
|
||||
},
|
||||
filterUsers(keyword) {
|
||||
if (!keyword) {
|
||||
this.filteredUsers = this.userList
|
||||
} else {
|
||||
const lower = keyword.toLowerCase()
|
||||
this.filteredUsers = this.userList.filter(user => {
|
||||
return (
|
||||
(user.nickName && user.nickName.toLowerCase().includes(lower)) ||
|
||||
(user.dept && user.dept.deptName && user.dept.deptName.toLowerCase().includes(lower))
|
||||
)
|
||||
})
|
||||
}
|
||||
},
|
||||
handleChange(val) {
|
||||
this.$emit('input', val)
|
||||
this.$emit('change', val)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
@@ -1,191 +1,489 @@
|
||||
<template>
|
||||
<div class="app-container home">
|
||||
<el-row :gutter="20">
|
||||
<el-col :sm="24" :lg="12" style="padding-left: 20px">
|
||||
<h2>RuoYi-Vue-Plus后台管理框架</h2>
|
||||
<p>
|
||||
RuoYi-Vue-Plus 是基于 RuoYi-Vue 针对 分布式集群 场景升级(不兼容原框架)
|
||||
<br/>
|
||||
* 前端开发框架 Vue、Element UI<br/>
|
||||
* 后端开发框架 Spring Boot<br/>
|
||||
* 容器框架 Undertow 基于 XNIO 的高性能容器<br/>
|
||||
* 权限认证框架 Sa-Token、Jwt 支持多终端认证系统<br/>
|
||||
* 关系数据库 MySQL 适配 8.X 最低 5.7<br/>
|
||||
* 关系数据库 Oracle 适配 11g 12c<br/>
|
||||
* 关系数据库 PostgreSQL 适配 13 14<br/>
|
||||
* 关系数据库 SQLServer 适配 2017 2019<br/>
|
||||
* 缓存数据库 Redis 适配 6.X 最低 4.X<br/>
|
||||
* 数据库框架 Mybatis-Plus 快速 CRUD 增加开发效率<br/>
|
||||
* 数据库框架 p6spy 更强劲的 SQL 分析<br/>
|
||||
* 多数据源框架 dynamic-datasource 支持主从与多种类数据库异构<br/>
|
||||
* 序列化框架 Jackson 统一使用 jackson 高效可靠<br/>
|
||||
* Redis客户端 Redisson 性能强劲、API丰富<br/>
|
||||
* 分布式限流 Redisson 全局、请求IP、集群ID 多种限流<br/>
|
||||
* 分布式锁 Lock4j 注解锁、工具锁 多种多样<br/>
|
||||
* 分布式幂等 Redisson 拦截重复提交<br/>
|
||||
* 分布式链路追踪 SkyWalking 支持链路追踪、网格分析、度量聚合、可视化<br/>
|
||||
* 分布式任务调度 Xxl-Job 高性能 高可靠 易扩展<br/>
|
||||
* 分布式文件存储 Minio 本地存储<br/>
|
||||
* 分布式云存储 七牛、阿里、腾讯 云存储<br/>
|
||||
* 监控框架 SpringBoot-Admin 全方位服务监控<br/>
|
||||
* 校验框架 Validation 增强接口安全性 严谨性<br/>
|
||||
* Excel框架 Alibaba EasyExcel 性能优异 扩展性强<br/>
|
||||
* 文档框架 SpringDoc、javadoc 无注解零入侵基于java注释<br/>
|
||||
* 工具类框架 Hutool、Lombok 减少代码冗余 增加安全性<br/>
|
||||
* 代码生成器 适配MP、SpringDoc规范化代码 一键生成前后端代码<br/>
|
||||
* 部署方式 Docker 容器编排 一键部署业务集群<br/>
|
||||
* 国际化 SpringMessage Spring标准国际化方案<br/>
|
||||
</p>
|
||||
<p>
|
||||
<b>当前版本:</b> <span>v{{ version }}</span>
|
||||
</p>
|
||||
<p>
|
||||
<el-tag type="danger">¥免费开源</el-tag>
|
||||
</p>
|
||||
<p>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="mini"
|
||||
icon="el-icon-cloudy"
|
||||
plain
|
||||
@click="goTarget('https://gitee.com/dromara/RuoYi-Vue-Plus')"
|
||||
>访问码云</el-button
|
||||
>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="mini"
|
||||
icon="el-icon-cloudy"
|
||||
plain
|
||||
@click="goTarget('https://github.com/dromara/RuoYi-Vue-Plus')"
|
||||
>访问GitHub</el-button
|
||||
>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="mini"
|
||||
icon="el-icon-cloudy"
|
||||
plain
|
||||
@click="goTarget('https://gitee.com/dromara/RuoYi-Vue-Plus/wikis/pages?sort_id=4106467&doc_id=1469725')"
|
||||
>更新日志</el-button
|
||||
>
|
||||
</p>
|
||||
</el-col>
|
||||
<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->
|
||||
|
||||
<el-col :sm="24" :lg="12" style="padding-left: 50px">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<h2>技术选型</h2>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="6">
|
||||
<h4>后端技术</h4>
|
||||
<ul>
|
||||
<li>SpringBoot</li>
|
||||
<li>Sa-Token</li>
|
||||
<li>JWT</li>
|
||||
<li>MyBatis</li>
|
||||
<li>Druid</li>
|
||||
<li>Jackson</li>
|
||||
<li>...</li>
|
||||
</ul>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<h4>前端技术</h4>
|
||||
<ul>
|
||||
<li>Vue</li>
|
||||
<li>Vuex</li>
|
||||
<li>Element-ui</li>
|
||||
<li>Axios</li>
|
||||
<li>Sass</li>
|
||||
<li>Quill</li>
|
||||
<li>...</li>
|
||||
</ul>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-divider />
|
||||
<template>
|
||||
<div class="dashboard-root">
|
||||
<!-- 数据概览区 -->
|
||||
<div class="data-overview">
|
||||
<div v-for="(card, index) in dataCards" :key="index"
|
||||
class="data-card">
|
||||
<div class="data-card-header">
|
||||
<div>
|
||||
<h3 class="data-card-title">{{ card.title }}</h3>
|
||||
<p class="data-card-value">{{ card.value }}</p>
|
||||
</div>
|
||||
<i :class="['data-card-icon', card.icon, getIconColor(card.color)]"></i>
|
||||
</div>
|
||||
<div class="data-card-chart">
|
||||
<div ref="charts" class="chart-inner"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 业务功能区 -->
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 监控面板 -->
|
||||
<div class="monitor-panel">
|
||||
<div class="monitor-resource">
|
||||
<h3 class="monitor-title">系统资源监控</h3>
|
||||
<div class="monitor-resource-charts">
|
||||
<div v-for="(chart, index) in resourceCharts" :key="index" class="monitor-resource-chart">
|
||||
<div ref="resourceChart" class="chart-inner"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="monitor-records">
|
||||
<h3 class="monitor-title">最近操作记录</h3>
|
||||
<div class="monitor-records-list">
|
||||
<div v-for="(record, index) in operationRecords" :key="index"
|
||||
class="monitor-record-item">
|
||||
<div :class="['monitor-record-icon', getModuleBg(record.bgColor)]">
|
||||
<i :class="['monitor-record-icon-inner', record.icon]"></i>
|
||||
</div>
|
||||
<div>
|
||||
<p class="monitor-record-action">{{ record.action }}</p>
|
||||
<p class="monitor-record-time">{{ record.time }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
export default {
|
||||
name: "Index",
|
||||
data() {
|
||||
return {
|
||||
// 版本号
|
||||
version: "0.8.3",
|
||||
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'
|
||||
},
|
||||
{
|
||||
title: '订单处理',
|
||||
description: '订单审核与发货管理',
|
||||
icon: 'fas fa-clipboard-check',
|
||||
bgColor: 'bg-green-500'
|
||||
},
|
||||
{
|
||||
title: '人员管理',
|
||||
description: '员工信息与权限管理',
|
||||
icon: 'fas fa-users',
|
||||
bgColor: 'bg-yellow-500'
|
||||
},
|
||||
{
|
||||
title: '数据分析',
|
||||
description: '业务数据可视化分析',
|
||||
icon: 'fas fa-chart-line',
|
||||
bgColor: 'bg-purple-500'
|
||||
},
|
||||
{
|
||||
title: '设备管理',
|
||||
description: '仓储设备维护管理',
|
||||
icon: 'fas fa-tools',
|
||||
bgColor: 'bg-red-500'
|
||||
},
|
||||
{
|
||||
title: '系统设置',
|
||||
description: '系统参数配置管理',
|
||||
icon: 'fas fa-cog',
|
||||
bgColor: 'bg-indigo-500'
|
||||
}
|
||||
],
|
||||
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'
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
goTarget(href) {
|
||||
window.open(href, "_blank");
|
||||
},
|
||||
mounted() {
|
||||
this.initCharts();
|
||||
this.initResourceCharts();
|
||||
},
|
||||
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 '';
|
||||
}
|
||||
},
|
||||
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';
|
||||
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>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.home {
|
||||
blockquote {
|
||||
padding: 10px 20px;
|
||||
margin: 0 0 20px;
|
||||
font-size: 17.5px;
|
||||
border-left: 5px solid #eee;
|
||||
}
|
||||
hr {
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
border: 0;
|
||||
border-top: 1px solid #eee;
|
||||
}
|
||||
.col-item {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
<style scoped>
|
||||
.dashboard-root {
|
||||
min-height: 100vh;
|
||||
background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
|
||||
padding: 32px;
|
||||
}
|
||||
.data-overview {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 24px;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
.data-card {
|
||||
padding: 24px;
|
||||
border-radius: 16px;
|
||||
backdrop-filter: blur(4px);
|
||||
background: rgba(255,255,255,0.8);
|
||||
box-shadow: 0 4px 24px 0 rgba(0,0,0,0.06);
|
||||
border: 1px solid rgba(255,255,255,0.2);
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
.data-card:hover {
|
||||
transform: scale(1.02);
|
||||
}
|
||||
.data-card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.data-card-title {
|
||||
color: #6b7280;
|
||||
font-size: 14px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.data-card-value {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.data-card-icon {
|
||||
font-size: 24px;
|
||||
}
|
||||
.icon-blue { color: #3b82f6; }
|
||||
.icon-green { color: #22c55e; }
|
||||
.icon-yellow { color: #eab308; }
|
||||
.icon-purple { color: #a855f7; }
|
||||
.data-card-chart {
|
||||
height: 48px;
|
||||
width: 100%;
|
||||
}
|
||||
.chart-inner {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
ul {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.business-modules {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 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;
|
||||
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;
|
||||
}
|
||||
.business-module-icon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.business-module-icon-inner {
|
||||
font-size: 24px;
|
||||
color: #fff;
|
||||
}
|
||||
.bg-blue { background: #3b82f6; }
|
||||
.bg-green { background: #22c55e; }
|
||||
.bg-yellow { background: #eab308; }
|
||||
.bg-purple { background: #a855f7; }
|
||||
.bg-red { background: #ef4444; }
|
||||
.bg-indigo { background: #6366f1; }
|
||||
.business-module-title {
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.business-module-desc {
|
||||
color: #6b7280;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-size: 13px;
|
||||
color: #676a6c;
|
||||
overflow-x: hidden;
|
||||
|
||||
ul {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 10px;
|
||||
font-size: 26px;
|
||||
font-weight: 100;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 10px;
|
||||
|
||||
b {
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
.update-log {
|
||||
ol {
|
||||
display: block;
|
||||
list-style-type: decimal;
|
||||
margin-block-start: 1em;
|
||||
margin-block-end: 1em;
|
||||
margin-inline-start: 0;
|
||||
margin-inline-end: 0;
|
||||
padding-inline-start: 40px;
|
||||
}
|
||||
}
|
||||
.monitor-panel {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 24px;
|
||||
}
|
||||
.monitor-resource, .monitor-records {
|
||||
padding: 24px;
|
||||
border-radius: 16px;
|
||||
background: #fff;
|
||||
box-shadow: 0 4px 24px 0 rgba(0,0,0,0.06);
|
||||
}
|
||||
.monitor-title {
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.monitor-resource-charts {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 16px;
|
||||
}
|
||||
.monitor-resource-chart {
|
||||
height: 160px;
|
||||
}
|
||||
.monitor-records-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
.monitor-record-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 12px;
|
||||
border-radius: 12px;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
.monitor-record-item:hover {
|
||||
background: #f9fafb;
|
||||
}
|
||||
.monitor-record-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 16px;
|
||||
}
|
||||
.monitor-record-icon-inner {
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
}
|
||||
.monitor-record-action {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.monitor-record-time {
|
||||
font-size: 12px;
|
||||
color: #6b7280;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
105
klp-ui/src/views/wms/order/components/CustomerCluster.vue
Normal file
105
klp-ui/src/views/wms/order/components/CustomerCluster.vue
Normal file
@@ -0,0 +1,105 @@
|
||||
<template>
|
||||
<div class="customer-cluster">
|
||||
<el-card shadow="hover">
|
||||
<div class="chart-title">客户群体聚类分析</div>
|
||||
<div ref="chart" class="chart-container"></div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
export default {
|
||||
name: 'CustomerCluster',
|
||||
props: {
|
||||
customerCluster: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
chartInstance: null,
|
||||
chartOptions: {
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: (params) => {
|
||||
return `客户名称: ${params.data[2]}<br />购买频次: ${params.data[0]}<br />客单价: ${params.data[1]}`
|
||||
}
|
||||
},
|
||||
xAxis: { name: '购买频次' },
|
||||
yAxis: { name: '客单价' },
|
||||
series: [
|
||||
{
|
||||
symbolSize: 10,
|
||||
type: 'scatter',
|
||||
data: []
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
customerCluster: {
|
||||
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 () {
|
||||
if (!this.chartInstance) return
|
||||
// 格式化数据
|
||||
const chartData = this.customerCluster.map(item => [item.purchaseFreq, item.avgOrderAmount, item.customerName])
|
||||
this.chartOptions.series[0].data = chartData
|
||||
this.chartInstance.setOption(this.chartOptions)
|
||||
},
|
||||
handleResize () {
|
||||
if (this.chartInstance) {
|
||||
this.chartInstance.resize()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.customer-cluster {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.chart-title {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.chart-container {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
}
|
||||
.el-card {
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
</style>
|
||||
121
klp-ui/src/views/wms/order/components/OrderCompletion.vue
Normal file
121
klp-ui/src/views/wms/order/components/OrderCompletion.vue
Normal file
@@ -0,0 +1,121 @@
|
||||
<template>
|
||||
<div class="completion-chart">
|
||||
<el-card shadow="hover">
|
||||
<div class="chart-title">订单完成率</div>
|
||||
<div ref="chart" class="chart-container"></div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
export default {
|
||||
name: 'OrderCompletion',
|
||||
props: {
|
||||
completionRate: {
|
||||
type: Number,
|
||||
required: true,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
notRate:0,
|
||||
chartInstance: null
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
completionRate: {
|
||||
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 () {
|
||||
if (!this.chartInstance) return
|
||||
this.notRate = 100 - this.completionRate
|
||||
let option = {
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{a} <br/>{b}: {c}%'
|
||||
},
|
||||
legend: {
|
||||
top: '8%',
|
||||
left: 'center',
|
||||
data: ['完成率', '未完成']
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '订单完成率',
|
||||
type: 'pie',
|
||||
radius: '60%',
|
||||
center: ['50%', '55%'],
|
||||
data: [
|
||||
{value: this.completionRate, name: '已完成'},
|
||||
{value: this.notRate, name: '未完成'}
|
||||
],
|
||||
label: {
|
||||
formatter: '{b}: {c}%',
|
||||
fontSize: 14,
|
||||
},
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
this.chartInstance.setOption(option)
|
||||
},
|
||||
handleResize () {
|
||||
if (this.chartInstance) {
|
||||
this.chartInstance.resize()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.completion-chart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.chart-title {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.chart-container {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
}
|
||||
.el-card {
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
</style>
|
||||
161
klp-ui/src/views/wms/order/components/OrderMaterialAnalysis.vue
Normal file
161
klp-ui/src/views/wms/order/components/OrderMaterialAnalysis.vue
Normal file
@@ -0,0 +1,161 @@
|
||||
<template>
|
||||
<el-card shadow="hover" class="order-material-analysis">
|
||||
<div slot="header" class="card-header">订单物料分析</div>
|
||||
<div ref="chart" class="chart-container"></div>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
export default {
|
||||
name: 'OrderMaterialAnalysis',
|
||||
props: {
|
||||
materialInfo: {
|
||||
type: Object,
|
||||
required: true,
|
||||
default: () => ({
|
||||
categories: [],
|
||||
usageFrequency: [],
|
||||
stockQuantity: [],
|
||||
bundleRate: [],
|
||||
purchaseCycle: [],
|
||||
yAxisUsageMax: 0
|
||||
})
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chartInstance: null
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
materialInfo: {
|
||||
deep: true,
|
||||
immediate: true,
|
||||
handler() {
|
||||
this.updateChart()
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initChart()
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.resizeChart)
|
||||
if (this.chartInstance) {
|
||||
this.chartInstance.dispose()
|
||||
this.chartInstance = null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
if (!this.chartInstance) {
|
||||
this.chartInstance = echarts.init(this.$refs.chart)
|
||||
}
|
||||
this.updateChart()
|
||||
window.addEventListener('resize', this.resizeChart)
|
||||
},
|
||||
updateChart() {
|
||||
if (!this.chartInstance) return
|
||||
const info = this.materialInfo
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { type: 'shadow' }
|
||||
},
|
||||
legend: {
|
||||
data: ['使用频次', '库存量', '捆绑率', '采购周期'],
|
||||
bottom: 0
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: info.categories,
|
||||
axisTick: { alignWithLabel: true }
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '数量',
|
||||
min: 0,
|
||||
max: info.yAxisUsageMax,
|
||||
interval: Math.ceil((info.yAxisUsageMax || 1) / 4),
|
||||
position: 'left',
|
||||
axisLine: { lineStyle: { color: '#3a85ff' } },
|
||||
axisLabel: { formatter: '{value}' }
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
name: '百分比',
|
||||
min: 0,
|
||||
max: 100,
|
||||
interval: 20,
|
||||
position: 'right',
|
||||
axisLine: { lineStyle: { color: '#ffb300' } },
|
||||
axisLabel: { formatter: '{value}%'}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '使用频次',
|
||||
type: 'bar',
|
||||
data: info.usageFrequency,
|
||||
itemStyle: { color: '#3a85ff' }
|
||||
},
|
||||
{
|
||||
name: '库存量',
|
||||
type: 'bar',
|
||||
data: info.stockQuantity,
|
||||
itemStyle: { color: '#52c41a' }
|
||||
},
|
||||
{
|
||||
name: '捆绑率',
|
||||
type: 'line',
|
||||
yAxisIndex: 1,
|
||||
data: info.bundleRate,
|
||||
lineStyle: { color: '#ffc107', width: 2 },
|
||||
smooth: true,
|
||||
symbol: 'circle',
|
||||
symbolSize: 8
|
||||
},
|
||||
{
|
||||
name: '采购周期',
|
||||
type: 'line',
|
||||
yAxisIndex: 1,
|
||||
data: info.purchaseCycle,
|
||||
lineStyle: { color: '#ff5722', width: 2 },
|
||||
smooth: true,
|
||||
symbol: 'circle',
|
||||
symbolSize: 8
|
||||
}
|
||||
]
|
||||
}
|
||||
this.chartInstance.setOption(option, { notMerge: true })
|
||||
},
|
||||
resizeChart() {
|
||||
if (this.chartInstance) {
|
||||
this.chartInstance.resize()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.order-material-analysis {
|
||||
height: 500px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
flex-grow: 1;
|
||||
min-height: 280px;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
205
klp-ui/src/views/wms/order/components/OrderSummary.vue
Normal file
205
klp-ui/src/views/wms/order/components/OrderSummary.vue
Normal file
@@ -0,0 +1,205 @@
|
||||
<template>
|
||||
<div class="order-summary">
|
||||
<div class="summary-container">
|
||||
<!-- 总订单数 -->
|
||||
<div class="summary-box total-orders">
|
||||
<div class="content-left">
|
||||
<div class="summary-title">总订单数</div>
|
||||
<div class="summary-value">
|
||||
<strong>{{ dataInfo.totalOrders.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%
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="icon-bg blue">
|
||||
<svg viewBox="0 0 24 24" width="28" height="28" fill="#2f86f6">
|
||||
<path d="M7 18c-1.1 0-2-.9-2-2s.9-2 2-2h10v-4H7V7H5v3c0 1.1.9 2 2 2v6z"></path>
|
||||
<circle cx="18" cy="18" r="2"></circle>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 本月完成订单 -->
|
||||
<div class="summary-box completed-orders">
|
||||
<div class="content-left">
|
||||
<div class="summary-title">本月完成订单</div>
|
||||
<div class="summary-value">
|
||||
<strong>{{ dataInfo.completedThisMonth.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%
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="icon-bg green">
|
||||
<svg viewBox="0 0 24 24" width="28" height="28" fill="#38c172">
|
||||
<polyline points="20 6 9 17 4 12" stroke="#38c172" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 订单完成度 -->
|
||||
<div class="summary-box completion-rate">
|
||||
<div class="content-left">
|
||||
<div class="summary-title">订单完成度</div>
|
||||
<div class="summary-value">
|
||||
<strong>{{ dataInfo.completionRate.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%
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="icon-bg yellow">
|
||||
<svg viewBox="0 0 24 24" width="28" height="28" fill="#f6bb42">
|
||||
<path d="M4 12h16M4 12a8 8 0 0116 0M12 4v8l4 4" stroke="#f6bb42" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'OrderSummary',
|
||||
props: {
|
||||
dataInfo: {
|
||||
type: Object,
|
||||
required: true,
|
||||
default: () => ({ totalOrders: 0, completedThisMonth: 0, completionRate: 0 })
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.order-summary {
|
||||
width: 100%;
|
||||
padding: 10px 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.summary-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 15px; /* 卡片之间间距 */
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.summary-box {
|
||||
flex: 1 1 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 24px 30px;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 6px 20px rgba(31, 47, 70, 0.08);
|
||||
cursor: default;
|
||||
background: #fff;
|
||||
user-select: none;
|
||||
transition: box-shadow 0.3s ease;
|
||||
min-width: 0; /* 防止子元素过大撑破flex */
|
||||
}
|
||||
|
||||
.summary-box:hover {
|
||||
box-shadow: 0 10px 32px rgba(31, 47, 70, 0.14);
|
||||
}
|
||||
|
||||
.content-left {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.summary-title {
|
||||
font-size: 14px;
|
||||
color: #5a5a5a;
|
||||
margin-bottom: 6px;
|
||||
user-select: text;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.summary-value {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-weight: 700;
|
||||
font-size: 32px;
|
||||
color: #222;
|
||||
user-select: text;
|
||||
min-width: 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.summary-value strong {
|
||||
margin-right: 10px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.growth {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
color: #38c172;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.arrow-up {
|
||||
margin-right: 4px;
|
||||
stroke: #38c172;
|
||||
fill: none;
|
||||
}
|
||||
|
||||
.icon-bg {
|
||||
flex-shrink: 0;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
border-radius: 50%;
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
user-select: none;
|
||||
box-shadow: 0 4px 12px rgba(47, 134, 246, 0.25);
|
||||
}
|
||||
|
||||
.total-orders {
|
||||
background: linear-gradient(135deg, #d5e7ff 0%, #ffffff 100%);
|
||||
color: #0d3b73;
|
||||
}
|
||||
|
||||
.total-orders .icon-bg {
|
||||
background-color: rgba(47, 134, 246, 0.15);
|
||||
box-shadow: 0 4px 12px rgba(47, 134, 246, 0.25);
|
||||
}
|
||||
|
||||
.completed-orders {
|
||||
background: linear-gradient(135deg, #e7f5e8 0%, #ffffff 100%);
|
||||
color: #1f6d28;
|
||||
}
|
||||
|
||||
.completed-orders .icon-bg {
|
||||
background-color: rgba(56, 193, 114, 0.15);
|
||||
box-shadow: 0 4px 12px rgba(56, 193, 114, 0.25);
|
||||
}
|
||||
|
||||
.completion-rate {
|
||||
background: linear-gradient(135deg, #fff6e1 0%, #ffffff 100%);
|
||||
color: #7a5a00;
|
||||
}
|
||||
|
||||
.completion-rate .icon-bg {
|
||||
background-color: rgba(246, 187, 66, 0.15);
|
||||
box-shadow: 0 4px 12px rgba(246, 187, 66, 0.25);
|
||||
}
|
||||
</style>
|
||||
125
klp-ui/src/views/wms/order/components/ProductSales.vue
Normal file
125
klp-ui/src/views/wms/order/components/ProductSales.vue
Normal file
@@ -0,0 +1,125 @@
|
||||
<template>
|
||||
<div class="product-sales-chart">
|
||||
<el-card shadow="hover">
|
||||
<div class="chart-title">产品销量排行</div>
|
||||
<div ref="chart" class="chart-container"></div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
export default {
|
||||
name: 'ProductSales',
|
||||
props: {
|
||||
productSales: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
chartInstance: null,
|
||||
chartOptions: {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '10%',
|
||||
right: '10%',
|
||||
bottom: '10%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: []
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '销量',
|
||||
type: 'bar',
|
||||
data: [],
|
||||
barWidth: '40%',
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top'
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
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 () {
|
||||
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) {
|
||||
this.chartInstance.resize()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.product-sales-chart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.chart-title {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.chart-container {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
}
|
||||
.el-card {
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
</style>
|
||||
85
klp-ui/src/views/wms/order/dashboard.vue
Normal file
85
klp-ui/src/views/wms/order/dashboard.vue
Normal file
@@ -0,0 +1,85 @@
|
||||
<template>
|
||||
<div class="order-analysis-dashboard">
|
||||
<!-- 顶部：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" />
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<ProductSales :product-sales="productSalesData" />
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import OrderSummary from './components/OrderSummary.vue'
|
||||
import OrderCompletion from './components/OrderCompletion.vue'
|
||||
import ProductSales from './components/ProductSales.vue'
|
||||
import { getDashboardData } from '@/api/wms/order'
|
||||
|
||||
export default {
|
||||
name: 'OrderAnalysisDashboard',
|
||||
components: {
|
||||
OrderSummary,
|
||||
OrderCompletion,
|
||||
ProductSales,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
orderSummaryData: {
|
||||
totalOrders: 0,
|
||||
completedThisMonth: 0,
|
||||
completionRate: 0
|
||||
},
|
||||
productSalesData: [],
|
||||
materialAnalysisData: {
|
||||
categories: [],
|
||||
usageFrequency: [],
|
||||
stockQuantity: [],
|
||||
bundleRate: [],
|
||||
purchaseCycle: [],
|
||||
yAxisUsageMax: 0
|
||||
},
|
||||
customerClusterData: []
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.fetchAllData()
|
||||
},
|
||||
methods: {
|
||||
async fetchAllData() {
|
||||
const res = await getDashboardData()
|
||||
console.log(res)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.order-analysis-dashboard {
|
||||
padding: 24px;
|
||||
background-color: #f7f8fa;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.top-row,
|
||||
.chart-row {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.chart-row > .el-col {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: stretch;
|
||||
}
|
||||
</style>
|
||||
@@ -71,8 +71,17 @@
|
||||
icon="el-icon-download"
|
||||
size="mini"
|
||||
@click="handleExport"
|
||||
|
||||
>导出</el-button>
|
||||
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="warning"
|
||||
plain
|
||||
size="mini"
|
||||
@click="goDashboard"
|
||||
|
||||
>订单分析</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
@@ -231,6 +240,9 @@ export default {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
goDashboard() {
|
||||
this.$router.push('/wms/order/dashboard');
|
||||
},
|
||||
/** 推荐采购计划确认 */
|
||||
handleRecommendConfirm(data) {
|
||||
console.log('推荐采购计划数据:', data);
|
||||
|
||||
@@ -17,13 +17,8 @@
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="负责人" prop="owner">
|
||||
<el-input
|
||||
v-model="queryParams.owner"
|
||||
placeholder="请输入负责人"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
<el-form-item label="销售经理" prop="salesManager">
|
||||
<UserSelect v-model="queryParams.salesManager" :multiple="false" placeholder="请选择销售经理" />
|
||||
</el-form-item>
|
||||
<el-form-item label="基础材质" prop="baseMaterialId">
|
||||
<CategorySelect v-model="queryParams.baseMaterialId" categoryType="base_material" placeholder="请选择基础材质分类" clearable />
|
||||
@@ -177,8 +172,8 @@
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="负责人" prop="owner">
|
||||
<el-input v-model="form.owner" placeholder="请输入负责人" />
|
||||
<el-form-item label="销售经理" prop="salesManager">
|
||||
<UserSelect v-model="form.salesManager" :multiple="false" placeholder="请选择销售经理" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
@@ -255,12 +250,14 @@
|
||||
import { listProduct, getProduct, delProduct, addProduct, updateProduct } from "@/api/wms/product";
|
||||
import CategorySelect from '@/components/KLPService/CategorySelect';
|
||||
import CategoryRenderer from '@/components/KLPService/Renderer/CategoryRenderer.vue';
|
||||
import UserSelect from '@/components/KLPService/UserSelect';
|
||||
|
||||
export default {
|
||||
name: "Product",
|
||||
components: {
|
||||
CategorySelect,
|
||||
CategoryRenderer
|
||||
CategoryRenderer,
|
||||
UserSelect
|
||||
},
|
||||
dicts: ['common_swicth'],
|
||||
data() {
|
||||
|
||||
@@ -10,12 +10,7 @@
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="负责人" prop="owner">
|
||||
<el-input
|
||||
v-model="queryParams.owner"
|
||||
placeholder="请输入负责人"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
<UserSelect v-model="queryParams.owner" :multiple="false" placeholder="请选择负责人" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="关联订单ID" prop="orderId">
|
||||
<el-input
|
||||
@@ -128,7 +123,7 @@
|
||||
<el-input v-model="form.planCode" placeholder="请输入采购计划编号" />
|
||||
</el-form-item>
|
||||
<el-form-item label="负责人" prop="owner">
|
||||
<el-input v-model="form.owner" placeholder="请输入负责人" />
|
||||
<UserSelect v-model="form.owner" :multiple="false" placeholder="请选择负责人" />
|
||||
</el-form-item>
|
||||
<el-form-item label="关联订单ID" prop="orderId">
|
||||
<el-input v-model="form.orderId" placeholder="请输入关联订单ID" />
|
||||
@@ -163,12 +158,7 @@
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="销售经理" prop="salesManager">
|
||||
<el-input
|
||||
v-model="orderQueryParams.salesManager"
|
||||
placeholder="请输入销售经理"
|
||||
clearable
|
||||
@keyup.enter.native="handleOrderQuery"
|
||||
/>
|
||||
<UserSelect v-model="orderQueryParams.salesManager" :multiple="false" placeholder="请选择销售经理" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="订单状态" prop="orderStatus">
|
||||
<el-select v-model="orderQueryParams.orderStatus" placeholder="请选择订单状态" clearable>
|
||||
@@ -268,13 +258,15 @@ import PurchasePlanClac from "./panels/clac.vue";
|
||||
import PurchasePlanDetail from "./panels/detail.vue";
|
||||
import CreatePurchasePanel from "./panels/CreatePurchasePanel.vue";
|
||||
import { EOrderStatus } from "../../../utils/enums";
|
||||
import UserSelect from '@/components/KLPService/UserSelect'
|
||||
|
||||
export default {
|
||||
name: "PurchasePlan",
|
||||
components: {
|
||||
PurchasePlanClac,
|
||||
PurchasePlanDetail,
|
||||
CreatePurchasePanel
|
||||
CreatePurchasePanel,
|
||||
UserSelect
|
||||
},
|
||||
dicts: ['order_status'],
|
||||
data() {
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
<el-input v-model="mainForm.planCode" placeholder="请输入计划编号" style="width: 200px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="负责人" prop="owner">
|
||||
<el-input v-model="mainForm.owner" placeholder="请输入负责人" style="width: 200px;" />
|
||||
<UserSelect v-model="mainForm.owner" :multiple="false" placeholder="请选择负责人" style="width: 200px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input v-model="mainForm.remark" placeholder="请输入备注" style="width: 300px;" />
|
||||
@@ -77,7 +77,7 @@
|
||||
</el-table-column>
|
||||
<el-table-column prop="owner" label="负责人">
|
||||
<template #default="scope">
|
||||
<el-input v-model="scope.row.owner" size="small" />
|
||||
<UserSelect v-model="scope.row.owner" :multiple="false" placeholder="请选择负责人" size="small" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="remark" label="备注">
|
||||
@@ -97,9 +97,11 @@
|
||||
<script>
|
||||
import { createPurchasePlan } from '@/api/wms/purchasePlan'
|
||||
import { listRawMaterial } from '@/api/wms/rawMaterial'
|
||||
import UserSelect from '@/components/KLPService/UserSelect'
|
||||
|
||||
export default {
|
||||
name: 'CreatePurchasePanel',
|
||||
components: { UserSelect },
|
||||
props: {
|
||||
orderId: {
|
||||
type: [String, Number],
|
||||
|
||||
@@ -132,7 +132,7 @@
|
||||
<RawMaterialSelect v-model="form.rawMaterialId" placeholder="请选择原材料" @change="onRawMaterialChange" />
|
||||
</el-form-item>
|
||||
<el-form-item label="负责人" prop="owner">
|
||||
<el-input v-model="form.owner" placeholder="请输入负责人" />
|
||||
<UserSelect v-model="form.owner" :multiple="false" placeholder="请选择负责人" />
|
||||
</el-form-item>
|
||||
<el-form-item label="计划采购数量" prop="quantity">
|
||||
<el-input v-model="form.quantity" placeholder="请输入计划采购数量" />
|
||||
@@ -164,12 +164,14 @@ import { listPurchasePlanDetail, getPurchasePlanDetail, delPurchasePlanDetail, a
|
||||
import { EPurchaseDetailStatus } from "@/utils/enums";
|
||||
import StockInDialog from "./stockin.vue";
|
||||
import RawMaterialSelect from '@/components/KLPService/RawMaterialSelect';
|
||||
import UserSelect from '@/components/KLPService/UserSelect'
|
||||
|
||||
export default {
|
||||
name: "PurchasePlanDetail",
|
||||
components: {
|
||||
StockInDialog,
|
||||
RawMaterialSelect
|
||||
RawMaterialSelect,
|
||||
UserSelect
|
||||
},
|
||||
props: {
|
||||
planId: {
|
||||
|
||||
Reference in New Issue
Block a user