页面效果图
首先弹窗提示测评的方式
接着进行职业能力题目的测试
测试完后将生成测评的结果
实现详述
描述你是如何实现和使用该技术的，要求配合代码和流程图详细描述。可以再细分多个点，分开描述各个部分。
页面展示的vue代码
<template>
<view class="container">
<view v-if="isMask">
<popup type="1" @eventClick="closeMask()"></popup>
</view>
<view class="centerbox">
<view class="top" >
<view class="wenzi">
第
<span>{
{index+1}}</span>
题
</view>
</view>
<view class="videoimg" >
<text class="questionTitle">{
{questionDetail}}</text>
</view>
<view class="continue">
<view class="progress">
<view class="progressbar"
:style="{width: ((index+1)/60*504) + 'rpx'}">
</view>
</view>
<view class="jindu">
<span>{
{index+1}}/</span>60
</view>
</view>
</view>
<view class="item">
<view class="buttonbox">
<view class="button" @click="answerClickA()">{
{optionA}}、{
{answerA}}</view>
</view>
<view class="buttonbox">
<view class="button" @click="answerClickB()">{
{optionB}}、{
{answerB}}</view>
</view>
</view>
</view>
</template>
JavaScript的实现代码
<script>
import app from "@/components/data/data.js";
import popup from "@/components/uni-popups/ge-popup.vue";
export default {
components: {
popup
},
data() {
return {
isMask:true,
index:0,
realIndex:0,
optionA: "A",
optionB: "B",
A: 0,
B: 0,
xianshixing:0,
yanjiuxing:0,
yishuxing:0,
shehuixing:0,
qiyexing:0,
changguixing:0,
questionDetail: app.data.globalData.question[0].question,
answerA: app.data.globalData.question[0].option.A,
answerB: app.data.globalData.question[0].option.B,
list: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19,
20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,
45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60],
listAB : ['A','B']
}
},
methods:{
closeMask(){
//关闭弹窗
this.isMask=false;
},
answerClickA: function () {
if (this.listAB[0] == 'A') {
/* this.$set(this.$data,'A',21); */
this.$data.A+=1;
}
if(this.index == 0 ){
this.$data.xianshixing+=1;
}
if(this.index == 1){
this.$data.yanjiuxing+=1;
}
if(this.index == 2){
this.$data.yishuxing+=1;
}
if(this.index == 3){
this.$data.shehuixing+=1;
}if(this.index == 4){
this.$data.qiyexing+=1;
}if(this.index == 5){
this.$data.changguixing+=1;
}if(this.index == 6){
this.$data.xianshixing+=1;
}if(this.index == 7){
this.$data.yanjiuxing+=1;
}if(this.index == 8){
this.$data.yishuxing+=1;
}if(this.index == 9){
this.$data.shehuixing+=1;
}if(this.index == 10){
this.$data.qiyexing+=1;
}if(this.index == 11){
this.$data.changguixing+=1;
}if(this.index == 12){
this.$data.xianshixing+=1;
}if(this.index == 13){
this.$data.yanjiuxing+=1;
}if(this.index == 14){
this.$data.yishuxing+=1;
}if(this.index == 15){
this.$data.shehuixing+=1;
}if(this.index == 16){
this.$data.qiyexing+=1;
}if(this.index == 17){
this.$data.changguixing+=1;
}if(this.index == 18){
this.$data.xianshixing+=1;
}if(this.index == 19){
this.$data.yanjiuxing+=1;
}if(this.index == 20){
this.$data.yishuxing+=1;
}if(this.index == 21){
this.$data.shehuixing+=1;
}if(this.index == 22){
this.$data.qiyexing+=1;
}if(this.index == 23){
this.$data.changguixing+=1;
}if(this.index == 24){
this.$data.xianshixing+=1;
}if(this.index == 25){
this.$data.yanjiuxing+=1;
}if(this.index == 26){
this.$data.yishuxing+=1;
}if(this.index == 27){
this.$data.shehuixing+=1;
}if(this.index == 28){
this.$data.qiyexing+=1;
}if(this.index == 29){
this.$data.changguixing+=1;
}if(this.index == 30){
this.$data.xianshixing+=1;
}if(this.index == 31){
this.$data.yanjiuxing+=1;
}if(this.index == 32){
this.$data.yishuxing+=1;
}if(this.index == 33){
this.$data.shehuixing+=1;
}if(this.index == 34){
this.$data.qiyexing+=1;
}if(this.index == 35){
this.$data.changguixing+=1;
}if(this.index == 36){
this.$data.xianshixing+=1;
}if(this.index == 37){
this.$data.yanjiuxing+=1;
}if(this.index == 38){
this.$data.yishuxing+=1;
}if(this.index == 39){
this.$data.shehuixing+=1;
}if(this.index == 40){
this.$data.qiyexing+=1;
}if(this.index == 41){
this.$data.changguixing+=1;
}if(this.index == 42){
this.$data.xianshixing+=1;
}if(this.index == 43){
this.$data.yanjiuxing+=1;
}if(this.index == 44){
this.$data.yishuxing+=1;
}if(this.index == 45){
this.$data.shehuixing+=1;
}if(this.index == 46){
this.$data.qiyexing+=1;
}if(this.index == 47){
this.$data.changguixing+=1;
}if(this.index == 48){
this.$data.xianshixing+=1;
}if(this.index == 49){
this.$data.yanjiuxing+=1;
}if(this.index == 50){
this.$data.yishuxing+=1;
}if(this.index == 51){
this.$data.shehuixing+=1;
}if(this.index == 52){
this.$data.qiyexing+=1;
}if(this.index == 53){
this.$data.changguixing+=1;
}if(this.index == 54){
this.$data.xianshixing+=1;
}if(this.index == 55){
this.$data.yanjiuxing+=1;
}if(this.index == 56){
this.$data.yishuxing+=1;
}if(this.index == 57){
this.$data.shehuixing+=1;
}if(this.index == 58){
this.$data.qiyexing+=1;
}if(this.index == 59){
this.$data.changguixing+=1;
}
this.$data.index+=1;
this.$data.realIndex=this.$data.list[this.$data.index+1];
if (this.index == 60) {
console.log(this.index);
uni.redirectTo({
url:'/pages/tabbar/tabbar-2/occupation/result?xs='+this.xianshixing+'&yj='+this.yanjiuxing
+'&ys='+this.yishuxing+'&sh='+this.shehuixing+'&qy='+this.qiyexing+'&cg='+this.changguixing
})
}
this.$data.questionDetail= app.data.globalData.question[this.$data.realIndex].question;
this.$data.answerA=app.data.globalData.question[this.$data.realIndex].option[this.$data.listAB[0]];
this.$data.answerB=app.data.globalData.question[this.$data.realIndex].option[this.$data.listAB[1]];
},
answerClickB: function () {
if (this.listAB[0] == 'B') {
this.$data.B+=1;
}
this.$data.index+=1;
this.$data.realIndex=this.$data.list[this.$data.index+1];
if (this.index == 60) {
console.log(this.index);
uni.redirectTo({
url:'/pages/tabbar/tabbar-2/occupation/result?xs='+this.xianshixing+'&yj='+this.yanjiuxing
+'&ys='+this.yishuxing+'&sh='+this.shehuixing+'&qy='+this.qiyexing+'&cg='+this.changguixing
})
}
this.$data.questionDetail= app.data.globalData.question[this.$data.realIndex].question;
this.$data.answerA=app.data.globalData.question[this.$data.realIndex].option[this.$data.listAB[0]];
this.$data.answerB=app.data.globalData.question[this.$data.realIndex].option[this.$data.listAB[1]];
},
}
}
</script>
处理测评结果的JavaScript代码
<script>
export default {
data() {
return {
xianshixing:0,
yanjiuxing:0,
yishuxing:0,
shehuixing:0,
qiyexing:0,
changguixing:0,
kind:"",
content:"",
array :[],
chartData: {
categories: ["社会型","企业型","常规型","现实型","研究型","艺术型"],
series:
{
name: "兴趣值",
data: [10,20,30,15,60,70]
},
},
//您可以通过修改 config-ucharts.js 文件中下标为 ['radar'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
opts: {
color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
padding: [5,5,5,5],
dataLabel: false,
legend: {
show: true,
position: "top",
lineHeight: 50
},
extra: {
radar: {
gridType: "radar",
gridColor: "#9ea4a4",
gridCount: 3,
opacity: 0.2,
max: 10,
border: true
}
}
}
};
},
onLoad(options) {
//options接收上一个页面传的参数
let res = {
categories: ["社会型","企业型","常规型","现实型","研究型","艺术型"],
series: [{
name: "兴趣值",
data: [90,20,30,15,60,70]
}]
};
this.array.push(options.sh);this.shehuixing=options.sh;
this.array.push(options.qy);this.qiyexing=options.qy;
this.array.push(options.cg);this.changguixing=options.cg;
this.array.push(options.xs);this.xianshixing=options.xs;
this.array.push(options.yj);this.yanjiuxing=options.yj;
this.array.push(options.ys);this.yishuxing=options.ys;
/* console.log(this.shehuixing); */
//this.array[0]=9;
res.series[0].data=[...this.array];
/* console.log(res); */
this.chartData =res;
/* console.log(this.chartData); */
this.show();
},
onBackPress(options) {
uni.redirectTo({
url:'pages/tabbar/tabbar-2/tabbar-2.vue'
})
},
methods: {
show:function (){
let that=this;
if(this.xianshixing==this.yanjiuxing&&this.xianshixing==this.yishuxing&&this.xianshixing==this.shehuixing&&this.xianshixing==this.qiyexing&&this.xianshixing==this.changguixing){
that.content="能胜任各种各样的工作，如设计师、制图员、教师、办事员、医师、摄影师等。这类人通常会慢慢养成开朗活泼的性格，以及严谨细致的习惯。这种人具有比一般人更强的实践能力，他们喜欢做自己喜欢做的工作，并且能很好地完成它。他们乐观开朗、严谨细致、勇敢、谦逊、敏感、务实、朴素。";
that.kind= "均衡型"
}
else if(this.xianshixing>=this.yanjiuxing&&this.xianshixing>=this.yishuxing&&this.xianshixing>=this.shehuixing&&this.xianshixing>=this.qiyexing&&this.xianshixing>=this.changguixing){
that.content="喜欢现实性的实在的工作，如机械维修、木匠活、烹饪、电气技术、管子工、电工、机械工、摄影师、制图员等。这类人通常具有机械技能和体力，喜欢户外工作，乐于使用各种工具和机器设备。这种人喜欢同事务而不是人打交道的工作。他们真诚、谦逊、敏感、务实、朴素、节俭、腼腆。";
that.kind="现实型"
}
else if(this.yanjiuxing>=this.xianshixing&&this.yanjiuxing>=this.yishuxing&&this.yanjiuxing>=this.shehuixing&&this.yanjiuxing>=this.qiyexing&&this.yanjiuxing>=this.changguixing){
that.content="喜欢各种研究型工作，如：实验室研究员、医师、产品检验员、数学、物理学、化学、生物学等自然科学研究者、图书馆技师、计算机程序编制者和电子技术工作者等等。这类人通常具有较高的数学和科研能力，喜欢独立工作，喜欢解决问题；喜欢同观念而不是人或事务打交道。他们逻辑性强、好奇、聪明、仔细、独立、安详、俭朴。";
that.kind="研究型"
}
else if(this.yishuxing>=this.xianshixing&&this.yishuxing>=this.yanjiuxing&&this.yishuxing>=this.shehuixing&&this.yishuxing>=this.qiyexing&&this.yishuxing>=this.changguixing){
that.content="喜欢现实性的实在的工作，如机械维修、木匠活、烹饪、电气技术、管子工、电工、机械工、摄影师、制图员等。这类人通常具有机械技能和体力，喜欢户外工作，乐于使用各种工具和机器设备。这种人喜欢同事务而不是人打交道的工作。他们真诚、谦逊、敏感、务实、朴素、节俭、腼腆。";
this.$kind= "艺术型"
}
else if(this.shehuixing>=this.xianshixing&&this.shehuixing>=this.yanjiuxing&&this.shehuixing>=this.yishuxing&&this.shehuixing>=this.qiyexing&&this.shehuixing>=this.changguixing){
that.content="喜欢艺术性的工作，如：音乐、舞蹈、唱歌、演员、艺术家、美术家、音乐家、设计师、编辑、作家和文艺评论家等。这种取向类型的人往往具有某些艺术上的技能，喜欢创造性的工作，富于想象力。这类人通常喜欢同观念而不是事务打交道的工作。他们较开放、好想象、独立、有创造性。";
that.kind= "社会型"
}
else if(this.qiyexing>=this.xianshixing&&this.qiyexing>=this.yanjiuxing&&this.qiyexing>=this.yishuxing&&this.qiyexing>=this.shehuixing&&this.qiyexing>=this.changguixing){
that.content="喜欢社会交往性工作，如教师、教育行政人员、社会学家、社会工作者、咨询顾问、护士等。这类人通常喜欢周围有别人存在，对别人的事很有兴趣，乐于帮助别人解决难题。这种人喜欢与人而不是事务打交道的工作。他们助人为乐、有责任心、热情、善于合作、富于理想、友好、善良、慷慨、耐心。";
that.kind= "企业型"
}
else if(this.changguixing>=this.xianshixing&&this.changguixing>=this.yanjiuxing&&this.changguixing>=this.yishuxing&&this.changguixing>=this.shehuixing&&this.changguixing>=this.qiyexing){
that.content="喜欢传统性的工作，如：记账、秘书、办事员，以及测算办公室人员、接待员、文件档案管理员、秘书、打字员、会计、出纳员等工作。这种人有很好的数字和计算能力，喜欢室内工作，乐于整理、安排事务。他们往往喜欢同文字、数字打交道的工作，比较顺从、务实、细心、节俭、做事利索、很有条理性、有耐性。";
that.kind= "常规型"
}
console.log(this.content)
console.log(this.kind)
}
}
}
</script>
问题与解决
- 由于在测试的过程中考虑到问题跳转的速度问题，所以我将把题目是资源全放在前端，不涉及后端的请求数据，纯属为较为机械化的工作。
我的总结
- 在对测评题目的结果进行分析时，还存在一些问题，不能够较为准确地去判定职业类型，所以在这部分还有上升的空间。