329 lines
8.0 KiB
Vue
329 lines
8.0 KiB
Vue
<template>
|
||
<view class="chart-box" :style="allStyle">
|
||
<view class="cont-box">
|
||
<view v-for="width in 5" :class="'total-line total-line' + width"></view>
|
||
<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 || item.gradeDimens }}</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;
|
||
|
||
.total-line{
|
||
width: 57.7%;
|
||
height: 3rpx;
|
||
background-color: rgba(255, 255, 255, .3);
|
||
position: absolute;
|
||
overflow: hidden;
|
||
z-index: 20;
|
||
&.total-line1{
|
||
top: 40.5%;
|
||
left: 49.5%;
|
||
transform: rotateZ(162deg);
|
||
}
|
||
&.total-line2{
|
||
top: 40.5%;
|
||
left:-6.5%;
|
||
transform: rotateZ(18deg);
|
||
}
|
||
&.total-line3{
|
||
top: 21.5%;
|
||
left: 21%;
|
||
transform: rotateZ(-90deg);
|
||
}
|
||
&.total-line4{
|
||
top: 72.5%;
|
||
left: 4.5%;
|
||
transform: rotateZ(-54deg);
|
||
}
|
||
&.total-line5{
|
||
top: 72.5%;
|
||
left: 37.5%;
|
||
transform: rotateZ(-126deg);
|
||
}
|
||
}
|
||
@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> |