568 lines
15 KiB
Vue
568 lines
15 KiB
Vue
<template>
|
||
<div class="coreItem">
|
||
<!-- 单独渲染第一个item -->
|
||
<div class="item" v-if="itemList.length > 0">
|
||
<div class="unit">{{ itemList[0].unit }}</div>
|
||
<div class="item-content">
|
||
<div class="content-wrapper">
|
||
<div class="left">
|
||
<div class="number">{{ itemList[0].targetValue }}</div>
|
||
<div class="title">预算值</div>
|
||
</div>
|
||
<div class="line"></div>
|
||
<div class="right">
|
||
<div class="number" :style="{ color: getColor(itemList[0].currentValue, itemList[0].targetValue) }">
|
||
{{ itemList[0].currentValue }}
|
||
</div>
|
||
<div class="title">实际值</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="progress-group">
|
||
<div class="progress-container">
|
||
<!-- 进度条颜色和宽度动态绑定 -->
|
||
<div class="progress-bar" :style="{
|
||
width: itemList[0].progress + '%',
|
||
background: getColor(itemList[0].currentValue, itemList[0].targetValue)
|
||
}"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="yield" style="display: flex;justify-content: space-between;">
|
||
<div class="progress-percent">完成率</div>
|
||
<!-- 百分比颜色动态绑定 -->
|
||
<div class="progress-percent" :style="{
|
||
color: getColor(itemList[0].currentValue, itemList[0].targetValue)
|
||
}">
|
||
{{ itemList[0].progress }}%
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 循环渲染剩余的item（从索引1开始） -->
|
||
<div class="item groupData" style="display: flex;padding: 0;" v-for="(item, index) in itemList.slice(1)"
|
||
:key="index">
|
||
<!-- 左侧预算值/实际值部分（不变） -->
|
||
<div class="left" style="display: flex;align-items: start;gap: 4px;padding: 12px 0 0 12px;">
|
||
<div class="groupName">{{ item.unit }}</div>
|
||
<div class="left-target">
|
||
<div class="number">{{ item.targetValue }}</div>
|
||
<div class="title">预算值</div>
|
||
</div>
|
||
<div class="left-real">
|
||
<div class="number" :style="{ color: getColor(item.currentValue, item.targetValue) }">
|
||
{{ item.currentValue }}
|
||
</div>
|
||
<div class="title">实际值</div>
|
||
</div>
|
||
</div>
|
||
<div class="cityLine"></div>
|
||
<div class="right">
|
||
<!-- 顶部完成率部分（不变） -->
|
||
<div class="groupName" :class="{
|
||
'bg-default': item.currentValue < item.targetValue,
|
||
'bg-green': item.currentValue >= item.targetValue
|
||
}" style="font-size: 12px;display: flex;align-items: center;justify-content: flex-end;">
|
||
<div class="title">完成率</div>
|
||
<div class="yield" style="font-size: 22px;margin-bottom: 4px;">
|
||
{{ item.progress }}
|
||
</div>
|
||
<div class="unit">%</div>
|
||
</div>
|
||
|
||
<!-- 动态渲染城市进度：循环 item.cities -->
|
||
<div class="right-city" v-for="(city, cityIdx) in item.cities" :key="cityIdx"
|
||
:style="{ marginTop: cityIdx > 0 ? '2px' : '0' }" @click="getTableData(city.num)" style="cursor: pointer;">
|
||
<div class="city">{{ city.name }}</div> <!-- 动态城市名 -->
|
||
<div class="city-progress-group">
|
||
<div class="city-progress-container">
|
||
<!-- 动态城市进度条（颜色按城市进度判断） -->
|
||
<div class="city-progress-bar" :style="{
|
||
width: city.progress + '%',
|
||
background: getColor(city.completed, city.total) // 用城市已完成/总数判断颜色
|
||
}"></div>
|
||
</div>
|
||
</div>
|
||
<div class="city-progress-yield" style="display: flex;justify-content: space-between;">
|
||
<!-- 动态比值（已完成/总数） -->
|
||
<div class="numerator" :style="{ color: getColor(city.completed, city.total) }">
|
||
{{ city.completed }}/{{ city.total }}
|
||
</div>
|
||
<!-- 动态城市完成率 -->
|
||
<div class="city-yield" :style="{ color: getColor(city.completed, city.total) }">
|
||
{{ city.progress }}%
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: "Container",
|
||
components: {},
|
||
props: ["orderOutput"],
|
||
data() {
|
||
return {
|
||
progress: 90, // 进度值基础参数
|
||
itemList: [
|
||
// {
|
||
// unit: "总进度",
|
||
// targetValue: 16,
|
||
// currentValue: 14.5,
|
||
// progress: 90,
|
||
// cities: [] // 总进度无需城市数据，留空
|
||
// },
|
||
// {
|
||
// unit: "一组",
|
||
// targetValue: 16,
|
||
// currentValue: 17,
|
||
// progress: 106,
|
||
// cities: [
|
||
// { name: "桐城", completed: 12, total: 13, progress: 92 },
|
||
// { name: "自贡", completed: 15, total: 16, progress: 93 } // 新增城市示例
|
||
// ]
|
||
// },
|
||
// {
|
||
// unit: "二组",
|
||
// targetValue: 16,
|
||
// currentValue: 16,
|
||
// progress: 100,
|
||
// cities: [
|
||
// { name: "蚌埠", completed: 10, total: 12, progress: 83 },
|
||
// { name: "合肥", completed: 8, total: 10, progress: 80 }
|
||
// ]
|
||
// },
|
||
// // 其他组同理，按需添加 cities 数据
|
||
// {
|
||
// unit: "三组",
|
||
// targetValue: 16,
|
||
// currentValue: 15.2,
|
||
// progress: 85,
|
||
// cities: [{ name: "宜兴", completed: 9, total: 11, progress: 81 }]
|
||
// },
|
||
// {
|
||
// unit: "四组",
|
||
// targetValue: 16,
|
||
// currentValue: 18,
|
||
// progress: 112,
|
||
// cities: [
|
||
// { name: "漳州", completed: 14, total: 15, progress: 93 },
|
||
// { name: "洛阳", completed: 12, total: 14, progress: 85 }
|
||
// ]
|
||
// },
|
||
// {
|
||
// unit: "五组",
|
||
// targetValue: 16,
|
||
// currentValue: 14,
|
||
// progress: 80,
|
||
// cities: [{ name: "桐城", completed: 7, total: 9, progress: 77 }]
|
||
// }
|
||
]
|
||
};
|
||
},
|
||
watch: {
|
||
orderOutput: {
|
||
handler(newValue, oldValue) {
|
||
this.getItemData(newValue)
|
||
},
|
||
deep: true // 若对象内属性变化需触发，需加 deep: true
|
||
}
|
||
},
|
||
methods: {
|
||
getItemData(data) {
|
||
this.itemList = [
|
||
{
|
||
unit: "总进度",
|
||
targetValue: data.totalProgress.target,
|
||
currentValue: data.totalProgress.real,
|
||
progress: data.totalProgress.rate,
|
||
cities: [] // 总进度无需城市数据，留空
|
||
},
|
||
{
|
||
unit: "一组",
|
||
targetValue: data.group1.target,
|
||
currentValue: data.group1.real,
|
||
progress: data.group1.rate,
|
||
cities: [
|
||
{ name: "桐城", completed: data[2].real, total: data[2].target, progress: data[2].rate,num:2 },
|
||
{ name: "自贡", completed: data[3].real, total: data[3].target, progress: data[3].rate, num: 3 } // 新增城市示例
|
||
]
|
||
},
|
||
{
|
||
unit: "二组",
|
||
targetValue: data.group2.target,
|
||
currentValue: data.group2.real,
|
||
progress: data.group2.rate,
|
||
cities: [
|
||
{ name: "蚌埠", completed: data[4].real, total: data[4].target, progress: data[4].rate, num: 4 },
|
||
{ name: "合肥", completed: data[5].real, total: data[5].target, progress: data[5].rate, num: 5 }
|
||
]
|
||
},
|
||
// 其他组同理，按需添加 cities 数据
|
||
{
|
||
unit: "三组",
|
||
targetValue: data.group3.target,
|
||
currentValue: data.group3.real,
|
||
progress: data.group3.rate,
|
||
cities: [{ name: "江苏凯盛", completed: data[6].real, total: data[6].target, progress: data[6].rate, num: 6 },
|
||
{ name: "宜兴", completed: data[7].real, total: data[7].target, progress: data[7].rate, num: 7 }
|
||
]
|
||
},
|
||
{
|
||
unit: "四组",
|
||
targetValue: data.group4.target,
|
||
currentValue: data.group4.real,
|
||
progress: data.group4.rate,
|
||
cities: [
|
||
{ name: "漳州", completed: data[8].real, total: data[8].target, progress: data[8].rate, num: 8 },
|
||
{ name: "洛阳", completed: data[9].real, total: data[9].target, progress: data[9].rate, num: 9 }
|
||
]
|
||
},
|
||
{
|
||
unit: "五组",
|
||
targetValue: data.group5.target,
|
||
currentValue: data.group5.real,
|
||
progress: data.group5.rate,
|
||
cities: [{ name: "秦皇岛", completed: data[10].real, total: data[10].target, progress: data[10].rate, num: 10 },
|
||
// { name: "秦皇岛", completed: 7, total: 9, progress: 77 }
|
||
]
|
||
}
|
||
]
|
||
},
|
||
// 颜色判断核心方法：实际值≥预算值返回绿色，否则返回橙色
|
||
getColor(currentValue, targetValue) {
|
||
return currentValue >= targetValue
|
||
? "rgba(98, 213, 180, 1)"
|
||
: "rgba(249, 164, 74, 1)";
|
||
},
|
||
getTableData(data) {
|
||
console.log(data, 'data');
|
||
this.$emit('handleShowTable',data)
|
||
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
/* 第一个item单独样式（可选） */
|
||
.item:first-of-type {
|
||
// background: #f0f7ff; /* 示例背景色 */
|
||
}
|
||
|
||
.coreItem {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 8px;
|
||
}
|
||
|
||
.item {
|
||
width: 220px;
|
||
height: 122px;
|
||
background: #f9fcff;
|
||
padding: 12px;
|
||
box-sizing: border-box;
|
||
|
||
.unit {
|
||
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;
|
||
}
|
||
|
||
.groupName {
|
||
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;
|
||
}
|
||
|
||
.left-target {
|
||
.number {
|
||
height: 22px;
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 600;
|
||
font-size: 24px;
|
||
color: rgba(103, 103, 103, 0.79);
|
||
line-height: 22px;
|
||
text-align: center;
|
||
font-style: normal;
|
||
}
|
||
|
||
.title {
|
||
height: 14px;
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 12px;
|
||
color: #868687;
|
||
line-height: 14px;
|
||
text-align: center;
|
||
font-style: normal;
|
||
}
|
||
}
|
||
|
||
.left-real {
|
||
.number {
|
||
height: 22px;
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 600;
|
||
font-size: 24px;
|
||
line-height: 22px;
|
||
text-align: center;
|
||
font-style: normal;
|
||
/* 颜色由动态绑定控制，此处不设置固定值 */
|
||
}
|
||
|
||
.title {
|
||
height: 14px;
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 12px;
|
||
color: #868687;
|
||
line-height: 14px;
|
||
text-align: center;
|
||
font-style: normal;
|
||
}
|
||
}
|
||
|
||
.right {
|
||
width: 100%;
|
||
.bg-default {
|
||
background-image: url("../../../assets/img/order-item-bg.png");
|
||
}
|
||
|
||
// 实际值 >= 预算值：绿色背景图
|
||
.bg-green {
|
||
background-image: url("../../../assets/img/order-item-greenbg.png");
|
||
}
|
||
.groupName {
|
||
width: 129px;
|
||
height: 32px;
|
||
// background: url(../../../assets/img/order-item-bg.png) no-repeat;
|
||
background-size: 100% 100%;
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
color: #000000;
|
||
text-align: center;
|
||
|
||
.title {
|
||
margin-top: 10px;
|
||
height: 12px;
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 12px;
|
||
margin-right: 8px;
|
||
color: #000000;
|
||
line-height: 12px;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
|
||
.unit {
|
||
margin-top: 10px;
|
||
margin-right: 14px;
|
||
height: 12px;
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 12px;
|
||
color: #000000;
|
||
line-height: 12px;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
}
|
||
|
||
.right-city {
|
||
.city {
|
||
height: 14px;
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 12px;
|
||
color: #575757;
|
||
line-height: 14px;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
|
||
.title {
|
||
height: 14px;
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 12px;
|
||
color: #868687;
|
||
line-height: 14px;
|
||
text-align: center;
|
||
font-style: normal;
|
||
}
|
||
}
|
||
}
|
||
|
||
.item-content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
height: calc(100% - 26px);
|
||
}
|
||
|
||
.content-wrapper {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-around;
|
||
flex: 1;
|
||
}
|
||
|
||
.line {
|
||
width: 1px;
|
||
height: 46px;
|
||
background: linear-gradient(to bottom,
|
||
rgba(255, 0, 0, 0),
|
||
#cbcbcb);
|
||
}
|
||
|
||
.cityLine {
|
||
width: 1px;
|
||
margin-top: 40px;
|
||
height: 76px;
|
||
background: linear-gradient(to bottom,
|
||
rgba(255, 0, 0, 0),
|
||
#cbcbcb);
|
||
}
|
||
|
||
.left,
|
||
.right {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 2px;
|
||
flex: 1;
|
||
}
|
||
|
||
.number {
|
||
height: 22px;
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 600;
|
||
font-size: 24px;
|
||
color: rgba(103, 103, 103, 0.79);
|
||
line-height: 22px;
|
||
text-align: center;
|
||
font-style: normal;
|
||
}
|
||
|
||
.title {
|
||
height: 14px;
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 12px;
|
||
color: #868687;
|
||
line-height: 14px;
|
||
text-align: center;
|
||
font-style: normal;
|
||
}
|
||
|
||
.progress-group {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
.progress-container {
|
||
width: 230px;
|
||
height: 10px;
|
||
background: #ECEFF7;
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.progress-bar {
|
||
height: 100%;
|
||
border-radius: 8px;
|
||
/* 背景色由动态绑定控制，移除固定值 */
|
||
}
|
||
|
||
.city-progress-group {
|
||
margin-top: 2px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
.city-progress-container {
|
||
width: 112px;
|
||
height: 10px;
|
||
background: #ECEFF7;
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.city-progress-bar {
|
||
height: 100%;
|
||
border-radius: 8px;
|
||
opacity: 1;
|
||
/* 背景色由动态绑定控制，移除固定值 */
|
||
}
|
||
|
||
.progress-percent {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 12px;
|
||
line-height: 1;
|
||
/* 颜色由动态绑定控制，此处不设置固定值 */
|
||
}
|
||
|
||
.yield {
|
||
margin-top: 3px;
|
||
}
|
||
|
||
.numerator {
|
||
/* 颜色由动态绑定控制，此处不设置固定值 */
|
||
}
|
||
|
||
.city-yield {
|
||
/* 颜色由动态绑定控制，此处不设置固定值 */
|
||
}
|
||
}
|
||
|
||
.groupData {
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* 右上角折现边框（主边框） */
|
||
// .groupData::before {
|
||
// content: "";
|
||
// position: absolute;
|
||
// top: 0;
|
||
// left: 0;
|
||
// width: 100%;
|
||
// height: 100%;
|
||
// background-color: #000000;
|
||
// clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%);
|
||
// }
|
||
|
||
/* 右上角折现细节 */
|
||
.groupData::after {
|
||
content: "";
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
width: 20px;
|
||
height: 20px;
|
||
background: #EFF3F8;
|
||
transform: rotate(-45deg) translate(50%, -50%);
|
||
transform-origin: top right;
|
||
}
|
||
</style>
|