| | |
| | | |
| | | <script setup> |
| | | import { ref, onMounted } from 'vue' |
| | | import { qualityStatistics } from '@/api/viewIndex.js' |
| | | import { productionAccountingAnalysis } from '@/api/viewIndex.js' |
| | | import PanelHeader from './PanelHeader.vue' |
| | | import DateTypeSwitch from './DateTypeSwitch.vue' |
| | | import Echarts from '@/components/Echarts/echarts.vue' |
| | |
| | | const barLegend = { |
| | | show: true, |
| | | textStyle: { color: '#B8C8E0' }, |
| | | data: ['产量', '工资', '合格率'], |
| | | data: ['生产核算'], |
| | | } |
| | | |
| | | // 柱状图:产量、工资;折线图:合格率(绿色) |
| | | // 柱状图:生产核算 |
| | | const chartSeries = ref([ |
| | | { |
| | | name: '产量', |
| | | name: '生产核算', |
| | | type: 'bar', |
| | | barWidth: 20, |
| | | barGap: '40%', |
| | | yAxisIndex: 0, |
| | | barWidth: 30, |
| | | emphasis: { focus: 'series' }, |
| | | itemStyle: { |
| | | color: { |
| | |
| | | }, |
| | | data: [], |
| | | }, |
| | | { |
| | | name: '工资', |
| | | type: 'bar', |
| | | barGap: '40%', |
| | | barWidth: 20, |
| | | yAxisIndex: 1, |
| | | emphasis: { focus: 'series' }, |
| | | itemStyle: { |
| | | color: { |
| | | type: 'linear', |
| | | x: 0, |
| | | y: 0, |
| | | x2: 0, |
| | | y2: 1, |
| | | colorStops: [ |
| | | { offset: 1, color: 'rgba(83, 126, 245, 0.19)' }, |
| | | { offset: 0, color: 'rgba(144, 97, 248, 1)' }, |
| | | ], |
| | | }, |
| | | }, |
| | | data: [], |
| | | }, |
| | | { |
| | | name: '合格率', |
| | | type: 'line', |
| | | yAxisIndex: 2, |
| | | showSymbol: true, |
| | | symbol: 'circle', |
| | | symbolSize: 8, |
| | | lineStyle: { color: 'rgba(90, 216, 166, 1)', width: 2 }, |
| | | itemStyle: { color: 'rgba(90, 216, 166, 1)' }, |
| | | data: [], |
| | | emphasis: { focus: 'series' }, |
| | | }, |
| | | ]) |
| | | |
| | | const tooltip = { |
| | |
| | | formatter(params) { |
| | | let result = params[0].axisValueLabel + '<br/>' |
| | | params.forEach((item) => { |
| | | let unit = '件' |
| | | if (item.seriesName === '合格率') unit = '%' |
| | | else if (item.seriesName === '工资') unit = '元' |
| | | result += `<div>${item.marker} ${item.seriesName}: ${item.value}${unit}</div>` |
| | | result += `<div>${item.marker} ${item.seriesName}: ${item.value} 元</div>` |
| | | }) |
| | | return result |
| | | }, |
| | |
| | | { type: 'category', axisTick: { show: false }, axisLabel: { color: '#B8C8E0' }, data: [] }, |
| | | ]) |
| | | const yAxis1 = [ |
| | | { type: 'value', name: '产量(件)', position: 'left', axisLabel: { color: '#B8C8E0' }, nameTextStyle: { color: '#B8C8E0' } }, |
| | | { type: 'value', name: '工资(元)', position: 'left', offset: 50, axisLabel: { color: '#B8C8E0' }, nameTextStyle: { color: '#B8C8E0' } }, |
| | | { |
| | | type: 'value', |
| | | name: '合格率(%)', |
| | | position: 'right', |
| | | min: 0, |
| | | max: 100, |
| | | axisLabel: { color: '#B8C8E0', formatter: '{value}%' }, |
| | | nameTextStyle: { color: '#B8C8E0' }, |
| | | splitLine: { lineStyle: { color: 'rgba(184, 200, 224, 0.2)' } }, |
| | | }, |
| | | { type: 'value', name: '单位: 元', axisLabel: { color: '#B8C8E0' }, nameTextStyle: { color: '#B8C8E0' }, splitLine: { lineStyle: { color: 'rgba(184, 200, 224, 0.2)' } } }, |
| | | ] |
| | | |
| | | const handleDateTypeChange = () => { |
| | |
| | | } |
| | | |
| | | const fetchData = () => { |
| | | qualityStatistics() |
| | | productionAccountingAnalysis({ dateType: dateType.value }) |
| | | .then((res) => { |
| | | if (!res?.data?.item || !Array.isArray(res.data.item)) return |
| | | const items = res.data.item |
| | | xAxis1.value[0].data = items.map((d) => d.date) |
| | | // 产量:出厂数 |
| | | chartSeries.value[0].data = items.map((d) => Number(d.factoryNum) || 0) |
| | | // 工资:暂无单独接口,用 0 占位,后续可接工资接口 |
| | | chartSeries.value[1].data = items.map(() => 0) |
| | | // 合格率:出厂数/过程数*100(无单独接口时用此占位) |
| | | chartSeries.value[2].data = items.map((d) => { |
| | | const processNum = Number(d.processNum) || 0 |
| | | const factoryNum = Number(d.factoryNum) || 0 |
| | | if (processNum <= 0) return 0 |
| | | return Math.min(100, Math.round((factoryNum / processNum) * 100)) |
| | | }) |
| | | if (res.code !== 200 || !Array.isArray(res.data)) return |
| | | const items = res.data |
| | | xAxis1.value[0].data = items.map((d) => d.name) |
| | | chartSeries.value[0].data = items.map((d) => parseFloat(d.value) || 0) |
| | | }) |
| | | .catch((err) => { |
| | | console.error('获取产量、工资与合格率数据失败:', err) |
| | | console.error('获取生产核算分析失败:', err) |
| | | }) |
| | | } |
| | | |
| | | |
| | | onMounted(() => { |
| | | fetchData() |
| | | }) |