feat: 性格测评报告页面编写和代码对接

src/pages-evaluation-sub/evaluate/academicReport/CapabilityReport.vue

@@ -22,15 +22,17 @@
 
     <view class="flex-1 overflow-auto pb-[30rpx] relative">
       <!-- 顶部卡片 -->
-      <view class="flex flex-col pt-[32rpx] px-[84rpx] h-[244rpx] mb-[-148rpx]">
+      <view
-        <image src="/static/images/evaluate/bg.png" class="header-bg" />
+        class="flex flex-col pt-[32rpx] mx-[24rpx] bg-[#fff] px-[30rpx] pt-[30rpx] border-class"
+      >
         <text class="text-[#333] text-[28rpx] mb-[14rpx] z-2">你的弱势能力为</text>
         <text class="text-[#117CFC] text-[36rpx] z-2">
           {{ studyRecord.title.replace('你的弱势能力：', '') }}
         </text>
       </view>
       <!-- 雷达图占位 -->
-      <LineReport />
+      <LineReport :echart-data="studyRecord.linChart" :description="studyRecord.description" />
+      <AbilityDimension :report-items="studyRecord.reportItems" />
       <!-- 底部AI智能顾问 -->
       <!-- <view class="ai-assistant mt-[20rpx] mb-[10rpx] flex items-center justify-center">
             <image src="" class="w-[32rpx] h-[32rpx] mr-[10rpx]"></image>
@@ -42,6 +44,7 @@
 <script setup lang="ts">
 import Navbar from '@/pages-evaluation-sub/components/navbar/Navbar.vue'
 import LineReport from '../components/interestChart/LineReport.vue'
+import AbilityDimension from '../components/AbilityDimension.vue'
 
 import { getAbilityDimension } from '@/service/index/api'
 
