|
@@ -29,6 +29,7 @@ const pieChartRefs = ref<HTMLDivElement[]>([]);
|
|
const selectedCardIndex = ref(0);
|
|
const selectedCardIndex = ref(0);
|
|
|
|
|
|
async function fetchProductCardData() {
|
|
async function fetchProductCardData() {
|
|
|
|
+ loading.value = true;
|
|
try {
|
|
try {
|
|
const { data } = await getProductCardData({
|
|
const { data } = await getProductCardData({
|
|
profileId: profile.value.profile_id,
|
|
profileId: profile.value.profile_id,
|
|
@@ -38,6 +39,8 @@ async function fetchProductCardData() {
|
|
cardData.value = data;
|
|
cardData.value = data;
|
|
} catch (error) {
|
|
} catch (error) {
|
|
console.log('error:', error);
|
|
console.log('error:', error);
|
|
|
|
+ } finally {
|
|
|
|
+ loading.value = false;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
@@ -143,8 +146,8 @@ onBeforeUnmount(() => {
|
|
</script>
|
|
</script>
|
|
|
|
|
|
<template>
|
|
<template>
|
|
- <div class="out-container" v-loading="loading">
|
|
|
|
- <el-scrollbar>
|
|
|
|
|
|
+ <div class="out-container">
|
|
|
|
+ <el-scrollbar v-loading="loading">
|
|
<div class="scrollbar-flex-content" v-show="cardData">
|
|
<div class="scrollbar-flex-content" v-show="cardData">
|
|
<el-card
|
|
<el-card
|
|
v-if="cardData.length !== 0"
|
|
v-if="cardData.length !== 0"
|
|
@@ -152,7 +155,7 @@ onBeforeUnmount(() => {
|
|
:key="item.productlineId"
|
|
:key="item.productlineId"
|
|
shadow="hover"
|
|
shadow="hover"
|
|
body-style="padding: 0; box-sizing: border-box; position: relative; width: 100%;"
|
|
body-style="padding: 0; box-sizing: border-box; position: relative; width: 100%;"
|
|
- class="scrollbar-demo-item mr-1.5"
|
|
|
|
|
|
+ class="scrollbar-demo-item"
|
|
:class="{ selected: selectedCardIndex === index }"
|
|
:class="{ selected: selectedCardIndex === index }"
|
|
@click="selectCard(index, item)">
|
|
@click="selectCard(index, item)">
|
|
<div class="pct-chart" :id="`chart${index}-${item.productlineId}`"></div>
|
|
<div class="pct-chart" :id="`chart${index}-${item.productlineId}`"></div>
|
|
@@ -208,7 +211,7 @@ onBeforeUnmount(() => {
|
|
gap: 5px;
|
|
gap: 5px;
|
|
width: 202px;
|
|
width: 202px;
|
|
height: 92px;
|
|
height: 92px;
|
|
- margin: 10px 0;
|
|
|
|
|
|
+ margin: 10px 10px 10px 0;
|
|
border-radius: 4px;
|
|
border-radius: 4px;
|
|
box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
border: 1px solid transparent; /* 添加透明边框 */
|
|
border: 1px solid transparent; /* 添加透明边框 */
|