holland report

src/pagesOther/pages/test-center/holland/components/interest-result.vue

@@ -0,0 +1,277 @@
+<template>
+    <view class="bg-white">
+        <view class="flex flex-col justify-center items-center relative">
+            <ie-image is-oss src="/testCenter/career/holland-head-bg.png" custom-class="w-[100vw] h-350"/>
+            <view class="flex flex-col justify-center items-center absolute top-30 z-1">
+                <ie-image is-oss src="/testCenter/career/holland-head-medal.png" custom-class="w-450"/>
+            </view>
+            <view class="flex flex-col justify-center items-center absolute top-70 z-2">
+                <view class="text-36 text-white font-bold">{{ hollInfo.ruleCode }}</view>
+                <view class="mt-16 text-32 text-white font-bold">Holland测评报告</view>
+            </view>
+        </view>
+        <view class="p-40 text-28 text-fore-title">
+            <view class="p-20 border border-dashed border-red-400 rounded-lg text-24 text-yellow-600">
+                <view class="font-bold">亲爱的同学</view>
+                <view class="mt-10">
+                    你好!高中阶段是学生人生观、价值观,个性发展、自主发展的关键时期,也是学生生涯发展探索和成为社会人的准备期。随着新高考改革的实行，给了学生更多自主权的同时,也给他们提出了更大的挑战----多种选科组合，怎么选？志愿填报，怎么填？客观理性地认识自己是选择的第一步，我们通过职业兴趣测评，定位于高中生的职业兴趣特征，从与职业和专业选择密切相关的6种兴趣类型入手，全面深入地了解个人的职业兴趣偏好，并提供应用测评结果指导生涯规划以及大学专业的选择的建议。我们衷心地希望本测评能为你的未来发展提供科学的参考意见，希望你能结合自身的实际情况，参考我们的报告，在学业生涯中实现自己的理想和抱负。
+                </view>
+            </view>
+            <view class="mt-40 p-10 bg-gradient-to-br from-emerald-300 to-white">
+                你的职业兴趣测评结果
+            </view>
+            <text class="mt-10 text-40 text-fore-tip">{{ natureResult.name_en }}</text>
+            <text class="ml-20">{{ natureResult.code }}: {{ natureResult.name_zh }}</text>
+            <view class="my-40 p-10 bg-gradient-to-br from-emerald-300 to-white">
+                你的职业兴趣倾向 ——
+                <text class="text-orange-600">{{ hollInfo.ruleCode }}</text>
+            </view>
+            <view class="w-full h-[300px]">
+                <ie-echart :option="chartData"/>
+            </view>
+            <view class="my-40 grid grid-cols-3 items-center text-tips">
+                <view class="text-fore-title text-center py-20 bg-gradient-to-br from-white to-emerald-300">类型</view>
+                <view class="text-fore-title text-center py-20 bg-gradient-to-br from-white to-emerald-300">典型特征</view>
+                <view class="text-fore-title text-center py-20 bg-gradient-to-br from-white to-emerald-300">得分</view>
+                <view class="text-center py-20 ie-border-b">现实型</view>
+                <view class="text-center py-20 ie-border-b">实用工具</view>
+                <view class="text-center py-20 ie-border-b">
+                    {{ hollInfo.scorer }}
+                </view>
+                <view class="text-center py-20 ie-border-b">研究型</view>
+                <view class="text-center py-20 ie-border-b">钻研思考</view>
+                <view class="text-center py-20 ie-border-b">
+                    {{ hollInfo.scorei }}
+                </view>
+                <view class="text-center py-20 ie-border-b">艺术型</view>
+                <view class="text-center py-20 ie-border-b">活力创造</view>
+                <view class="text-center py-20 ie-border-b">
+                    {{ hollInfo.scorea }}
+                </view>
+                <view class="text-center py-20 ie-border-b">社会型</view>
+                <view class="text-center py-20 ie-border-b">与人交往</view>
+                <view class="text-center py-20 ie-border-b">
+                    {{ hollInfo.scores }}
+                </view>
+                <view class="text-center py-20 ie-border-b">企业型</view>
+                <view class="text-center py-20 ie-border-b">管理活动</view>
+                <view class="text-center py-20 ie-border-b">
+                    {{ hollInfo.scoree }}
+                </view>
+                <view class="text-center py-20 ie-border-b">传统型</view>
+                <view class="text-center py-20 ie-border-b">执行任务</view>
+                <view class="text-center py-20 ie-border-b">
+                    {{ hollInfo.scorec }}
+                </view>
+            </view>
+            <view class="p-20 border border-dashed border-red-400 rounded-lg text-24 text-tips">
+                *分数说明：你在某种兴趣类型上得分越高，表明您越适合学习与之匹配的专业；反之，您在某类上的得分越低，表明您越不适合学习与之相匹配的专业。
+            </view>
+            <view class="my-40 p-10 bg-gradient-to-br from-emerald-300 to-white">
+                价值分析
+            </view>
+            <view class="p-20 border border-dashed border-red-400 rounded-lg text-24 text-tips">
+                <view class="indent-50">
+                    霍兰德的职业兴趣理论主要从兴趣的角度出发来探索职业指导的问题。他明确提出了职业兴趣的人格观，使人们对职业兴趣的认识有了质的变化。霍兰德的职业兴趣理论反映了他长期专注于职业指导的实践经历，他把对职业环境的研究与对职业兴趣个体差异的研究有机地结合起来，而在霍兰德的职业兴趣类型理论提出之前，二者的研究是相对独立进行的。霍兰德以职业兴趣理论为基础，先后编制了职业偏好量表(VocatIonaIPreferencelnventory)和自我导向搜寻表(Self-directedSearch)两种职业兴趣量表，作为职业兴趣的测查工具，霍兰德力求为每种职业兴趣找出两种相匹配的职业能力。兴趣测试和能力测试的结合在职业指导和职业咨询的实际操作中起到了促进作用。
+                </view>
+                <view class="mt-20 indent-50">
+                    霍兰德将其职业人格类型理论运用于美国劳工部制定的职业条目词典，僧助其中职业分析的有关内容，将其中12099种职业赋予霍兰德人格类型代码。编纂了"霍兰德职业代码词典"(TheDictionaryof
+                    Hollandoccupational Codes)，为各类人员按照自己的职业兴趣类型搜寻合适的职业提供了广泛的应用前景。
+                </view>
+                <view class="mt-20 indent-50">
+                    霍兰德的职业兴趣理论还提出，兴趣是描述人格的另一种方法，是职业选择中一个更为普遍的概念。在霍兰德的理论中，人格被看作是兴趣、价值、需求、技巧、信仰、态度和学习个性的综合体。就职业选择而言，兴趣是个体和职业匹配的过程中最重要的因素，直至目前，霍兰德职业兴趣理论是最具影响力的职业发展理论和职业分类体系。
+                </view>
+            </view>
+            <view class="my-40 p-10 bg-gradient-to-br from-emerald-300 to-white">
+                六种类型性格
+            </view>
+            <view class="fx-col gap-20">
+                <view v-for="item in natureList" :key="item.name_en" class="mx-border rounded-lg overflow-hidden">
+                    <view class="p-20 bg-orange-400">
+                        <view class="text-white text-base">{{ item.name_zh }}</view>
+                        <view class="mt-10 text-gray-200 text-base uppercase">{{ item.name_en }}</view>
+                    </view>
+                    <view class="p-30">
+                        <view class="font-bold">共同特征</view>
+                        <view class="mt-10 text-tips text-24">{{ item.common }}</view>
+                        <view class="mt-20 font-bold">个性特点</view>
+                        <view class="mt-10 text-tips text-24">{{ item.special }}</view>
+                        <view class="mt-20 font-bold">职业建议</view>
+                        <view class="mt-10 text-tips text-24">{{ item.suggestion }}</view>
+                    </view>
+                </view>
+            </view>
+            <view class="my-40 p-10 bg-gradient-to-br from-emerald-300 to-white">
+                适合的专业
+            </view>
+            <view class="flex flex-wrap gap-x-30 gap-y-20">
+                <view v-for="item in marjors" :key="item" class="text-base text-tips bg-yellow-50 keep-all px-10 py-5 rounded">
+                    {{ item }}
+                </view>
+            </view>
+            <view class="my-40 p-10 bg-gradient-to-br from-emerald-300 to-white">
+                适合的职业
+            </view>
+            <view class="flex flex-wrap gap-x-30 gap-y-20">
+                <view v-for="item in jobs" :key="item" class="text-base text-tips bg-yellow-50 keep-all px-10 py-5 rounded">
+                    {{ item }}
+                </view>
+            </view>
+            <view class="my-40 p-10 bg-gradient-to-br from-emerald-300 to-white">
+                结束语
+            </view>
+            <view class="p-20 border border-dashed border-red-400 rounded-lg text-24 text-yellow-600">
+                <view class="indent-50">
+                    一个人的职业倾向和职业兴趣，决定了最适合他的职业，一个人如果做自己感兴趣的工作，往往能将自己的潜力最大地激发出来，也最容易获得成功。当然，兴趣并不代表成功，对某一职业有兴趣，并不代表能干好这个职业，还必修具备与该职业生涯相适应的能力和个性才能做好这项工作。本测评是用于区分不同个体的不同职业兴趣和倾向类型，不同的类型在某个维度上的得分高低，都不能认为个体在这个方面具有不良属性或者具有缺陷。
+                </view>
+                <view class="indent-50 mt-20">
+                    本测评的目的在于更准确地了解自己的职业倾向，为我们未来职业生涯的规划提供一个有价值的参考。
+                </view>
+                <view class="indent-50 mt-20">
+                    当然，任何的测评结果，带给你的都是一个参考。而且测评者在答题的时候，往往受到答题时间、心情、外界环境等各种因素的影响。如果你觉得测试完之后，测评报告对你的描述和建议不是非常符合自己实际，你可以考虑以下几方面：
+                </view>
+                <view class="mt-20">1. 回忆做题时的情景，是否认真作答。</view>
+                <view class="mt-10">2. 您的选择尚未完全分化，在过多题目上做出了相同的回答。</view>
+                <view class="mt-10">3. 您在测评过程中有没有受到外界因素的干扰。</view>
+                <view class="mt-10">4. 重新审视自己，在适当的时候再次参加测试。</view>
+            </view>
+        </view>
+        <uv-back-top :scroll-top="scrollTop"/>
+    </view>
+</template>
+
+<script>
+import {empty} from "@/uni_modules/uv-ui-tools/libs/function/test";
+import IeEchart from '@/pagesOther/components/ie-echart/ie-echart.vue';
+import {useScroll} from "@/hooks/useScroll";
+
+export default {
+    components: {IeEchart},
+    props: {
+        hollInfo: {
+            type: Object,
+            default: () => ({})
+        },
+        seriesData: {
+            type: Array,
+            default: () => []
+        }
+    },
+    computed: {
+        chartData() {
+            if (empty(this.seriesData) || empty(this.hollInfo)) return {}
+
+            const max = Math.max(...this.seriesData) + 3
+            return {
+                "radar": {
+                    "indicator": [
+                        {name: "R：现实型", max},
+                        {name: "A：艺术型", max},
+                        {name: "I：研究型", max},
+                        {name: "S：社会型", max},
+                        {name: "E：企业型", max},
+                        {name: "C：传统型", max}
+                    ]
+                },
+                "series": [{
+                    "name": "分数",
+                    "type": 'radar',
+                    "data": [{value: this.seriesData}]
+                }],
+            }
+        },
+        chartOpts() {
+            return {
+                extra: {
+                    radar: {
+                        max: Math.max(...this.seriesData) + 5,
+                    }
+                },
+                legend: {
+                    show: false
+                }
+            }
+        },
+        natureResult() {
+            const i = this.seriesData.indexOf(Math.max(...this.seriesData));
+            if (!~i) {
+                return {};
+            }
+            return {
+                name_en: this.natureList[i].name_en,
+                name_zh: this.natureList[i].name_zh,
+                code: this.natureList[i].name_en.charAt(0)
+            };
+        },
+        marjors() {
+            return this.hollInfo?.rule?.marjors?.split('、') ?? [];
+        },
+        jobs() {
+            return this.hollInfo?.rule?.jobs?.split('、') ?? [];
+        }
+    },
+    setup() {
+        const {scrollTop} = useScroll()
+        return {scrollTop}
+    },
+    data() {
+        return {
+            natureList: [{
+                name_zh: '现实型',
+                name_en: 'Realistic',
+                common: '愿意使用工具从事操作性工作，动手能力强，做事手脚灵活，动作协调。偏好于具体任务，不善言辞，做事保守，较为谦虚。缺乏社交能力，通常喜欢独立做事。',
+                special: '感觉迟钝、不讲究、谦逊的。踏实稳重、诚实可靠。',
+                suggestion: `喜欢使用工具、机器，需要基本操作技能的工作。要求具备机械方面才能、体力、或从事与物件、机器、工具、运动器材、植物、动物相关的职业有兴趣，并具备相应能力。
+											如：技术性职业（计算机硬件人员、摄影师、制图员、机械装配工）， 技能性职业（木匠、厨师、技工、修理工、农民、一般劳动）
+										`
+            },
+                {
+                    name_zh: '艺术型',
+                    name_en: 'Artistic',
+                    common: '有创造力，乐于创造新颖、与众不同的成果，渴望表现自己的个性，实现自身的价值。做事理想化，追求完美，不重实际。具有一定的艺术才能和个性。善于表达，怀旧，心态较为复杂。',
+                    special: '有创造性，非传统的，敏感，容易情绪化，较冲动，不服从指挥。',
+                    suggestion: `喜欢的工作要求具备艺术修养、创造力、表达能力和直觉，并将其用于语言、行为、声音、颜色和形式的审美、思索和感受，具备相应的能力。不善于事务性工作。如：艺术方面（演员、导演、艺术设计师、雕刻家、建筑师、摄影家、广告制作人） 音乐方面（歌唱家、作曲家、乐队指挥）文学方面（小说家、诗人、剧作家）。
+												注：艺术兴趣高的人倾向于理想化，做事追求完美。在平常中，艺术的测试不指做艺术工作，而是工作中的艺术，倾向于将事情做得漂亮、有美感、有情调、锦上添花，追求完美。`
+                },
+                {
+                    name_zh: '研究型',
+                    name_en: 'Investigative',
+                    common: '思想家而非实干家，抽象思维能力强，求知欲强，肯动脑，善思考，不愿动手。喜欢独立的和富有创造性的工作。知识渊博，有学识才能，不善于领导他人。考虑问题理性，做事喜欢精确，喜欢逻辑分析和推理， 不断探讨未知的领域。',
+                    special: '坚持性强，有韧性，喜欢钻研。为人好奇，独立性强。',
+                    suggestion: `喜欢智力的、抽象的、分析的、独立的定向任务，要求具备智力或分析才能，并将其用于观察、估测、衡量、形成理论、最终解决问题的工作，并具备相应的能力。
+												如：科学研究人员、教师、工程师、电脑编程人员、医生、系统分析员。
+												注：工作中调研兴趣强的人做事较为坚持，有韧性，善始善终，调研兴趣弱的如<20% 通常做事容易浅尝辄止，常性也弱。`
+                },
+                {
+                    name_zh: '社会型',
+                    name_en: 'Social',
+                    common: '喜欢与人交往、不断结交新的朋友、善言谈、愿意教导别人。关心社会问题、渴望发挥自己的社会作用。寻求广泛的人际关系，比较看重社会义务和社会道德。',
+                    special: '为人友好、热情、善解人意、乐于助人。',
+                    suggestion: `喜欢要求与人打交道的工作，能够不断结交新的朋友，从事提供信息、启迪、帮助、培训、开发或治疗等事务，并具备相应能力。
+													如: 教育工作者（教师、教育行政人员）， 社会工作者（咨询人员、公关人员）`
+                },
+                {
+                    name_zh: '企业型',
+                    name_en: 'Enterprise',
+                    common: '追求权力、权威和物质财富，具有领导才能。喜欢竞争、敢冒风险、有野心/抱负。为人务实，习惯以利益得失、权利、地位、金钱等来衡量做事的价值，做事有较强的目的性。',
+                    special: '善辩、精力旺盛、独断、乐观、自信、好交际、机敏、有支配愿望。',
+                    suggestion: `喜欢要求具备经营、管理、劝服、监督和领导才能，以实现机构、政治／社会及经济目标的工作，并具备相应的能力。
+													如：项目经理、销售人员，营销管理人员、政府官员、企业领导、法官、律师。
+													附：工作中通常要求管理人员和销售人员要有较强的企业兴趣，企业兴趣强则做事目的性强，务实，推动性也较强，若企业兴趣弱<40% 则做事的推动性较弱，速度较慢。`
+                },
+                {
+                    name_zh: '传统型',
+                    name_en: 'Conventional',
+                    common: '尊重权威和规章制度，喜欢按计划办事，细心、有条理，习惯接受他人的指挥和领导，自己不谋求领导职务。喜欢关注实际和细节情况，通常较为谨慎和保守，缺乏创造性，不喜欢冒险和竞争，富有自我牺牲精神。',
+                    special: '有责任心、依赖性强、高效率、稳重踏实、细致、有耐心。',
+                    suggestion: `喜欢要求注意细节、精确度、有系统有条理，具有记录、归档、据特定要求或程序组织数据和文字信息的职业，并具备相应能力。如：秘 书、办公室人员、记事员、会计、行政助理、图书馆管理员、出纳员、打字员、投资分析员。
+												注：常规型的人做事有耐心、细致，如果人的常规兴趣弱，若<20%	通常表现做事较为粗心，容易丢三落四，不够踏实。`
+                },
+            ],
+        };
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

src/pagesOther/pages/test-center/holland/holland.vue

@@ -1,15 +1,30 @@
 <template>
-    <view>
-
-    </view>
+    <ie-page>
+        <ie-navbar title="霍兰德职业兴趣测评"/>
+        <interest-result :holl-info="hollandData" :series-data="chartData" />
+    </ie-page>
 </template>
 
-<script>
-export default {
-    data() {
-        return {};
+<script setup lang="ts">
+import {useTransferPage} from "@/hooks/useTransferPage";
+import {hollDetail} from "@/api/modules/test-center";
+import {HollandEntity} from "@/types/test-center";
+import InterestResult from "@/pagesOther/pages/test-center/holland/components/interest-result.vue";
+
+const {prevData} = useTransferPage()
+const hollandData = ref<HollandEntity>({} as HollandEntity)
+const chartData = ref<number[]>([])
+
+onMounted(async () => {
+    if (prevData.value.code) {
+        const {data} = await hollDetail({code: prevData.value.code})
+        const {scorer, scorea, scorei, scores, scoree, scorec} = data
+        hollandData.value = data
+        chartData.value = [scorer, scorea, scorei, scores, scoree, scorec]
     }
-}
+})
+
+onPageScroll(() => {})
 </script>
 
 <style lang="scss">

src/pagesOther/pages/test-center/list/components/holland-list.vue

@@ -1,7 +1,7 @@
 <template>
     <z-paging ref="paging" v-model="list" bg-color="#F6F8FA" @query="handleQuery">
         <view class="p-24 flex flex-col gap-24">
-            <holland-list-item v-for="item in list" :item="item"/>
+            <holland-list-item v-for="item in list" :key="item.id" :item="item"/>
         </view>
     </z-paging>
 </template>

src/pagesOther/pages/test-center/list/components/mbti-list.vue

@@ -1,7 +1,7 @@
 <template>
     <z-paging ref="paging" v-model="list" bg-color="#F6F8FA" @query="handleQuery">
         <view class="p-24 flex flex-col gap-24">
-            <mbti-list-item v-for="item in list" :item="item"/>
+            <mbti-list-item v-for="item in list" :key="item.id" :item="item"/>
         </view>
     </z-paging>
 </template>

src/static/style/tailwind.scss

@@ -63,4 +63,8 @@
 
 .ie-grid-border > view {
   @apply border-0 border-b border-r border-solid border-border;
+}
+
+.ie-border-b {
+  @apply border-0 border-b border-solid border-border;
 }