修改
This commit is contained in:
@@ -6,7 +6,7 @@
|
||||
<!-- 新增:topItem 专属包裹容器,统一控制样式和布局 -->
|
||||
<div class="topItem-container" style="display: flex; flex-direction: column;gap: 16px;overflow: hidden;">
|
||||
<!-- <topItem :itemList="parentItemList" /> -->
|
||||
<rawItem :itemList="sortedItemData" />
|
||||
<rawItem :itemList="itemData" />
|
||||
|
||||
</div>
|
||||
<!-- 2. .top 保持 flex,无需固定高度,自动跟随子元素拉伸 -->
|
||||
@@ -50,21 +50,21 @@ export default {
|
||||
deep: true // 若对象内属性变化需触发,需加 deep: true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 处理排序:包含“总成本”的项放前面,其余项按原顺序排列
|
||||
sortedItemData() {
|
||||
// 过滤出包含“总成本”的项(不区分大小写)
|
||||
const totalCostItems = this.itemData.filter(item =>
|
||||
item.name && item.name.includes('总成本')
|
||||
);
|
||||
// 过滤出不包含“总成本”的项
|
||||
const otherItems = this.itemData.filter(item =>
|
||||
!item.name || !item.name.includes('总成本')
|
||||
);
|
||||
// 合并:总成本项在前,其他项在后
|
||||
return [...totalCostItems, ...otherItems];
|
||||
}
|
||||
},
|
||||
// computed: {
|
||||
// // 处理排序:包含“总成本”的项放前面,其余项按原顺序排列
|
||||
// sortedItemData() {
|
||||
// // 过滤出包含“总成本”的项(不区分大小写)
|
||||
// const totalCostItems = this.itemData.filter(item =>
|
||||
// item.name && item.name.includes('总成本')
|
||||
// );
|
||||
// // 过滤出不包含“总成本”的项
|
||||
// const otherItems = this.itemData.filter(item =>
|
||||
// !item.name || !item.name.includes('总成本')
|
||||
// );
|
||||
// // 合并:总成本项在前,其他项在后
|
||||
// return [...totalCostItems, ...otherItems];
|
||||
// }
|
||||
// },
|
||||
mounted() {
|
||||
// 初始化图表(若需展示图表,需在模板中添加对应 DOM)
|
||||
// this.$nextTick(() => this.updateChart())
|
||||
|
||||
@@ -175,7 +175,7 @@ export default {
|
||||
opacity: 0.2,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: 'rgba(40, 138, 255, .9)' },
|
||||
{ offset: 1, color: 'rgba(255, 132, 0, 0)' }
|
||||
{ offset: 1, color: 'rgba(40, 138, 255, 0)' }
|
||||
])
|
||||
},
|
||||
data: proportion,
|
||||
@@ -188,10 +188,26 @@ export default {
|
||||
yAxisIndex: 0,
|
||||
barWidth: 14,
|
||||
itemStyle: {
|
||||
color: 'rgba(40, 137, 255, 1)',
|
||||
// 移除多余的 normal 层级,直接配置 color 渐变
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{ offset: 0, color: 'rgba(130, 204, 255, 1)' },
|
||||
{ offset: 1, color: 'rgba(75, 157, 255, 1)' }
|
||||
]
|
||||
},
|
||||
borderRadius: [4, 4, 0, 0],
|
||||
borderWidth: 0
|
||||
},
|
||||
// itemStyle: {
|
||||
// color: 'rgba(40, 137, 255, 1)',
|
||||
// borderRadius: [4, 4, 0, 0],
|
||||
// borderWidth: 0
|
||||
// },
|
||||
data: target
|
||||
},
|
||||
{
|
||||
@@ -200,13 +216,39 @@ export default {
|
||||
yAxisIndex: 0,
|
||||
barWidth: 14,
|
||||
itemStyle: {
|
||||
// 使用处理后的 safeFlag 避免 undefined
|
||||
// 根据 safeFlag 动态返回不同的渐变色
|
||||
color: (params) => {
|
||||
const dataIndex = params.dataIndex;
|
||||
const currentFlag = safeFlag[dataIndex] || 0; // 双重保险,防止越界
|
||||
return currentFlag === 1
|
||||
? 'rgba(118, 218, 190, 1)'
|
||||
: 'rgba(249, 164, 74, 1)';
|
||||
const currentFlag = safeFlag[dataIndex] || 0; // 默认为0(不达标)
|
||||
|
||||
// 达标时的渐变(绿色系)
|
||||
if (currentFlag === 1) {
|
||||
return {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{ offset: 0, color: 'rgba(174, 239, 224, 1)' }, // 浅绿
|
||||
{ offset: 1, color: 'rgba(118, 218, 190, 1)' } // 深绿
|
||||
]
|
||||
};
|
||||
}
|
||||
// 不达标时的渐变(橙色系)
|
||||
else {
|
||||
return {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{ offset: 0, color: 'rgba(253, 209, 129, 1)' }, // 浅橙
|
||||
{ offset: 1, color: 'rgba(249, 164, 74, 1)' } // 深橙
|
||||
]
|
||||
};
|
||||
}
|
||||
},
|
||||
borderRadius: [4, 4, 0, 0],
|
||||
borderWidth: 0
|
||||
|
||||
@@ -290,6 +290,7 @@ export default {
|
||||
.progress-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.progress-container {
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
<template>
|
||||
<div style="width: 100%;">
|
||||
<Container name="领用明细" icon="cockpitItemIcon" size="productMiddleBg" topSize="middle">
|
||||
<Container name="领用明细" icon="cockpitItemIcon" size="" topSize="middle">
|
||||
<!-- 1. 移除 .kpi-content 的固定高度,改为自适应 -->
|
||||
<div class="kpi-content" style=" padding: 14px 16px; display: flex;width: 100%;">
|
||||
<div class="bottom"
|
||||
style="padding: 14px 16px; height: 620px; display: flex; width: 100%;background-color: rgba(249, 252, 255, 1);">
|
||||
style="padding: 14px 16px; height: 620px; display: flex; width: 100%;;">
|
||||
<!-- <top-item /> -->
|
||||
<base-table style="width: 100%;" :page="1" :limit="10" :show-index="true" :beilv="1" :tableConfig="tableProps"
|
||||
:table-data="tableData" />
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
<template>
|
||||
<div style="width: 100%;">
|
||||
<Container name="入账明细" icon="cockpitItemIcon" size="productMiddleBg" topSize="middle">
|
||||
<Container name="入账明细" icon="cockpitItemIcon" size="" topSize="middle">
|
||||
<!-- 1. 移除 .kpi-content 的固定高度,改为自适应 -->
|
||||
<div class="kpi-content" style="padding: 14px 16px; display: flex;width: 100%;">
|
||||
<div class="bottom"
|
||||
style="padding: 14px 16px; height: 620px; display: flex; width: 100%;background-color: rgba(249, 252, 255, 1);">
|
||||
style="padding: 14px 16px; height: 620px; display: flex; width: 100%;">
|
||||
<!-- <top-item /> -->
|
||||
<base-table style="width: 100%;" :page="1" :limit="10" :show-index="true" :beilv="1" :tableConfig="tableProps"
|
||||
:table-data="tableData" />
|
||||
|
||||
@@ -115,7 +115,7 @@ export default {
|
||||
opacity: 0.2,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: 'rgba(40, 138, 255, .9)' },
|
||||
{ offset: 1, color: 'rgba(255, 132, 0, 0)' }
|
||||
{ offset: 1, color: 'rgba(40, 138, 255, 0)' }
|
||||
])
|
||||
},
|
||||
data: [200, 280, 180, 300, 220, 350],
|
||||
|
||||
@@ -286,6 +286,7 @@ export default {
|
||||
.progress-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.progress-container {
|
||||
|
||||
@@ -119,7 +119,7 @@ export default {
|
||||
height: 46px;
|
||||
background: linear-gradient(to bottom,
|
||||
rgba(255, 0, 0, 0),
|
||||
rgba(40, 203, 151, 1));
|
||||
#cbcbcb);
|
||||
}
|
||||
|
||||
.left,
|
||||
|
||||
@@ -228,7 +228,7 @@ export default {
|
||||
height: 46px;
|
||||
background: linear-gradient(to bottom,
|
||||
rgba(255, 0, 0, 0),
|
||||
rgba(40, 203, 151, 1));
|
||||
#cbcbcb);
|
||||
}
|
||||
|
||||
.left,
|
||||
|
||||
Reference in New Issue
Block a user