feat(物料管理): 新增采购计划、出入库管理及相关组件
添加物料管理模块，包括采购计划、出入库管理功能及相关组件 新增审批流程、系统信息、数据分析等子组件 添加相关图片资源及样式调整
This commit is contained in:
234
src/views/materialManagement/components/DataAnalysis.vue
Normal file
234
src/views/materialManagement/components/DataAnalysis.vue
Normal file
@ -0,0 +1,234 @@
|
||||
<template>
|
||||
<div class="dashboard-container">
|
||||
<!-- 第一个图表：本月出入库统计 -->
|
||||
<div class="chart-item">
|
||||
<div class="title">
|
||||
本月出入库统计
|
||||
</div>
|
||||
<div ref="lineChartRef" class="chart-container"></div>
|
||||
</div>
|
||||
|
||||
<!-- 第二个图表：出入库类型分布 -->
|
||||
<div class="chart-item">
|
||||
<div class="title">
|
||||
出入库类型分布
|
||||
</div>
|
||||
<div ref="barChartRef" class="chart-container"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, onUnmounted } from 'vue';
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
// 图表容器引用
|
||||
const lineChartRef = ref(null);
|
||||
const barChartRef = ref(null);
|
||||
|
||||
// 图表实例
|
||||
let lineChart = null;
|
||||
let barChart = null;
|
||||
|
||||
onMounted(() => {
|
||||
// 初始化折线图
|
||||
initLineChart();
|
||||
// 初始化柱状图
|
||||
initBarChart();
|
||||
|
||||
// 监听窗口大小变化，自适应图表
|
||||
window.addEventListener('resize', handleResize);
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
// 销毁图表实例
|
||||
if (lineChart) {
|
||||
lineChart.dispose();
|
||||
}
|
||||
if (barChart) {
|
||||
barChart.dispose();
|
||||
}
|
||||
|
||||
// 移除事件监听
|
||||
window.removeEventListener('resize', handleResize);
|
||||
});
|
||||
|
||||
// 初始化折线图
|
||||
const initLineChart = () => {
|
||||
if (lineChartRef.value) {
|
||||
lineChart = echarts.init(lineChartRef.value);
|
||||
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
legend: {
|
||||
data: ['入库数量', '出库数量'],
|
||||
icon: 'circle',
|
||||
itemWidth: 10,
|
||||
itemHeight: 10,
|
||||
top: 0
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '入库数量',
|
||||
type: 'line',
|
||||
data: [5, 40, 20, 75, 60, 80, 40, 55, 30, 65, 5, 80],
|
||||
symbol: 'none',
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
color: 'rgba(22, 93, 255, 1)'
|
||||
},
|
||||
itemStyle: {
|
||||
color: 'rgba(22, 93, 255, 1)'
|
||||
},
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: 'rgba(22, 93, 255, 0.2)' },
|
||||
{ offset: 1, color: 'rgba(22, 93, 255, 0)' }
|
||||
])
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '出库数量',
|
||||
type: 'line',
|
||||
data: [30, 40, 30, 30, 30, 15, 55, 50, 40, 60, 25, 90],
|
||||
symbol: 'none',
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
color: 'rgba(255, 153, 0, 1)'
|
||||
},
|
||||
itemStyle: {
|
||||
color: 'rgba(255, 153, 0, 1)'
|
||||
},
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: 'rgba(59, 179, 70, 0.2)' },
|
||||
{ offset: 1, color: 'rgba(59, 179, 70, 0)' }
|
||||
])
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
lineChart.setOption(option);
|
||||
}
|
||||
};
|
||||
|
||||
// 初始化柱状图
|
||||
const initBarChart = () => {
|
||||
if (barChartRef.value) {
|
||||
barChart = echarts.init(barChartRef.value);
|
||||
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: ['入库数量', '出库数量'],
|
||||
icon: 'circle',
|
||||
itemWidth: 10,
|
||||
itemHeight: 10,
|
||||
top: 0
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['电器部件', '机械部件', '电子元件', '控制模块', '结构部件', '其他'],
|
||||
axisLabel: {
|
||||
interval: 0, // 强制显示所有标签
|
||||
rotate: 30, // 标签旋转30度
|
||||
margin: 15, // 增加与轴线的距离
|
||||
align: 'right', // 文字右对齐
|
||||
verticalAlign: 'top' // 垂直方向顶部对齐
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '入库数量',
|
||||
type: 'bar',
|
||||
data: [650, 480, 510, 280, 650, 220],
|
||||
itemStyle: {
|
||||
color: 'rgba(22, 93, 255, 1)' // 入库数量颜色
|
||||
},
|
||||
barWidth: '45%',
|
||||
barGap: '0' // 柱子之间的间距
|
||||
|
||||
},
|
||||
{
|
||||
name: '出库数量',
|
||||
type: 'bar',
|
||||
data: [850, 400, 770, 590, 540, 310],
|
||||
itemStyle: {
|
||||
color: 'rgba(15, 198, 194, 1)' // 出库数量颜色
|
||||
},
|
||||
barWidth: '45%',
|
||||
barGap: '0' // 柱子之间的间距
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
barChart.setOption(option);
|
||||
}
|
||||
};
|
||||
|
||||
// 处理窗口大小变化，让图表自适应
|
||||
const handleResize = () => {
|
||||
if (lineChart) {
|
||||
lineChart.resize();
|
||||
}
|
||||
if (barChart) {
|
||||
barChart.resize();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.dashboard-container {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.chart-item {
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
margin-bottom: 20px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.title {
|
||||
color: rgba(29, 33, 41, 1);
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user