<template>
|
<div>
|
<PanelHeader title="产品大类" />
|
<div class="panel-item-customers">
|
<div style="height: 70%">
|
<Echarts
|
ref="chart"
|
:chartStyle="chartStyle"
|
:grid="grid"
|
:legend="workInProcessBarLegend"
|
:series="workInProcessBarSeries"
|
:tooltip="tooltip"
|
:xAxis="workInProcessXAxis"
|
:yAxis="workInProcessYAxis"
|
:options="{ backgroundColor: 'transparent', textStyle: { color: '#B8C8E0' } }"
|
style="height: 100%"
|
class="work-in-process-chart"
|
/>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script setup>
|
import { ref, onMounted } from 'vue'
|
import Echarts from '@/components/Echarts/echarts.vue'
|
import PanelHeader from '../PanelHeader.vue'
|
import { getWorkInProcessTurnover } from '@/api/viewIndex.js'
|
|
// 在制品周转统计对象
|
const workInProcessStatistics = ref({
|
totalQuantity: 0,
|
avgTurnoverDays: 0,
|
turnoverEfficiency: 0,
|
})
|
|
// 在制品工序柱状图配置
|
const workInProcessXAxis = ref([
|
{
|
type: 'category',
|
axisTick: { show: false },
|
axisLabel: { color: '#B8C8E0' },
|
data: [],
|
},
|
])
|
|
const workInProcessYAxis = [
|
{
|
type: 'value',
|
axisLabel: { color: '#B8C8E0' },
|
name: '',
|
},
|
]
|
|
const workInProcessBarLegend = {
|
show: false,
|
textStyle: { color: '#B8C8E0' },
|
data: [],
|
}
|
|
const workInProcessBarSeries = ref([
|
{
|
name: '在制品数量',
|
type: 'bar',
|
barWidth: 25,
|
barGap: 0,
|
emphasis: {
|
focus: 'series',
|
},
|
itemStyle: {
|
color: {
|
type: 'linear',
|
x: 0,
|
y: 0,
|
x2: 0,
|
y2: 1,
|
colorStops: [
|
{ offset: 0, color: '#4EE4FF' },
|
{ offset: 1, color: '#00A4ED' },
|
],
|
},
|
},
|
label: {
|
show: true,
|
position: 'top',
|
color: '#B8C8E0',
|
},
|
data: [],
|
},
|
])
|
|
const chartStyle = {
|
width: '100%',
|
height: '115%',
|
}
|
|
const grid = {
|
left: '3%',
|
right: '4%',
|
bottom: '3%',
|
containLabel: true,
|
}
|
|
const tooltip = {
|
trigger: 'axis',
|
axisPointer: {
|
type: 'shadow',
|
},
|
formatter: function (params) {
|
let result = params[0].axisValueLabel + '<br/>'
|
params.forEach((item) => {
|
result += `<div style="color: #B8C8E0">${item.marker} ${item.seriesName}: ${item.value}</div>`
|
})
|
return result
|
},
|
}
|
|
// 在制品周转统计
|
const workInProcessTurnoverInfo = () => {
|
getWorkInProcessTurnover()
|
.then((res) => {
|
console.log('在制品周转统计数据:', res)
|
|
if (!res || !res.data) {
|
console.warn('在制品周转统计数据为空')
|
return
|
}
|
|
// 从接口获取统计数据
|
workInProcessStatistics.value = {
|
totalQuantity: res.data.totalOrderCount || 0,
|
avgTurnoverDays: res.data.averageTurnoverDays || 0,
|
turnoverEfficiency: res.data.turnoverEfficiency || 0,
|
}
|
|
// 设置工序柱状图数据
|
// X轴：processDetails (工序详情数组)
|
// Y轴：processQuantityDetails (工序数量详情数组)
|
if (res.data.processDetails && Array.isArray(res.data.processDetails)) {
|
// 设置X轴数据（工序名称）
|
workInProcessXAxis.value[0].data = res.data.processDetails
|
} else {
|
workInProcessXAxis.value[0].data = []
|
}
|
|
if (
|
res.data.processQuantityDetails &&
|
Array.isArray(res.data.processQuantityDetails)
|
) {
|
// 设置Y轴数据（在制品数量）
|
workInProcessBarSeries.value[0].data = res.data.processQuantityDetails
|
} else {
|
workInProcessBarSeries.value[0].data = []
|
}
|
})
|
.catch((error) => {
|
console.error('获取在制品周转统计失败:', error)
|
})
|
}
|
|
onMounted(() => {
|
workInProcessTurnoverInfo()
|
})
|
</script>
|
|
<style scoped>
|
.panel-item-customers {
|
border: 1px solid #1a58b0;
|
padding: 18px;
|
width: 100%;
|
height: 420px;
|
}
|
|
.quality-cards {
|
display: flex;
|
gap: 12px;
|
width: 100%;
|
height: 54px;
|
justify-content: space-between;
|
align-items: center;
|
}
|
|
.quality-cardSec {
|
display: flex;
|
}
|
|
.quality-cardTitle {
|
font-weight: 400;
|
font-size: 14px;
|
color: #ffffff;
|
display: flex;
|
align-items: flex-start;
|
flex-direction: column;
|
}
|
|
.quality-card {
|
width: 80px;
|
height: 60px;
|
background-size: cover;
|
background-position: center;
|
background-repeat: no-repeat;
|
}
|
|
.quality-card.one {
|
background-image: url('@/assets/BI/yuancailiaoyijianicon@2x.png');
|
}
|
|
.quality-card.two {
|
background-image: url('@/assets/BI/guochengyijianicon@2x.png');
|
}
|
|
.quality-card.three {
|
background-image: url('@/assets/BI/chuchangyijianicon@2x.png');
|
}
|
</style>
|
