新增第五维度
This commit is contained in:
yanghang
@@ -0,0 +1,318 @@
|
||||
<template>
|
||||
<view class="chart-box" :style="allStyle">
|
||||
<view class="cont-box">
|
||||
<view v-for="width in 3" :class="`percent-${width * 25}`"></view>
|
||||
<view class="data-box">
|
||||
<view class="line-box">
|
||||
<view v-for="width in 3" :class="`percent-${width * 25}`"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="title">
|
||||
<image class="title-icon" src="@/static/images/course/edit.png" alt=""> </image>
|
||||
改进建议：
|
||||
</view>
|
||||
<view class="total-score">
|
||||
<view class="score-num">{{ score }}</view>分
|
||||
<image class="total-score-icon" src="@/static/images/course/score.png" alt=""></image>
|
||||
</view>
|
||||
<view v-for="(item,index) in dataList" :class="['score-item', 'score-item'+(index+1)]">
|
||||
<view class="score-item-name">{{ item.gradeDimensName }}</view>
|
||||
<view class="score-item-score">{{ item.anlyGrade }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default{
|
||||
props:{
|
||||
dataList:{
|
||||
default:() => [],
|
||||
type: Array
|
||||
},
|
||||
score:{
|
||||
default: 0,
|
||||
type: [Number,String]
|
||||
},
|
||||
size:{
|
||||
default: 262,
|
||||
type: [Number,String]
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
dataValue(){
|
||||
return this.dataList.map(t=>t.anlyGrade)
|
||||
},
|
||||
chartWidth(){
|
||||
return this.size + 'rpx'
|
||||
},
|
||||
chartHeight(){
|
||||
return this.size + 'rpx'
|
||||
},
|
||||
scoreMargin1Y(){
|
||||
return '-' + (this.size/2 - 25) + 'rpx'
|
||||
},
|
||||
scoreMargin2X(){
|
||||
return `calc(-50% + ${this.size/2 + 60}rpx)`
|
||||
},
|
||||
scoreMargin2Y(){
|
||||
return `calc(-50% - ${this.size * .077}rpx)`
|
||||
},
|
||||
scoreMargin3X(){
|
||||
return `calc(-50% + ${this.size * .38}rpx)`
|
||||
},
|
||||
scoreMargin3Y(){
|
||||
return (this.size/2 + 20) + 'rpx'
|
||||
},
|
||||
scoreMargin4X(){
|
||||
return `calc(-50% - ${this.size * .38}rpx)`
|
||||
},
|
||||
scoreMargin4Y(){
|
||||
return this.scoreMargin3Y
|
||||
},
|
||||
scoreMargin5X(){
|
||||
return `calc(-50% - ${this.size /2 + 60}rpx)`
|
||||
},
|
||||
scoreMargin5Y(){
|
||||
return this.scoreMargin2Y
|
||||
},
|
||||
styleFive(){
|
||||
let base = 50
|
||||
let _tx = 50
|
||||
let _ty = 0
|
||||
let _rx = 50 + base*Math.cos(1/10 * Math.PI)
|
||||
let _ry = 50 - base*Math.sin(1/10 * Math.PI)
|
||||
let _bx = 50 + base*Math.sin(1/5 * Math.PI)
|
||||
let _by = 50 + base*Math.cos(1/5 * Math.PI)
|
||||
let _lx = 50 - base*Math.sin(1/5 * Math.PI)
|
||||
let _ly = 50 + base*Math.cos(1/5 * Math.PI)
|
||||
let _lxl = 50 - base*Math.cos(1/10 * Math.PI)
|
||||
let _lyl = 50 - base*Math.sin(1/10 * Math.PI)
|
||||
return `polygon(${_tx}% ${_ty}%, ${_rx}% ${_ry}%, ${_bx}% ${_by}%, ${_lx}% ${_ly}%, ${_lxl}% ${_lyl}%)`
|
||||
},
|
||||
styleFiveResult(){
|
||||
let score = this.dataList
|
||||
if(score.length >= 5){
|
||||
let base = 50
|
||||
let _tx = 50
|
||||
let _ty = 50 - score[0] * 50 / 100
|
||||
let _rx = 50 + base*Math.cos(1/10 * Math.PI) / 100 * score[1]
|
||||
let _ry = 50 - base*Math.sin(1/10 * Math.PI) / 100 * score[1]
|
||||
let _bx = 50 + base*Math.sin(1/5 * Math.PI) / 100 * score[2]
|
||||
let _by = 50 + base*Math.cos(1/5 * Math.PI) / 100 * score[2]
|
||||
let _lx = 50 - base*Math.sin(1/5 * Math.PI) / 100 * score[3]
|
||||
let _ly = 50 + base*Math.cos(1/5 * Math.PI) / 100 * score[3]
|
||||
let _lxl = 50 - base*Math.cos(1/10 * Math.PI) / 100 * score[4]
|
||||
let _lyl = 50 - base*Math.sin(1/10 * Math.PI) / 100 * score[4]
|
||||
return `polygon(${_tx}% ${_ty}%, ${_rx}% ${_ry}%, ${_bx}% ${_by}%, ${_lx}% ${_ly}%, ${_lxl}% ${_lyl}%)`
|
||||
}else{
|
||||
return this.styleFive
|
||||
}
|
||||
},
|
||||
allStyle(){
|
||||
return {
|
||||
'--styleFive': this.styleFive,
|
||||
'--styleFiveResult': this.styleFiveResult,
|
||||
'--chartWidth': this.chartWidth,
|
||||
'--chartHeight': this.chartHeight,
|
||||
'--scoreMargin1Y': this.scoreMargin1Y,
|
||||
'--scoreMargin2X': this.scoreMargin2X,
|
||||
'--scoreMargin2Y': this.scoreMargin2Y,
|
||||
'--scoreMargin3X': this.scoreMargin3X,
|
||||
'--scoreMargin3Y': this.scoreMargin3Y,
|
||||
'--scoreMargin4X': this.scoreMargin4X,
|
||||
'--scoreMargin4Y': this.scoreMargin4Y,
|
||||
'--scoreMargin5X': this.scoreMargin5X,
|
||||
'--scoreMargin5Y': this.scoreMargin5Y
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.chart-box{
|
||||
width: 100%;
|
||||
height: 580rpx;
|
||||
background:linear-gradient( 270deg, #4a74ff 0%, #6fa7fe 100%);
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
border-radius: 16rpx;
|
||||
margin-bottom: 20rpx;
|
||||
.cont-box{
|
||||
background-color: #87abfe;
|
||||
width: var(--chartWidth);
|
||||
height: var(--chartHeight);
|
||||
clip-path: var(--styleFive);
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
margin-top: 25rpx;
|
||||
&::before{
|
||||
content: '';
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 3rpx;
|
||||
background-color: rgba(255, 255, 255, .3);
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 20;
|
||||
}
|
||||
&::after{
|
||||
content: '';
|
||||
display: block;
|
||||
height: 100%;
|
||||
width: 3rpx;
|
||||
background-color: rgba(255, 255, 255, .3);
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 20;
|
||||
}
|
||||
@for $i from 1 through 3 {
|
||||
.percent-#{$i*25}{
|
||||
width: $i * 25%;
|
||||
height: $i * 25%;
|
||||
clip-path: var(--styleFive);
|
||||
background-color: rgba(255, 255, 255, .3);
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: (4 - $i) * 2;
|
||||
&::before{
|
||||
content: '';
|
||||
display: block;
|
||||
width: calc(100% - 10rpx);
|
||||
height: calc(100% - 10rpx);
|
||||
background-color: #87abfe;
|
||||
clip-path: var(--styleFive);
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
.data-box{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
clip-path: var(--styleFiveResult);
|
||||
position: absolute;
|
||||
background-color: #fff;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 12;
|
||||
overflow: hidden;
|
||||
.line-box{
|
||||
display: block;
|
||||
width: calc(100% - 24rpx);
|
||||
height: calc(100% - 24rpx);
|
||||
// background-color: #6691fe;
|
||||
background-color: #6691fe;
|
||||
clip-path: var(--styleFiveResult);
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 14;
|
||||
}
|
||||
|
||||
@for $i from 1 through 3 {
|
||||
.percent-#{$i*25}{
|
||||
background-color: rgba(255, 255, 255, .1);
|
||||
z-index: (4 - $i) * 2 + 10;
|
||||
&::before{
|
||||
background-color: #6692ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.title{
|
||||
padding: 24rpx;
|
||||
line-height: 46rpx;
|
||||
font-size: 32rpx;
|
||||
color: #fff;
|
||||
.title-icon{
|
||||
width: 27rpx;
|
||||
height: 27rpx;
|
||||
}
|
||||
}
|
||||
.total-score{
|
||||
position: absolute;
|
||||
right: 30rpx;
|
||||
top:30rpx;
|
||||
width: 100rpx;
|
||||
height: 80rpx;
|
||||
line-height: 70rpx;
|
||||
font-size: 30rpx;
|
||||
color: #fff;
|
||||
white-space: nowrap;
|
||||
text-shadow: 0 4px 12px rgba(0, 0, 0, .33);
|
||||
.score-num{
|
||||
display: inline-block;
|
||||
font-size: 60rpx;
|
||||
line-height: 70rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
.total-score-icon{
|
||||
width: 100%;
|
||||
height: 16rpx;
|
||||
position: absolute;
|
||||
bottom:0;
|
||||
left:0;
|
||||
}
|
||||
}
|
||||
.score-item{
|
||||
position: absolute;
|
||||
color: #fff;
|
||||
width: 120rpx;
|
||||
text-align: center;
|
||||
.score-item-name{
|
||||
font-size: 28rpx;
|
||||
line-height: 36rpx;
|
||||
margin-bottom: 4rpx;
|
||||
}
|
||||
.score-item-score{
|
||||
font-size: 38rpx;
|
||||
line-height: 46rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
&.score-item1{
|
||||
left: 50%;
|
||||
margin-left: -60rpx;
|
||||
bottom: 50%;
|
||||
transform: translateY(var(--scoreMargin1Y));
|
||||
}
|
||||
&.score-item2{
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(var(--scoreMargin2X), var(--scoreMargin2Y));
|
||||
}
|
||||
&.score-item3{
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(var(--scoreMargin3X), var(--scoreMargin3Y));
|
||||
}
|
||||
&.score-item4{
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(var(--scoreMargin4X), var(--scoreMargin3Y));
|
||||
}
|
||||
&.score-item5{
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(var(--scoreMargin5X), var(--scoreMargin2Y));
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -30,6 +30,7 @@
|
||||
<view v-if="type === 5 && !dataInfo.isLoading" style="padding-top: 16rpx;">
|
||||
<ChartFour v-if="dataInfo.evalDimens.length === 4" :dataList="dataInfo.evalDimens" :score="dataInfo.intrctGrade"/>
|
||||
<ChartThree v-if="dataInfo.evalDimens.length === 3" :dataList="dataInfo.evalDimens" :score="dataInfo.intrctGrade"/>
|
||||
<ChartFive v-if="dataInfo.evalDimens.length === 5" :dataList="dataInfo.evalDimens" :score="dataInfo.intrctGrade"/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="btns-cont" v-show="!dataInfo.isLoading">
|
||||
@@ -189,6 +190,7 @@ import { downloadVoiceFile, uploadVoiceFile, getAudioByText } from "@/api/common
|
||||
import { studyParagraphOverApi, getAskAboutRawApi } from "@/api/study.js"
|
||||
import ChartFour from "./chartFour.vue"
|
||||
import ChartThree from "./chartThree.vue"
|
||||
import ChartFive from './chartFive.vue'
|
||||
import common from '@/common/common';
|
||||
import { getUserInfo } from '@/common/common';
|
||||
import { useStorageStore } from "@/store/storage.js"
|
||||
@@ -522,7 +524,7 @@ const audioCacheObj = computed(() => storageStore.audioObj)
|
||||
width: 76rpx;
|
||||
height: 76rpx;
|
||||
border: 3rpx solid #fff;
|
||||
background-color: #ccc;
|
||||
background-color: #f1f1f1;
|
||||
overflow: hidden;
|
||||
border-radius: 10rpx;
|
||||
margin-right: 16rpx;
|
||||
@@ -698,7 +700,7 @@ const audioCacheObj = computed(() => storageStore.audioObj)
|
||||
width: 76rpx;
|
||||
height: 76rpx;
|
||||
border: 3rpx solid #fff;
|
||||
background-color: #ccc;
|
||||
background-color: #f1f1f1;
|
||||
overflow: hidden;
|
||||
border-radius: 10rpx;
|
||||
margin-left: 16rpx;
|
||||
|
||||
+31
-20
@@ -152,18 +152,18 @@ import {
|
||||
|
||||
const initsocketTask = () => {
|
||||
socketStore.creatSocket('/traask/asksocket/open?summary=')
|
||||
unref(SocketObj).on('open', (res)=>{
|
||||
if(!answerIsOver.value){
|
||||
sendMessage({
|
||||
"commond" : 'ASK-RE-START',
|
||||
"body" : {
|
||||
reqBatch: reqBatch.value,
|
||||
seqNo: seqNo.value,
|
||||
answerContent: answerText.value
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
// unref(SocketObj).on('open', (res)=>{
|
||||
// if(!answerIsOver.value){
|
||||
// sendMessage({
|
||||
// "commond" : 'ASK-RE-START',
|
||||
// "body" : {
|
||||
// reqBatch: reqBatch.value,
|
||||
// seqNo: seqNo.value,
|
||||
// answerContent: answerText.value
|
||||
// }
|
||||
// })
|
||||
// }
|
||||
// })
|
||||
unref(SocketObj).on('message', (res)=>{
|
||||
const { rtnCode, body, commond } = JSON.parse(res.data)
|
||||
let _id = new Date().getTime() + 'id'
|
||||
@@ -414,14 +414,25 @@ import {
|
||||
})
|
||||
onShow(()=>{
|
||||
if(watchFlag.value === 1) return
|
||||
socketStore?.createSocket?.()
|
||||
sendMessage({
|
||||
"commond" : 'ASK-START',
|
||||
"body" : {
|
||||
mascotId: mascotId.value,
|
||||
deviceImei: ''
|
||||
}
|
||||
})
|
||||
socketStore?.createSocket()
|
||||
if(!answerIsOver.value){
|
||||
sendMessage({
|
||||
"commond" : 'ASK-RE-START',
|
||||
"body" : {
|
||||
reqBatch: reqBatch.value,
|
||||
seqNo: seqNo.value,
|
||||
answerContent: answerText.value
|
||||
}
|
||||
})
|
||||
}else{
|
||||
sendMessage({
|
||||
"commond" : 'ASK-START',
|
||||
"body" : {
|
||||
mascotId: mascotId.value,
|
||||
deviceImei: ''
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
onUnload(()=>{
|
||||
watchFlag.value = 1
|
||||
|
||||
Reference in New Issue
Block a user