<template>
|
<div>
|
<PanelHeader title="生产核算分析" />
|
<div class="main-panel panel-item-customers">
|
<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: 320px" />
|
</div>
|
</div>
|
</template>
|
|
<script setup>
|
import { ref, onMounted } from 'vue'
|
import { productionAccountingAnalysis } from '@/api/viewIndex.js'
|
import PanelHeader from './PanelHeader.vue'
|
import DateTypeSwitch from './DateTypeSwitch.vue'
|
import Echarts from '@/components/Echarts/echarts.vue'
|
|
const dateType = ref(1)
|
|
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: ['完成数量', '工资金额', '合格率'],
|
top: '0%'
|
}
|
|
// 初始化 series 结构
|
const chartSeries = ref([
|
{
|
name: '完成数量',
|
type: 'bar',
|
barWidth: 15,
|
itemStyle: { color: '#4EE4FF' },
|
data: []
|
},
|
{
|
name: '工资金额',
|
type: 'bar',
|
barWidth: 15,
|
itemStyle: { color: '#00A4ED' },
|
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: 'shadow' },
|
formatter(params) {
|
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 res
|
}
|
}
|
|
const handleDateTypeChange = () => {
|
fetchData()
|
}
|
|
const fetchData = () => {
|
productionAccountingAnalysis({ type: dateType.value })
|
.then((res) => {
|
if (res.code === 200 && Array.isArray(res.data)) {
|
const items = res.data
|
|
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)
|
})
|
}
|
|
onMounted(() => {
|
fetchData()
|
})
|
</script>
|
|
<style scoped>
|
.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>
|
