24 changed files with 697 additions and 195 deletions
@ -0,0 +1,74 @@ |
|||
<template> |
|||
<view v-if="list.length" class="flex flex-col"> |
|||
<view |
|||
v-for="(item, index) in list" |
|||
:key="index" |
|||
class="flex flex-nowrap text-center p-2" |
|||
:class="item.checked ? 'bg-blue-500 text-white' : 'bg-gray-100'" |
|||
@click="changeChecked(index)" |
|||
> |
|||
<view class="flex-1 text-left">{{ item.content }} </view> |
|||
<view v-if="item.checked"><u-icon name="checkbox-mark"></u-icon></view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'ChooseTask', |
|||
props: { tasks: { type: Array, default: () => [] }, time: { type: String, default: '' }, defaultId: { type: String, default: '' } }, |
|||
data() { |
|||
return { list: [], ids: [] }; |
|||
}, |
|||
|
|||
watch: { |
|||
tasks(val) { |
|||
if (val) { |
|||
this.list = val; |
|||
} |
|||
}, |
|||
|
|||
defaultId(val) { |
|||
if (val) { |
|||
this.list.forEach(item => { |
|||
if (item.recordId === val) { |
|||
item.checked = true; |
|||
} else { |
|||
item.checked = false; |
|||
} |
|||
}); |
|||
} |
|||
}, |
|||
}, |
|||
|
|||
mounted() { |
|||
this.list = this.tasks; |
|||
this.list.forEach(item => { |
|||
if (item.recordId === this.defaultId) { |
|||
item.checked = true; |
|||
} else { |
|||
item.checked = false; |
|||
} |
|||
}); |
|||
}, |
|||
|
|||
methods: { |
|||
// 选中某个复选框时，由checkbox时触发 |
|||
changeChecked(index) { |
|||
let arr = [...this.list]; |
|||
for (let i = 0; i < arr.length; i++) { |
|||
const item = arr[i]; |
|||
if (i === index) { |
|||
item.checked = true; |
|||
} else { |
|||
item.checked = false; |
|||
} |
|||
} |
|||
this.list = [...arr]; |
|||
this.$emit('changeDefaultId', this.list[index].recordId); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped></style> |
|||
@ -0,0 +1,188 @@ |
|||
<template> |
|||
<view class="canvas-box w-full"> |
|||
<canvas style="width: 100%; height: 450px" canvas-id="firstCanvas"></canvas> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
props: { trainResult: { type: Object, default: () => {} } }, |
|||
|
|||
data() { |
|||
return { |
|||
canvas: null, |
|||
context: null, |
|||
points: [], |
|||
timers: [], |
|||
width: '', |
|||
}; |
|||
}, |
|||
|
|||
watch: { |
|||
trainResult(val) { |
|||
if (val) { |
|||
this.init(); |
|||
} |
|||
}, |
|||
}, |
|||
|
|||
mounted() { |
|||
this.$nextTick(() => { |
|||
const query = uni.createSelectorQuery().in(this); |
|||
query |
|||
.selectAll('.canvas-box') |
|||
.boundingClientRect(data => { |
|||
if (data && data.length) { |
|||
this.width = data[0].width; |
|||
this.init(); |
|||
} |
|||
}) |
|||
.exec(); |
|||
}); |
|||
}, |
|||
|
|||
methods: { |
|||
init() { |
|||
this.clearTimers(); |
|||
this.initCanvas(); |
|||
this.drawImage(this.width); |
|||
}, |
|||
|
|||
// 清除定时器 |
|||
clearTimers() { |
|||
if (this.timers.length) { |
|||
this.timers.forEach(item => { |
|||
item && clearTimeout(item); |
|||
}); |
|||
this.timers = []; |
|||
} |
|||
}, |
|||
|
|||
// 初始化canvas元素 ctx数据 |
|||
initCanvas() { |
|||
this.canvas = this.$refs['reduceCanvas']; |
|||
this.context = uni.createCanvasContext('firstCanvas', this); |
|||
}, |
|||
|
|||
// 绘制图片 |
|||
drawImage(width) { |
|||
const { context } = this; |
|||
const { cardUrl, lines } = this.trainResult; |
|||
let that = this; |
|||
|
|||
uni.downloadFile({ |
|||
url: cardUrl, |
|||
success: function (res) { |
|||
context.drawImage(res.tempFilePath, 0, 0, width, 450); |
|||
context.draw(true); |
|||
// 绘制路径 |
|||
lines.forEach(item => { |
|||
that.drawPath(item, width); |
|||
}); |
|||
}, |
|||
fail(error) { |
|||
console.error('图片加载失败:', error); |
|||
}, |
|||
}); |
|||
}, |
|||
|
|||
/** |
|||
* 绘制路径 |
|||
* 图片坐标是155,194 |
|||
*/ |
|||
drawPath(str, width) { |
|||
const data = this.generatePathData(str); |
|||
const ctx = this.context; |
|||
|
|||
this.timers.push( |
|||
setTimeout(() => { |
|||
if (!this.trainResult.lines || this.trainResult.lines.length === 0) { |
|||
return; |
|||
} |
|||
ctx.beginPath(); |
|||
ctx.setLineWidth(10); |
|||
ctx.setStrokeStyle('#1890ff'); |
|||
const x = (+data[0][0] * width) / 155; |
|||
const y = (+data[0][1] * 450) / 194; |
|||
ctx.moveTo(x, y); |
|||
if (data.length === 1) { |
|||
// 如果只有1个点 就画个小圆圈 |
|||
ctx.arc(x, y, 2, 0, Math.PI * 2, false); |
|||
ctx.fill(); |
|||
} |
|||
}, +data[0][2]), |
|||
); |
|||
|
|||
for (let i = 1, len = data.length; i < len; i++) { |
|||
if (!this.trainResult.lines || this.trainResult.lines.length === 0) return; |
|||
this.timers.push( |
|||
setTimeout(() => { |
|||
if (!this.trainResult.lines || this.trainResult.lines.length === 0) { |
|||
return; |
|||
} |
|||
|
|||
if (i > 1) { |
|||
this.clearAndDraw(data, i, width); |
|||
} else { |
|||
const x = (+data[i][0] * width) / 155; |
|||
const y = (+data[i][1] * 450) / 194; |
|||
ctx.lineTo(x, y); |
|||
ctx.stroke(); |
|||
ctx.draw(true); |
|||
} |
|||
|
|||
ctx.closePath(); |
|||
// }, +data[i][2]), |
|||
}, this.getIntervalTime(+data[i][2], +str.operateTime, +data[0][2])), |
|||
); |
|||
} |
|||
}, |
|||
|
|||
clearAndDraw(data, i, width) { |
|||
if (!data || data.length < 1 || i >= data.length) return; |
|||
const ctx = this.context; |
|||
const x = (+data[0][0] * width) / 155; |
|||
const y = (+data[0][1] * 450) / 194; |
|||
ctx.moveTo(x, y); |
|||
for (let j = 1; j < i + 1; j++) { |
|||
const x = (+data[j][0] * width) / 155; |
|||
const y = (+data[j][1] * 450) / 194; |
|||
ctx.lineTo(x, y); |
|||
if (j === i) { |
|||
ctx.stroke(); |
|||
ctx.draw(true); |
|||
} |
|||
} |
|||
}, |
|||
|
|||
/** |
|||
* 计算间隔时间 |
|||
* 第一条线的操作时间 |
|||
* 每条线的第一个点的时间 |
|||
* 时间 = （当前线条的操作时间 - 第一条线的操作时间）+ （当前点的时间-同一条线的第一个点的时间） |
|||
*/ |
|||
getIntervalTime(pointTime, operateTime, firstPointTime) { |
|||
const { lines } = this.trainResult; |
|||
let time = 0; |
|||
time = operateTime - lines[0].operateTime + (pointTime - firstPointTime); |
|||
return time; |
|||
}, |
|||
|
|||
/** |
|||
* 生成绘制每段路径的数据 |
|||
* @param {string} str 每条路径的数据"x,y,time;x,y,time" |
|||
* @return {array} result [[x,y,time]] |
|||
*/ |
|||
generatePathData(str) { |
|||
if (!str || !str.line) return; |
|||
let result = []; |
|||
str.line.split(';').forEach(point => { |
|||
result.push(point.split(',')); |
|||
}); |
|||
return result; |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped lang="scss"></style> |
|||
@ -0,0 +1,170 @@ |
|||
<template> |
|||
<view> |
|||
<view class="flex flex-nowrap mt-12 rounded-3xl relative" v-if="finishResult"> |
|||
<view |
|||
class="bubble" |
|||
:style="{ |
|||
left: level.left || 0, |
|||
color: level.color || '#EDEDED', |
|||
backgroundImage: `url(${level.bgPic || 'https://www.tall.wiki/staticrec/yanyuan/bubble-gray.png'})`, |
|||
backgroundSize: '100% 100%', |
|||
backgroundRepeat: 'no-repeat', |
|||
}" |
|||
> |
|||
{{ finishResult === 1 ? '轻松完成' : finishResult === 2 ? '略有困难' : '非常困难' }} |
|||
</view> |
|||
<view v-for="i in levels" :key="i.value" class="flex-1" :class="i.value === 3 ? '' : 'box'"> |
|||
<view class="w-full h-2" :class="i.checked ? level.boxBg : 'bg-gray-100'"></view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
props: { finishResult: { type: Number, default: null } }, |
|||
|
|||
data() { |
|||
return { |
|||
levels: [ |
|||
{ |
|||
value: 0.5, |
|||
checked: false, |
|||
}, |
|||
{ |
|||
value: 1, |
|||
checked: false, |
|||
}, |
|||
{ |
|||
value: 1.5, |
|||
checked: false, |
|||
}, |
|||
{ |
|||
value: 2, |
|||
checked: false, |
|||
}, |
|||
{ |
|||
value: 2.5, |
|||
checked: false, |
|||
}, |
|||
{ |
|||
value: 3, |
|||
checked: false, |
|||
}, |
|||
], |
|||
width: 0, |
|||
level: {}, |
|||
}; |
|||
}, |
|||
|
|||
watch: { |
|||
finishResult(val) { |
|||
if (val) { |
|||
this.setLevel(); |
|||
} |
|||
}, |
|||
}, |
|||
|
|||
mounted() { |
|||
this.$nextTick(() => { |
|||
const query = uni.createSelectorQuery().in(this); |
|||
query |
|||
.selectAll('.box') |
|||
.boundingClientRect(data => { |
|||
if (data && data.length) { |
|||
this.width = data[0].width; |
|||
this.setLevel(); |
|||
} |
|||
}) |
|||
.exec(); |
|||
}); |
|||
}, |
|||
|
|||
methods: { |
|||
setLevel() { |
|||
if (!this.finishResult) return; |
|||
|
|||
if (this.finishResult <= 0.5) { |
|||
this.setParam(1, 0); |
|||
} else if (this.finishResult <= 1) { |
|||
this.setParam(1, 1); |
|||
} else if (this.finishResult <= 1.5) { |
|||
this.setParam(2, 2); |
|||
} else if (this.finishResult <= 2) { |
|||
this.setParam(2, 3); |
|||
} else if (this.finishResult <= 2.5) { |
|||
this.setParam(3, 4); |
|||
} else { |
|||
this.setParam(3, 5); |
|||
} |
|||
this.setBox(); |
|||
}, |
|||
|
|||
setParam(type, value) { |
|||
const { level, width } = this; |
|||
if (type == 1) { |
|||
level.color = '#1890FF'; |
|||
level.value = '轻松完成'; |
|||
level.bgPic = 'https://www.tall.wiki/staticrec/yanyuan/bubble-blue.png'; |
|||
level.boxBg = 'bg-blue-500'; |
|||
} |
|||
if (type == 2) { |
|||
level.color = '#F4C130'; |
|||
level.value = '略有困难'; |
|||
level.bgPic = 'https://www.tall.wiki/staticrec/yanyuan/bubble-yellow.png'; |
|||
level.boxBg = 'bg-yellow-500'; |
|||
} |
|||
if (type == 3) { |
|||
level.color = '#EB5A0D'; |
|||
level.value = '非常困难'; |
|||
level.bgPic = 'https://www.tall.wiki/staticrec/yanyuan/bubble-red.png'; |
|||
level.boxBg = 'bg-red-500'; |
|||
} |
|||
level.left = value * width + 'px'; |
|||
}, |
|||
|
|||
setBox() { |
|||
let index = 0; |
|||
this.levels.forEach((line, i) => { |
|||
if (this.finishResult > i / 2) { |
|||
index = i + 1; |
|||
} |
|||
if (this.finishResult === i / 2) { |
|||
index = i; |
|||
} |
|||
if (i < index) { |
|||
line.checked = true; |
|||
} else { |
|||
line.checked = false; |
|||
} |
|||
}); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.box { |
|||
margin-right: 2px; |
|||
} |
|||
|
|||
.bubble { |
|||
position: absolute; |
|||
top: -40px; |
|||
width: 70px; |
|||
height: 30px; |
|||
line-height: 26px; |
|||
text-align: center; |
|||
font-size: 14px; |
|||
} |
|||
|
|||
.num { |
|||
width: 30rpx; |
|||
height: 30rpx; |
|||
text-align: center; |
|||
line-height: 30rpx; |
|||
border-radius: 50%; |
|||
border: 1px solid $uni-bg-color-blue; |
|||
color: $uni-bg-color-blue; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue