This commit is contained in:
‘937886381’
2025-11-14 17:04:22 +08:00
parent 3d167e8d71
commit dfa4ff3f54
28 changed files with 684 additions and 141 deletions

View File

@@ -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())

View File

@@ -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

View File

@@ -290,6 +290,7 @@ export default {
.progress-group {
display: flex;
align-items: center;
margin-bottom: 4px;
}
.progress-container {

View File

@@ -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" />

View File

@@ -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" />

View File

@@ -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],

View File

@@ -286,6 +286,7 @@ export default {
.progress-group {
display: flex;
align-items: center;
margin-bottom: 4px;
}
.progress-container {

View File

@@ -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,

View File

@@ -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,