mt-fe-group/yudao-dev
13
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

修改

Browse Source
This commit is contained in:
‘937886381’
2025-11-24 14:10:46 +08:00
parent dfa4ff3f54
commit 694beb5851
54 changed files with 1612 additions and 2290 deletions
Download Patch File Download Diff File Expand all files Collapse all files

211
src/views/home/components/premProdStatus.vue
View File

@@ -5,7 +5,7 @@
<div class="kpi-content" style="padding: 14px 16px 8px 16px; display: flex;flex-direction: column; width: 100%;">
<!-- 2. .top 保持 flex，无需固定高度，自动跟随子元素拉伸 -->
<div class="top" style="display: flex; width: 100%;">
<top-item :itemList="parentItemList" />
<top-item :itemList="formattedPremiumProductList" />
</div>
</div>
<div class="bottom-content" style="display: flex;flex-direction: column; width: 100%;">
@@ -28,10 +28,10 @@
</div>
<div class="pie" style="display: flex;gap: 8px;margin-top: 68px;padding: 0 16px;">
<div class="month-pie" style="height: 212px;width: 382px;background: #F9FCFF;">
<pieChart :chartRef=" 'monthChart' " />
<pieChart :pieData="monthPieData" :chartRef=" 'monthChart' " />
</div>
<div class="-pie" style="height: 212px;width: 382px;background: #F9FCFF;">
<pieChartTwo :chartRef="'yearChart'" />
<pieChartTwo :pieData="yearPieData" :chartRef="'yearChart'" />
</div>
</div>
@@ -54,11 +54,11 @@ export default {
components: { Container, topItem, coreBottomBar, pieChart, pieChartTwo },
// mixins: [resize],
props: {
leftEqInfoData: { // 接收父组件传递的设备数据数组
type: Array,
default: () => [] // 默认空数组，避免报错
premiumProduct: { // 接收父组件传递的设备数据数组
type: Object,
default: () => {} // 默认空数组，避免报错
},
productionOverviewVo: { // 恢复生产概览数据（原代码注释了，需根据实际需求保留）
salesProportion: { // 恢复生产概览数据（原代码注释了，需根据实际需求保留）
type: Object,
default: () => ({})
}
@@ -66,20 +66,22 @@ export default {
data() {
return {
chart: null,
monthPieData: {},
yearPieData:{},
parentItemList: [
{
name: "月度",
targetValue: 80,
value: 76,
proportion: 95,
targetValue: 0,
value: 0,
proportion: 0,
route: 'profitAnalysis',
completed: 0 // 未达目标值，不达标
completed: 1 // 未达目标值，不达标
},
{
name: "年度",
targetValue: 900,
value: 920,
proportion: 102.2,
targetValue: 0,
value: 0,
proportion: 0,
route: 'profitAnalysis',
completed: 1 // 超出目标值，达标
}
@@ -87,134 +89,68 @@ export default {
}
},
watch: {
productionOverviewVo: {
salesProportion: {
handler(newValue, oldValue) {
this.updateChart()
console.log('salesProportion',newValue);
this.getPieData()
},
deep: true // 若对象内属性变化需触发，需加 deep: true
}
},
computed: {
formattedPremiumProductList() {
const premiumProductData = this.premiumProduct || {};
const nameToKeyMap = {
"月度": "month",
"年度": "year"
};
return this.parentItemList.map(item => {
const key = nameToKeyMap[item.name];
if (key && premiumProductData[key]) {
const periodData = premiumProductData[key];
let completed = 0;
// 新增：判断三个值是否都为0
const allZeros = periodData.real === 0 &&
periodData.target === 0 &&
periodData.rate === 0;
if (allZeros) {
completed = 1;
} else if (periodData.rate !== null && periodData.rate !== undefined) {
completed = periodData.rate >= 1 ? 1 : 0;
}
return {
...item,
value: periodData.real,
targetValue: periodData.target,
proportion: periodData.rate !== null && periodData.rate !== undefined
? Math.round(periodData.rate * 100)
: 0,
completed: completed,
};
}
return item;
});
}
},
mounted() {
// 初始化图表（若需展示图表，需在模板中添加对应 DOM）
// this.$nextTick(() => this.updateChart())
},
beforeDestroy() {
// 销毁图表，避免内存泄漏
if (this.chart) {
this.chart.dispose()
this.chart = null
}
},
methods: {
updateChart() {
// 注意：原代码中图表依赖 id 为 "productionStatusChart" 的 DOM，需在模板中补充，否则会报错
// 示例：在 Container 内添加 <div id="productionStatusChart" style="height: 200px;"></div>
if (!document.getElementById('productionStatusChart')) return
getPieData() {
this.monthPieData = this.salesProportion ? this.salesProportion.month : {}
this.yearPieData = this.salesProportion ? this.salesProportion.year : {}
console.log('this.monthPieData', this.monthPieData, this.yearPieData);
if (this.chart) this.chart.dispose()
this.chart = echarts.init(document.getElementById('productionStatusChart'))
const data = [
this.productionOverviewVo.input || 0,
this.productionOverviewVo.output || 0,
this.productionOverviewVo.ng || 0,
this.productionOverviewVo.lowValue || 0,
this.productionOverviewVo.scrap || 0,
this.productionOverviewVo.inProcess || 0,
this.productionOverviewVo.engineer || 0
]
const option = {
type: 'bar',
grid: { left: 51, right: 40, top: 50, bottom: 45 },
tooltip: {
trigger: 'axis',
axisPointer: { type: 'shadow' },
className: 'production-status-chart-tooltip'
},
xAxis: {
type: 'category',
offset: 8,
data: ['投入', '产出', '待判', '低价值', '报废', '在制', '实验片'],
axisTick: { show: false },
axisLine: { show: true, onZero: false, lineStyle: { color: '#00E8FF' } },
axisLabel: {
color: 'rgba(255,255,255,0.7)',
fontSize: 12,
interval: 0,
width: 38,
overflow: 'break'
}
},
yAxis: {
type: 'value',
name: '单位/片',
nameTextStyle: { color: 'rgba(255,255,255,0.7)', fontSize: 14, align: 'left' },
min: () => 0,
max: (value) => Math.ceil(value.max),
scale: true,
axisTick: { show: false },
axisLabel: { color: 'rgba(255,255,255,0.7)', fontSize: 12 },
splitLine: { lineStyle: { color: 'RGBA(24, 88, 100, 0.6)', type: 'dashed' } },
axisLine: { show: true, lineStyle: { color: '#00E8FF' } }
},
series: [
{
type: 'pictorialBar',
label: { show: true, position: 'top', distance: -3, color: '#89CDFF', fontSize: 11 },
symbolSize: [20, 8],
symbolOffset: [0, 5],
z: 20,
itemStyle: {
borderColor: '#3588C7',
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'RGBA(22, 89, 98, 1)' },
{ offset: 1, color: '#3588C7' }
])
},
data: data
},
{
type: 'bar',
barWidth: 20,
itemStyle: {
borderWidth: 1,
borderColor: '#3588C7',
opacity: 0.8,
color: {
x: 0, y: 0, x2: 0, y2: 1,
type: 'linear',
global: false,
colorStops: [
{ offset: 0, color: 'rgba(73,178,255,0)' },
{ offset: 0.5, color: 'rgba(0, 232, 255, .5)' },
{ offset: 1, color: 'rgba(0, 232, 255, 1)' }
]
}
},
tooltip: { show: false },
data: data
},
{
type: 'pictorialBar',
symbolSize: [20, 8],
symbolOffset: [0, -4],
z: 12,
symbolPosition: 'end',
itemStyle: {
borderColor: 'rgba(0, 232, 255, 1)',
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'RGBA(22, 89, 98, 1)' },
{ offset: 1, color: '#3588C7' }
])
},
tooltip: { show: false },
data: data
}
]
}
this.chart.setOption(option)
}
}
}
@@ -392,16 +328,3 @@ export default {
}
</style>
<style>
/* 全局 tooltip 样式（不使用 scoped，确保生效） */
.production-status-chart-tooltip {
background: #0a2b4f77 !important;
border: none !important;
backdrop-filter: blur(12px);
}
.production-status-chart-tooltip * {
color: #fff !important;
}
</style>