修改
This commit is contained in:
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user