| | |
| | | }; |
| | | |
| | | // 工单执行效率分析(dateType: 1周 2月 3季度) |
| | | // export const workOrderEfficiencyAnalysis = (params) => { |
| | | // return request({ |
| | | // url: "/home/workOrderEfficiencyAnalysis", |
| | | // method: "get", |
| | | // params, |
| | | // }); |
| | | // }; |
| | | |
| | | // 生产核算分析(dateType: 1周 2月 3季度) |
| | | export const productionAccountingAnalysis = (params) => { |
| | | export const workOrderEfficiencyAnalysis = (params) => { |
| | | return request({ |
| | | url: "/home/productionAccountingAnalysis", |
| | | url: "/home/workOrderEfficiencyAnalysis", |
| | | method: "get", |
| | | params, |
| | | }); |
| | | }; |
| | | |
| | | // 生产核算分析 |
| | | export const productionAccountingAnalysis = (query) => { |
| | | return request({ |
| | |
| | | <div class="filters-row"> |
| | | <DateTypeSwitch v-model="dateType" @change="handleDateTypeChange" /> |
| | | </div> |
| | | <Echarts |
| | | ref="chart" |
| | | :chartStyle="chartStyle" |
| | | :grid="grid" |
| | | :legend="barLegend" |
| | | :series="chartSeries" |
| | | :tooltip="tooltip" |
| | | :xAxis="xAxis1" |
| | | :yAxis="yAxis1" |
| | | :options="{ backgroundColor: 'transparent', textStyle: { color: '#B8C8E0' } }" |
| | | style="height: 260px" |
| | | /> |
| | | <Echarts ref="chart" :chartStyle="chartStyle" :grid="grid" :legend="barLegend" :series="chartSeries" |
| | | :tooltip="tooltip" :xAxis="xAxis1" :yAxis="yAxis1" |
| | | :options="{ backgroundColor: 'transparent', textStyle: { color: '#B8C8E0' } }" style="height: 320px" /> |
| | | </div> |
| | | </div> |
| | | </template> |
| | |
| | | import DateTypeSwitch from './DateTypeSwitch.vue' |
| | | import Echarts from '@/components/Echarts/echarts.vue' |
| | | |
| | | const dateType = ref(1) // 1=周 2=月 3=季度 |
| | | const dateType = ref(1) |
| | | |
| | | const chartStyle = { |
| | | width: '100%', |
| | | height: '140%', |
| | | } |
| | | |
| | | const grid = { left: '10%', right: '4%', bottom: '3%', top: '10%', containLabel: true } |
| | | const chartStyle = { width: '100%', height: '100%' } |
| | | const grid = { left: '3%', right: '4%', bottom: '3%', top: '15%', containLabel: true } |
| | | |
| | | const barLegend = { |
| | | show: true, |
| | | textStyle: { color: '#B8C8E0' }, |
| | | data: ['生产核算'], |
| | | data: ['完成数量', '工资金额', '合格率'], |
| | | top: '0%' |
| | | } |
| | | |
| | | // 柱状图:生产核算 |
| | | // 初始化 series 结构 |
| | | const chartSeries = ref([ |
| | | { |
| | | name: '生产核算', |
| | | name: '完成数量', |
| | | type: 'bar', |
| | | barWidth: 30, |
| | | emphasis: { focus: 'series' }, |
| | | itemStyle: { |
| | | color: { |
| | | type: 'linear', |
| | | x: 0, |
| | | y: 0, |
| | | x2: 0, |
| | | y2: 1, |
| | | colorStops: [ |
| | | { offset: 1, color: 'rgba(0, 164, 237, 0)' }, |
| | | { offset: 0, color: 'rgba(78, 228, 255, 1)' }, |
| | | ], |
| | | barWidth: 15, |
| | | itemStyle: { color: '#4EE4FF' }, |
| | | data: [] |
| | | }, |
| | | { |
| | | name: '工资金额', |
| | | type: 'bar', |
| | | barWidth: 15, |
| | | itemStyle: { color: '#00A4ED' }, |
| | | data: [] |
| | | }, |
| | | data: [], |
| | | }, |
| | | { |
| | | name: '合格率', |
| | | type: 'line', |
| | | yAxisIndex: 1, |
| | | smooth: true, |
| | | itemStyle: { color: '#FFD339' }, |
| | | data: [] |
| | | } |
| | | ]) |
| | | |
| | | const xAxis1 = ref([ |
| | | { type: 'category', axisTick: { show: false }, axisLabel: { color: '#B8C8E0' }, data: [] } |
| | | ]) |
| | | |
| | | const yAxis1 = [ |
| | | { type: 'value', name: '数量/金额', axisLabel: { color: '#B8C8E0' }, splitLine: { lineStyle: { color: 'rgba(184, 200, 224, 0.2)' } } }, |
| | | { type: 'value', name: '合格率(%)', max: 100, axisLabel: { formatter: '{value}%', color: '#B8C8E0' }, splitLine: { show: false } } |
| | | ] |
| | | |
| | | const tooltip = { |
| | | trigger: 'axis', |
| | | axisPointer: { type: 'cross' }, |
| | | axisPointer: { type: 'shadow' }, |
| | | formatter(params) { |
| | | let result = params[0].axisValueLabel + '<br/>' |
| | | params.forEach((item) => { |
| | | result += `<div>${item.marker} ${item.seriesName}: ${item.value} 元</div>` |
| | | let res = params[0].axisValueLabel + '<br/>' |
| | | params.forEach(item => { |
| | | const unit = item.seriesName === '合格率' ? '%' : (item.seriesName === '工资金额' ? ' 元' : ' 个') |
| | | res += `${item.marker} ${item.seriesName}: ${item.value}${unit}<br/>` |
| | | }) |
| | | return result |
| | | }, |
| | | return res |
| | | } |
| | | |
| | | const xAxis1 = ref([ |
| | | { type: 'category', axisTick: { show: false }, axisLabel: { color: '#B8C8E0' }, data: [] }, |
| | | ]) |
| | | const yAxis1 = [ |
| | | { type: 'value', name: '单位: 元', axisLabel: { color: '#B8C8E0' }, nameTextStyle: { color: '#B8C8E0' }, splitLine: { lineStyle: { color: 'rgba(184, 200, 224, 0.2)' } } }, |
| | | ] |
| | | } |
| | | |
| | | const handleDateTypeChange = () => { |
| | | fetchData() |
| | | } |
| | | |
| | | const fetchData = () => { |
| | | productionAccountingAnalysis({ dateType: dateType.value }) |
| | | productionAccountingAnalysis({ type: dateType.value }) |
| | | .then((res) => { |
| | | if (res.code !== 200 || !Array.isArray(res.data)) return |
| | | if (res.code === 200 && Array.isArray(res.data)) { |
| | | const items = res.data |
| | | xAxis1.value[0].data = items.map((d) => d.name) |
| | | chartSeries.value[0].data = items.map((d) => parseFloat(d.value) || 0) |
| | | |
| | | xAxis1.value[0].data = items.map(item => item.dateStr) |
| | | chartSeries.value[0].data = items.map(item => Number(item.numberOfCompleted) || 0) |
| | | chartSeries.value[1].data = items.map(item => Number(item.amount) || 0) |
| | | chartSeries.value[2].data = items.map(item => Number(item.passRate) || 0) |
| | | |
| | | console.log('更新后的数据:', chartSeries.value) |
| | | } |
| | | }) |
| | | .catch((err) => { |
| | | console.error('获取生产核算分析失败:', err) |
| | | console.error('数据加载失败', err) |
| | | }) |
| | | } |
| | | |
| | | |
| | | onMounted(() => { |
| | | fetchData() |
| | |
| | | </script> |
| | | |
| | | <style scoped> |
| | | .main-panel { |
| | | display: flex; |
| | | flex-direction: column; |
| | | gap: 20px; |
| | | } |
| | | |
| | | .filters-row { |
| | | display: flex; |
| | | justify-content: flex-end; |
| | | align-items: center; |
| | | gap: 12px; |
| | | margin-bottom: 10px; |
| | | } |
| | | |
| | | .panel-item-customers { |
| | | border: 1px solid #1a58b0; |
| | | padding: 18px; |
| | | width: 100%; |
| | | height: 449px; |
| | | box-sizing: border-box; |
| | | } |
| | | |
| | | .filters-row { |
| | | display: flex; |
| | | justify-content: flex-end; |
| | | margin-bottom: 10px; |
| | | } |
| | | </style> |