|
@@ -262,16 +262,16 @@ defineExpose({
|
|
|
</section>
|
|
</section>
|
|
|
|
|
|
|
|
<section class="chart-card">
|
|
<section class="chart-card">
|
|
|
- <main>
|
|
|
|
|
- <a-spin :spinning="loading">
|
|
|
|
|
|
|
+ <a-spin :spinning="loading">
|
|
|
|
|
+ <main>
|
|
|
<template v-if="chartOptions.length > 0">
|
|
<template v-if="chartOptions.length > 0">
|
|
|
<div v-for="(chartConfig, index) in chartOptions" :key="`chart-${String(chartConfig.questionnaireId)}-${index}`" class="chart-wrapper">
|
|
<div v-for="(chartConfig, index) in chartOptions" :key="`chart-${String(chartConfig.questionnaireId)}-${index}`" class="chart-wrapper">
|
|
|
<VChart class="chart" :option="chartConfig.option" autoresize />
|
|
<VChart class="chart" :option="chartConfig.option" autoresize />
|
|
|
</div>
|
|
</div>
|
|
|
</template>
|
|
</template>
|
|
|
<a-empty v-else description="请选择问卷查看统计" />
|
|
<a-empty v-else description="请选择问卷查看统计" />
|
|
|
- </a-spin>
|
|
|
|
|
- </main>
|
|
|
|
|
|
|
+ </main>
|
|
|
|
|
+ </a-spin>
|
|
|
</section>
|
|
</section>
|
|
|
</div>
|
|
</div>
|
|
|
</template>
|
|
</template>
|
|
@@ -318,6 +318,13 @@ defineExpose({
|
|
|
padding: 24px;
|
|
padding: 24px;
|
|
|
display: flex;
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
flex-direction: column;
|
|
|
|
|
+ min-height: 0;
|
|
|
|
|
+
|
|
|
|
|
+ :deep(.ant-spin-container) {
|
|
|
|
|
+ height: 100%;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex-direction: column;
|
|
|
|
|
+ }
|
|
|
|
|
|
|
|
header {
|
|
header {
|
|
|
display: flex;
|
|
display: flex;
|
|
@@ -329,18 +336,20 @@ defineExpose({
|
|
|
main {
|
|
main {
|
|
|
flex: 1;
|
|
flex: 1;
|
|
|
display: flex;
|
|
display: flex;
|
|
|
- flex-direction: column;
|
|
|
|
|
|
|
+ flex-direction: row;
|
|
|
|
|
+ flex-wrap: wrap;
|
|
|
gap: 24px;
|
|
gap: 24px;
|
|
|
|
|
+ min-height: 0;
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.chart-wrapper {
|
|
.chart-wrapper {
|
|
|
- width: 100%;
|
|
|
|
|
|
|
+ width: calc((100% - 24px) / 2);
|
|
|
background: #fff;
|
|
background: #fff;
|
|
|
border-radius: 8px;
|
|
border-radius: 8px;
|
|
|
padding: 16px;
|
|
padding: 16px;
|
|
|
border: 1px solid #f0f0f0;
|
|
border: 1px solid #f0f0f0;
|
|
|
- margin-bottom: 10px;
|
|
|
|
|
|
|
+ box-sizing: border-box;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.chart-title {
|
|
.chart-title {
|