tianyan/tra-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'develop' of http://25.13.9.101:9000/K17_AITS/tra-app into develop

Browse Source
This commit is contained in:
田岩
2025-12-03 16:13:04 +08:00
parent 0f5dea958e bd1182fe27
commit 88d9456193
6 changed files with 197 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/course/components/chartFive.vue
+139 -114
View File
@@ -10,119 +10,120 @@
</view>
</view>
<view class="title" v-if="fromType === 'crs'">
<image class="title-icon" src="@/static/images/course/edit.png" alt=""> </image>
<image class="title-icon" src="@/static/images/course/edit.png" alt=""> </image>
改进建议：
</view>
<view class="title" v-if="fromType === 'tra'">
<image class="title-icon icon-tra" src="@/static/images/sparring/den-icon.png" alt=""> </image>
<image class="title-icon icon-tra" src="@/static/images/sparring/den-icon.png" alt=""> </image>
维度分析：
</view>
<view class="total-score" v-if="fromType === 'crs'">
<view class="score-num">{{ score }}</view>分
<image class="total-score-icon" src="@/static/images/course/score.png" alt=""></image>
<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 v-for="(item,index) in dataList" :class="['score-item', 'score-item'+(index+1)]">
<view class="score-item-name">{{ item.gradeDimensName || item.gradeDimens }}</view>
<view class="score-item-score">{{ item.anlyGrade }}</view>
</view>
</view>
</template>
<script>
export default{
props:{
dataList:{
default:() => [],
export default {
props: {
dataList: {
default: () => [],
type: Array
},
score:{
score: {
default: 0,
type: [Number,String]
type: [Number, String]
},
size:{
size: {
default: 262,
type: [Number,String]
type: [Number, String]
},
fromType:{
fromType: {
default: 'crs',
type: String
}
},
data(){
data() {
return {
}
},
computed:{
dataValue(){
return this.dataList.map(t=>t.anlyGrade)
computed: {
dataValue() {
// return this.dataList.map(t=>t.anlyGrade)
return this.dataList.map(t=>t.anlyGrade / (t.totalGrade||100) * 100)
},
chartWidth(){
chartWidth() {
return this.size + 'rpx'
},
chartHeight(){
chartHeight() {
return this.size + 'rpx'
},
scoreMargin1Y(){
return '-' + (this.size/2 - 25) + 'rpx'
scoreMargin1Y() {
return '-' + (this.size / 2 - 25) + 'rpx'
},
scoreMargin2X(){
scoreMargin2X() {
return `calc(-50% + ${this.size/2 + 60}rpx)`
},
scoreMargin2Y(){
scoreMargin2Y() {
return `calc(-50% - ${this.size * .077}rpx)`
},
scoreMargin3X(){
scoreMargin3X() {
return `calc(-50% + ${this.size * .38}rpx)`
},
scoreMargin3Y(){
return (this.size/2 + 20) + 'rpx'
scoreMargin3Y() {
return (this.size / 2 + 20) + 'rpx'
},
scoreMargin4X(){
scoreMargin4X() {
return `calc(-50% - ${this.size * .38}rpx)`
},
scoreMargin4Y(){
scoreMargin4Y() {
return this.scoreMargin3Y
},
scoreMargin5X(){
scoreMargin5X() {
return `calc(-50% - ${this.size /2 + 60}rpx)`
},
scoreMargin5Y(){
scoreMargin5Y() {
return this.scoreMargin2Y
},
styleFive(){
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)
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(){
styleFiveResult() {
let score = this.dataValue
if(score.length >= 5){
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]
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{
} else {
return this.styleFive
}
},
allStyle(){
allStyle() {
return {
'--styleFive': this.styleFive,
'--styleFiveResult': this.styleFiveResult,
@@ -143,76 +144,84 @@
}
</script>
<style lang="scss" scoped>
.chart-box{
.chart-box {
width: 100%;
height: 580rpx;
background:linear-gradient( 270deg, #4a74ff 0%, #6fa7fe 100%);
background: linear-gradient(270deg, #4a74ff 0%, #6fa7fe 100%);
overflow: hidden;
position: relative;
border-radius: 16rpx;
margin-bottom: 20rpx;
.cont-box{
.cont-box {
background-color: #87abfe;
width: var(--chartWidth);
height: var(--chartHeight);
clip-path: var(--styleFive);
clip-path: var(--styleFive);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin-top: 25rpx;
.total-line{
.total-line {
width: 57.7%;
height: 3rpx;
height: 3rpx;
background-color: rgba(255, 255, 255, .3);
position: absolute;
overflow: hidden;
z-index: 20;
&.total-line1{
&.total-line1 {
top: 40.5%;
left: 49.5%;
transform: rotateZ(162deg);
}
&.total-line2{
&.total-line2 {
top: 40.5%;
left:-6.5%;
left: -6.5%;
transform: rotateZ(18deg);
}
&.total-line3{
&.total-line3 {
top: 21.5%;
left: 21%;
transform: rotateZ(-90deg);
}
&.total-line4{
&.total-line4 {
top: 72.5%;
left: 4.5%;
transform: rotateZ(-54deg);
}
&.total-line5{
&.total-line5 {
top: 72.5%;
left: 37.5%;
transform: rotateZ(-126deg);
}
}
@for $i from 1 through 3 {
.percent-#{$i*25}{
.percent-#{$i*25} {
width: $i * 25%;
height: $i * 25%;
clip-path: var(--styleFive);
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{
&::before {
content: '';
display: block;
width: calc(100% - 10rpx);
height: calc(100% - 10rpx);
background-color: #87abfe;
clip-path: var(--styleFive);
clip-path: var(--styleFive);
position: absolute;
top: 50%;
left: 50%;
@@ -220,53 +229,58 @@
}
}
}
.data-box{
width: 100%;
height: 100%;
clip-path: var(--styleFiveResult);
.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;
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;
}
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{
.title {
padding: 24rpx;
line-height: 46rpx;
font-size: 32rpx;
color: #fff;
position: relative;
.title-icon {
width: 27rpx;
height: 27rpx;
&.icon-tra{
&.icon-tra {
position: relative;
top: 4rpx;
width: 32rpx;
@@ -274,10 +288,11 @@
}
}
}
.total-score{
.total-score {
position: absolute;
right: 30rpx;
top:30rpx;
top: 30rpx;
width: 100rpx;
height: 80rpx;
line-height: 70rpx;
@@ -285,57 +300,67 @@
color: #fff;
white-space: nowrap;
text-shadow: 0 4px 12px rgba(0, 0, 0, .33);
.score-num{
.score-num {
display: inline-block;
font-size: 60rpx;
line-height: 70rpx;
font-weight: bold;
}
.total-score-icon{
.total-score-icon {
width: 100%;
height: 16rpx;
position: absolute;
bottom:0;
left:0;
bottom: 0;
left: 0;
}
}
.score-item{
.score-item {
position: absolute;
color: #fff;
width: 120rpx;
text-align: center;
.score-item-name{
.score-item-name {
font-size: 28rpx;
line-height: 36rpx;
margin-bottom: 4rpx;
}
.score-item-score{
.score-item-score {
font-size: 38rpx;
line-height: 46rpx;
font-weight: bold;
}
&.score-item1{
&.score-item1 {
left: 50%;
margin-left: -60rpx;
bottom: 50%;
transform: translateY(var(--scoreMargin1Y));
}
&.score-item2{
&.score-item2 {
left: 50%;
top: 50%;
transform: translate(var(--scoreMargin2X), var(--scoreMargin2Y));
}
&.score-item3{
&.score-item3 {
left: 50%;
top: 50%;
transform: translate(var(--scoreMargin3X), var(--scoreMargin3Y));
}
&.score-item4{
&.score-item4 {
left: 50%;
top: 50%;
transform: translate(var(--scoreMargin4X), var(--scoreMargin3Y));
}
&.score-item5{
&.score-item5 {
left: 50%;
top: 50%;
transform: translate(var(--scoreMargin5X), var(--scoreMargin2Y));
src/pages/course/components/chartFour.vue
+5 -3
View File
@@ -51,7 +51,8 @@
}
})
const dataValue = computed(() => {
return props.dataList.map(t => t.anlyGrade)
// return props.dataList.map(t => t.anlyGrade)
return props.dataList.map(t => t.anlyGrade / (t.totalGrade || 100) * 100)
})
const chartWidth = computed(() => props.size + 'rpx')
const chartHeight = computed(() => props.size + 'rpx')
@@ -205,11 +206,12 @@
font-size: 32rpx;
color: #fff;
position: relative;
.title-icon {
width: 27rpx;
height: 27rpx;
&.icon-tra{
&.icon-tra {
position: relative;
top: 4rpx;
width: 32rpx;
src/pages/course/components/chartSeven.vue
+1 -1
View File
@@ -54,7 +54,7 @@
},
computed:{
dataValue(){
return this.dataList.map(t=>t.anlyGrade)
return this.dataList.map(t=>t.anlyGrade / (t.totalGrade||100) * 100)
},
chartWidth(){
return this.size + 'rpx'
src/pages/course/components/chartSix.vue
+2 -1
View File
@@ -54,7 +54,8 @@
},
computed:{
dataValue(){
return this.dataList.map(t=>t.anlyGrade)
// return this.dataList.map(t=>t.anlyGrade)
return this.dataList.map(t=>t.anlyGrade / (t.totalGrade||100) * 100)
},
chartWidth(){
return this.size + 'rpx'
src/pages/course/components/chartThree.vue
+5 -3
View File
@@ -54,7 +54,8 @@
}
})
const dataValue = computed(() => {
return props.dataList.map(t => t.anlyGrade)
// return props.dataList.map(t => t.anlyGrade)
return props.dataList.map(t => t.anlyGrade / (t.totalGrade || 100) * 100)
})
let _scale = .9
const chartWidth = computed(() => props.size / _scale + 'rpx')
@@ -222,11 +223,12 @@
font-size: 32rpx;
color: #fff;
position: relative;
.title-icon {
width: 27rpx;
height: 27rpx;
&.icon-tra{
&.icon-tra {
position: relative;
top: 4rpx;
width: 32rpx;
src/pages/sparring/result.vue
+45 -26
View File
@@ -50,10 +50,21 @@
</view>
</view>
<view class="body-bottom">
<view class="body-bottom-title">维度评价总览</view>
<view class="body-bottom-title">维度评价总览
<view style="float: right;">
<text style="font-weight:bold;color: #06f;font-size:29rpx">得分</text>
<text style="font-size:22rpx"> / </text>
<text style="color: #f56c6c;font-size:24rpx">总分</text>
</view>
</view>
<view class="body-bottom-item" v-for="item in evalDimens">
<view class="item-title">{{item.gradeDimensName}}： {{ item.traGrade }}
<view class="item-title">{{item.gradeDimensName}}：
<!-- <image class="item-title-icon" src="@/static/images/sparring/info-icon.png"></image> -->
<view style="float: right;">
<text style="font-weight:bold;color: #06f">{{ item.traGrade }}</text>
<text style="font-size:22rpx"> / </text>
<text style="color: #f56c6c;font-size:24rpx">{{ item.totalGrade }}</text>
</view>
</view>
<view class="item-cont">{{item.settDesc}}</view>
</view>
@@ -104,11 +115,15 @@
import {
partnerChatReport
} from "@/api/sparring.js"
import badge from '@/components/points-and-badge/badge';
import badge from '@/components/points-and-badge/badge';
import points from '@/components/points-and-badge/points';
import usePointsAndBadge from '@/components/points-and-badge/usePointsAndBadge';
const { pointAndBadgesRun, badgeRef, pointsRef } = usePointsAndBadge();
const {
pointAndBadgesRun,
badgeRef,
pointsRef
} = usePointsAndBadge();
const traId = ref('')
const execId = ref('')
const talkingType = ref('')
@@ -134,7 +149,7 @@
const showTalkList = computed(() => {
return allTalkList.value.slice(0, 2)
})
const maxHeight = computed(()=>{
const maxHeight = computed(() => {
return allTalkList.value.length * 800 + 'rpx'
})
const hideTalkList = computed(() => {
@@ -200,24 +215,25 @@
partnerChatReport({
traId: traId.value,
execId: execId.value,
talkingType: isPreview.value? 'preview' : 'practice'
talkingType: isPreview.value ? 'preview' : 'practice'
// traId: 'PARTNERINFO02501812207220251103160409000007402',
// execId: 'db2f275b-c04a-4572-83dd-74a95ff49d67'
}).then(res => {
if (res.body.reportFlag){
if (res.body.reportFlag) {
traInfo.value = res.body.traPartnerInfo || {}
roleInfo.value = res.body.traPartnerCharacterInfoVo || {}
traTm.value = res.body.traTmFmtHMS || '0'
traTm.value = res.body.traTmFmtHMS || '0'
isPass.value = res.body.traPartnerExecuteHisVo?.traResult === 'P'
totalScore.value = res.body.traPartnerExecuteHisVo?.traGrade || '0'
positiveList.value = res.body.positiveList || []
negativeList.value = res.body.negativeList || []
hitBanWords.value = res.body.traPartnerExecuteHisVo?.hitBanWords || ''
let _evalDimens = res.body.traPartnerSettlement || []
evalDimens.value = _evalDimens.map(t => {
evalDimens.value = _evalDimens.map((t, index) => {
return {
...t,
anlyGrade: t.traGrade,
totalGrade: t.pct || 100,
gradeDimensName: t.gradeDimensName || '维度'
}
})
@@ -251,16 +267,16 @@
isLoading.value = false
setTimeout(() => {
showLoading.value = false
if(isPass.value && isOver.value && !isPreview.value){
pointAndBadgesRun(talkingType.value === '01' ? '07': '08', '', ()=>{})
if (isPass.value && isOver.value && !isPreview.value) {
pointAndBadgesRun(talkingType.value === '01' ? '07' : '08', '', () => {})
}
}, 800)
} else {
if(canLoad.value){
if (canLoad.value) {
setTimeout(getData, 2000)
}
}
}).catch(()=>{
}
}).catch(() => {
isLoading.value = false
})
}
@@ -277,16 +293,16 @@
const isPreview = ref(false)
const isOver = ref(false)
const goBack = () => {
if(isOver.value){
if (isOver.value) {
console.log(3)
common.navigateBack(3)
}else{
} else {
common.navigateBack()
}
}
const canLoad= ref(false)
const canLoad = ref(false)
onLoad((params) => {
canLoad.value= true
canLoad.value = true
traId.value = params.traId;
execId.value = params.execId
talkingType.value = params.type;
@@ -295,8 +311,8 @@
isOver.value = params.isOver === '1'
getData()
});
onUnload(()=>{
canLoad.value= false
onUnload(() => {
canLoad.value = false
})
onMounted(() => {})
onBackPress((res) => res.from === 'backbutton');
@@ -365,7 +381,8 @@
top: var(--status-bar-height);
left: 0;
z-index: 2;
.top-desc{
.top-desc {
position: absolute;
bottom: 0;
font-size: 18rpx;
@@ -373,6 +390,7 @@
left: 50%;
transform: translateX(-50%);
}
.top-title {
height: 90rpx;
// background-color: red;
@@ -475,6 +493,7 @@
padding-top: 10rpx;
position: relative;
min-height: 100rpx;
.user-info {
overflow: hidden;
height: 92rpx;
@@ -513,8 +532,8 @@
}
}
}
.loading-box{
.loading-box {
min-height: 180rpx;
width: 100%;
background: url(@/static/images/examination/getting_in.gif) no-repeat;
@@ -522,7 +541,7 @@
background-size: auto 160rpx;
margin-top: 100rpx;
}
.collepse-tab {
position: absolute;
width: 300rpx;
@@ -602,7 +621,7 @@
line-height: 40rpx;
position: relative;
padding: 0rpx 46rpx 0rpx 26rpx;
padding: 0rpx 6rpx 0rpx 26rpx;
line-height: 42rpx;
font-size: 29rpx;
margin-bottom: 16rpx;