修改
This commit is contained in:
‘937886381’
@@ -5,7 +5,7 @@
|
||||
<div class="kpi-content" style="padding: 14px 14px; display: flex;flex-direction: column; width: 100%;">
|
||||
<!-- 2. .top 保持 flex，无需固定高度，自动跟随子元素拉伸 -->
|
||||
<div class="top" style="display: flex; width: 100%;">
|
||||
<top-item :height="367" :itemList="parentItemList" />
|
||||
<top-item v-if="saleData" :height="367" :itemList="formattedParentItemList" />
|
||||
</div>
|
||||
<div class="bottom"
|
||||
style="display: flex; width: 100%;margin-top: 8px;background-color: rgba(249, 252, 255, 1);">
|
||||
@@ -27,14 +27,10 @@ export default {
|
||||
components: { Container, topItem },
|
||||
// mixins: [resize],
|
||||
props: {
|
||||
leftEqInfoData: { // 接收父组件传递的设备数据数组
|
||||
type: Array,
|
||||
default: () => [] // 默认空数组，避免报错
|
||||
},
|
||||
productionOverviewVo: { // 恢复生产概览数据（原代码注释了，需根据实际需求保留）
|
||||
saleData: { // 接收父组件传递的设备数据数组
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
default: () => {} // 默认空数组，避免报错
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@@ -42,57 +38,57 @@ export default {
|
||||
parentItemList: [
|
||||
{
|
||||
name: "利润总额",
|
||||
targetValue: 50,
|
||||
value: 58,
|
||||
proportion: 116,
|
||||
targetValue: 0,
|
||||
value: 0,
|
||||
proportion: 0,
|
||||
route: 'profitAnalysis',
|
||||
completed: 1 // 实际超目标，达标
|
||||
},
|
||||
{
|
||||
name: "毛利率",
|
||||
targetValue: 30,
|
||||
value: 28.5,
|
||||
proportion: 95,
|
||||
targetValue: 0,
|
||||
value: 0,
|
||||
proportion: 0,
|
||||
route: 'profitAnalysis',
|
||||
completed: 0 // 未达30%目标，不达标
|
||||
completed: 1 // 未达30%目标，不达标
|
||||
},
|
||||
{
|
||||
name: "单价",
|
||||
targetValue: 12,
|
||||
value: 12.5,
|
||||
proportion: 104.2,
|
||||
targetValue: 0,
|
||||
value: 0,
|
||||
proportion: 0,
|
||||
route: 'cost/cost',
|
||||
completed: 1 // 单价达标
|
||||
},
|
||||
{
|
||||
name: "净价",
|
||||
targetValue: 9,
|
||||
value: 8.8,
|
||||
proportion: 97.8,
|
||||
targetValue: 0,
|
||||
value: 0,
|
||||
proportion: 0,
|
||||
route: 'cost/cost',
|
||||
completed: 0 // 未达目标，不达标
|
||||
completed: 1 // 未达目标，不达标
|
||||
},
|
||||
{
|
||||
name: "销量",
|
||||
targetValue: 100,
|
||||
value: 120,
|
||||
proportion: 120,
|
||||
targetValue: 0,
|
||||
value: 0,
|
||||
proportion: 0,
|
||||
route: 'profitAnalysis',
|
||||
completed: 1 // 销量超额达标
|
||||
},
|
||||
{
|
||||
name: "双镀面板",
|
||||
targetValue: 30,
|
||||
value: 29,
|
||||
proportion: 96.7,
|
||||
targetValue: 0,
|
||||
value: 0,
|
||||
proportion: 0,
|
||||
route: 'profitAnalysis',
|
||||
completed: 0 // 略低目标，不达标
|
||||
completed: 1 // 略低目标，不达标
|
||||
},
|
||||
{
|
||||
name: "溢价产品销量",
|
||||
targetValue: 15,
|
||||
value: 18,
|
||||
proportion: 120,
|
||||
targetValue: 0,
|
||||
value: 0,
|
||||
proportion: 0,
|
||||
route: 'profitAnalysis',
|
||||
completed: 1 // 超额达标
|
||||
}
|
||||
@@ -100,135 +96,59 @@ export default {
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
productionOverviewVo: {
|
||||
handler(newValue, oldValue) {
|
||||
this.updateChart()
|
||||
},
|
||||
deep: true // 若对象内属性变化需触发，需加 deep: true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
formattedParentItemList() {
|
||||
// --- 新增判断 ---
|
||||
// 如果 saleData 不存在、为 null，或者是不包含任何属性的空对象，则返回原始的 parentItemList
|
||||
if (!this.saleData || Object.keys(this.saleData).length === 0) {
|
||||
return this.parentItemList;
|
||||
}
|
||||
// --- 判断结束 ---
|
||||
|
||||
// 定义一个名称到键的映射表，方便查找
|
||||
const nameToKeyMap = {
|
||||
"利润总额": "totalProfit",
|
||||
"毛利率": "grossMargin",
|
||||
"单价": "unitPrice",
|
||||
"净价": "netPrice",
|
||||
"销量": "sales",
|
||||
"双镀面板": "panel",
|
||||
"溢价产品销量": "premiumProduct"
|
||||
};
|
||||
|
||||
// 遍历原始的 parentItemList
|
||||
return this.parentItemList.map(item => {
|
||||
// 根据当前 item 的 name 找到 SaleData 中对应的键
|
||||
const key = nameToKeyMap[item.name];
|
||||
|
||||
// 如果找到了对应的键，并且 saleItem 存在，就从 SaleData 中获取数据
|
||||
if (key && this.saleData[key]) {
|
||||
const saleItem = this.saleData[key];
|
||||
return {
|
||||
...item,
|
||||
value: saleItem.real,
|
||||
targetValue: saleItem.target,
|
||||
// proportion: saleItem.rate !== null && saleItem.rate !== undefined
|
||||
// ? Math.round(saleItem.rate * 100)
|
||||
// : 0,
|
||||
// 直接使用处理好的 rate
|
||||
proportion: saleItem.rate,
|
||||
// 根据完成率判断是否达标 (假设 >=100% 为达标)
|
||||
completed: saleItem.rate >= 1 ? 1 : 0,
|
||||
};
|
||||
}
|
||||
|
||||
// 如果没有找到对应的数据，则返回原始 item
|
||||
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
|
||||
|
||||
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)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -391,14 +311,4 @@ 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>
|
||||
|
||||
Reference in New Issue
Block a user