<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: 260px"
|
/>
|
</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) // 1=周 2=月 3=季度
|
|
const chartStyle = {
|
width: '100%',
|
height: '140%',
|
}
|
|
const grid = { left: '10%', right: '4%', bottom: '3%', top: '10%', containLabel: true }
|
|
const barLegend = {
|
show: true,
|
textStyle: { color: '#B8C8E0' },
|
data: ['生产核算'],
|
}
|
|
// 柱状图：生产核算
|
const chartSeries = ref([
|
{
|
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)' },
|
],
|
},
|
},
|
data: [],
|
},
|
])
|
|
const tooltip = {
|
trigger: 'axis',
|
axisPointer: { type: 'cross' },
|
formatter(params) {
|
let result = params[0].axisValueLabel + '<br/>'
|
params.forEach((item) => {
|
result += `<div>${item.marker} ${item.seriesName}: ${item.value} 元</div>`
|
})
|
return result
|
},
|
}
|
|
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 })
|
.then((res) => {
|
if (res.code !== 200) return
|
|
const items = Array.isArray(res.data) ? res.data : []
|
|
// 兼容字段：有的接口返回 dateStr，有的返回 date
|
xAxis1.value[0].data = items.map((d) => d.dateStr ?? d.date ?? '')
|
chartSeries.value[0].data = items.map((d) => parseFloat(d.amount) || 0)
|
})
|
.catch((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;
|
}
|
</style>
|
