feat: 更新采购计划和出入库管理功能
添加清除所有草稿功能 扩展采购计划和出入库接口类型定义 新增出入库统计和产品列表接口 重写计划详情页面数据展示逻辑 改进数据分析组件支持动态数据 优化库存管理页面查询和展示逻辑 完善详情信息组件展示和文件预览功能
This commit is contained in:
@ -19,9 +19,31 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, onUnmounted } from 'vue';
|
||||
import { ref, onMounted, onUnmounted, watch } from 'vue';
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
// 定义props
|
||||
const props = defineProps({
|
||||
lineData: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
// 默认值,防止传入数据为空时图表显示异常
|
||||
days: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
|
||||
rukuCounnts: [5, 40, 20, 75, 60, 80, 40, 55, 30, 65, 5, 80],
|
||||
chukuCounnts: [30, 40, 30, 30, 30, 15, 55, 50, 40, 60, 25, 90]
|
||||
})
|
||||
},
|
||||
barData: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
// 默认值,防止传入数据为空时图表显示异常
|
||||
shebeiTypes: ['设备1', '设备2', '设备3', '设备4', '设备5'],
|
||||
rukuCount: [5, 40, 20, 75, 60],
|
||||
chukuCount: [30, 40, 30, 30, 30]
|
||||
})
|
||||
}
|
||||
});
|
||||
|
||||
// 图表容器引用
|
||||
const lineChartRef = ref(null);
|
||||
const barChartRef = ref(null);
|
||||
@ -77,7 +99,7 @@ const initLineChart = () => {
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']
|
||||
data: props.lineData.days
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
@ -86,7 +108,7 @@ const initLineChart = () => {
|
||||
{
|
||||
name: '入库数量',
|
||||
type: 'line',
|
||||
data: [5, 40, 20, 75, 60, 80, 40, 55, 30, 65, 5, 80],
|
||||
data: props.lineData.rukuCounnts,
|
||||
symbol: 'none',
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
@ -105,7 +127,7 @@ const initLineChart = () => {
|
||||
{
|
||||
name: '出库数量',
|
||||
type: 'line',
|
||||
data: [30, 40, 30, 30, 30, 15, 55, 50, 40, 60, 25, 90],
|
||||
data: props.lineData.chukuCounnts,
|
||||
symbol: 'none',
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
@ -155,7 +177,7 @@ const initBarChart = () => {
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['电器部件', '机械部件', '电子元件', '控制模块', '结构部件', '其他'],
|
||||
data: props.barData.shebeiTypes,
|
||||
axisLabel: {
|
||||
interval: 0, // 强制显示所有标签
|
||||
rotate: 30, // 标签旋转30度
|
||||
@ -171,7 +193,7 @@ const initBarChart = () => {
|
||||
{
|
||||
name: '入库数量',
|
||||
type: 'bar',
|
||||
data: [650, 480, 510, 280, 650, 220],
|
||||
data: props.barData.rukuCount,
|
||||
itemStyle: {
|
||||
color: 'rgba(22, 93, 255, 1)' // 入库数量颜色
|
||||
},
|
||||
@ -182,7 +204,7 @@ const initBarChart = () => {
|
||||
{
|
||||
name: '出库数量',
|
||||
type: 'bar',
|
||||
data: [850, 400, 770, 590, 540, 310],
|
||||
data: props.barData.chukuCount,
|
||||
itemStyle: {
|
||||
color: 'rgba(15, 198, 194, 1)' // 出库数量颜色
|
||||
},
|
||||
@ -205,6 +227,12 @@ const handleResize = () => {
|
||||
barChart.resize();
|
||||
}
|
||||
};
|
||||
|
||||
// 监听lineData变化,更新折线图
|
||||
watch(() => props.lineData, () => {
|
||||
initLineChart();
|
||||
initBarChart();
|
||||
}, { deep: true });
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
Reference in New Issue
Block a user