fix: randar

package.json

@@ -12,6 +12,8 @@
   },
   "dependencies": {
     "axios": "^1.5.0",
+    "echarts": "^5.5.0",
+    "flicker-vue-hooks": "^1.0.58",
     "html2canvas": "^1.4.1",
     "jspdf": "^2.5.1",
     "lottie-web": "^5.12.2",

src/components/radarCharts.vue

@@ -0,0 +1,122 @@
+<template>
+  <div class="randar" style="width: 320px;height: 320px;">
+    <div :id="id" style="width: 320px;height: 320px;" > </div>
+    <div class="s" >
+      <span class="s-item" v-for="item in 8"> s{{item}}</span>
+    </div>
+  </div>
+ 
+</template>
+<script lang='ts'  setup >
+import * as echarts from 'echarts' 
+import { ref } from 'vue';
+import { onMounted } from 'vue';
+import { useId } from 'flicker-vue-hooks'
+
+type EChartsOption = echarts.EChartsOption;
+
+const props = defineProps<{
+  datasource: any
+}>()
+
+const myChartRef = ref();
+
+const id = useId();
+
+const options: EChartsOption = {
+  color: [ '#FFE434', '#67F9D8','#56A3F1', '#FF917C'],
+  legend: {},
+  radar: {
+      indicator: [],
+      center: ['50%', '50%'],
+      radius: 120,
+      startAngle: 90,
+      splitNumber: 8,
+      shape: 'circle',
+      axisNameGap: 10,
+      axisName: {
+        formatter: '【{value}】',
+        color: '#428BD4',
+        fontSize: 10,
+        
+      },
+    
+      splitArea: {
+        areaStyle: {
+          // #d16ba5, #c777b9, #ba83ca, #aa8fd8, #9a9ae1, #8aa7ec, #79b3f4, #69bff8, #52cffe, #41dfff, #46eefa, #5ffbf1);
+          // color: ['#f5d5b7', '#c7f6bf', '#008F7A', '#008E9B', '#0089BA', "#0081CF", "#2C73D2", '#845EC2'],
+          // '#5ffbf1', '#46eefa', '#41dfff', '#52cffe',
+          color: [ '#69bff8', "#79b3f4", '#6884cb', "#436ac4"],
+          // color: [ '#E3F2FD', "#90CAF9", '#42A5F5', "#1E88E5"],
+          // color: [ '#E3F2FD', "#BBDEFB", '#90CAF9', "#64B5F6", "#42A5F5" , "#2196F3", "#1E88E5", "#1976D2"],
+          shadowColor: 'rgba(0, 0, 0, 1)',
+          shadowBlur: 0
+        }
+      },
+      axisLine: {
+        lineStyle: {
+          color: 'rgba(211, 253, 250, 0.8)'
+        }
+      },
+      splitLine: {
+        lineStyle: {
+          color: 'rgba(211, 253, 250, 0.8)'
+        }
+      }
+  },
+  series: {
+      type: 'radar',
+      emphasis: {
+        lineStyle: {
+          width: 4
+        }
+      },
+      data: [
+        {
+          value: [],
+          areaStyle: {
+            color: 'rgba(255, 228, 52, 0.6)'
+          }
+        }
+      ]
+  },
+};
+
+// @ts-ignore 
+options.radar.indicator  = props.datasource.map( item =>  ({text: item.name, max: item.maximum}))
+
+// @ts-ignore 
+options.series.data[0].value = props.datasource.map( item =>  Math.floor( item.value))
+
+onMounted(() => {
+  myChartRef.value = echarts.init(document.getElementById(id));
+
+  myChartRef.value.setOption(options);
+})
+</script>
+<style  scoped >
+
+.randar {
+  position: relative;
+}
+ .s {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(30%, -50%);
+  color: #fff;
+  transform-origin: -50%;
+  scale: 0.65;
+  width: 60%;
+  line-height: 0;
+  word-spacing: 1.5px;
+ }
+
+ .s-item {
+  font-size: 14  !important;
+  /* color: #7698e6; */
+  /* transform:  rotate(-90deg); */
+ }
+</style>
+
+

src/store/modules/customize.ts

@@ -127,7 +127,423 @@ export default defineStore("customize", () => {
   }) {
     const { status, data } = await getSemesterRecordRequest(params);
     if (status === 200) {
-      semesterReport.value = data;
+      // semesterReport.value = data;
+      semesterReport.value =  {
+        "classId": "1304705777133330433",
+        "classLevelCode": 2,
+        "semesterType": 1,
+        "babyId": "1494318783449714689",
+        "sendReport": 1,
+        "schoolName": "北京思维魔法幼儿园",
+        "className": "思维芯中一班",
+        "babyName": "朱婷",
+        "age": "2岁1个月",
+        "babyHeadImg": "https://app-resources-luojigou.luojigou.vip/Fq7g3bkhR3XlWWNzj5wbhH-lydBJ",
+        "hobby": [],
+        "teachers": [
+            "张",
+            "张老师",
+            "尹金浩",
+            "梁金环",
+            "王娜",
+            "姜震",
+            "小奶牛",
+            "朱波",
+            "刘露霆",
+            "梅康@学习中09:51梅康",
+            "丛欢",
+            "阎长平",
+            "周宏刚",
+            "罗杨",
+            "孙雨雷 ",
+            "杨鹏宇",
+            "孙飞",
+            "张鑫",
+            "刘专家"
+        ],
+        "startDate": "2023.11.16",
+        "endDate": "2024.01.06",
+        "learnDepthList": [
+            "决策思维",
+            "创造性思维",
+            "元认知",
+            "批判性思维",
+            "问题解决"
+        ],
+        "radarChart": [
+            {
+                "name": "健康领域",
+                "maximum": 80,
+                "value": 32.50
+            },
+            {
+                "name": "逻辑思维通用领域",
+                "maximum": 80,
+                "value": 26.67
+            }
+        ],
+        "domainAbilityNameList": [
+            {
+                "domainName": "健康领域",
+                "abilityNameList": [
+                    "精细动作",
+                    "生活与卫生习惯能力"
+                ]
+            },
+            {
+                "domainName": "逻辑思维通用领域",
+                "abilityNameList": [
+                    "批判思维能力",
+                    "知识迁移能力",
+                    "观察能力",
+                    "反省思维能力"
+                ]
+            }
+        ],
+        "questionList": [
+            {
+                "teacherName": "雷lEi\uD83C\uDF88",
+                "topic": "大海的颜色",
+                "background": "在我们的生活中总是能看到大海，但是大海为什么是蓝色的的呢？",
+                "questions": [
+                    {
+                        "id": "1742468146670911489",
+                        "question": "是不是天空是蓝色的，大海也是蓝色的？",
+                        "questionCategory": "分析",
+                        "activityCategories": [
+                            "区角",
+                            "小组"
+                        ],
+                        "plan": {
+                            "content": "让孩子分组使用材料进行分析",
+                            "images": [
+                                "https://app-resources-luojigou.luojigou.vip/bc0234ad3bac40fe8a59f46accaf7319",
+                                "https://app-resources-luojigou.luojigou.vip/523d97dbe60147049b90267d13623df6"
+                            ],
+                            "videos": []
+                        },
+                        "practice": {
+                            "content": "有老师带领，分组探究",
+                            "images": [
+                                "https://app-resources-luojigou.luojigou.vip/a35168af0a2e44b993357987e2b15095",
+                                "https://app-resources-luojigou.luojigou.vip/546caf0813c548f1a47c9a4b80aad3c0"
+                            ],
+                            "videos": []
+                        },
+                        "summary": {
+                            "content": "总结一下学生的问题与探究过程",
+                            "images": [
+                                "https://app-resources-luojigou.luojigou.vip/5c198570e17b4cd2b7172c8b94b0911a"
+                            ],
+                            "videos": []
+                        },
+                        "tweaks": {
+                            "content": "这就不用调整了吧，已经很优秀了",
+                            "images": [],
+                            "videos": [
+                                "https://app-resources-luojigou.luojigou.vip/lkLE21qmJIS--2WSMNFW8X5RhEXm.mp4"
+                            ]
+                        },
+                        "recordDate": "2023-12-26",
+                        "babyResults": [
+                            {
+                                "babyId": "1494318783449714689",
+                                "babyName": "朱婷",
+                                "list": [
+                                    {
+                                        "levelCode": "1",
+                                        "learnDepth": "批判性思维",
+                                        "levelText": "在成人引导下，能够有意识关注其他学生的作品，讨论喜欢或不喜欢什么。"
+                                    },
+                                    {
+                                        "levelCode": "1",
+                                        "learnDepth": "创造性思维",
+                                        "levelText": "1.（想象力）：能进行简单直观的想象，比如，听到音乐时会创编简单地舞蹈动作作为回应。\n2.（在创造性活动中运用多种材料）：尝试运用不同的材料，创作简单地作品，并在过程中讲述故事、表达情感。\n3.（在创造性活动中加入自己的想法）：在玩积木或创造作品的过程中，能够尝试增加独特特征。\n4.（在游戏时发现新玩法）：在新任务中，根据成人的引导尝试之前用过的做法。\n5.（在游戏时提出自己的想法）：能在老师提供的角色中，选择会扮演的角色。\n6.（运用创造性思维解决简单的问题）：如果一件玩具坏了，会在成人的帮助下创造新的方法来游戏。"
+                                    },
+                                    {
+                                        "levelCode": "1",
+                                        "learnDepth": "问题解决",
+                                        "levelText": "1.有初步的问题解决意识，当无法解决时，知道主动寻求成人的帮助。\n2.在引导下，能够描述简单的解决问题的方法。"
+                                    }
+                                ]
+                            },
+                            {
+                                "babyId": "1494318783449714689",
+                                "babyName": "朱婷",
+                                "list": [
+                                    {
+                                        "levelCode": "1",
+                                        "learnDepth": "决策思维",
+                                        "levelText": "在教师鼓励下，能够独立思考完成一件简单的任务。"
+                                    },
+                                    {
+                                        "levelCode": "1",
+                                        "learnDepth": "元认知",
+                                        "levelText": "1.（自我认识）：知道自己的姓名、性别、年龄\n2.（自我控制）：在一般压力情况下，能够自己控制情绪或行为反应，偶尔需要成人的支持。\n3.（自我效能）：喜欢承担一些小任务，表现出好像有能力完成新的任务。\n4.（反思与理解）：在引导下，能够根据过去的事件改变自己的行为；\n将今天的体验与过去发生的体验相关联。"
+                                    }
+                                ]
+                            }
+                        ]
+                    },
+                    {
+                        "id": "1742468146670911490",
+                        "question": "大海的颜色是因为海水就是蓝色的吗？",
+                        "questionCategory": "分析",
+                        "activityCategories": [
+                            "小组",
+                            "区角"
+                        ],
+                        "plan": {
+                            "content": "我就简单的计划一下，每位小朋友都去观察海水",
+                            "images": [
+                                "https://app-resources-luojigou.luojigou.vip/47b6db24ac4c4ba9b6e78274f12bec21"
+                            ],
+                            "videos": []
+                        },
+                        "practice": {
+                            "content": "由老师带领小组观察材料中海水的颜色",
+                            "images": [
+                                "https://app-resources-luojigou.luojigou.vip/232815cbff874088b0a2a2d2d570af2d"
+                            ],
+                            "videos": []
+                        },
+                        "summary": {
+                            "content": "我就简单的总结一下，海水是无色透明的",
+                            "images": [],
+                            "videos": []
+                        },
+                        "tweaks": {
+                            "content": "不需要调整了",
+                            "images": [],
+                            "videos": []
+                        },
+                        "recordDate": "2023-12-26",
+                        "babyResults": [
+                            {
+                                "babyId": "1494318783449714689",
+                                "babyName": "朱婷",
+                                "list": [
+                                    {
+                                        "levelCode": "1",
+                                        "learnDepth": "批判性思维",
+                                        "levelText": "在成人引导下，能够有意识关注其他学生的作品，讨论喜欢或不喜欢什么。"
+                                    },
+                                    {
+                                        "levelCode": "1",
+                                        "learnDepth": "创造性思维",
+                                        "levelText": "1.（想象力）：能进行简单直观的想象，比如，听到音乐时会创编简单地舞蹈动作作为回应。\n2.（在创造性活动中运用多种材料）：尝试运用不同的材料，创作简单地作品，并在过程中讲述故事、表达情感。\n3.（在创造性活动中加入自己的想法）：在玩积木或创造作品的过程中，能够尝试增加独特特征。\n4.（在游戏时发现新玩法）：在新任务中，根据成人的引导尝试之前用过的做法。\n5.（在游戏时提出自己的想法）：能在老师提供的角色中，选择会扮演的角色。\n6.（运用创造性思维解决简单的问题）：如果一件玩具坏了，会在成人的帮助下创造新的方法来游戏。"
+                                    },
+                                    {
+                                        "levelCode": "1",
+                                        "learnDepth": "问题解决",
+                                        "levelText": "1.有初步的问题解决意识，当无法解决时，知道主动寻求成人的帮助。\n2.在引导下，能够描述简单的解决问题的方法。"
+                                    }
+                                ]
+                            },
+                            {
+                                "babyId": "1494318783449714689",
+                                "babyName": "朱婷",
+                                "list": [
+                                    {
+                                        "levelCode": "1",
+                                        "learnDepth": "决策思维",
+                                        "levelText": "在教师鼓励下，能够独立思考完成一件简单的任务。"
+                                    },
+                                    {
+                                        "levelCode": "1",
+                                        "learnDepth": "元认知",
+                                        "levelText": "1.（自我认识）：知道自己的姓名、性别、年龄\n2.（自我控制）：在一般压力情况下，能够自己控制情绪或行为反应，偶尔需要成人的支持。\n3.（自我效能）：喜欢承担一些小任务，表现出好像有能力完成新的任务。\n4.（反思与理解）：在引导下，能够根据过去的事件改变自己的行为；\n将今天的体验与过去发生的体验相关联。"
+                                    }
+                                ]
+                            }
+                        ]
+                    }
+                ]
+            }
+        ],
+        "domainDataList": [
+            {
+                "domainName": "健康领域",
+                "radarChart": [
+                    {
+                        "name": "精细动作",
+                        "maximum": 80,
+                        "value": 35.00
+                    },
+                    {
+                        "name": "生活与卫生习惯能力",
+                        "maximum": 80,
+                        "value": 30.00
+                    }
+                ],
+                "recordList": [
+                    {
+                        "recordDate": "2023-11-16",
+                        "abilityName": "精细动作",
+                        "abilityIconUrl": "https://img.luojigou.vip/FqvHvZVz8j6-R32NeadHFahTjTHJ",
+                        "growth": "1、以手指和拇指抓握物体",
+                        "story": {
+                            "images": [
+                                "https://app-resources-luojigou.luojigou.vip/8b14bec6145a48538ffd19ec57207649"
+                            ],
+                            "videos": [],
+                            "content": "幼儿在操作逻辑狗时，能专注力集中的一一对应操作"
+                        },
+                        "tactics": "环创\n提供用于抓取、转移、放开和掉落的玩具。\n1.提供绘画机会并进行监督，为孩子提供蜡笔和大纸张。\n2.提供自由开放和使用受限的玩具和材料。\n3.提供宽大的书籍，以鼓励孩子去抓握，啃咬和翻页。\n4.提供各种各样的对象和容器来操作，特别是那些可以装水和倾倒的物件和容器。\n5.提供各种不同大小的杯子，用于水游戏和操作。\n6.提供手工大小的软砖，用于建筑和拆卸。\n7.提供适合年龄的手指食物，比如豌豆。\n\n师幼\n1.把不同的玩具给宝宝玩(例如摇铃，小积木，填充玩具和球，避免窒息危险)。\n2.玩一些游戏，让孩子参与到给予和索取中(例如，把帽子戴在头上，让孩子把帽子从你头上摘下来，然后把帽子戴在孩子头上，帮助孩子把帽子摘下来)。\n3.唱歌并示范需要用到手指的手指游戏。",
+                        "education": "家长可以提供自由开放和使用受限的玩具和材料。\n家长可以提供宽大的书籍，以鼓励孩子去抓握，啃咬和翻页。"
+                    },
+                    {
+                        "recordDate": "2024-01-06",
+                        "abilityName": "生活与卫生习惯能力",
+                        "abilityIconUrl": "https://img.luojigou.vip/FriKqjr4n0Ff3-lsD70ct34OP4Hn",
+                        "growth": "1、根据成人的指导或示范，按要求执行卫生保健的活动。",
+                        "story": {
+                            "images": [
+                                "https://app-resources-luojigou.luojigou.vip/860b20424d184551bbd703175d2489ee"
+                            ],
+                            "videos": [],
+                            "content": "摆放有序，注意卫生"
+                        },
+                        "tactics": "（1）环创：\n提供碗，豆子，勺子，练习使用勺子。\n提供纸巾，创设场景，幼儿学习擦鼻涕或者擦屁股。\n培养幼儿基本的用餐礼仪，如：咀嚼食物时不说话，用餐时不随意跑动。\n（2）师幼：\n与幼儿谈论健康规则(咳嗽时要捂住嘴;把脏纸巾扔进废纸篓)。\n教师在幼儿因游戏，忘记上厕所，尿湿裤子不予批评给与安慰。\n教师鼓励幼儿吃饭不剩饭，饭后要漱口。\n\n",
+                        "education": "家长鼓励幼儿进行如厕、刷牙、洗澡等自理活动，并给予赞赏。\n家长辅助幼儿，学习如何穿外套，脱鞋子，穿袜子。\n家长及时接送幼儿，建立时间规则意识。"
+                    },
+                    {
+                        "recordDate": "2024-01-06",
+                        "abilityName": "精细动作",
+                        "abilityIconUrl": "https://img.luojigou.vip/FqvHvZVz8j6-R32NeadHFahTjTHJ",
+                        "growth": "1、能够熟练精确的操作小物体组成的任务",
+                        "story": {
+                            "images": [
+                                "https://app-resources-luojigou.luojigou.vip/860b20424d184551bbd703175d2489ee"
+                            ],
+                            "videos": [],
+                            "content": "摆放有序，注意卫生"
+                        },
+                        "tactics": "（1）环创：\n提供宽松动手操作的环境。\n提供精细动作的材料，如珠子，豆子等。\n（2）师幼：\n与幼儿玩毛球搬家的游戏，请幼儿用辅助工具将毛球从一个小碗运到另一个小碗中。\n与幼儿玩解救小汽车的游戏，教师将小汽车用彩色胶带一条一条将其黏住，让小朋友撕开胶带，将小汽车解救出来。\n\n",
+                        "education": "家长请幼儿帮忙在饭前擦桌子。\n家长为幼儿提供安全剪刀，让幼儿练习使用剪刀剪纸的能力。\n"
+                    }
+                ]
+            },
+            {
+                "domainName": "逻辑思维通用领域",
+                "radarChart": [
+                    {
+                        "name": "反省思维能力",
+                        "maximum": 80,
+                        "value": 10.00
+                    },
+                    {
+                        "name": "批判思维能力",
+                        "maximum": 80,
+                        "value": 20.00
+                    },
+                    {
+                        "name": "观察能力",
+                        "maximum": 80,
+                        "value": 50.00
+                    },
+                    {
+                        "name": "知识迁移能力",
+                        "maximum": 80,
+                        "value": 26.67
+                    }
+                ],
+                "recordList": [
+                    {
+                        "recordDate": "2023-11-16",
+                        "abilityName": "观察能力",
+                        "abilityIconUrl": "https://img.luojigou.vip/FngFEcIzFhjUndW4gWdTZaKOOtsI",
+                        "growth": "3、能够在老师的引导和要求下，有目的的进行比较持久的观察活动。",
+                        "story": {
+                            "images": [
+                                "https://app-resources-luojigou.luojigou.vip/8b14bec6145a48538ffd19ec57207649"
+                            ],
+                            "videos": [],
+                            "content": "幼儿在操作逻辑狗时，能专注力集中的一一对应操作"
+                        },
+                        "tactics": "师幼\n进行以儿童为中心的游戏，让孩子发现和练习因果关系，因为成人的关注方向是有限的。\n•帮助孩子知道何时使用“w”问题;“为什么”、“谁”、“什么”、“在哪里”、“什么时候”。\n\n环创\n•用足够的开放式材料和时间丰富孩子的探索环境(积木、水桌、户外环境、沙子和挖掘工具)。\n提供机会对收集的岩石、贝壳和玩具动物进行分组、排序和分类。",
+                        "education": "家长可以给孩子提供机会对收集的岩石、贝壳和玩具动物进行分组、排序和分类。\n家长可以提供(积木、水桌、户外环境、沙子和挖掘工具)等工具鼓励幼儿观察探索。"
+                    },
+                    {
+                        "recordDate": "2023-11-22",
+                        "abilityName": "批判思维能力",
+                        "abilityIconUrl": "https://img.luojigou.vip/FqULioebts3a3cpbQT8p9iMNHRNa",
+                        "growth": "2、幼儿能够自主模仿其他学生的作品（例，运用自己喜欢的相似的材料）（掌握该能力）",
+                        "story": {
+                            "images": [
+                                "https://app-resources-luojigou.luojigou.vip/3fc15570d31e4bd689691f329bd5da71"
+                            ],
+                            "videos": [],
+                            "content": "行为记录的内容。自己老师编写的。"
+                        },
+                        "tactics": "师幼 \n向幼儿展示如何描述他人作品的内容（例如描述作品的形状，尺寸或其他特征）\n向幼儿解释并鼓励幼儿讨论他/她喜欢或不喜欢什么",
+                        "education": "家长可以向幼儿解释并鼓励幼儿讨论他/她喜欢或不喜欢什么"
+                    },
+                    {
+                        "recordDate": "2023-11-22",
+                        "abilityName": "知识迁移能力",
+                        "abilityIconUrl": "https://img.luojigou.vip/FsUd6vUNI9gxvPQXfn9mLDXpqH1i",
+                        "growth": "  \n2、对于熟悉的物品，知道不同物品之间的联系。\n\n",
+                        "story": {
+                            "images": [
+                                "https://app-resources-luojigou.luojigou.vip/3fc15570d31e4bd689691f329bd5da71"
+                            ],
+                            "videos": [],
+                            "content": "行为记录的内容。自己老师编写的。"
+                        },
+                        "tactics": "环创\n\n提供不同质地的玩具和物品，以回应孩子的动作(例如，响尾蛇，挤压玩具，布玩具，软球)\n师幼\n\n和孩子一起玩游戏，帮助他们理解物体的持久性(例如，躲猫猫，捉迷藏)\n演示、解释并让孩子参与一些活动，展示不同的经历是如何相互关联的(例如，“你的毛衣穿在你头上，就像你的衬衫穿在你头上一样”)。\n用照片和物品谈论孩子过去的经历(例如，郊游后的照片或玩具动物)。",
+                        "education": "建议家长和孩子一起玩游戏，帮助他们理解物体的持久性(例如，躲猫猫，捉迷藏)\n建议家长用照片和物品谈论孩子过去的经历(例如，郊游后的照片或幼儿小时候)。"
+                    },
+                    {
+                        "recordDate": "2023-12-01",
+                        "abilityName": "知识迁移能力",
+                        "abilityIconUrl": "https://img.luojigou.vip/FsUd6vUNI9gxvPQXfn9mLDXpqH1i",
+                        "growth": "2、根据过去的经验，在遇到相同的情况时，可以尝试复制之前观察到的解决策略。\n\n",
+                        "story": {
+                            "images": [
+                                "https://app-resources-luojigou.luojigou.vip/ebac519284c34238a7e4bbd0fb8ba6ba",
+                                "https://app-resources-luojigou.luojigou.vip/b257ec6e55144de0bc5a682f0566ed47",
+                                "https://app-resources-luojigou.luojigou.vip/e1ac6da274044710b6ff26287638c011",
+                                "https://app-resources-luojigou.luojigou.vip/ebac519284c34238a7e4bbd0fb8ba6ba",
+                                "https://app-resources-luojigou.luojigou.vip/b257ec6e55144de0bc5a682f0566ed47",
+                                "https://app-resources-luojigou.luojigou.vip/d95b9d3638624ad4b086486351940802"
+                            ],
+                            "videos": [],
+                            "content": "在进行逻辑狗游戏时，幼儿会学着老师的样子进行检查，将做错的圆钮退下来，重新操作"
+                        },
+                        "tactics": "师幼\n\n使用孩子的母语、经验和文化将孩子与新的经历联系起来。\n让孩子参与日常活动并解释原因(例如，“我们用吸尘器清理地板”)。\n帮助孩子做出概括(例如:“如果这里是晴天，那么学校里也可能是晴天。”)\n当孩子回忆起一件过去的事件并将之作为选择的基础时，认可孩子的做法。",
+                        "education": "建议家长让孩子参与日常活动并解释原因(例如，“我们用吸尘器清理地板”)。\n家长家长帮助孩子做出概括(例如:“如果这里是晴天，那么学校里也可能是晴天。”)\n建议家长当孩子回忆起一件过去的事件并将之作为选择的基础时，认可孩子的做法。"
+                    },
+                    {
+                        "recordDate": "2023-12-14",
+                        "abilityName": "反省思维能力",
+                        "abilityIconUrl": "https://img.luojigou.vip/FlzL7WI0aqn9flfxRczN6Lhs5IAX",
+                        "growth": "1、在老师的提示下，幼儿能够向教师说明自己的作品、行为、想法",
+                        "story": {
+                            "images": [],
+                            "videos": [],
+                            "content": "在进行逻辑狗游戏时，幼儿推动模板上的圆钮对老师说：“我喜欢红色，所以我开动红色的小汽车。”"
+                        },
+                        "tactics": "环创：\n为孩子提供玩具和物品，让他们对特定的动作做出反应。\n为孩子提供机会，让他们在不同的物体上尝试环创。\n提供相似但产生不同结果的材料，让幼儿尝试(如蜡笔，记号笔，油漆)。\n（2）师幼：\n在老师的提示下，孩子能够向教师和小朋友展示作品。\n邀请孩子分享他/她对一些事情的想法和看法。\n和孩子一起尝试做不同的事情。\n\n",
+                        "education": "家长好奇的问孩子今天在幼儿园发生的趣事。\n家长陪伴孩子读一个睡前故事，让孩子说一说对故事中人物的看法。\n"
+                    },
+                    {
+                        "recordDate": "2023-12-14",
+                        "abilityName": "知识迁移能力",
+                        "abilityIconUrl": "https://img.luojigou.vip/FsUd6vUNI9gxvPQXfn9mLDXpqH1i",
+                        "growth": "  \n2、对于熟悉的物品，知道不同物品之间的联系。\n\n",
+                        "story": {
+                            "images": [],
+                            "videos": [],
+                            "content": "在进行逻辑狗游戏时，幼儿拨动模板上面的圆钮，并试图将卡片插进模板中"
+                        },
+                        "tactics": "（1）环创：\n提供常见物品如：勺子、碗等能较为熟练使用。\n在区域中摆放不同物品供幼儿自行操作完成，如：娃娃家做饭会用到的东西，尝试说说两种物品之间的关联。\n创设真实的场景：让儿童在不同的情境下实践所学的知识。\n（2）师幼：\n利用故事、情境等方式，激发幼儿的兴趣和好奇心，创设有趣的故事情节，引导幼儿找出故事中的问题，从而引领幼儿将知识迁移到新的学习场景中。\n在生活中多举一些例子提问(例如，我们做好饭后需要什么物品来盛饭呢？)。\n\n",
+                        "education": "家长可以陪伴幼儿一起进行游戏。\n家长可以陪伴幼儿一起玩找关联游戏，如出示碗，幼儿能找到勺子。"
+                    }
+                ]
+            }
+        ]
+    };
     }
   }
 

src/store/modules/report.ts

@@ -63,162 +63,10 @@ export default defineStore("report", () => {
     return "";
   }
 
-  // function createDomain(item: IDistrictData) {
-  //   const {
-  //     abilityLevelDes,
-  //     domainName,
-  //     domainAbilityName,
-  //     abilityName,
-  //     abilityLevelName,
-  //   } = item as IDistrictData;
-  //
-  //   if (!item.story) {
-  //     item.story = {
-  //       content: null,
-  //       description: null,
-  //       images: null,
-  //       questions: null,
-  //       videos: null,
-  //     };
-  //   }
-  //
-  //   const { content, videos, images } = item.story;
-  //   const { behave } = abilityLevelDes;
-  //
-  //   interface Domain {
-  //     isEmpty: boolean;
-  //     behave: null | string;
-  //     domainName: null | string;
-  //     domainAbilityName: null | string;
-  //     content: null | string;
-  //     abilityName: null | string;
-  //     abilityLevelName: null | string;
-  //     videos: null | string[];
-  //     images: null | string[];
-  //   }
-  //
-  //   const domain: Domain = {
-  //     isEmpty: true,
-  //     behave: null,
-  //     domainName: null,
-  //     domainAbilityName: null,
-  //     content: null,
-  //     abilityName: null,
-  //     abilityLevelName: null,
-  //     videos: null,
-  //     images: null,
-  //   };
-  //
-  //   if (domainName) {
-  //     domain.domainName = domainName;
-  //     domain.isEmpty = false;
-  //   }
-  //
-  //   if (domainAbilityName) {
-  //     domain.domainAbilityName = formatDomainAbilityName(domainAbilityName);
-  //     domain.isEmpty = false;
-  //   }
-  //
-  //   if (behave) {
-  //     domain.behave = behave;
-  //     domain.isEmpty = false;
-  //   }
-  //
-  //   if (content) {
-  //     domain.content = content;
-  //     domain.isEmpty = false;
-  //   }
-  //
-  //   if (abilityName) {
-  //     domain.abilityName = abilityName;
-  //     domain.isEmpty = false;
-  //   }
-  //
-  //   if (abilityLevelName) {
-  //     domain.abilityLevelName = abilityLevelName;
-  //     domain.isEmpty = false;
-  //   }
-  //
-  //   if (videos) {
-  //     domain.videos = videos;
-  //     domain.isEmpty = false;
-  //   }
-  //
-  //   if (images) {
-  //     domain.images = images;
-  //     domain.isEmpty = false;
-  //   }
-  //
-  //   if (!domain.isEmpty) {
-  //     addComponentIfExist(DomainAbility, domain);
-  //     // console.log(domain, 'domain')
-  //   }
-  // }
-
   function createQuestion(item: IDistrictData) {
-    const { questionCardUrl, questionCardUrlList } = item;
-    if (!item.question) {
-      item.question = {
-        content: null,
-        description: null,
-        images: null,
-        questions: null,
-        videos: null,
-      };
-
-      return;
-    }
-    const { content, images, videos, questions } = item.question;
-
-    interface IQuestion {
-      isEmpty: boolean;
-      questionCardUrl: null | string;
-      questionCardUrlList: null | string[];
-      content: null | string;
-      images: null | string[];
-      videos: null | string[];
-      questions: null | { question: string; categoryId: string }[];
-    }
 
-    const question: IQuestion = {
-      isEmpty: true,
-      questionCardUrl: null,
-      questionCardUrlList: null,
-      content: null,
-      images: null,
-      videos: null,
-      questions: null,
-    };
-    if (questionCardUrl) {
-      question.questionCardUrl = questionCardUrl;
-      question.isEmpty = false;
-    }
-
-    if (questionCardUrlList) {
-      question.questionCardUrlList = questionCardUrlList;
-      question.isEmpty = false;
-    }
-    if (content) {
-      question.content = content;
-      question.isEmpty = false;
-    }
-    if (questions) {
-      question.questions = questions;
-      question.isEmpty = false;
-    }
-
-    if (images) {
-      question.images = images;
-      question.isEmpty = false;
-    }
-    if (videos) {
-      question.videos = videos;
-      question.isEmpty = false;
-    }
-
-    if (!question.isEmpty) {
-      addComponentIfExist(QuestionPart, question);
-    }
+    addComponentIfExist(QuestionPart,  {questions: item.questions, questionCardUrlList: item.questionCardUrlList});
+    
   }
 
   function pushComponents() {
@@ -240,6 +88,8 @@ export default defineStore("report", () => {
   }
 
   function createComponent() {
+    console.log('综合发展情况:');
+    
     // 综合发展情况
     if (!isSingle.value) {
       componentList.value.push({
@@ -266,6 +116,7 @@ export default defineStore("report", () => {
           domainAbilityName,
           abilityLevelName,
           story,
+          abilityName
         } = item;
         const { education, behave, growth, tactics } = abilityLevelDes;
 
@@ -287,8 +138,8 @@ export default defineStore("report", () => {
           images,
           videos,
           abilityLevelName,
+          abilityName,
         });
-
         createQuestion(item);
 
         addComponentIfExist(FamilyStrategy, { education, tactics });
@@ -324,7 +175,7 @@ export default defineStore("report", () => {
       districtList.value = data?.districtList;
       domainList.value = data?.domainList;
       radarMapList.value = data?.radarMapList;
-
+      
       createComponent();
 
       console.log(JSON.parse(JSON.stringify(pageList.value)), "pageList");

src/types/customize.d.ts

@@ -152,6 +152,7 @@ interface IDomainData {
     tactics: string
     education: string;
   }[];
+  radarChart: {name: string, maximum: number, value:number}[]
 }
 
 
@@ -170,7 +171,8 @@ export interface ISemesterReport {
   domainAbilityNameList: IDomainAbilityName[];
   domainDataList: IDomainData[];
   learnDepthList: string[]
-  babyLearnDepthList: any[]
+  babyLearnDepthList: any[],
+  radarChart: {name: string, maximum: number, value:number}[],
   questionList: {
     background: string
     teacherName: string

src/types/report.d.ts

@@ -17,7 +17,7 @@ interface IQuestion {
   content: string | null;
   description: null | string;
   images: null | string[];
-  questions: null | { question: string; categoryId: string }[];
+  question: string;
   videos: null | string[];
 }
 
@@ -40,7 +40,7 @@ export interface IDistrictData {
   domainId: string;
   domainName: string;
   id: string;
-  question: IQuestion | null;
+  questions: IQuestion[] | null;
   questionCardUrl: null | string;
   questionCardUrlList: null | string[];
   slogan: string;

src/views/customize/SemesterReport.vue

@@ -1,184 +1,3 @@
-<script setup lang="ts">
-import { getImageUrl, imagePreview, returnAppPage } from "@/utils";
-import { useRoute, useRouter } from "vue-router";
-import { useCustomizeStore } from "@/store";
-// import { storeToRefs } from "pinia";
-import { computed, onMounted, onUnmounted, ref, watch } from "vue";
-import ShareModal from "@/views/customize/components/ShareModal.vue";
-// @ts-ignore
-import { exportPDF } from '@/utils/exportPdf'
-
-const {
-  b: babyId,
-  c: classId,
-  l: classLevelCode,
-  // g: gameType,
-  s: semesterType,
-  // r: recordType,
-  p: isParent,
-  o: isMyRoute,
-} = useRoute().query;
-const router = useRouter();
-const customizeStore = useCustomizeStore();
-
-// const { semesterReport } = storeToRefs(customizeStore);
-const { getSemesterRecord, sendSemesterRecord } = customizeStore;
-
-const isShow = ref(false);
-const shareShow = ref(false);
-const opacity = ref(0);
-
-const semesterReport = computed(() => {
-  return customizeStore.semesterReport;
-});
-
-watch(isShow, (val) => {
-  if (val) {
-    setTimeout(() => {
-      document.addEventListener("click", handleClick);
-    }, 10);
-  } else {
-    document.removeEventListener("click", handleClick);
-  }
-});
-
-
-const getLabel = (index: number) => {
-  switch (index) {
-    case 0:
-      return '计划'
-    case 1:
-      return '实施'
-    case 2:
-      return '总结与反思'
-    case 3:
-      return '调整'
-  }
-}
-
-const getStateage = (levelCode: string) => {
-  switch (levelCode) {
-    case '1':
-      return '3-4岁目标'
-    case '2':
-      return '4-5岁目标'
-    case '3':
-      return '5-6岁目标'
-  }
-}
-
-function getFieldLogo(title: string) {
-  const arr = ["通用", "科学", "艺术", "语言", "社会"];
-  let index = arr.findIndex((item) => title.includes(item));
-  index = index === -1 ? 0 : index;
-  return getImageUrl(`field_logo_0${index}`);
-}
-
-function isHas(content: string[]) {
-  return Array.isArray(content) && content.length > 0;
-}
-
-function formatFamily(name: string) {
-  let arr = name.split("\n");
-  return arr[arr.length - 1] === "" ? arr.slice(0, arr.length - 1) : arr;
-}
-
-function send() {
-  if (semesterReport.value.sendReport) return;
-  if (
-    typeof babyId === "string" &&
-    typeof classId === "string" &&
-    typeof classLevelCode === "string" &&
-    typeof semesterType === "string"
-  )
-    sendSemesterRecord({
-      babyId,
-      classId,
-      classLevelCode,
-      semesterType,
-      recordType: "1",
-    });
-}
-
-function back() {
-  isMyRoute === "1" ? router.go(-1) : returnAppPage();
-}
-
-function handleClick() {
-  console.log("handleClick");
-  if (isShow.value) isShow.value = false;
-}
-
-function share() {
-  console.log("share");
-  shareShow.value = true;
-}
-
-function handleScroll() {
-  const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
-  const opacityVal = scrollTop / 88;
-  opacity.value = opacityVal > 1 ? 1 : opacityVal;
-}
-
-function getStyle(index: number, length: number) {
-  return {
-    borderRadius: `${
-      length === 1 ? "17px" : index === length - 1 ? "0 0 17px 17px" : index === 0 ? "17px 17px 0 0" : "0"
-    }`,
-    borderTop: `${index === 0 ? "4px solid #b6dcff" : "none"}`,
-    borderBottom: `${index === length - 1 ? "4px solid #b6dcff" : "none"}`,
-    boxShadow: `${index === 0 ? "0 1px 6px 0 rgba(42, 105, 253, 0.16)" : "none"}`,
-  };
-}
-
-function getTargetStyle(index: number) {
-  const style = {
-    borderRadius: "0 0 9px 9px",
-  };
-  if (index === 3) {
-    style.borderRadius = "0 0 9px 9px";
-  } else {
-    style.borderRadius = "0";
-  }
-  return style;
-}
-
-
-const exportReport = () => {
-  exportPDF(semesterReport.value)
-}
-
-onMounted(async () => {
-  if (
-    typeof babyId === "string" &&
-    typeof classId === "string" &&
-    typeof classLevelCode === "string" &&
-    typeof semesterType === "string"
-  )
-    await getSemesterRecord({ babyId, classId, classLevelCode, semesterType });
-
-
-  document.addEventListener("scroll", handleScroll);
-});
-
-onUnmounted(() => {
-  document.removeEventListener("click", handleClick);
-  document.removeEventListener("scroll", handleScroll);
-});
-
-/**
- * 综合报告
- *
- * b: babyId
- * c: classId
- * l: classLevelCode
- * s: semesterType
- * o: isMyRoute
- *
- * http://192.168.1.17:8989/#/customize/SemesterReport?b=1304672468777553921&c=1304705777133330433&l=0&s=0&o=1
- */
-</script>
-
 <template>
   <div class="report-detail rd">
     <!--头部-->
@@ -231,7 +50,7 @@ onUnmounted(() => {
         <div>{{semesterReport.className  }}</div>
       </div>
       <div class="rd-baby-hobby"   :style="{ backgroundImage: `url(${getImageUrl('hobby')})`}" >
-        {{ semesterReport.hobby.slice(0, 4).join('、')}}
+        {{ semesterReport.hobby.length > 4 ? semesterReport.hobby.slice(0, 4).join('、') : semesterReport.hobby.join('、')}}
       </div>
       <div class="rd-baby-teacher" :style="{ backgroundImage: `url(${getImageUrl('teacher')})`}" >
         <div v-if="semesterReport.teachers.length > 1">{{semesterReport.teachers[0]}}</div>
@@ -265,6 +84,9 @@ onUnmounted(() => {
         <p>幼儿分领域评估概括</p>
         <div></div>
       </div>
+
+      <radarCharts v-if="semesterReport.radarChart" :datasource="semesterReport.radarChart" />
+
       <div v-for="(item, index) in semesterReport.domainAbilityNameList" :key="index" class="rd-field-item">
         <img :src="getFieldLogo(item.domainName)" alt="" class="logo" />
         <div class="info">
@@ -401,13 +223,16 @@ onUnmounted(() => {
       <!--行为记录-->
       <div v-for="(item, index) in semesterReport.domainDataList" :key="index" class="rd-part">
         <div class="domain">{{ item.domainName }}</div>
+        
         <div
           v-for="(ability, abilityIndex) in item.recordList"
           :key="abilityIndex"
           class="ability grid_bgi"
           :style="getStyle(abilityIndex, item.recordList.length)"
         >
+      
           <img v-if="abilityIndex !== 0" :src="getImageUrl('ability_gap')" alt="" class="ability-gap" />
+          <div v-if="abilityIndex === 0" style="display: flex;align-items: center;justify-content: center;"> <radarCharts  :datasource="item.radarChart" /> </div>
           <div class="ability-title flex-center">
             <img :src="ability.abilityIconUrl" alt="" class="ability-title-logo" />
             <div class="ability-title-text">{{ ability.abilityName }}</div>
@@ -470,6 +295,194 @@ onUnmounted(() => {
   <ShareModal :show="shareShow" @close="shareShow = false" />
 </template>
 
+<script setup lang="ts">
+import { getImageUrl, imagePreview, returnAppPage } from "@/utils";
+import { useRoute, useRouter } from "vue-router";
+import { useCustomizeStore } from "@/store";
+// import { storeToRefs } from "pinia";
+import { computed, onMounted, onUnmounted, ref, watch } from "vue";
+import ShareModal from "@/views/customize/components/ShareModal.vue";
+// @ts-ignore
+import { exportPDF } from '@/utils/exportPdf'
+
+import radarCharts from  '@/components/radarCharts.vue'
+
+const {
+  b: babyId,
+  c: classId,
+  l: classLevelCode,
+  // g: gameType,
+  s: semesterType,
+  // r: recordType,
+  p: isParent,
+  o: isMyRoute,
+} = useRoute().query;
+const router = useRouter();
+const customizeStore = useCustomizeStore();
+
+// const { semesterReport } = storeToRefs(customizeStore);
+const { getSemesterRecord, sendSemesterRecord } = customizeStore;
+
+const isShow = ref(false);
+const shareShow = ref(false);
+const opacity = ref(0);
+
+
+const semesterReport = computed(() => {
+  return customizeStore.semesterReport;
+});
+
+console.log('semesterReport:', semesterReport);
+
+watch(isShow, (val) => {
+  if (val) {
+    setTimeout(() => {
+      document.addEventListener("click", handleClick);
+    }, 10);
+  } else {
+    document.removeEventListener("click", handleClick);
+  }
+});
+
+
+const getLabel = (index: number) => {
+  switch (index) {
+    case 0:
+      return '计划'
+    case 1:
+      return '实施'
+    case 2:
+      return '总结与反思'
+    case 3:
+      return '调整'
+  }
+}
+
+const getStateage = (levelCode: string) => {
+  switch (levelCode) {
+    case '1':
+      return '3-4岁目标'
+    case '2':
+      return '4-5岁目标'
+    case '3':
+      return '5-6岁目标'
+  }
+}
+
+function getFieldLogo(title: string) {
+  const arr = ["通用", "科学", "艺术", "语言", "社会"];
+  let index = arr.findIndex((item) => title.includes(item));
+  index = index === -1 ? 0 : index;
+  return getImageUrl(`field_logo_0${index}`);
+}
+
+function isHas(content: string[]) {
+  return Array.isArray(content) && content.length > 0;
+}
+
+function formatFamily(name: string) {
+  let arr = name.split("\n");
+  return arr[arr.length - 1] === "" ? arr.slice(0, arr.length - 1) : arr;
+}
+
+function send() {
+  if (semesterReport.value.sendReport) return;
+  if (
+    typeof babyId === "string" &&
+    typeof classId === "string" &&
+    typeof classLevelCode === "string" &&
+    typeof semesterType === "string"
+  )
+    sendSemesterRecord({
+      babyId,
+      classId,
+      classLevelCode,
+      semesterType,
+      recordType: "1",
+    });
+}
+
+function back() {
+  isMyRoute === "1" ? router.go(-1) : returnAppPage();
+}
+
+function handleClick() {
+  console.log("handleClick");
+  if (isShow.value) isShow.value = false;
+}
+
+function share() {
+  console.log("share");
+  shareShow.value = true;
+}
+
+function handleScroll() {
+  const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
+  const opacityVal = scrollTop / 88;
+  opacity.value = opacityVal > 1 ? 1 : opacityVal;
+}
+
+function getStyle(index: number, length: number) {
+  return {
+    borderRadius: `${
+      length === 1 ? "17px" : index === length - 1 ? "0 0 17px 17px" : index === 0 ? "17px 17px 0 0" : "0"
+    }`,
+    borderTop: `${index === 0 ? "4px solid #b6dcff" : "none"}`,
+    borderBottom: `${index === length - 1 ? "4px solid #b6dcff" : "none"}`,
+    boxShadow: `${index === 0 ? "0 1px 6px 0 rgba(42, 105, 253, 0.16)" : "none"}`,
+  };
+}
+
+function getTargetStyle(index: number) {
+  const style = {
+    borderRadius: "0 0 9px 9px",
+  };
+  if (index === 3) {
+    style.borderRadius = "0 0 9px 9px";
+  } else {
+    style.borderRadius = "0";
+  }
+  return style;
+}
+
+
+const exportReport = () => {
+  exportPDF(semesterReport.value)
+}
+
+onMounted(async () => {
+  if (
+    typeof babyId === "string" &&
+    typeof classId === "string" &&
+    typeof classLevelCode === "string" &&
+    typeof semesterType === "string"
+  )
+    await getSemesterRecord({ babyId, classId, classLevelCode, semesterType });
+
+
+  document.addEventListener("scroll", handleScroll);
+});
+
+onUnmounted(() => {
+  document.removeEventListener("click", handleClick);
+  document.removeEventListener("scroll", handleScroll);
+});
+
+/**
+ * 综合报告
+ *
+ * b: babyId
+ * c: classId
+ * l: classLevelCode
+ * s: semesterType
+ * o: isMyRoute
+ *
+ * http://192.168.1.17:8989/#/customize/SemesterReport?b=1304672468777553921&c=1304705777133330433&l=0&s=0&o=1
+ */
+</script>
+
+
+
 <style scoped lang="scss">
 .rd {
   position: relative;

src/views/report/EvaluationReport.vue

@@ -1,3 +1,28 @@
+
+<template>
+  <!--<Loading v-if="loading" />-->
+
+  <CoverPage v-if="showCover" :info="babyInfo" @start="start" />
+
+  <div class="report">
+    <HeaderPart />
+
+    <Swipe ref="swipeRef" class="sp" vertical :loop="false" :touchable="false" :show-indicators="false">
+      <SwipeItem v-for="page in pageList" :key="page.id" class="sp-item">
+        <div class="report-item">
+          <Component :is="cpt.view" v-for="cpt in page.componentList" :key="cpt.id" :value="cpt.value" />
+        </div>
+      </SwipeItem>
+    </Swipe>
+
+    <TurnPage :show-down="showDown" :show-up="showUp" @turn="changeSwipe" />
+
+    <div v-if="totalPage > 0" class="indicator">{{ currentPage }}/{{ totalPage }}</div>
+  </div>
+
+  <Screenshot />
+</template>
+
 <script setup lang="ts">
 import { useRoute } from "vue-router";
 import { useReportStore } from "@/store";
@@ -17,6 +42,7 @@ const reportStore = useReportStore();
 const { isSingle, isTeacher, babyId, recordId, babyInfo, totalPage, pageList } = storeToRefs(reportStore);
 const { getReport } = reportStore;
 
+
 // const loading = ref(false);
 const showCover = ref(false);
 const currentPage = ref<number>(1);
@@ -91,29 +117,6 @@ onMounted(async () => {
  */
 </script>
 
-<template>
-  <!--<Loading v-if="loading" />-->
-
-  <CoverPage v-if="showCover" :info="babyInfo" @start="start" />
-
-  <div class="report">
-    <HeaderPart />
-
-    <Swipe ref="swipeRef" class="sp" vertical :loop="false" :touchable="false" :show-indicators="false">
-      <SwipeItem v-for="page in pageList" :key="page.id" class="sp-item">
-        <div class="report-item">
-          <Component :is="cpt.view" v-for="cpt in page.componentList" :key="cpt.id" :value="cpt.value" />
-        </div>
-      </SwipeItem>
-    </Swipe>
-
-    <TurnPage :show-down="showDown" :show-up="showUp" @turn="changeSwipe" />
-
-    <div v-if="totalPage > 0" class="indicator">{{ currentPage }}/{{ totalPage }}</div>
-  </div>
-
-  <Screenshot />
-</template>
 
 <style lang="scss" scoped>
 .report {

src/views/report/district/ChildrenBehavior.vue

@@ -9,6 +9,7 @@ const props = defineProps<{
     images: any;
     videos: any;
     abilityLevelName: string;
+    abilityName: string
   };
 }>();
 
@@ -16,6 +17,7 @@ const growth = ref(props.value.growth);
 const behave = ref(props.value.behave);
 const images = ref(props.value.images);
 const videos = ref(props.value.videos);
+const abilityName = ref(props.value.abilityName);
 const abilityLevelName = ref(props.value.abilityLevelName);
 
 const isVideo = computed(() => {
@@ -71,7 +73,7 @@ function lightImg(index: number) {
       <div v-if="behave" class="cb-content-behave">{{ behave }}</div>
     </div>
     <div class="cb-domain">
-      <div class="cb-domain-text">探索程度：{{ abilityLevelName }}</div>
+      <div class="cb-domain-text">{{abilityName}} : {{ abilityLevelName }}</div>
       <img v-for="index in 3" :key="index" :src="lightImg(index)" alt="" class="cb-domain-light" />
     </div>
 

src/views/report/district/QuestionPart.vue

@@ -1,3 +1,53 @@
+<template>
+  <div class="question grid_bgi">
+    <img v-if="isImage" :src="getImageUrl('question_title')" alt="" class="question-title" />
+    <div v-if="isImage" class="question-multiple">
+      <div
+        v-for="(item, index) in questionCardUrlList.slice(0, 9)"
+        :key="index"
+        class="question-multiple-img"
+        @click="imagePreview(questionCardUrlList, index)"
+      >
+        <div class="question-multiple-img-img" :style="{ backgroundImage: `url(${item})` }"></div>
+        <!--<img :src="item" alt="" />-->
+        <div v-if="index === 8 && questionCardUrlList.length > 9" class="more flex-center">
+          +{{ questionCardUrlList.length - 9 }}
+        </div>
+      </div>
+    </div>
+
+    <img v-if="recordIsNull" :src="getImageUrl('record_title')" alt="" class="question-header" />
+    <span v-for="(item, index) in questions" :key="index"  >
+      <div class="question-record" v-if="recordIsNull">
+        <div  class="question-record-item">
+          <img :src="getImageUrl('record_logo')" alt="" />
+          <div>{{ item.question }}</div>
+        </div>
+        <div class="question-record-multiple img-box"  v-if="item.images.length">
+          <div
+            v-for="(image, index) in item.images.slice(0, 9)"
+            :key="index"
+            class="images"
+            @click="imagePreview(images, index)"
+          >
+            <div class="images-img" :style="{ backgroundImage: `url(${image})` }"></div>
+            <div v-if="index === 8 && images.length > 9" class="images-more flex-center">+{{ images.length - 9 }}</div>
+          </div>
+        </div>
+        <video
+          v-if="item.videos.length"
+          :src="item.videos[0]"
+          class="question-record-video img-box"
+          controls
+          autoplay
+          :poster="videos[0] + '?vframe/jpg/offset/1'"
+        ></video>
+      </div>
+    </span>
+ 
+  </div>
+</template>
+
 <script setup lang="ts">
 import { computed, ref } from "vue";
 import { getImageUrl, imagePreview } from "@/utils";
@@ -7,7 +57,7 @@ const props = defineProps<{
     isEmpty: boolean;
     questionCardUrlList: string[];
     content: string;
-    questions: { question: string; categoryId: string }[];
+    questions: { question: string; categoryId: string, images: string[], videos: string[] }[];
     images: string[];
     videos: string[];
   };
@@ -16,6 +66,10 @@ const props = defineProps<{
 const questionCardUrlList = ref(props.value.questionCardUrlList);
 const content = ref(splitString(props.value.content));
 const questions = ref(props.value.questions);
+
+
+console.log('questions:', questions);
+
 const images = ref(props.value.images);
 const videos = ref(props.value.videos);
 
@@ -56,70 +110,6 @@ function splitString(str: string | null): string[] {
 }
 </script>
 
-<template>
-  <div class="question grid_bgi">
-    <img v-if="isImage" :src="getImageUrl('question_title')" alt="" class="question-title" />
-    <div v-if="isImage" class="question-multiple">
-      <div
-        v-for="(item, index) in questionCardUrlList.slice(0, 9)"
-        :key="index"
-        class="question-multiple-img"
-        @click="imagePreview(questionCardUrlList, index)"
-      >
-        <div class="question-multiple-img-img" :style="{ backgroundImage: `url(${item})` }"></div>
-        <!--<img :src="item" alt="" />-->
-        <div v-if="index === 8 && questionCardUrlList.length > 9" class="more flex-center">
-          +{{ questionCardUrlList.length - 9 }}
-        </div>
-      </div>
-    </div>
-    <!--<img-->
-    <!--  v-else-if="isSingle"-->
-    <!--  :src="questionCardUrlList[0]"-->
-    <!--  alt=""-->
-    <!--  class="question-single"-->
-    <!--  @click="imagePreview(questionCardUrlList)"-->
-    <!--/>-->
-    <img v-if="recordIsNull" :src="getImageUrl('record_title')" alt="" class="question-header" />
-    <div class="question-record" v-if="recordIsNull">
-      <div v-if="isImageRecord" class="question-record-multiple img-box">
-        <div
-          v-for="(item, index) in images.slice(0, 9)"
-          :key="index"
-          class="images"
-          @click="imagePreview(images, index)"
-        >
-          <div class="images-img" :style="{ backgroundImage: `url(${item})` }"></div>
-          <!--<img :src="item" alt="" />-->
-          <div v-if="index === 8 && images.length > 9" class="images-more flex-center">+{{ images.length - 9 }}</div>
-        </div>
-      </div>
-      <!--<img-->
-      <!--  v-else-if="isSingleRecord"-->
-      <!--  :src="images[0]"-->
-      <!--  alt=""-->
-      <!--  class="question-record-single img-box"-->
-      <!--  @click="imagePreview(images)"-->
-      <!--/>-->
-      <video
-        v-else-if="isVideo"
-        :src="videos[0]"
-        class="question-record-video img-box"
-        controls
-        autoplay
-        :poster="videos[0] + '?vframe/jpg/offset/1'"
-      ></video>
-      <div v-for="(item, index) in questions" :key="index" class="question-record-item">
-        <img :src="getImageUrl('record_logo')" alt="" />
-        <div>{{ item.question }}</div>
-      </div>
-      <div v-for="(item, index) in content" :key="index" class="question-record-item">
-        <img :src="getImageUrl('record_logo')" alt="" />
-        <div>{{ item }}</div>
-      </div>
-    </div>
-  </div>
-</template>
 
 <style scoped lang="scss">
 .question {
@@ -202,7 +192,7 @@ function splitString(str: string | null): string[] {
 
     &-item {
       display: flex;
-
+      margin-bottom: 10px;
       img {
         margin-top: 2px;
         margin-right: 8px;