From 8409783c26564d4af172de078b5ae2d71e57daf3 Mon Sep 17 00:00:00 2001
From: yanghang <icho.yang@scai-global.com>
Date: Fri, 18 Jul 2025 11:03:47 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E7=AC=AC=E4=BA=94=E7=BB=B4?=
 =?UTF-8?q?=E5=BA=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/course/components/chartFive.vue   | 318 ++++++++++++++++++++
 src/pages/course/components/talkingItem.vue |   6 +-
 src/pages/index/dialog.vue                  |  51 ++--
 3 files changed, 353 insertions(+), 22 deletions(-)
 create mode 100644 src/pages/course/components/chartFive.vue

diff --git a/src/pages/course/components/chartFive.vue b/src/pages/course/components/chartFive.vue
new file mode 100644
index 00000000..5928e501
--- /dev/null
+++ b/src/pages/course/components/chartFive.vue
@@ -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>
\ No newline at end of file
diff --git a/src/pages/course/components/talkingItem.vue b/src/pages/course/components/talkingItem.vue
index edc1b881..76700155 100644
--- a/src/pages/course/components/talkingItem.vue
+++ b/src/pages/course/components/talkingItem.vue
@@ -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;
diff --git a/src/pages/index/dialog.vue b/src/pages/index/dialog.vue
index a1f5b782..bbd12434 100644
--- a/src/pages/index/dialog.vue
+++ b/src/pages/index/dialog.vue
@@ -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