| | |
| | | import Echarts from '@/components/Echarts/echarts.vue' |
| | | import PanelHeader from './PanelHeader.vue' |
| | | import ProductTypeSwitch from './ProductTypeSwitch.vue' |
| | | import { productInOutAnalysis } from '@/api/viewIndex.js' |
| | | |
| | | const productType = ref(1) // 1=原材料 2=半成品 3=成品 |
| | | |
| | |
| | | const xAxis1 = ref([ |
| | | { |
| | | type: 'category', |
| | | data: ['6/9', '6/10', '6/11', '6/12', '6/13', '6/14', '6/15'], |
| | | data: [], |
| | | axisTick: { show: false }, |
| | | axisLine: { show: false,lineStyle: { color: 'rgba(184, 200, 224, 0.3)' } }, |
| | | axisLine: { show: false, lineStyle: { color: 'rgba(184, 200, 224, 0.3)' } }, |
| | | axisLabel: { color: '#B8C8E0', fontSize: 12 }, |
| | | splitLine: { show: false, lineStyle: { type: 'dashed', color: 'rgba(184, 200, 224, 0.2)' } }, |
| | | }, |
| | |
| | | axisLine: { show: false }, |
| | | axisTick: { show: false }, |
| | | axisLabel: { color: '#B8C8E0', fontSize: 12 }, |
| | | splitLine: { lineStyle: { color: '#B8C8E0' } }, |
| | | splitLine: { lineStyle: { color: '#B8C8E0' } }, |
| | | }, |
| | | ] |
| | | |
| | |
| | | showSymbol: true, |
| | | symbol: 'circle', |
| | | symbolSize: 8, |
| | | lineStyle: { color: 'rgba(11, 137, 254,1', width: 2 }, |
| | | lineStyle: { color: 'rgba(11, 137, 254, 1)', width: 2 }, |
| | | itemStyle: { color: 'rgba(11, 137, 254, 1)', borderWidth: 0 }, |
| | | areaStyle: { |
| | | color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
| | |
| | | { offset: 1, color: 'rgba(11, 137, 254, 0.05)' }, |
| | | ]), |
| | | }, |
| | | data: [80, 100, 140, 160, 120, 150, 180], |
| | | data: [], |
| | | emphasis: { focus: 'series' }, |
| | | }, |
| | | { |
| | |
| | | showSymbol: true, |
| | | symbol: 'circle', |
| | | symbolSize: 8, |
| | | |
| | | lineStyle: { color: 'rgba(11, 249, 254, 1)', width: 2 }, |
| | | itemStyle: { color: 'rgba(11, 249, 254, 1)', borderWidth: 0 }, |
| | | areaStyle: { |
| | |
| | | { offset: 1, color: 'rgba(11, 249, 254, 0.05)' }, |
| | | ]), |
| | | }, |
| | | data: [160, 200, 200, 200, 170, 200, 200], |
| | | data: [], |
| | | emphasis: { focus: 'series' }, |
| | | }, |
| | | ]) |
| | |
| | | }, |
| | | } |
| | | |
| | | const handleFilterChange = () => { |
| | | // 可按 productType 切换后请求出入库接口,此处仅预留 |
| | | const fetchData = () => { |
| | | productInOutAnalysis({ type: productType.value }) |
| | | .then((res) => { |
| | | if (res.code === 200 && Array.isArray(res.data)) { |
| | | const list = res.data |
| | | xAxis1.value[0].data = list.map((d) => d.date) |
| | | lineSeries.value[0].data = list.map((d) => Number(d.outCount) || 0) |
| | | lineSeries.value[1].data = list.map((d) => Number(d.inCount) || 0) |
| | | } |
| | | }) |
| | | .catch((err) => { |
| | | console.error('获取产品出入库分析失败:', err) |
| | | }) |
| | | } |
| | | |
| | | onMounted(() => {}) |
| | | const handleFilterChange = () => { |
| | | fetchData() |
| | | } |
| | | |
| | | onMounted(() => { |
| | | fetchData() |
| | | }) |
| | | </script> |
| | | |
| | | <style scoped> |