This commit is contained in:
‘937886381’
2025-11-25 09:30:51 +08:00
parent 694beb5851
commit a907c7273e
25 changed files with 1203 additions and 1231 deletions

View File

@@ -71,7 +71,7 @@
<!-- 动态渲染城市进度循环 item.cities -->
<div class="right-city" v-for="(city, cityIdx) in item.cities" :key="cityIdx"
:style="{ marginTop: cityIdx > 0 ? '2px' : '0' }">
: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">
@@ -102,72 +102,145 @@
export default {
name: "Container",
components: {},
props: ["name", "size", "icon"],
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: 16,
currentValue: 14.5,
progress: 90,
targetValue: data.totalProgress.target,
currentValue: data.totalProgress.real,
progress: data.totalProgress.rate,
cities: [] // 总进度无需城市数据,留空
},
{
unit: "一组",
targetValue: 16,
currentValue: 17,
progress: 106,
targetValue: data.group1.target,
currentValue: data.group1.real,
progress: data.group1.rate,
cities: [
{ name: "桐城", completed: 12, total: 13, progress: 92 },
{ name: "自贡", completed: 15, total: 16, progress: 93 } // 新增城市示例
{ 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: 16,
currentValue: 16,
progress: 100,
targetValue: data.group2.target,
currentValue: data.group2.real,
progress: data.group2.rate,
cities: [
{ name: "蚌埠", completed: 10, total: 12, progress: 83 },
{ name: "合肥", completed: 8, total: 10, progress: 80 }
{ 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: 16,
currentValue: 15.2,
progress: 85,
cities: [{ name: "宜兴", completed: 9, total: 11, progress: 81 }]
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: 16,
currentValue: 18,
progress: 112,
targetValue: data.group4.target,
currentValue: data.group4.real,
progress: data.group4.rate,
cities: [
{ name: "漳州", completed: 14, total: 15, progress: 93 },
{ name: "洛阳", completed: 12, total: 14, progress: 85 }
{ 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: 16,
currentValue: 14,
progress: 80,
cities: [{ name: "桐城", completed: 7, total: 9, progress: 77 }]
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 }
]
}
]
};
},
methods: {
},
// 颜色判断核心方法:实际值≥目标值返回绿色,否则返回橙色
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)
}
}
};
@@ -466,15 +539,16 @@ export default {
}
/* 右上角折现边框(主边框) */
.groupData::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%);
}
// .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 {