291 lines
7.3 KiB
Vue
291 lines
7.3 KiB
Vue
<template>
|
||
<div class="coreItem">
|
||
<div class="item" @click="handleRoute(item.route)" v-for="(item, index) in itemList" :key="index">
|
||
<div class="name">{{ item.name }}</div>
|
||
<div class="item-content">
|
||
<div class="content-wrapper">
|
||
<div class="left">
|
||
<div class="number" style="color: rgba(103, 103, 103, 0.79);">{{ item.targetValue }}</div>
|
||
<div class="title" style="color: rgba(134, 134, 135, 1);">目标值</div>
|
||
</div>
|
||
<div class="line"></div>
|
||
<!-- 实际值：根据 实际值≥目标值 动态绑定类名 -->
|
||
<div class="right">
|
||
<div class="number" :class="{
|
||
'number-exceed': item.currentValue >= item.targetValue,
|
||
'number-below': item.currentValue < item.targetValue
|
||
}">
|
||
{{ item.currentValue }}
|
||
</div>
|
||
<div class="title" style="color: rgba(134, 134, 135, 1);">实际值</div>
|
||
</div>
|
||
</div>
|
||
<div class="line"></div>
|
||
|
||
<!-- 进度条：同步绑定类名 -->
|
||
<div class="progress-group">
|
||
<div class="progress-container">
|
||
<div class="progress-bar" :style="{ width: item.progress + '%' }" :class="{
|
||
'bar-exceed': item.currentValue >= item.targetValue,
|
||
'bar-below': item.currentValue < item.targetValue
|
||
}"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 完成率：同步绑定类名 -->
|
||
<div class="yield" style="display: flex;justify-content: space-between;">
|
||
<div class="progress-percent" :class="{
|
||
'percent-exceed': item.currentValue >= item.targetValue,
|
||
'percent-below': item.currentValue < item.targetValue
|
||
}">完成率</div>
|
||
<div class="progress-percent" :class="{
|
||
'percent-exceed': item.currentValue >= item.targetValue,
|
||
'percent-below': item.currentValue < item.targetValue
|
||
}">
|
||
{{ item.progress }}%
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: "Container",
|
||
components: {},
|
||
props: ["finance",'dateData'],
|
||
data() {
|
||
return {
|
||
// itemList: [
|
||
// {
|
||
// name: "营业收入·万元",
|
||
// targetValue: 16,
|
||
// currentValue: 17.2, // 大于目标值（绿色）
|
||
// progress: 107.5,
|
||
// route: 'operatingRevenue'
|
||
// },
|
||
// {
|
||
// name: "经营性利润·万元",
|
||
// targetValue: 16,
|
||
// currentValue: 16, // 等于目标值（绿色）
|
||
// progress: 100,
|
||
// route: 'profitAnalysis'
|
||
// },
|
||
// {
|
||
// name: "利润总额·万元",
|
||
// targetValue: 16,
|
||
// currentValue: 14.8, // 小于目标值（黄色）
|
||
// progress: 92.5,
|
||
// route: 'profitAnalysis'
|
||
// },
|
||
// {
|
||
// name: "毛利率·%",
|
||
// targetValue: 16,
|
||
// currentValue: 15.5, // 小于目标值（黄色）
|
||
// progress: 96.875,
|
||
// route: 'profitAnalysis'
|
||
// }
|
||
// ]
|
||
};
|
||
},
|
||
watch: {
|
||
finance: {
|
||
handler(newVal) {
|
||
if (newVal) {
|
||
this.itemList = this.transformData(newVal);
|
||
}
|
||
},
|
||
immediate: true,
|
||
deep: true
|
||
}
|
||
},
|
||
methods: {
|
||
transformData(rawData) {
|
||
// 定义指标映射关系，包括名称、对应的数据键和路由
|
||
const Mapping = [
|
||
{ key: 'operatingRevenue', name: '营业收入·万元', route: 'operatingRevenue' },
|
||
{ key: 'operatingIncome', name: '经营性利润·万元', route: 'profitAnalysis' },
|
||
{ key: 'totalProfit', name: '利润总额·万元', route: 'profitAnalysis' },
|
||
{ key: 'grossMargin', name: '毛利率·%', route: 'profitAnalysis' }
|
||
];
|
||
|
||
// 遍历映射关系，转换数据
|
||
return Mapping.map(mappingItem => {
|
||
const data = rawData[mappingItem.key] || { rate: 0, real: 0, target: 0 };
|
||
|
||
return {
|
||
name: mappingItem.name,
|
||
targetValue: data.target,
|
||
currentValue: data.real,
|
||
progress: Math.round(data.rate), // 将小数率转换为百分比并四舍五入
|
||
route: mappingItem.route
|
||
};
|
||
});
|
||
},
|
||
handleRoute(route) {
|
||
if (route) {
|
||
this.$router.push({
|
||
path: route,
|
||
query: {
|
||
dateData: this.dateData
|
||
}
|
||
});
|
||
}
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.coreItem {
|
||
display: flex;
|
||
gap: 8px;
|
||
// padding: 8px; // 避免边缘item hover阴影被截断
|
||
}
|
||
|
||
.item {
|
||
width: 170px;
|
||
height: 228px;
|
||
background: #f9fcff;
|
||
padding: 12px 0px 17px 12px;
|
||
box-sizing: border-box;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
|
||
&:hover {
|
||
box-shadow: 0px 4px 12px 2px #B5CDE5;
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
.name {
|
||
height: 18px;
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 18px;
|
||
color: #000000;
|
||
line-height: 18px;
|
||
letter-spacing: 1px;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
|
||
.item-content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
height: calc(100% - 26px);
|
||
}
|
||
|
||
.content-wrapper {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 10px;
|
||
}
|
||
|
||
.line {
|
||
width: 149px;
|
||
height: 1px;
|
||
background: linear-gradient(to left, rgba(255, 0, 0, 0), #cbcbcb);
|
||
}
|
||
|
||
.left,
|
||
.right {
|
||
margin-top: 11px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 2px;
|
||
width: 100%;
|
||
}
|
||
|
||
/* 实际值 - 基础样式（无颜色） */
|
||
.number {
|
||
height: 22px;
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 600;
|
||
font-size: 24px;
|
||
line-height: 22px;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
|
||
/* 实际值 - 实际值≥目标值（绿色） */
|
||
.number-exceed {
|
||
color: rgba(54, 181, 138, 1) !important;
|
||
}
|
||
|
||
/* 实际值 - 实际值<目标值（黄色） */
|
||
.number-below {
|
||
color: rgba(249, 164, 74, 1) !important;
|
||
}
|
||
|
||
.title {
|
||
height: 14px;
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 12px;
|
||
color: #868687;
|
||
line-height: 14px;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
|
||
.progress-group {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
margin-top: 15px;
|
||
}
|
||
|
||
.progress-container {
|
||
width: 138px;
|
||
height: 10px;
|
||
background: #ECEFF7;
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* 进度条 - 基础样式（无颜色） */
|
||
.progress-bar {
|
||
height: 100%;
|
||
border-radius: 8px;
|
||
transition: width 0.5s ease;
|
||
}
|
||
|
||
/* 进度条 - 实际值≥目标值（绿色） */
|
||
.bar-exceed {
|
||
background:rgba(98, 213, 180, 1) !important;
|
||
opacity: 1 !important;
|
||
}
|
||
|
||
/* 进度条 - 实际值<目标值（黄色） */
|
||
.bar-below {
|
||
background: rgba(249, 164, 74, 1) !important;
|
||
opacity: 1 !important;
|
||
}
|
||
|
||
/* 百分比 - 基础样式（无颜色） */
|
||
.progress-percent {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 12px;
|
||
line-height: 1;
|
||
}
|
||
|
||
/* 百分比 - 实际值≥目标值（绿色） */
|
||
.percent-exceed {
|
||
color: rgba(54, 181, 138, 1) !important;
|
||
}
|
||
|
||
/* 百分比 - 实际值<目标值（黄色） */
|
||
.percent-below {
|
||
color: rgba(249, 164, 74, 1) !important;
|
||
}
|
||
|
||
.yield {
|
||
width: 138px;
|
||
margin-top: 3px;
|
||
}
|
||
}
|
||
</style>
|