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

fix： 维度样式处理

Browse Source
This commit is contained in:
杨航
2025-12-03 15:55:13 +08:00
parent 874022a18b
commit ef5eec82fb
6 changed files with 155 additions and 124 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
+3 -2
View File
@@ -52,7 +52,7 @@
<view class="body-bottom">
<view class="body-bottom-title">维度评价总览</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}}： <text style="color: #06f">{{ item.traGrade }}</text>/<text style="color: #f56c6c">{{ item.totalGrade }}</text>
<!-- <image class="item-title-icon" src="@/static/images/sparring/info-icon.png"></image> -->
</view>
<view class="item-cont">{{item.settDesc}}</view>
@@ -214,10 +214,11 @@
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 || '维度'
}
})