From 821cc1753f3760e9fbebb71e48fb348c0a994e51 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E6=98=B1=E8=BE=BE?= <chen.yuda@ebiz-digits.com>
Date: Fri, 16 May 2025 11:59:37 +0800
Subject: [PATCH] =?UTF-8?q?refactor(analysis):=20=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E5=88=86=E6=9E=90=E9=A1=B5=E9=9D=A2=E5=B1=95=E7=A4=BA=E9=80=BB?=
 =?UTF-8?q?=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 调整饼图容器宽度为 100%，高度固定为 300px
- 重构 questionTypeMap，使用 basicQuesTypeList 自动生成
- 优化 AnalysisInfo 组件，增加表格展示功能- 调整 useAnalysis hook，添加 aiAnalysisData 状态保存分析数据
- 在 pieSeries 中添加示例数据，优化饼图展示效果
---
 components.d.ts                               |  3 -
 src/components/Analysis/Index.vue             |  4 +-
 src/hooks/chart/usePieChart.ts                |  2 +
 src/utils/question/typeMapping.ts             | 16 ++---
 .../components/AnalysisInfo/Index.vue         | 67 ++++++++++++-------
 .../AnalysisInfo/hooks/pieSeries.ts           | 25 ++++---
 .../views/Analysis/hooks/useAnalysis.ts       |  7 +-
 7 files changed, 72 insertions(+), 52 deletions(-)

