流程图的动画
本文的动画是在VUE框架下，针对节点操作的动画，流程图使用flex布局，连线是用js计算，动画是监听节点动画事件完成<template><div class="answer-list"><div class="answer-wrap"><div class=&
·
本文的动画是在VUE框架下，针对节点操作的动画，流程图使用flex布局，连线是用js计算，动画是监听节点动画事件完成
<template>
<div class="answer-list">
<div class="answer-wrap">
<div class="user-answer">
<span class="answer-title">候选人回答</span>
<div class="answer-info">
<!-- <span class="content-info" ref="highlighter">
{{ formatAnswer() }}
</span> -->
<span class="content-info text1Html11" ref="highlighter" v-html="text1Html">
</span>
</div>
</div>
</div>
<emotion-progress v-if="aiAdminShow == '0' ? false : true" v-show="questionId" :emotionStart="emotionStart" :quesId="questionId" @setFinishProgress="setFinishProgress"></emotion-progress>
<div class="cutLine" :class="{ 'cutLineShow' : aiAdminShow == '0' ? true : false}"></div>
<div class="factorTreeMain" :class="{ 'factorTreeMainShow' : aiAdminShow == '0' ? true : false}" v-if="newTreeData">
<div class="answer-select">
<div class="answer-title">回答命中</div>
<div class="selectedRow">
<div class="selectedDesc">
<span class="squa"></span>
<span class="des">已命中</span>
</div>
<div class="selectedFactorDes">
<span class="des">主因子</span>
<span class="squa">{{ treeDes1 }}</span>
</div>
<div class="selectedFactorDes">
<span class="des">从因子</span>
<span class="squa">{{ treeDes2 }}</span>
</div>
<div class="selectedFactorDes">
<span class="des">次因子</span>
<span class="squa">{{ treeDes3 }}</span>
</div>
</div>
<div class="unselectedRow">
<div class="unselectedDesc">
<span class="squa"></span>
<span class="des">未命中</span>
</div>
</div>
</div>
<div class="factorTreeSelect">
<div class="treeDataDescFlexBox">
<div class="treeDataDesc" v-for="(item, index) in treeDataDesc" :key="index">{{ item }}</div>
</div>
<div v-for="(item, index) in newTreeData" class="flexBox" :key="index">
<div class="tree1 box1">
<div :id="'treeDes1_' + index" class="treeDes treeDes1" :class="{ hitDiv : item.lineRight, animateDiv1 : item.animateDiv}">
<div :id="'treeDesDiv1_' + index" class="elli" :title="item.abilityName">{{ item.abilityName }}</div>
<div :id="'treeDes1Show_' + index" :class="{ treeDesShow : item.animateDiv}" :title="item.abilityName">{{ item.abilityName }}</div>
<div :id="'treeDes1Back_' + index" class="treeDesBack"></div>
</div>
<div class="line1">
<div :id="'line1001_' + index" class="line1001 showLine1" :class="{ hitLineRow : item.lineRight, animateLine101 : item.animateDiv }"></div>
<div :id="'line1001Dom_' + index" class="lineDom" :class="{ line1001Dom : item.animateDiv}"></div>
</div>
</div>
<div class="flexBox1">
<div class="children1 flexBox2" v-for="(children1, index1) in item.modelAbilityRecursList" :key="index1">
<div class="tree2">
<div :id="'treeDes2_' + index + '_' + index1" class="treeDes treeDes2" :class="{ hitDiv : children1.hitDiv, animateDiv2 : children1.animateDiv}">
<div :id="'treeDesDiv2_' + index + '_' + index1" class="elli" :title="children1.abilityName">{{ children1.abilityName }}</div>
<div :id="'treeDes2Show_' + index + '_' + index1" :class="{ treeDesShow : children1.animateDiv}" :title="children1.abilityName">{{ children1.abilityName }}</div>
<div :id="'treeDes2Back_' + index + '_' + index1" class="treeDesBack"></div>
</div>
<div class="line21" v-if="children1.modelAbilityRecursList">
<div :id="'line2101_' + index + '_' + index1" class="line2101 showLine1" :class="{ hitLineRow : children1.hitDiv, animateLine2101 : children1.animateDiv}"></div>
<div :id="'line2101Dom_' + index + '_' + index1" class="lineDom" :class="{ line2101Dom : children1.animateDiv}"></div>
</div>
<div class="line22">
<div :id="'line2201_' + index + '_' + index1" class="line2201 showLine1" :class="{ hitLineRow : children1.lineRight2, animateLine2102 : children1.animateDiv}"></div>
<div :id="'line2201Dom_' + index + '_' + index1" class="lineDom" :class="{ line2201Dom : children1.animateDiv}"></div>
</div>
<div class="line2right2" :id="'lineRight2_2_' + index + '_' + index1">
<div class="line2right201 showLine2" :id="'lineRight2_21_' + index + '_' + index1" :class="{ hitLineColumn : children1.lineRight2, animateLine2103 : children1.animateDiv}"></div>
<div :id="'lineRight2_21_Dom_' + index + '_' + index1" class="coloumDom"></div>
</div>
</div>
<div class="flexBox3">
<div class="children2" v-for="(children2, index2) in children1.modelAbilityRecursList" :key="index2">
<div class="tree3">
<div :id="'treeDes3_' + index + '_' + index1 + '_' + index2" class="treeDes treeDes3" :class="{ hitDiv : children2.hitDiv, animateDiv3 : children2.animateDiv}">
<div :id="'treeDesDiv3_' + index + '_' + index1 + '_' + index2" class="elli" :title="children2.abilityName">{{ children2.abilityName }}</div>
<div :id="'treeDes3Show_' + index + '_' + index1 + '_' + index2" :class="{ treeDesShow : children2.animateDiv}" :title="children2.abilityName">{{ children2.abilityName }}</div>
<div :id="'treeDes3Back_' + index + '_' + index1 + '_' + index2" class="treeDesBack"></div>
</div>
<div class="line31">
<div :id="'line31_' + index + '_' + index1 + '_' + index2" class="line3101 showLine1" :class="{ hitLineRow : children2.hitDiv, animateLine3101 : children2.animateDiv}"></div>
<div :id="'line3101Dom_' + index + '_' + index1 + '_' + index2" class="lineDom" :class="{ line3101Dom : children2.animateDiv}"></div>
</div>
<div class="line3right2" :id="'lineRight2_3_' + index + '_' + index1 + '_' + index2">
<div class="line3right201 showLine2" :id="'lineRight2_31_' + index + '_' + index1 + '_' + index2" :class="{ hitLineColumn : children2.lineRight2, animateLine3102 : children2.animateDiv}"></div>
<div :id="'lineRight2_31_Dom_' + index + '_' + index1 + '_' + index2" class="coloumDom"></div>
</div>
<!-- <div class="line3right1" :class="{ hitLineColumn : children2.lineRight1}" v-if="index2 != children1.modelAbilityRecursList.length - 1"></div>
<div class="line3right2" :class="{ hitLineColumn : children2.lineRight2}" v-if="index2 != 0"></div> -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="answer-loading" v-if="!newTreeData">
<loading></loading>
<!-- <span v-if="isCurrentQuestion && !finishStatus">候选人尚未开始作答</span>
<span v-if="isCurrentQuestion && finishStatus">候选人未作答</span>
<span v-if="!isCurrentQuestion">候选人未作答</span> -->
</div>
<!-- <div v-if="!formatAnswer()"></div> -->
</div>
</template>
<script>
import api from '@/api/home'
import Loading from '@/view/components/loading/loading'
import EmotionProgress from '../progress'
export default {
components: {
Loading: Loading,
EmotionProgress
},
props: {
subjectId: {
type: Number,
default: 1
},
questionId: {
type: String,
default: ''
},
finishStatus: {
type: Boolean,
default: false
},
subTreeShow: {
type: Boolean,
default: true
},
aiAdminAnswerAbilityInfo: {
type: Object,
default: function () {
return {}
}
},
clickFlag: {
type: Boolean,
default: false
},
aiAdminShow: {
type: String,
default: '0'
}
},
data () {
return {
isSubmit: 0, // 问题是否回答完 1或者null 未答完， 2 已答完
answerInfo: {},
flag: 1,
word: '',
keyWordShow: [],
emotionStart: false, // 微表情是否开始 true 为开始
keyWord: '',
i: 0,
isFinishNum: 0, // isFinish为1，命中因子为空的情况，调用接口次数
chooseNum: 0, // 第几次选择题目
text1Html: '', // 用户回答的html文版
text1Text: '', // 动态加载用户回答的答案文本
setIntervalValue: null, // 定时任务执行用户回答加载一个字一个字出现
requestNo: 1,
setIntervalValue1: null, // 定时任务执行实时获取用户回答
setIntervalValue2: null, // 定时任务执行获取问题答案
allData: '', // 实时获取用户回答答案
addData: '', // 实时获取用户回答答案
realTime: false, // 是否实时获取用户回答
quesIdShow: false,
finishProgress: false,
animationFlag: false,
treeDes3_Id: [],
treeDes2_Id: [],
treeDes1_Id: [],
animateOver: false, // 线条动画结束
treeDes3: 0, // 次因子命中数
treeDes2: 0, // 从因子命中数
treeDes1: 0, // 主因子命中数
column3Zero: true, // 命中次因子竖线长度都为0
column2Zero: true, // 命中从因子竖线长度都为0
showLineQuestionId: ['S1238226JAVA013115', 'S1238225JAVA013115'], // 演示用固定questionId
showLinePositive: ['经验不足', '紧张'], // 演示用固定positive
treeDataDesc: ['次因子', '从因子', '主因子'],
newTreeData: [],
singleSelectFactorTree1: [
[
{
'abilityName': '胜任素质',
'isCheck': null,
'level': '1'
},
{
'abilityName': '积极心态',
'isCheck': null,
'level': '2'
},
{
'abilityName': '接受变化',
'isCheck': null,
'level': '3'
}
],
[
{
'abilityName': '胜任素质',
'isCheck': null,
'level': '1'
},
{
'abilityName': '积极心态',
'isCheck': null,
'level': '2'
},
{
'abilityName': '主动性',
'isCheck': null,
'level': '3'
}
],
[
{
'abilityName': '基础信息',
'isCheck': null,
'level': '1'
},
{
'abilityName': '稳定性',
'isCheck': null,
'level': '2'
},
{
'abilityName': '求职动机',
'isCheck': null,
'level': '3'
}
]
],
singleSelectFactorTree: [],
// 所有题目命中因子
selectFactorTree: [],
// selectFactorTree: [
// [
// {'abilityName': '通用能力', 'isCheck': null, 'level': '1'},
// {'abilityName': '能力标签', 'isCheck': null, 'level': '2'},
// {'abilityName': '沟通协作', 'isCheck': null, 'level': '3'},
// {'abilityName': '执行能力', 'isCheck': null, 'level': '3'}
// ],
// [
// {'abilityName': '通用能力', 'isCheck': null, 'level': '1'},
// {'abilityName': '性格标签', 'isCheck': null, 'level': '2'},
// {'abilityName': '抗压耐力', 'isCheck': null, 'level': '3'}
// ],
// [
// {'abilityName': '通用能力', 'isCheck': null, 'level': '1'},
// {'abilityName': '能力标签', 'isCheck': null, 'level': '2'},
// {'abilityName': '执行能力', 'isCheck': null, 'level': '3'}
// ],
// [
// {'abilityName': '通用能力', 'isCheck': null, 'level': '1'},
// {'abilityName': '能力标签', 'isCheck': null, 'level': '2'},
// {'abilityName': '领悟融合', 'isCheck': null, 'level': '3'}
// ],
// [
// {'abilityName': '专业能力', 'isCheck': null, 'level': '1'},
// {'abilityName': 'java', 'isCheck': null, 'level': '2'},
// {'abilityName': '多态', 'isCheck': null, 'level': '3'}
// ],
// [
// {'abilityName': '专业能力', 'isCheck': null, 'level': '1'},
// {'abilityName': 'java', 'isCheck': null, 'level': '2'},
// {'abilityName': '集合15', 'isCheck': null, 'level': '3'}
// ],
// [
// {'abilityName': '专业能力', 'isCheck': null, 'level': '1'},
// {'abilityName': '中间件', 'isCheck': null, 'level': '2'},
// {'abilityName': 'tomcat', 'isCheck': null, 'level': '3'}
// ],
// [
// {'abilityName': '通用能力', 'isCheck': null, 'level': '1'},
// {'abilityName': '性格标签', 'isCheck': null, 'level': '2'},
// {'abilityName': '责任担当', 'isCheck': null, 'level': '3'}
// ]
// ],
treeData: []
// treeData: [
// {
// 'abilityName': '专业能力',
// 'modelAbilityRecursList': [
// {
// 'abilityName': 'java',
// 'modelAbilityRecursList': [
// {
// 'abilityName': '集合15',
// 'modelAbilityRecursList': [],
// 'questionIdList': ['S1238225JAVA013102']
// },
// {
// 'abilityName': '集合',
// 'modelAbilityRecursList': [],
// 'questionIdList': ['S1238225JAVA013102']
// },
// {
// 'abilityName': '集合追问',
// 'modelAbilityRecursList': [],
// 'questionIdList': ['S1238225JAVA013103']
// },
// {
// 'abilityName': '多态',
// 'modelAbilityRecursList': [],
// 'questionIdList': ['S1238225JAVA013105']
// }
// ],
// 'questionIdList': []
// },
// {
// 'abilityName': '中间件',
// 'modelAbilityRecursList': [
// {
// 'abilityName': 'tomcat',
// 'modelAbilityRecursList': [],
// 'questionIdList': ['S1238225JAVA013111'
// ]
// }
// ],
// 'questionIdList': []
// }
// ],
// 'questionIdList': []
// },
// {
// 'abilityName': '通用能力',
// 'modelAbilityRecursList': [
// {
// 'abilityName': '能力标签',
// 'modelAbilityRecursList': [
// {
// 'abilityName': '沟通协作',
// 'modelAbilityRecursList': [],
// 'questionIdList': ['S1238225JAVA013098']
// },
// {
// 'abilityName': '领悟融合',
// 'modelAbilityRecursList': [],
// 'questionIdList': ['S1238225JAVA013099']
// },
// {
// 'abilityName': '逻辑推理',
// 'modelAbilityRecursList': [],
// 'questionIdList': ['S1238225JAVA013115']
// },
// {
// 'abilityName': '执行能力',
// 'modelAbilityRecursList': [],
// 'questionIdList': ['S1238225JAVA013116']
// }
// ],
// 'questionIdList': []
// },
// // {
// // 'abilityName': '性格标签',
// // 'modelAbilityRecursList': [
// // {
// // 'abilityName': '抗压耐力',
// // 'modelAbilityRecursList': [],
// // 'questionIdList': ['S1238225JAVA013100']
// // },
// // {
// // 'abilityName': '责任担当',
// // 'modelAbilityRecursList': [],
// // 'questionIdList': ['S1238225JAVA013101']
// // }
// // ],
// // 'questionIdList': []
// // },
// {
// 'abilityName': '行为标签',
// 'modelAbilityRecursList': [
// {
// 'abilityName': '解决问题',
// 'modelAbilityRecursList': [],
// 'questionIdList': ['S1238225JAVA013097']
// }
// ],
// 'questionIdList': []
// }
// ],
// 'questionIdList': []
// },
// {
// 'abilityName': '基础信息',
// 'modelAbilityRecursList': [
// {
// 'abilityName': '稳定性',
// 'modelAbilityRecursList': [
// {
// 'abilityName': '求职动机',
// 'modelAbilityRecursList': [],
// 'questionIdList': ['S1238225JAVA013096']
// }
// ],
// 'questionIdList': []
// }
// ],
// 'questionIdList': []
// }
// ]
}
},
computed: {
allFactors () {
return this.answerInfo.allFactors || {}
},
checkedFactors () {
return this.answerInfo.checkedFactors || []
},
positive () {
return this.answerInfo.positive || []
}
},
watch: {
animateOver (val) {
if (val) {
console.log('animateOver', val)
if (!this.clickFlag && this.answerInfo.isFinish === 1) {
setTimeout(() => {
console.log('动画结束了，开始准备下一题')
this.$emit('show-line-end', true)
}, 2500)
}
}
},
finishProgress (val) {
if (val) {
this.emotionStart = false
if (this.singleSelectFactorTree.length < 1) {
setTimeout(() => {
console.log('微表情动画结束，没有命中因子，直接跳回')
this.$emit('show-line-end', true)
}, 1000)
} else {
this.showLineAnimate()
}
console.log('用户微表情是否结束：' + val)
}
},
subjectId (val) {
console.log('subjectId=' + val)
this.clearIntervalAll()
console.log('点击变化查询finishProgress：', this.finishProgress)
if (val) {
this.getAnswerInfo()
}
},
text1Text (val) {
let positive = this.answerInfo.positive
if (this.showLineQuestionId.indexOf(this.questionId) > -1) {
this.showLinePositive.map(item => {
if (positive.indexOf(item) < 0) {
positive.push(item)
}
})
}
if (positive && positive.length > 0) {
positive.map((item) => {
if (this.showLinePositive.indexOf(item) > -1) {
let showKey = "<span style='background-color: #FFE977;'>" + item + '</span>'
this.text1Html = this.text1Html.replace(new RegExp(item, 'gi'), showKey)
} else {
let showKey = "<span style='background-color: #FF8000;'>" + item + '</span>'
this.text1Html = this.text1Html.replace(new RegExp(item, 'gi'), showKey)
}
})
}
},
word (val) {
if (!this.isLive && val) {
this.setIntervalValue = setInterval(this.type, 50)
} else if (this.isLive && val) {
this.text1Html = val
clearInterval(this.setIntervalValue2)
let positive = this.answerInfo.positive
if (this.showLineQuestionId.indexOf(this.questionId) > -1) {
// positive.push = this.showLinePositive
this.showLinePositive.map(item => {
if (positive.indexOf(item) < 0) {
positive.push(item)
}
})
}
if (positive && positive.length > 0) {
positive.map((item) => {
if (this.showLinePositive.indexOf(item) > -1) {
let showKey = "<span style='background-color: #FFE977;'>" + item + '</span>'
this.text1Html = this.text1Html.replace(new RegExp(item, 'gi'), showKey)
} else {
let showKey = "<span style='background-color: #FF8000;'>" + item + '</span>'
this.text1Html = this.text1Html.replace(new RegExp(item, 'gi'), showKey)
}
})
}
console.log('用户微表情开始')
// 如果是默认为0，则为线上版本，隐藏微表情，直接设置 finishProgress 为true(微表情动画结束)
if (this.aiAdminShow === '0' || this.aiAdminShow === 0) {
this.finishProgress = true
} else {
this.finishProgress = false
this.emotionStart = true
}
}
}
},
methods: {
getId2 (i, j) {
return 'lineRight2_2_' + i + '_' + j
},
getId3 (i, j, k) {
return 'lineRight2_3_' + i + '_' + j + '_' + k
},
setFinishProgress (val) {
console.log('微表情结束：', val)
this.finishProgress = val
},
changePage () {
this.$emit('change-page', false)
},
formatAnswer () {
let answerContent = ''
switch (this.answerInfo.type) {
case 1:
answerContent = this.answerInfo.selectitems
break
case 2:
answerContent = this.answerInfo.selectitems ? this.answerInfo.selectitems.replace(/#/g, '、') : ''
break
case 3:
if (this.answerInfo.tfitem) {
answerContent = this.answerInfo.tfitem === '1' ? '正确' : '错误'
} else {
answerContent = ''
}
break
case 5:
answerContent = this.answerInfo.content
break
default:
answerContent = ''
break
}
this.word = answerContent
return answerContent
},
getAnswerInfo () {
const params = {
id: this.subjectId,
// id: 105, // TODO
interviewType: this.$route.query.interviewType ? Number(this.$route.query.interviewType) : 1,
interviewId: this.$route.query.interviewId ? Number(this.$route.query.interviewId) : 2,
infoId: this.$route.query.infoId ? Number(this.$route.query.infoId) : 2
}
api.getAnswerInfo(params).then((res) => {
this.answerInfo = res.data || {}
if (JSON.stringify(this.answerInfo) !== '{}') {
this.formatAnswer()
}
this.singleSelectFactorTree = res.data.checkedFactors || []
this.$nextTick(() => {
if (res.data.isFinish !== 1 && this.isSubmit === 0) {
this.isLive = true
this.setIntervalValue1 = setInterval(this.getRealTimeAnswer, 300)
} else if (this.singleSelectFactorTree.length < 1 && res.data.isFinish === 1 && !this.clickFlag) {
// 当isFinish为1时，当前问题命中因子树为空时，循环调3次genAnswerInfo接口，如果3次还没有的话，则退出
if (this.isFinishNum > 2) {
clearInterval(this.setIntervalValue2)
setTimeout(() => {
console.log('结束获取上一题答案了')
console.log('问题回答结束并且未命中任何因子,跳转时间=' + new Date().getTime())
this.$emit('show-line-end', true)
console.log('问题回答结束并且未命中任何因子，通知结束当前题=' + true)
}, 2500)
}
this.isFinishNum++
} else if (!this.formatAnswer() && res.data.isFinish === 1) {
this.text1Html = '候选人未作答'
clearInterval(this.setIntervalValue2)
if (!this.clickFlag) {
setTimeout(() => {
console.log('候选人未作答,跳转时间=' + new Date().getTime())
console.log('结束获取上一题答案了')
this.$emit('show-line-end', true)
console.log('问题回答结束并且未命中任何因子，通知结束当前题=' + true)
}, 2500)
}
}
})
})
},
clearIntervalAll () {
this.i = 0
this.text1Html = ''
this.text1Text = ''
this.requestNo = 1
this.isFinishNum = 0
this.word = ''
this.isLive = false
this.isSubmit = 0
this.finishProgress = false
this.column3Zero = true
this.column2Zero = true
this.animateOver = false
clearInterval(this.setIntervalValue)
clearInterval(this.setIntervalValue1)
clearInterval(this.setIntervalValue2)
},
clearIntervalAll1 () {
clearInterval(this.setIntervalValue1)
},
clearIntervalAll2 () {
clearInterval(this.setIntervalValue2)
},
type () {
// 用户回答答案加载完后，进入用户微表情
if (this.i > this.word.length + 1) {
clearInterval(this.setIntervalValue)
// this.emotionStart = true
// 如果是默认为0，则为线上版本，隐藏微表情，直接设置 finishProgress 为true(微表情动画结束)
if (this.aiAdminShow === '0' || this.aiAdminShow === 0) {
this.finishProgress = true
} else {
this.finishProgress = false
this.emotionStart = true
}
} else {
clearInterval(this.setIntervalValue1)
this.text1Html = this.word.substring(0, this.i++)
var contentInfo = document.getElementsByClassName('text1Html11')
this.text1Text = contentInfo[0] && contentInfo[0].innerText
}
let answerInfo = document.getElementsByClassName('answer-info')
answerInfo[0].scrollTop = answerInfo[0].scrollHeight
},
showLineAnimate () {
console.log('线条动画开始')
this.treeDes3_Id = []
this.treeDes2_Id = []
this.treeDes1_Id = []
this.newTreeData = []
let singleSelectFactorTree = this.singleSelectFactorTree
// TODO
// singleSelectFactorTree[this.chooseNum] = this.singleSelectFactorTree1[this.chooseNum]
// if (this.chooseNum < this.singleSelectFactorTree1.length - 1) {
// this.chooseNum++
// }
let allTree = this.treeData
allTree.map((item, index) => {
singleSelectFactorTree.map((selectTreeItem) => {
// 命中因子树的各级命中因子树
let level1Select = selectTreeItem.filter((item2) => { return item2.level === '1' || item2.level === 1 })
let level2Select = selectTreeItem.filter((item2) => { return item2.level === '2' || item2.level === 2 })
let level3Select = selectTreeItem.filter((item2) => { return item2.level === '3' || item2.level === 3 })
if (item.abilityName === level1Select[0].abilityName) {
item.animateDiv = true
this.treeDes1_Id.push(index)
// 主因子被命中的情况，取所有因子树的从因子树
let level2List = item.modelAbilityRecursList
level2List.map((level2ListItem, index1) => {
level2Select.map((level2SelectItem) => {
if (level2ListItem.abilityName === level2SelectItem.abilityName) {
this.treeDes2_Id.push(index + '_' + index1)
let client2Height = document.getElementById('lineRight2_21_' + index + '_' + index1).clientHeight
if (client2Height > 0) {
this.column2Zero = false
}
level2ListItem.animateDiv = true
// 主因子被命中的情况，取所有因子树的次级因子树
let level3List = level2ListItem.modelAbilityRecursList
level3List.map((level3ListItem, index2) => {
level3Select.map((level3SelectItem) => {
if (level3ListItem.abilityName === level3SelectItem.abilityName) {
this.treeDes3_Id.push(index + '_' + index1 + '_' + index2)
let client3Height = document.getElementById('lineRight2_31_' + index + '_' + index1 + '_' + index2).clientHeight
if (client3Height > 0) {
this.column3Zero = false
}
level3ListItem.animateDiv = true
}
})
})
}
})
})
}
})
this.$set(this.newTreeData, index, item)
})
let treeDes1Set = new Set(this.treeDes1_Id) // {1,2,3,4}
this.treeDes1_Id = Array.from(treeDes1Set) // 再把set转变成array
let treeDes2Set = new Set(this.treeDes2_Id) // {1,2,3,4}
this.treeDes2_Id = Array.from(treeDes2Set) // 再把set转变成array
let treeDes3Set = new Set(this.treeDes3_Id) // {1,2,3,4}
this.treeDes3_Id = Array.from(treeDes3Set) // 再把set转变成array
this.$nextTick(() => {
let animateLine2103 = document.getElementsByClassName('animateLine2103')
let animateLine3102 = document.getElementsByClassName('animateLine3102')
if (this.treeDes3_Id.length < 1) {
return
}
for (let treeDes3IdNum = 0; treeDes3IdNum < this.treeDes3_Id.length; treeDes3IdNum++) {
// 添加动画，如果已经命中的因子，则添加放大的动画
// if (document.getElementById('treeDes3_' + this.treeDes3_Id[treeDes3IdNum]).classList.contains('hitDiv')) {
// document.getElementById('treeDes3Show_' + this.treeDes3_Id[treeDes3IdNum]).classList.add('animation4')
// } else {
document.getElementById('treeDes3_' + this.treeDes3_Id[treeDes3IdNum]).style.opacity = 1
// 透明度从无到有的动画
// document.getElementById('treeDes3_' + this.treeDes3_Id[treeDes3IdNum]).classList.add('animation3')
// 背景从中间往两边展开动画
// document.getElementById('treeDes3Back_' + this.treeDes3_Id[treeDes3IdNum]).classList.add('animation5')
// 命中因子变大
document.getElementById('treeDes3Show_' + this.treeDes3_Id[treeDes3IdNum]).classList.add('animation4')
// 命中因子左右摇摆的动画
// document.getElementById('treeDesDiv3_' + this.treeDes3_Id[treeDes3IdNum]).classList.add('animated')
// document.getElementById('treeDesDiv3_' + this.treeDes3_Id[treeDes3IdNum]).classList.add('swing')
// 命中因子加上命中色
document.getElementById('treeDes3_' + this.treeDes3_Id[treeDes3IdNum]).classList.add('hitDiv')
// }
}
document.getElementById('treeDes3Show_' + this.treeDes3_Id[0]).addEventListener('webkitAnimationEnd', () => {
for (let treeDes3IdNum = 0; treeDes3IdNum < this.treeDes3_Id.length; treeDes3IdNum++) {
document.getElementById('line3101Dom_' + this.treeDes3_Id[treeDes3IdNum]).classList.add('animationDom')
document.getElementById('line31_' + this.treeDes3_Id[treeDes3IdNum]).classList.add('xian01')
document.getElementById('line31_' + this.treeDes3_Id[treeDes3IdNum]).style.opacity = 1
document.getElementById('line31_' + this.treeDes3_Id[treeDes3IdNum]).classList.add('hitLineRow')
}
})
document.getElementById('line31_' + this.treeDes3_Id[0]).addEventListener('webkitAnimationEnd', () => {
if (this.column3Zero) {
for (let treeDes2IdNum = 0; treeDes2IdNum < this.treeDes2_Id.length; treeDes2IdNum++) {
document.getElementById('line2101Dom_' + this.treeDes2_Id[treeDes2IdNum]).classList.add('animationDom')
document.getElementById('line2101_' + this.treeDes2_Id[treeDes2IdNum]).classList.add('xian01')
document.getElementById('line2101_' + this.treeDes2_Id[treeDes2IdNum]).style.opacity = 1
document.getElementById('line2101_' + this.treeDes2_Id[treeDes2IdNum]).classList.add('hitLineRow')
}
} else {
if (animateLine3102.length > 0) {
for (let treeDes3IdNum = 0; treeDes3IdNum < this.treeDes3_Id.length; treeDes3IdNum++) {
// let clientHeight = document.getElementById('lineRight2_31_' + this.treeDes3_Id[treeDes3IdNum]).clientHeight
let offsetTop = document.getElementById('lineRight2_3_' + this.treeDes3_Id[treeDes3IdNum]).offsetTop
if (offsetTop < 0) {
document.getElementById('lineRight2_31_' + this.treeDes3_Id[treeDes3IdNum]).classList.add('hitLineColumn')
document.getElementById('lineRight2_31_' + this.treeDes3_Id[treeDes3IdNum]).classList.add('columnAnimate')
document.getElementById('lineRight2_31_Dom_' + this.treeDes3_Id[treeDes3IdNum]).classList.add('animationColunmDom')
} else {
document.getElementById('lineRight2_31_' + this.treeDes3_Id[treeDes3IdNum]).classList.add('hitLineColumn')
document.getElementById('lineRight2_31_' + this.treeDes3_Id[treeDes3IdNum]).classList.add('columnAnimate1')
document.getElementById('lineRight2_31_Dom_' + this.treeDes3_Id[treeDes3IdNum]).classList.add('animationColunmDom1')
}
}
}
document.getElementById('lineRight2_31_Dom_' + this.treeDes3_Id[0]).addEventListener('webkitAnimationEnd', () => {
for (let treeDes2IdNum = 0; treeDes2IdNum < this.treeDes2_Id.length; treeDes2IdNum++) {
document.getElementById('line2101Dom_' + this.treeDes2_Id[treeDes2IdNum]).classList.add('animationDom')
document.getElementById('line2101_' + this.treeDes2_Id[treeDes2IdNum]).classList.add('xian01')
document.getElementById('line2101_' + this.treeDes2_Id[treeDes2IdNum]).style.opacity = 1
document.getElementById('line2101_' + this.treeDes2_Id[treeDes2IdNum]).classList.add('hitLineRow')
}
})
}
})
document.getElementById('line2101_' + this.treeDes2_Id[0]).addEventListener('webkitAnimationEnd', () => {
for (let treeDes2IdNum = 0; treeDes2IdNum < this.treeDes2_Id.length; treeDes2IdNum++) {
// 添加动画，如果已经命中的因子，则添加放大的动画
// if (document.getElementById('treeDes2_' + this.treeDes2_Id[treeDes2IdNum]).classList.contains('hitDiv')) {
// document.getElementById('treeDes2Show_' + this.treeDes2_Id[treeDes2IdNum]).classList.add('animation4')
// } else {
document.getElementById('treeDes2_' + this.treeDes2_Id[treeDes2IdNum]).style.opacity = 1
// 命中因子变大
document.getElementById('treeDes2Show_' + this.treeDes2_Id[treeDes2IdNum]).classList.add('animation4')
// document.getElementById('treeDes2_' + this.treeDes2_Id[treeDes2IdNum]).classList.add('animation3')
// document.getElementById('treeDes2Back_' + this.treeDes2_Id[treeDes2IdNum]).classList.add('animation5')
// document.getElementById('treeDesDiv2_' + this.treeDes2_Id[treeDes2IdNum]).classList.add('animated')
// document.getElementById('treeDesDiv2_' + this.treeDes2_Id[treeDes2IdNum]).classList.add('swing')
document.getElementById('treeDes2_' + this.treeDes2_Id[treeDes2IdNum]).classList.add('hitDiv')
// }
}
})
document.getElementById('treeDes2Show_' + this.treeDes2_Id[0]).addEventListener('webkitAnimationEnd', () => {
for (let treeDes2IdNum = 0; treeDes2IdNum < this.treeDes2_Id.length; treeDes2IdNum++) {
document.getElementById('line2201Dom_' + this.treeDes2_Id[treeDes2IdNum]).classList.add('animationDom')
document.getElementById('line2201_' + this.treeDes2_Id[treeDes2IdNum]).classList.add('xian01')
document.getElementById('line2201_' + this.treeDes2_Id[treeDes2IdNum]).style.opacity = 1
document.getElementById('line2201_' + this.treeDes2_Id[treeDes2IdNum]).classList.add('hitLineRow')
}
})
document.getElementById('line2201_' + this.treeDes2_Id[0]).addEventListener('webkitAnimationEnd', () => {
if (this.column2Zero) {
for (let treeDes1IdNum = 0; treeDes1IdNum < this.treeDes1_Id.length; treeDes1IdNum++) {
document.getElementById('line1001Dom_' + this.treeDes1_Id[treeDes1IdNum]).classList.add('animationDom')
document.getElementById('line1001_' + this.treeDes1_Id[treeDes1IdNum]).classList.add('xian01')
document.getElementById('line1001_' + this.treeDes1_Id[treeDes1IdNum]).style.opacity = 1
document.getElementById('line1001_' + this.treeDes1_Id[treeDes1IdNum]).classList.add('hitLineRow')
}
} else {
if (animateLine2103.length > 0) {
for (let treeDes2IdNum = 0; treeDes2IdNum < this.treeDes2_Id.length; treeDes2IdNum++) {
// let clientHeight = document.getElementById('lineRight2_21_' + this.treeDes2_Id[treeDes2IdNum]).clientHeight
let offsetTop = document.getElementById('lineRight2_2_' + this.treeDes2_Id[treeDes2IdNum]).offsetTop
if (offsetTop < 0) {
document.getElementById('lineRight2_21_' + this.treeDes2_Id[treeDes2IdNum]).classList.add('hitLineColumn')
document.getElementById('lineRight2_21_' + this.treeDes2_Id[treeDes2IdNum]).classList.add('columnAnimate')
document.getElementById('lineRight2_21_Dom_' + this.treeDes2_Id[treeDes2IdNum]).classList.add('animationColunmDom')
} else {
document.getElementById('lineRight2_21_' + this.treeDes2_Id[treeDes2IdNum]).classList.add('hitLineColumn')
document.getElementById('lineRight2_21_' + this.treeDes2_Id[treeDes2IdNum]).classList.add('columnAnimate1')
document.getElementById('lineRight2_21_Dom_' + this.treeDes2_Id[treeDes2IdNum]).classList.add('animationColunmDom1')
}
}
}
document.getElementById('lineRight2_21_' + this.treeDes2_Id[0]).addEventListener('webkitAnimationEnd', () => {
for (let treeDes1IdNum = 0; treeDes1IdNum < this.treeDes1_Id.length; treeDes1IdNum++) {
document.getElementById('line1001Dom_' + this.treeDes1_Id[treeDes1IdNum]).classList.add('animationDom')
document.getElementById('line1001_' + this.treeDes1_Id[treeDes1IdNum]).classList.add('xian01')
document.getElementById('line1001_' + this.treeDes1_Id[treeDes1IdNum]).style.opacity = 1
document.getElementById('line1001_' + this.treeDes1_Id[treeDes1IdNum]).classList.add('hitLineRow')
}
})
}
})
if (document.getElementById('line1001_' + this.treeDes1_Id[0])) {
document.getElementById('line1001_' + this.treeDes1_Id[0]).addEventListener('webkitAnimationEnd', () => {
for (let treeDes1IdNum = 0; treeDes1IdNum < this.treeDes1_Id.length; treeDes1IdNum++) {
document.getElementById('treeDes1_' + this.treeDes1_Id[treeDes1IdNum]).style.opacity = 1
document.getElementById('treeDes1Show_' + this.treeDes1_Id[treeDes1IdNum]).classList.add('animation4')
// document.getElementById('treeDes1_' + this.treeDes1_Id[treeDes1IdNum]).classList.add('animation3')
// document.getElementById('treeDes1Back_' + this.treeDes1_Id[treeDes1IdNum]).classList.add('animation5')
// document.getElementById('treeDesDiv1_' + this.treeDes1_Id[treeDes1IdNum]).classList.add('animated')
// document.getElementById('treeDesDiv1_' + this.treeDes1_Id[treeDes1IdNum]).classList.add('swing')
document.getElementById('treeDes1_' + this.treeDes1_Id[treeDes1IdNum]).classList.add('hitDiv')
}
})
}
// document.getElementById('treeDes1Show_' + this.treeDes1_Id[0]).addEventListener('webkitAnimationEnd', () => {
// // for (let treeDes1IdNum = 0; treeDes1IdNum < this.treeDes1_Id.length; treeDes1IdNum++) {
// // document.getElementById('treeDes1_' + this.treeDes1_Id[treeDes1IdNum]).classList.add('hitDiv')
// // }
// for (let treeDes3IdNum = 0; treeDes3IdNum < this.treeDes3_Id.length; treeDes3IdNum++) {
// // document.getElementById('line3101Dom_' + this.treeDes3_Id[treeDes3IdNum]).classList.add('lineDom')
// // document.getElementById('line3101Dom_' + this.treeDes3_Id[treeDes3IdNum]).classList.add('animationDom')
// }
// })
// document.getElementById('line3101Dom_' + this.treeDes3_Id[0]).addEventListener('webkitAnimationEnd', () => {
// for (let treeDes2IdNum = 0; treeDes2IdNum < this.treeDes2_Id.length; treeDes2IdNum++) {
// // document.getElementById('line2101Dom_' + this.treeDes2_Id[treeDes2IdNum]).classList.add('lineDom')
// // document.getElementById('line2101Dom_' + this.treeDes2_Id[treeDes2IdNum]).classList.add('animationDom')
// }
// })
// document.getElementById('line2101Dom_' + this.treeDes2_Id[0]).addEventListener('webkitAnimationEnd', () => {
// for (let treeDes2IdNum = 0; treeDes2IdNum < this.treeDes2_Id.length; treeDes2IdNum++) {
// // document.getElementById('line2201Dom_' + this.treeDes2_Id[treeDes2IdNum]).classList.add('lineDom')
// // document.getElementById('line2201Dom_' + this.treeDes2_Id[treeDes2IdNum]).classList.add('animationDom')
// }
// })
// document.getElementById('line2201Dom_' + this.treeDes2_Id[0]).addEventListener('webkitAnimationEnd', () => {
// for (let treeDes1IdNum = 0; treeDes1IdNum < this.treeDes1_Id.length; treeDes1IdNum++) {
// // document.getElementById('line1001Dom_' + this.treeDes1_Id[treeDes1IdNum]).classList.add('lineDom')
// // document.getElementById('line1001Dom_' + this.treeDes1_Id[treeDes1IdNum]).classList.add('animationDom')
// }
// })
// 删除动画效果
// document.getElementById('line1001Dom_' + this.treeDes1_Id[0]).addEventListener('webkitAnimationEnd', () => {
document.getElementById('treeDes1Show_' + this.treeDes1_Id[0]).addEventListener('webkitAnimationEnd', () => {
let hitLineRow = document.getElementsByClassName('hitLineRow')
for (let hitLineRowNum = 0; hitLineRowNum < hitLineRow.length; hitLineRowNum++) {
hitLineRow[hitLineRowNum].classList.remove('xian01')
}
let hitDiv = document.getElementsByClassName('hitDiv')
for (let hitDivNum = 0; hitDivNum < hitDiv.length; hitDivNum++) {
hitDiv[hitDivNum].classList.remove('animation3')
}
for (let treeDes3IdNum = 0; treeDes3IdNum < this.treeDes3_Id.length; treeDes3IdNum++) {
document.getElementById('treeDesDiv3_' + this.treeDes3_Id[treeDes3IdNum]).classList.remove('animated')
document.getElementById('treeDesDiv3_' + this.treeDes3_Id[treeDes3IdNum]).classList.remove('swing')
document.getElementById('treeDes3Show_' + this.treeDes3_Id[treeDes3IdNum]).classList.remove('animation4')
document.getElementById('treeDes3Back_' + this.treeDes3_Id[treeDes3IdNum]).classList.remove('animation5')
// document.getElementById('line3101Dom_' + this.treeDes3_Id[treeDes3IdNum]).classList.remove('lineDom')
document.getElementById('line3101Dom_' + this.treeDes3_Id[treeDes3IdNum]).classList.remove('animationDom')
document.getElementById('lineRight2_31_Dom_' + this.treeDes3_Id[treeDes3IdNum]).classList.remove('animationColunmDom')
document.getElementById('lineRight2_31_Dom_' + this.treeDes3_Id[treeDes3IdNum]).classList.remove('animationColunmDom1')
document.getElementById('lineRight2_31_' + this.treeDes3_Id[treeDes3IdNum]).classList.add('columnAnimate')
document.getElementById('lineRight2_31_' + this.treeDes3_Id[treeDes3IdNum]).classList.add('columnAnimate1')
}
for (let treeDes2IdNum = 0; treeDes2IdNum < this.treeDes2_Id.length; treeDes2IdNum++) {
document.getElementById('treeDesDiv2_' + this.treeDes2_Id[treeDes2IdNum]).classList.remove('animated')
document.getElementById('treeDesDiv2_' + this.treeDes2_Id[treeDes2IdNum]).classList.remove('swing')
document.getElementById('treeDes2Show_' + this.treeDes2_Id[treeDes2IdNum]).classList.remove('animation4')
document.getElementById('treeDes2Back_' + this.treeDes2_Id[treeDes2IdNum]).classList.remove('animation5')
// document.getElementById('line2101Dom_' + this.treeDes2_Id[treeDes2IdNum]).classList.remove('lineDom')
document.getElementById('line2101Dom_' + this.treeDes2_Id[treeDes2IdNum]).classList.remove('animationDom')
// document.getElementById('line2201Dom_' + this.treeDes2_Id[treeDes2IdNum]).classList.remove('lineDom')
document.getElementById('line2201Dom_' + this.treeDes2_Id[treeDes2IdNum]).classList.remove('animationDom')
document.getElementById('lineRight2_21_' + this.treeDes2_Id[treeDes2IdNum]).classList.remove('columnAnimate')
document.getElementById('lineRight2_21_' + this.treeDes2_Id[treeDes2IdNum]).classList.remove('columnAnimate1')
document.getElementById('lineRight2_21_Dom_' + this.treeDes2_Id[treeDes2IdNum]).classList.remove('animationColunmDom')
document.getElementById('lineRight2_21_Dom_' + this.treeDes2_Id[treeDes2IdNum]).classList.remove('animationColunmDom1')
}
for (let treeDes1IdNum = 0; treeDes1IdNum < this.treeDes1_Id.length; treeDes1IdNum++) {
document.getElementById('treeDesDiv1_' + this.treeDes1_Id[treeDes1IdNum]).classList.remove('animated')
document.getElementById('treeDesDiv1_' + this.treeDes1_Id[treeDes1IdNum]).classList.remove('swing')
document.getElementById('treeDes1Show_' + this.treeDes1_Id[treeDes1IdNum]).classList.remove('animation4')
document.getElementById('treeDes1Back_' + this.treeDes1_Id[treeDes1IdNum]).classList.remove('animation5')
// document.getElementById('line1001Dom_' + this.treeDes1_Id[treeDes1IdNum]).classList.remove('lineDom')
document.getElementById('line1001Dom_' + this.treeDes1_Id[treeDes1IdNum]).classList.remove('animationDom')
}
setTimeout(() => {
console.log('动画结束，开始计数命中多少个')
this.calcSelectedTree()
}, 700)
this.animateOver = true
})
})
},
calcSelectedTree () {
this.treeDes1 = 0
this.treeDes2 = 0
this.treeDes3 = 0
let treeDes1Dom = document.getElementsByClassName('treeDes1')
let treeDes2Dom = document.getElementsByClassName('treeDes2')
let treeDes3Dom = document.getElementsByClassName('treeDes3')
for (let treeDes1Num = 0; treeDes1Num < treeDes1Dom.length; treeDes1Num++) {
if (treeDes1Dom[treeDes1Num].classList.contains('hitDiv')) {
this.treeDes1++
}
}
for (let treeDes2Num = 0; treeDes2Num < treeDes2Dom.length; treeDes2Num++) {
if (treeDes2Dom[treeDes2Num].classList.contains('hitDiv')) {
this.treeDes2++
}
}
for (let treeDes3Num = 0; treeDes3Num < treeDes3Dom.length; treeDes3Num++) {
if (treeDes3Dom[treeDes3Num].classList.contains('hitDiv')) {
this.treeDes3++
}
}
},
getRealTimeAnswer () {
if (this.ajaxLoading) {
return
}
let params = {
'questionId': this.questionId,
'interviewId': this.$route.query.interviewId,
'requestNo': this.requestNo
}
this.ajaxLoading = true
api.getRealTimeAnswer(params).then((res) => {
this.ajaxLoading = false
this.allData = res.data.allData
this.addData = res.data.addData
this.isSubmit = res.data.isSubmit
let answerInfo = document.getElementsByClassName('answer-info')
answerInfo[0].scrollTop = answerInfo[0].scrollHeight
if (this.isSubmit === 2) {
this.text1Html = this.allData
this.requestNo = 1
this.setIntervalValue2 = setInterval(this.getAnswerInfo, 1000)
this.clearIntervalAll1()
return false
}
if (this.requestNo === 1) {
if (!this.allData) {
} else {
this.text1Html = this.allData + (this.addData ? '' : this.addData)
this.requestNo = res.data.requestNo
}
} else {
if (this.allData && !this.addData) {
} else if (!this.allData && this.addData) {
} else if (!this.allData && !this.addData) {
} else if (this.allData && this.addData) {
if (this.requestNo === 1) {
this.text1Html = this.allData + this.addData
} else {
this.text1Html += this.addData
}
console.log('this.text1Html=' + this.text1Html)
this.requestNo = res.data.requestNo
}
}
}, (err) => {
console.log('报错', err)
}).catch(() => {
this.ajaxLoading = false
return false
})
},
// 加载所有命中因子树
loadAllCheckAbilityInfo () {
let allTree = this.treeData
let selectTree = this.selectFactorTree
allTree.map((item) => {
selectTree.map((selectTreeItem) => {
// 命中因子树的各级命中因子树
let level1Select = selectTreeItem.filter((item2) => { return item2.level === '1' || item2.level === 1 })
let level2Select = selectTreeItem.filter((item2) => { return item2.level === '2' || item2.level === 2 })
let level3Select = selectTreeItem.filter((item2) => { return item2.level === '3' || item2.level === 3 })
if (item.abilityName === level1Select[0].abilityName) {
item.lineRight = true
// 主因子被命中的情况，取所有因子树的从因子树
let level2List = item.modelAbilityRecursList
level2List.map((level2ListItem) => {
level2Select.map((level2SelectItem) => {
if (level2ListItem.abilityName === level2SelectItem.abilityName) {
level2ListItem.lineRight2 = true
level2ListItem.hitDiv = true
// 主因子被命中的情况，取所有因子树的次级因子树
let level3List = level2ListItem.modelAbilityRecursList
level3List.map((level3ListItem) => {
level3Select.map((level3SelectItem) => {
if (level3ListItem.abilityName === level3SelectItem.abilityName) {
level3ListItem.lineRight2 = true
level3ListItem.hitDiv = true
}
})
})
}
})
})
}
})
})
this.newTreeData = allTree
// 待所有因子树加载完毕再去画竖线
this.drwaLevel2line()
},
// 获取当前面试所有命中因子树
getAllCheckAbilityInfo () {
let params = {
interviewId: this.$route.query.interviewId ? Number(this.$route.query.interviewId) : 2,
modelId: Number(this.$store.getters.candidateInfo.modelId) ? Number(this.$store.getters.candidateInfo.modelId) : 12
}
// 本地模拟数据命中因子加载数据
// this.$nextTick(() => {
// this.loadAllCheckAbilityInfo()
// })
// 接口请求数据
api.getAllCheckAbilityInfo(params).then((res) => {
this.selectFactorTree = res.data
this.$nextTick(() => {
this.loadAllCheckAbilityInfo()
})
}).catch((res) => {
// this.getFactorTreeLists()
})
},
// 获取所有的因子树
getFactorTreeLists () {
let params = {
corpId: this.$store.getters.candidateInfo.corpId ? this.$store.getters.candidateInfo.corpId : 'SZDBK',
positionId: this.$store.getters.candidateInfo.positionId ? this.$store.getters.candidateInfo.positionId : 'S03906',
modelId: Number(this.$store.getters.candidateInfo.modelId) ? Number(this.$store.getters.candidateInfo.modelId) : 12,
interviewId: this.$route.query.interviewId ? Number(this.$route.query.interviewId) : 2
}
// TODO
// let params = {
// 'corpId': 'SZDBK',
// 'positionId': 'S03906',
// 'modelId': 12,
// 'interviewId': 2
// }
// 本地模拟数据
// this.getAllCheckAbilityInfo()
// 接口请求数据
api.getFactorTreeList(params).then((res) => {
this.treeData = res.data.modelAbilityRecursList
if (this.treeData) {
this.getAllCheckAbilityInfo()
}
}).catch((res) => {
// this.selectTree()
// this.drwaLevel2line()
})
},
// 从因子画线
drwaLevel2line () {
for (let i = 0; i < this.treeData.length; i++) {
let level3Num = 0
let level2List = this.treeData[i].modelAbilityRecursList
for (let k = 0; k < level2List.length; k++) {
level2List[k].centerNum = (level2List[k].modelAbilityRecursList.length / 2) + level3Num
level3Num += parseInt(level2List[k].modelAbilityRecursList.length)
}
let flexBoxHeight = level3Num * 40
for (let j = 0; j < level2List.length; j++) {
let height1 = flexBoxHeight / 2
let height2 = level2List[j].centerNum * 40
setTimeout(function () {
if (level2List[j].centerNum < level3Num / 2) {
let rightHeight = height1 - height2
document.getElementById('lineRight2_2_' + i + '_' + j).style.height = rightHeight + 'px'
document.getElementById('lineRight2_2_' + i + '_' + j).style.bottom = 11 + 'px'
if (rightHeight > 5) {
document.getElementById('lineRight2_21_Dom_' + i + '_' + j).style.height = 5 + 'px'
document.getElementById('lineRight2_21_Dom_' + i + '_' + j).style.bottom = 0 + 'px'
document.getElementById('lineRight2_21_Dom_' + i + '_' + j).classList.add('box-shadow1')
}
} else {
let rightHeight = height2 - height1
document.getElementById('lineRight2_2_' + i + '_' + j).style.height = rightHeight + 'px'
document.getElementById('lineRight2_2_' + i + '_' + j).style.top = 12 + 'px'
if (rightHeight > 5) {
document.getElementById('lineRight2_21_Dom_' + i + '_' + j).style.height = 5 + 'px'
document.getElementById('lineRight2_21_Dom_' + i + '_' + j).style.bottom = (rightHeight - 5) + 'px'
document.getElementById('lineRight2_21_Dom_' + i + '_' + j).classList.add('box-shadow2')
}
}
}, 200)
this.drwaLevel3line(level2List[j], i, j)
}
}
setTimeout(() => {
console.log('第一次进来或刷新页面时，开始计数命中多少个')
this.calcSelectedTree()
}, 700)
},
// 次因子画线
drwaLevel3line (level2List, k, j) {
let level3List = level2List.modelAbilityRecursList
let level3Num = level3List.length
for (let i = 0; i < level3List.length; i++) {
let flexBoxHeight = level3Num * 40
let height1 = flexBoxHeight / 2 - 22
let height2 = i * 40
setTimeout(function () {
if (i < level3Num / 2) {
let rightHeight = height1 - height2
document.getElementById('lineRight2_3_' + k + '_' + j + '_' + i).style.height = rightHeight + 'px'
document.getElementById('lineRight2_3_' + k + '_' + j + '_' + i).style.bottom = 13 + 'px'
if (rightHeight > 5) {
document.getElementById('lineRight2_31_Dom_' + k + '_' + j + '_' + i).style.height = 5 + 'px'
document.getElementById('lineRight2_31_Dom_' + k + '_' + j + '_' + i).style.bottom = 0 + 'px'
document.getElementById('lineRight2_31_Dom_' + k + '_' + j + '_' + i).classList.add('box-shadow1')
}
} else {
let rightHeight = height2 - height1
document.getElementById('lineRight2_3_' + k + '_' + j + '_' + i).style.height = rightHeight + 'px'
document.getElementById('lineRight2_3_' + k + '_' + j + '_' + i).style.top = 12 + 'px'
if (rightHeight > 5) {
document.getElementById('lineRight2_31_Dom_' + k + '_' + j + '_' + i).style.height = 5 + 'px'
document.getElementById('lineRight2_31_Dom_' + k + '_' + j + '_' + i).style.bottom = (rightHeight - 5) + 'px'
document.getElementById('lineRight2_31_Dom_' + k + '_' + j + '_' + i).classList.add('box-shadow2')
}
}
}, 200)
}
}
},
mounted () {
// 请求所有的因子树并展示
this.getFactorTreeLists()
},
beforeDestroy () {
this.clearIntervalAll()
}
}
</script>
<style lang="less" scoped>
@import '../../../../../assets/styles/common/variable.less';
@import '../../../../../assets/styles/common/animate.less';
@treeWidth: 650px;
@width1: 85px;
@width2: 150px;
@width3: 58px;
@width4: 564px;
@height1: 24px;
@height2: 45px;
@height3: 24px;
@height4: 24px;
@height5: 665px;
@imgHeight: 40px;
@changeImgHeight: 12px;
@changeImgWidth: 13px;
@changeImgMargin: 20px;
@fontHeight: 17px;
@right1: 85px;
@right6: 85px;
@bottom1: 12px;
@right5: -63px;
@top1: 13px;
@margin1: 29px;
@margin2: 7px;
@margin3: 5px;
@padding: 20px;
@color1: #FF8000;
@color2: #BEBEBE;
@color3: #424656;
@color4: #DADADA;
@color5: #FFFFFF;
@borderWidth: 1px;
@borderWidth1: 1px;
.cutLine {
margin: 0 20px 0;
height: 1px;
background: #EBEEF3;
}
.cutLineShow {
margin-top: 20px;
margin-bottom: 10px;
}
.elli{
opacity: 0.9;
}
.answer-list{
width: @treeWidth;
overflow-x: hidden;
// height: @height5;
box-shadow: 0 4px 10px 0 rgba(66,70,86,0.08);
border-radius: 2px 2px 0 2px 0 2px 2px;
.answer-wrap {
padding: @padding @padding 0;
.user-answer {
display: flex;
}
.answer-title {
font-size: 12px;
color: #424656;
display: inline-block;
font-weight: 600;
width: 63px;
height: 30px;
line-height: 30px;
padding: 0px;
margin-right: 20px;
vertical-align: top;
}
.answer-info {
background: #FAFAFB;
border: 1px solid #EBEEF3;
border-radius: 4px;
width: 510px;
height: 75px;
overflow-y: auto;
.content-info {
width: 100%;
}
span {
padding: 10px;
display: inline-block;
font-size: 12px;
color: @grey;
line-height: 16px;
}
}
}
.factorTreeMainShow {
height: ~"calc(100vh - 245px)" !important;
}
.factorTreeMain{
width: 100%;
padding-top: 5px;
overflow-y: scroll;
min-height: 510px;
// height: 100%;
height: ~"calc(100vh - 158px)";
// height: ~"calc(100vh - 268px)";
padding: @padding @padding 0;
padding-top: 10px;
.answer-title{
font-size: 12px;
color: #424656;
font-weight: 600;
}
.selectedRow{
margin-top: 20px;
.selectedFactorDes{
margin-top: 10px;
.des{
font-size: 10px;
color: #424656;
display: inline-block;
}
.squa{
font-size: 10px;
color: #424656;
margin-left: 8px;
display: inline-block;
}
}
.selectedDesc{
.des{
margin-left: 8px;
font-size: 10px;
color: #424656;
font-weight: 600;
display: inline-block;
}
.squa{
display: inline-block;
width: 8px;
height: 8px;
border-radius: 2px;
background: #FF8000;
}
}
}
.unselectedRow{
margin-top: 20px;
.des{
margin-left: 8px;
font-size: 10px;
color: #424656;
font-weight: 600;
}
.squa{
display: inline-block;
width: 8px;
height: 8px;
border-radius: 2px;
border: 1px solid #BEBEBE;
}
}
.answer-select{
width: 80px;
display: inline-block;
float: left;
}
.factorTreeSelect{
display: inline-block;
float: left;
width: 505px;
}
.showLine1 {
width: 100%;
height: 1px;
position: relative;
top: -1px;
left: -1px;
}
.showLine2 {
width: 1px;
height: 100%;
position: relative;
top: -1px;
left: -1px;
}
.hitDiv {
border: @borderWidth1 solid @color1 !important;
background: @color1 !important;
color: @color5 !important;
}
.hitLineRow {
border-top: @borderWidth solid @color1 !important;
z-index: 999;
}
.hitLineColumn {
border-left: @borderWidth solid @color1 !important;
z-index: 999;
}
.treeDataDescFlexBox{
width: 510px;
margin: 0 auto;
}
.flexBox {
width: 510px;
margin-left: 15px;
}
.treeDataDesc {
display: inline-block;
text-align: left;
font-size: 12px;
width: 90px;
text-align: center;
line-height: @fontHeight;
height: @fontHeight;
color: @color3;
font-weight: bold;
margin-bottom: @margin3;
&:first-child{
margin-right: 120px;
}
&:nth-child(2){
margin-right: 120px;
}
}
.flexBox {
display: -webkit-flex;
-webkit-flex-direction: row-reverse;
display: flex;
flex-direction: row-reverse;
align-self: center;
.treeDes {
width: @width1;
height: @height3;
overflow: hidden;
line-height: @height3;
margin: auto;
border: @borderWidth solid @color2;
border-radius: 3px;
.treeDesShow {
width: @width1;
height: @height3;
line-height: @height3;
position: absolute;
top: 0;
left: 0;
opacity: 0;
background: @color1;
}
.treeDesBack {
width: 0;
height: 100%;
position: absolute;
top: 0;
left: 50%;
opacity: 0;
background: @color1;
}
}
.tree1,
.tree2,
.tree3 {
align-self: center;
text-align: center;
position: relative;
}
.tree3{
margin-right: 125px;
margin: 8px 125px 8px 0;
}
.tree2{
margin-right: 125px;
}
.tree1{
margin-right: 18px;
}
.line1,
.line21 {
border-top: @borderWidth solid @color2;
height: 0;
width: @width3;
position: absolute;
right: @right1;
bottom: @bottom1;
margin-right: 4px;
}
.line22{
border-top: @borderWidth solid @color2;
width: @width3;
height: 0;
position: absolute;
left: @right6;
bottom: @bottom1;
margin-left: 5px;
}
.line31 {
border-top: @borderWidth solid @color2;
width: @width3;
height: 0;
position: absolute;
left: @right1;
bottom: @bottom1;
margin-left: 5px;
}
.line2right1 {
border-left: @borderWidth solid @color2;
height: @height2;
width: 0;
position: absolute;
right: @right5;
}
.line2right2 {
border-left: @borderWidth solid @color2;
width: 0;
position: absolute;
right: @right5;
}
.line3right1 {
border-left: @borderWidth solid @color2;
height: @height4;
width: 0;
position: absolute;
right: @right5;
bottom: @bottom1;
}
.line3right2 {
border-left: @borderWidth solid @color2;
width: 0;
position: absolute;
right: @right5;
}
.flexBox1 {
display: -webkit-flex;
-webkit-flex-direction: column-reverse;
display: flex;
flex-direction: column-reverse;
align-self: center;
}
.flexBox2 {
display: -webkit-flex;
-webkit-flex-direction: row-reverse;
display: flex;
flex-direction: row-reverse;
align-self: center;
}
.flexBox3 {
display: -webkit-flex;
-webkit-flex-direction: column-reverse;
display: flex;
flex-direction: column-reverse;
align-self: center;
}
.lineDom{
height: 6px;
width: 6px;
line-height: 6px;
border-radius: 6px;
background: #FF8000;
position: relative;
opacity: 0;
top: -4px;
left: -1px;
// box-shadow: 0px 0 9px 3px #FF8000;
}
.coloumDom {
width: 6px;
line-height: 6px;
border-radius: 6px;
background: #FF8000;
position: absolute;
right: -2.5px;
z-index: 999;
opacity: 0;
}
// .box-shadow1 {
// box-shadow: 0px 0 9px 3px #FF8000;
// }
// .box-shadow2 {
// box-shadow: 0px 0 9px 3px #FF8000;
// }
.xian01 {
z-index: 999;
background: @color1;
animation: hitLine 0.24s linear 0s 1 normal;
}
.animation3 {
animation: hitDiv 0.2s linear 0s 1 normal;
}
.animation4 {
position: relative;
animation: hitDivBig 0.5s linear 0s 1 normal;
}
.animation5 {
animation: hitDivBack 0.2s linear 0s 1 normal;
}
.animationDom {
animation: hitDom 0.24s linear 0s 1 normal;
}
.animationColunmDom {
animation: colunmDom 0.3s linear 0s 1 normal;
}
.columnAnimate{
animation: colunmLine 0.3s linear 0s 1 normal;
}
.animationColunmDom1 {
animation: colunmDom1 0.3s linear 0s 1 normal;
}
.columnAnimate1{
animation: colunmLine1 0.3s linear 0s 1 normal;
}
@keyframes hitDivBig {
0% {
width: 85px;
color: #FFFFFF;
background: #FF9966;
height: 24px;
line-height: 24px;
border-radius: 4px;
opacity: 1;
}
25% {
color: #FFFFFF;
background: #FF9933;
width: 95px;
height: 30px;
top: -3px;
left: -5px;
line-height: 30px;
border-radius: 4px;
opacity: 1;
}
50% {
color: #FFFFFF;
background: #FF8000;
width: 100px;
height: 34px;
top: -5px;
left: -8px;
line-height: 34px;
border-radius: 4px;
opacity: 1;
}
75% {
color: #FFFFFF;
background: #FF9933;
width: 95px;
height: 30px;
top: -3px;
left: -5px;
line-height: 30px;
border-radius: 4px;
opacity: 1;
}
99% {
color: #FFFFFF;
background: #FF9966;
width: 85px;
height: 24px;
top: 0;
left: 0;
line-height: 24px;
border-radius: 4px;
opacity: 1;
}
100% {
color: #FFFFFF;
width: 85px;
height: 24px;
top: 0;
left: 0;
line-height: 24px;
border-radius: 4px;
opacity: 0;
}
}
@keyframes hitDiv {
0% {
opacity: 0;
}
50% {
opacity: 0.5;
}
100% {
opacity: 1;
}
}
@keyframes hitDivBack {
20% {
width: 20%;
left: 40%;
opacity: 0.5;
}
50% {
width: 50%;
left: 25%;
opacity: 0.5;
}
80% {
width: 80%;
left: 10%;
opacity: 0.5;
}
100% {
width: 100%;
left: 0;
opacity: 0.5;
}
}
@keyframes hitLine {
0% {
width: 0;
opacity: 1;
}
50% {
width: 29px;
opacity: 1;
}
100% {
width: 58px;
opacity: 1;
}
}
@keyframes hitDom {
0% {
left: 0;
box-shadow: 0px 0 9px 5px #FF8000;
opacity: 1;
}
50% {
left: 29px;
box-shadow: 0px 0 9px 0px #FF8000;
opacity: 1;
}
99% {
left: 55px;
box-shadow: 0px 0 9px 5px #FF8000;
opacity: 1;
}
100% {
left: 56px;
box-shadow: 0px 0 9px 0px #FF8000;
opacity: 0;
}
}
@keyframes colunmDom {
0% {
bottom: 5px;
box-shadow: 0px 0 9px 5px #FF8000;
opacity: 1;
}
50% {
bottom: 45%;
box-shadow: 0px 0 9px 0px #FF8000;
opacity: 1;
}
99% {
bottom: 90%;
box-shadow: 0px 0 9px 5px #FF8000;
opacity: 1;
}
100% {
bottom: calc( 100% + 5px );
box-shadow: 0px 0 9px 0px #FF8000;
opacity: 0;
}
}
@keyframes colunmLine {
0% {
top: 100%;
height: 0;
opacity: 1;
}
25% {
top: 75%;
height: 25%;
opacity: 1;
}
50% {
top: 50%;
height: 50%;
opacity: 1;
}
75% {
top: 25%;
height: 75%;
opacity: 1;
}
99% {
top: 0;
height: 99%;
opacity: 1;
}
100% {
top: -1px;
height: 100%;
opacity: 0;
}
}
@keyframes colunmDom1 {
0% {
bottom: 100%;
box-shadow: 0px 0 9px 5px #FF8000;
opacity: 1;
}
50% {
bottom: 55%;
box-shadow: 0px 0 9px 0px #FF8000;
opacity: 1;
}
99% {
bottom: 5%;
box-shadow: 0px 0 9px 5px #FF8000;
opacity: 1;
}
100% {
bottom: 5px;
box-shadow: 0px 0 9px 0px #FF8000;
opacity: 0;
}
}
@keyframes colunmLine1 {
0% {
height: 0;
opacity: 1;
}
50% {
height: 45%;
opacity: 1;
}
99% {
height: 90%;
opacity: 1;
}
100% {
height: 100%;
opacity: 0;
}
}
}
}
}
</style>
前往低代码交流专区
更多推荐
0
0- 0
已为社区贡献1条内容
所有评论(0)