wangtianjiao/vueapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 增加知识图谱的数值

Browse Source
This commit is contained in:
王天骄
2026-06-23 16:44:01 +08:00
parent d2669fb11e
commit 89f6d06710
32 changed files with 135 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/assessment/assessment.vue
+76 -29
View File
@@ -52,30 +52,34 @@
<text>临床胜任力雷达图</text>
</view>
<view class="radar-wrap">
<svg v-if="radarItems.length >= 3" class="radar-svg" viewBox="0 0 400 400">
<circle class="radar-grid" cx="200" cy="200" r="160"></circle>
<circle class="radar-grid" cx="200" cy="200" r="120"></circle>
<circle class="radar-grid" cx="200" cy="200" r="80"></circle>
<circle class="radar-grid" cx="200" cy="200" r="40"></circle>
<line
v-for="item in radarItems"
:key="`axis-${item.label}`"
class="radar-grid"
x1="200"
:x2="item.axisX"
y1="200"
:y2="item.axisY"
></line>
<polygon class="radar-area" :points="radarPolygonPoints"></polygon>
<text
<view v-if="radarItems.length >= 3" class="radar-stage">
<svg class="radar-svg" viewBox="0 0 400 400">
<circle class="radar-grid" cx="200" cy="200" r="160"></circle>
<circle class="radar-grid" cx="200" cy="200" r="120"></circle>
<circle class="radar-grid" cx="200" cy="200" r="80"></circle>
<circle class="radar-grid" cx="200" cy="200" r="40"></circle>
<line
v-for="item in radarItems"
:key="`axis-${item.label}`"
class="radar-grid"
x1="200"
:x2="item.axisX"
y1="200"
:y2="item.axisY"
></line>
<polygon class="radar-area" :points="radarPolygonPoints"></polygon>
</svg>
<view
v-for="item in radarItems"
:key="`label-${item.label}`"
class="radar-label"
:text-anchor="item.anchor"
:x="item.labelX"
:y="item.labelY"
>{{ item.label }}</text>
</svg>
:class="`anchor-${item.anchor}`"
:style="{ left: item.labelLeft, top: item.labelTop }"
>
<text class="radar-label-name">{{ item.label }}</text>
<text class="radar-value">{{ item.displayScore }}</text>
</view>
</view>
<view v-else class="empty-data radar-empty">
<text>{{ emptyRadarText }}</text>
</view>
@@ -176,8 +180,8 @@ type BreakdownItem = {
type RadarItem = BreakdownItem & {
axisX: number
axisY: number
labelX: number
labelY: number
labelLeft: string
labelTop: string
pointX: number
pointY: number
anchor: 'start' | 'middle' | 'end'
@@ -305,7 +309,7 @@ const radarItems = computed<RadarItem[]>(() => {
return items.map((item, index) => {
const angle = -Math.PI / 2 + (Math.PI * 2 * index) / total
const axisRadius = 160
const labelRadius = 184
const labelRadius = 154
const pointRadius = axisRadius * (item.percent / 100)
const labelX = 200 + Math.cos(angle) * labelRadius
const labelY = 200 + Math.sin(angle) * labelRadius
@@ -314,8 +318,8 @@ const radarItems = computed<RadarItem[]>(() => {
...item,
axisX: roundSvgValue(200 + Math.cos(angle) * axisRadius),
axisY: roundSvgValue(200 + Math.sin(angle) * axisRadius),
labelX: roundSvgValue(labelX),
labelY: roundSvgValue(labelY),
labelLeft: `${roundSvgValue((labelX / 400) * 100)}%`,
labelTop: `${roundSvgValue((labelY / 400) * 100)}%`,
pointX: roundSvgValue(200 + Math.cos(angle) * pointRadius),
pointY: roundSvgValue(200 + Math.sin(angle) * pointRadius),
anchor: labelX < 170 ? 'end' : labelX > 230 ? 'start' : 'middle'
@@ -894,12 +898,19 @@ page {
padding: 8px 0;
}
.radar-svg {
.radar-stage {
position: relative;
width: 100%;
max-width: 240px;
aspect-ratio: 1;
}
.radar-svg {
width: 100%;
height: 100%;
aspect-ratio: 1;
}
.radar-grid {
stroke: #e2e8f0;
stroke-width: 1;
@@ -913,10 +924,46 @@ page {
}
.radar-label {
fill: #424752;
font-size: 14px;
position: absolute;
width: 76px;
color: #424752;
font-size: 12px;
line-height: 16px;
font-weight: 500;
letter-spacing: 0;
text-align: center;
word-break: break-all;
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
pointer-events: none;
}
.radar-label.anchor-start {
text-align: left;
align-items: flex-start;
transform: translate(0, -50%);
}
.radar-label.anchor-end {
text-align: right;
align-items: flex-end;
transform: translate(-100%, -50%);
}
.radar-label-name,
.radar-value {
display: block;
width: 100%;
}
.radar-value {
color: #00478d;
font-size: 12px;
line-height: 16px;
font-weight: 700;
}
.empty-data {