diff --git a/components.d.ts b/components.d.ts
index 68492ee..2467701 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -32,12 +32,10 @@ declare module 'vue' {
     RouterView: typeof import('vue-router')['RouterView']
     VanActionSheet: typeof import('vant/es')['ActionSheet']
     VanButton: typeof import('vant/es')['Button']
-    VanCard: typeof import('vant/es')['Card']
     VanCell: typeof import('vant/es')['Cell']
     VanCellGroup: typeof import('vant/es')['CellGroup']
     VanCheckbox: typeof import('vant/es')['Checkbox']
     VanCheckboxGroup: typeof import('vant/es')['CheckboxGroup']
-    VanCol: typeof import('vant/es')['Col']
     VanDivider: typeof import('vant/es')['Divider']
     VanField: typeof import('vant/es')['Field']
     VanIcon: typeof import('vant/es')['Icon']
@@ -48,7 +46,6 @@ declare module 'vue' {
     VanPopup: typeof import('vant/es')['Popup']
     VanRadio: typeof import('vant/es')['Radio']
     VanRadioGroup: typeof import('vant/es')['RadioGroup']
-    VanRow: typeof import('vant/es')['Row']
     VanSearch: typeof import('vant/es')['Search']
     VanStepper: typeof import('vant/es')['Stepper']
     VanSwipe: typeof import('vant/es')['Swipe']
diff --git a/src/components/Analysis/Index.vue b/src/components/Analysis/Index.vue
index b59f075..b398166 100644
--- a/src/components/Analysis/Index.vue
+++ b/src/components/Analysis/Index.vue
@@ -13,9 +13,7 @@ useSetPieChart(pieChart, series, { title: false, legend: false });
 <template>
   <section>
     <!-- 图表部分 -->
-    <div
-      style="display: flex; height: 300px; width: 300px; justify-content: center; margin: 16px 0"
-    >
+    <div style="display: flex; height: 300px; width: 100%; justify-content: center; margin: 16px 0">
       <span ref="pieChart" style="width: 100%; height: 300px"></span>
     </div>
   </section>
diff --git a/src/hooks/chart/usePieChart.ts b/src/hooks/chart/usePieChart.ts
index ad34bb5..0ff9b31 100644
--- a/src/hooks/chart/usePieChart.ts
+++ b/src/hooks/chart/usePieChart.ts
@@ -24,6 +24,8 @@ function useSetPieChart(
     chartInstance = chart.init(dom.value);
     pieOption.series = JSON.parse(JSON.stringify(series.value));
 
+    console.log(pieOption);
+
     // 设置图表选项
     chartInstance.setOption(pieOption, opts);
   });
diff --git a/src/utils/question/typeMapping.ts b/src/utils/question/typeMapping.ts
index 041c9a2..69d1e4e 100644
--- a/src/utils/question/typeMapping.ts
+++ b/src/utils/question/typeMapping.ts
@@ -1,9 +1,7 @@
-const map = new Map<number, string>();
-
-map.set(1, '单选题');
-map.set(2, "多选题")
-map.set(3, "图片上传题")
-map.set(5, '数值打分题');
-map.set(9, '矩阵单选');
-
-export { map as questionTypeMap };
+import { basicQuesTypeList } from '@/utils/common';
+
+const map = new Map<number, string>();
+basicQuesTypeList.map((item) => {
+  map.set(item.question_type, item.name);
+});
+export { map as questionTypeMap };
diff --git a/src/views/Survey/views/Analysis/components/AnalysisInfo/Index.vue b/src/views/Survey/views/Analysis/components/AnalysisInfo/Index.vue
index 85ed054..5845694 100644
--- a/src/views/Survey/views/Analysis/components/AnalysisInfo/Index.vue
+++ b/src/views/Survey/views/Analysis/components/AnalysisInfo/Index.vue
@@ -1,23 +1,44 @@
-<template>
-  <div>
-    <section
-      v-for="analysis in questionAnalysis"
-      :key="analysis.stem"
-      v-if="analysis?.option.length"
-    >
-      <el-tag>{{ questionTypeMap.get(analysis.question_type as number) }}</el-tag>
-      {{ analysis.stem }}
-
-      <chart-msg :series="formatData(analysis)" />
-
-      {{ analysis }}
-    </section>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { questionAnalysis } from '../../hooks/useAnalysis';
-import { questionTypeMap } from '@/utils/question/typeMapping';
-import ChartMsg from '@/components/Analysis/Index.vue';
-import { formatData } from './hooks/pieSeries';
-</script>
+<template>
+  <div>
+    <section v-for="analysis in questionAnalysis" :key="analysis.stem" class="mt10">
+      <el-tag>{{ questionTypeMap.get(analysis.question_type as number) }}</el-tag>
+      {{ analysis.stem }}
+
+      <chart-msg :series="formatData(analysis)" v-if="showChart.includes(analysis.question_type)" />
+
+      <yl-table
+        :props="getTableHeadProps(analysis.head)"
+        :data="analysis.option"
+        v-if="analysis.head"
+      ></yl-table>
+
+      <!--      {{ analysis }}-->
+    </section>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { questionAnalysis } from '../../hooks/useAnalysis';
+import { questionTypeMap } from '@/utils/question/typeMapping';
+import ChartMsg from '@/components/Analysis/Index.vue';
+import { formatData } from './hooks/pieSeries';
+import YlTable from '@/components/YlTable/Index.vue';
+import { ref } from 'vue';
+// questionTypeMap  自己去对应
+const showChart = ref([1, 2, 5, 106, 8, 9, 10]);
+
+// const showTable = ref([1,2,4])
+const getTableHeadProps = (values: any[]) => {
+  return values.map((item: Object) => {
+    return {
+      label: item.title,
+      prop: item.key
+    };
+  });
+};
+</script>
+<style scoped lang="scss">
+.mt10 {
+  margin-top: 10px;
+}
+</style>
diff --git a/src/views/Survey/views/Analysis/components/AnalysisInfo/hooks/pieSeries.ts b/src/views/Survey/views/Analysis/components/AnalysisInfo/hooks/pieSeries.ts
index ced2852..a8a6285 100644
--- a/src/views/Survey/views/Analysis/components/AnalysisInfo/hooks/pieSeries.ts
+++ b/src/views/Survey/views/Analysis/components/AnalysisInfo/hooks/pieSeries.ts
@@ -3,22 +3,21 @@ import { ref } from 'vue';
 export const series = ref({
   name: 'Access From',
   type: 'pie',
-  radius: ['40%', '70%'],
-  avoidLabelOverlap: false,
-  label: {
-    show: false,
-    position: 'center'
-  },
+  radius: '70%',
+  data: [
+    { value: 1048, name: 'Search Engine' },
+    { value: 735, name: 'Direct' },
+    { value: 580, name: 'Email' },
+    { value: 484, name: 'Union Ads' },
+    { value: 300, name: 'Video Ads' }
+  ],
   emphasis: {
-    label: {
-      show: true,
-      fontSize: 40,
-      fontWeight: 'bold'
+    itemStyle: {
+      // shadowBlur: 10,
+      shadowOffsetX: 0,
+      shadowColor: 'rgba(0, 0, 0, 0.5)'
     }
   },
-  labelLine: {
-    show: false
-  },
   data: []
 });
 
diff --git a/src/views/Survey/views/Analysis/hooks/useAnalysis.ts b/src/views/Survey/views/Analysis/hooks/useAnalysis.ts
index 851c9b6..c50df0a 100644
--- a/src/views/Survey/views/Analysis/hooks/useAnalysis.ts
+++ b/src/views/Survey/views/Analysis/hooks/useAnalysis.ts
@@ -2,6 +2,7 @@ import { surveyAnalysis } from '@/api/survey';
 import { onMounted, ref } from 'vue';
 import { analysisInsights, checkAnalysisStatus, getAnalysis } from '@/api/anslysis/aiInsight';
 
+const aiAnalysisData = ref();
 type AiInsightType = {
   visible: boolean;
   timer: NodeJS.Timeout | undefined;
@@ -51,6 +52,10 @@ export async function postAnalysis(sn: string) {
         //   获取洞察结果
         const { data } = await getAnalysis(sn);
         console.log(data.other.overall_conclusion);
+
+        console.log(data);
+
+        aiAnalysisData.value = data;
         aiInsightsConfig.value.message = data.other.overall_conclusion;
         aiInsightsConfig.value.visible = false;
       } else if (data.status === 2) {
@@ -71,4 +76,4 @@ async function useFetchAnalysis(sn: string) {
   // console.log(`question analysis`, questionAnalysis.value);
 }
 
-export { useFetchAnalysis, questionAnalysis };
+export { useFetchAnalysis, questionAnalysis, aiAnalysisData };