@@ -55,8 +58,8 @@ const handleBack = () => {
 const studyRecord = ref({
   description: '',
   title: '',
-  linChart: {},
+  linChart: [],
-  reportItem: { mainDomain: '', major: '', occupation: '' },
+  reportItems: [],
   hTag: '',
 })
 
@@ -69,8 +72,8 @@ onLoad((options) => {
       studyRecord.value = resp.result as {
         description: string
         title: string
-        linChart: any
+        linChart: any[]
-        reportItem: { mainDomain: string; major: string; occupation: string }
+        reportItems: any[]
         hTag: string
       }
     }
@@ -117,4 +120,10 @@ onLoad((options) => {
   border: 4rpx solid #fff;
   box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
 }
+
+.border-class {
+  border-radius: 20rpx 20rpx 0 0;
+  padding-bottom: 42rpx;
+  margin-bottom: -14rpx;
+}
 </style>

src/pages-evaluation-sub/evaluate/components/AbilityDimension.vue

@@ -0,0 +1,25 @@
+<template>
+  <view class="mx-[30rpx] mt-[30rpx] bg-white rounded-[20rpx] p-[30rpx]">
+    <TitleBar title="能力纬度详细介绍" />
+
+    <view class="flex flex-col gap-[40rpx]">
+      <view v-for="(item, index) in reportItems" :key="index">
+        <view class="text-[32rpx] text-[#000]">{{ item.title }}</view>
+        <view class="text-[26rpx] text-[#666] mt-[6rpx]">{{ item.resolving }}</view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import TitleBar from './TitleBar.vue'
+
+defineProps({
+  reportItems: {
+    type: Array<any>,
+    default: () => [],
+  },
+})
+</script>
+
+<style lang="scss" scoped></style>

src/pages-evaluation-sub/evaluate/components/InterestingThings.vue

@@ -1,15 +1,6 @@
 <template>
   <view class="interest-analysis mx-[30rpx] mt-[30rpx] bg-white rounded-[20rpx] p-[30rpx]">
-    <view class="text-center mb-[24rpx]">
+    <TitleBar title="兴趣分析与代表人物" />
-      <view class="text-[32rpx] font-bold relative inline-flex pb-[10rpx] items-center">
-        <view class="i-carbon-flash-filled h-[23rpx] w-[17rpx] text-[#1880FC]"></view>
-        <text class="text-[#1880FC] text-[36rpx] font-bold">兴趣分析与代表人物</text>
-        <view class="i-carbon-flash-filled h-[23rpx] w-[17rpx] text-[#1880FC]"></view>
-        <view
-          class="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-full h-[10rpx] bg-[#cce3fc] rounded-full title-bar"
-        ></view>
-      </view>
-    </view>
 
     <text class="text-[26rpx] text-[#666] leading-[40rpx] mb-[30rpx] block">
       {{ description }}
@@ -41,6 +32,7 @@
 
 <script lang="ts" setup>
 import { getTagMapPerson } from '@/service/index/api'
+import TitleBar from './TitleBar.vue'
 
 const props = defineProps({
   tag: {

src/pages-evaluation-sub/evaluate/components/IntroMajor.vue

@@ -1,16 +1,6 @@
 <template>
-  <view class="suitable-careers mx-[30rpx] mt-[30rpx] bg-white rounded-[20rpx] p-[30rpx]">
+  <view class="mx-[30rpx] mt-[30rpx] bg-white rounded-[20rpx] p-[30rpx]">
-    <view class="text-center mb-[24rpx]">
+    <TitleBar title="推荐专业" />
-      <view class="text-[32rpx] font-bold relative inline-flex pb-[10rpx] items-center">
-        <view class="i-carbon-flash-filled h-[23rpx] w-[17rpx] text-[#1880FC]"></view>
-        <text class="text-[#1880FC] text-[36rpx] font-bold">推荐专业</text>
-        <view class="i-carbon-flash-filled h-[23rpx] w-[17rpx] text-[#1880FC]"></view>
-        <view
-          class="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-full h-[10rpx] bg-[#cce3fc] rounded-full title-bar"
-        ></view>
-      </view>
-    </view>
-
     <text class="text-[24rpx] text-[#999]">以下专业仅作为参考</text>
 
     <view class="w-full">
@@ -35,6 +25,7 @@
 
 <script lang="ts" setup>
 import { getTagMapPro } from '@/service/index/api'
+import TitleBar from './TitleBar.vue'
 
 const props = defineProps({
   tag: {

src/pages-evaluation-sub/evaluate/components/TitleBar.vue

@@ -0,0 +1,25 @@
+<template>
+  <view class="text-center mb-[24rpx]">
+    <view class="text-[32rpx] font-bold relative inline-flex pb-[10rpx] items-center">
+      <view class="i-carbon-flash-filled h-[23rpx] w-[17rpx] text-[#1880FC]"></view>
+      <text class="text-[#1880FC] text-[36rpx] font-bold">{{ title }}</text>
+      <view class="i-carbon-flash-filled h-[23rpx] w-[17rpx] text-[#1880FC]"></view>
+      <view
+        class="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-full h-[10rpx] bg-[#cce3fc] rounded-full title-bar"
+      ></view>
+    </view>
+  </view>
+</template>
+
+<script lang="ts" setup>
+defineProps({
+  title: {
+    type: String,
+    default: '',
+  },
+})
+</script>
+
+<style lang="scss" scoped>
+@import '@/pages-evaluation-sub/styles/parallelogram.scss';
+</style>

src/pages-evaluation-sub/evaluate/components/interestChart/DependenciesChart.vue

@@ -2,16 +2,7 @@
   <view
     class="suitable-positions mx-[30rpx] mt-[30rpx] bg-white rounded-[20rpx] p-[30rpx] flex flex-col"
   >
-    <view class="text-center mb-[24rpx]">
+    <TitleBar title="适合的岗位领域" />
-      <view class="text-[32rpx] font-bold relative inline-flex pb-[10rpx] items-center">
-        <view class="i-carbon-flash-filled h-[23rpx] w-[17rpx] text-[#1880FC]"></view>
-        <text class="text-[#1880FC] text-[36rpx] font-bold">适合的岗位领域</text>
-        <view class="i-carbon-flash-filled h-[23rpx] w-[17rpx] text-[#1880FC]"></view>
-        <view
-          class="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-full h-[10rpx] bg-[#cce3fc] rounded-full title-bar"
-        ></view>
-      </view>
-    </view>
 
     <view class="flex justify-center items-center">
       <view class="h-[146px] w-[265px] z-1">
@@ -37,6 +28,7 @@
 
 <script lang="ts" setup>
 import LEchart from '@/pages-evaluation-sub/uni_modules/lime-echart/components/l-echart/l-echart.vue'
+import TitleBar from '../TitleBar.vue'
 const echarts = require('../../../uni_modules/lime-echart/static/echarts.min')
 const echart = ref(null)
 
@@ -186,6 +178,4 @@ watch(
 )
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss" scoped></style>
-@import '@/pages-evaluation-sub/styles/parallelogram.scss';
-</style>

src/pages-evaluation-sub/evaluate/components/interestChart/InterestRadar.vue

@@ -1,7 +1,5 @@
 <template>
-  <view
+  <view class="mx-[24rpx] bg-white chart-class h-[500rpx] flex items-center justify-center">
-    class="radar-chart-placeholder mx-[24rpx] bg-white chart-class h-[500rpx] flex items-center justify-center"
-  >
     <view class="h-[415rpx] w-full z-1">
       <LEchart ref="echart"></LEchart>
     </view>

src/pages-evaluation-sub/evaluate/components/interestChart/LineReport.vue

@@ -1,6 +1,12 @@
 <template>
-  <view class="h-[368rpx] w-full z-1 bg-white">
+  <view class="bg-white mx-[24rpx] rounded-[20rpx] pb-[20rpx]">
-    <LEchart ref="echart"></LEchart>
+    <view class="px-[24rpx] h-[368rpx] z-1">
+      <LEchart ref="echart" :customStyle="`z-index:1;`"></LEchart>
+    </view>
+    <view class="bg-[#F5FAFF] px-[16rpx] pt-[20rpx] mx-[34rpx] pb-[26rpx]">
+      <view class="text-[#000] text-[30rpx] mb-[10rpx]">能力评测建议</view>
+      <view class="text-[26rpx] text-[#333]">{{ description }}</view>
+    </view>
   </view>
 </template>
 
@@ -14,24 +20,19 @@ const props = defineProps({
     type: Array,
     default: () => [
       {
-        name: ['Y', 'R', 'D', 'Z', 'K', 'S', 'L', 'N'],
+        name: [],
-        value: [21, 27, 27, 24, 23, 28, 26, 16],
+        value: [],
       },
       {
-        name: [
+        name: [],
-          '言语语言智能',
+        value: [],
-          '逻辑数理智能',
-          '视觉空间智能',
-          '身体动觉智能',
-          '音乐节奏智能',
-          '人际交往智能',
-          '自知自省智能',
-          '自然观察智能',
-        ],
-        value: [37.7, 39.13, 41.21, 40.3, 39.13, 31.2, 41.21, 40.69],
       },
     ],
   },
+  description: {
+    type: String,
+    default: '',
+  },
 })
 
 onMounted(() => {
@@ -59,19 +60,26 @@ const updateChart = () => {
       },
       grid: {
         top: 40,
-        left: 0,
+        left: 10,
-
+        right: 20,
+        bottom: 0,
         containLabel: true,
       },
       legend: {
         data: ['我的数据', '平均数据'],
-        right: 10,
+        right: 'auto',
+        left: 'center',
         top: 0,
+        itemWidth: 15,
+        itemHeight: 10,
+        textStyle: {
+          fontSize: 12,
+        },
       },
       xAxis: [
         {
           type: 'category',
-          data: (props.echartData[1] as { name: string[] }).name.map((item) =>
+          data: (props.echartData[1] as { name: string[] })?.name.map((item) =>
             item.replace('智能', ''),
           ),
           axisLine: {
@@ -86,8 +94,8 @@ const updateChart = () => {
             rotate: 45,
             formatter: function (value) {
               // 处理长文本
-              if (value.length > 2) {
+              if (value.length > 4) {
-                return value.substring(0, 6) + '...'
+                return value.replace('智能', '')
               }
               return value
             },
@@ -133,7 +141,7 @@ const updateChart = () => {
             color: '#1580FF',
             borderRadius: [4, 4, 0, 0],
           },
-          data: (props.echartData[1] as { value: number[] }).value,
+          data: (props.echartData[1] as { value: number[] })?.value,
         },
         {
           name: '平均数据',
@@ -150,7 +158,7 @@ const updateChart = () => {
             borderWidth: 2,
             borderColor: '#fff',
           },
-          data: (props.echartData[0] as { value: number[] }).value,
+          data: (props.echartData[0] as { value: number[] })?.value,
         },
       ],
     }
@@ -160,6 +168,4 @@ const updateChart = () => {
 }
 </script>
 
-<style scoped>
+<style scoped></style>
-/* 自定义图表样式可以在这里添加 */
-</style>