From 7c13b868d8b2bbd759b1d43397fc44b15c3cd372 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=8E=E5=A8=9C?= Date: Thu, 24 Apr 2025 17:09:14 +0800 Subject: [PATCH 1/2] =?UTF-8?q?=E8=AF=84=E6=B5=8B=E7=AE=A1=E7=90=86?= =?UTF-8?q?=E9=A1=B5=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 2 +- src/views/evaluate/index.vue | 319 ++++++++++++++++++- src/views/evaluate/testData.vue | 387 +++++++++++++++++++++++ src/views/knowledgeFileSection/index.vue | 14 +- 4 files changed, 716 insertions(+), 6 deletions(-) create mode 100644 src/views/evaluate/testData.vue diff --git a/package.json b/package.json index ff60789..d6658fa 100644 --- a/package.json +++ b/package.json @@ -52,7 +52,7 @@ "codemirror-editor-vue3": "^2.7.0", "color": "^4.2.3", "crypto-js": "^4.2.0", - "echarts": "^5.5.1", + "echarts": "^5.6.0", "element-plus": "^2.8.0", "exceljs": "^4.4.0", "lodash": "^4.17.21", diff --git a/src/views/evaluate/index.vue b/src/views/evaluate/index.vue index e955d4f..4cfde40 100644 --- a/src/views/evaluate/index.vue +++ b/src/views/evaluate/index.vue @@ -1,14 +1,327 @@ + + diff --git a/src/views/evaluate/testData.vue b/src/views/evaluate/testData.vue new file mode 100644 index 0000000..14d3993 --- /dev/null +++ b/src/views/evaluate/testData.vue @@ -0,0 +1,387 @@ + + + + \ No newline at end of file diff --git a/src/views/knowledgeFileSection/index.vue b/src/views/knowledgeFileSection/index.vue index 38004d7..082ae9f 100644 --- a/src/views/knowledgeFileSection/index.vue +++ b/src/views/knowledgeFileSection/index.vue @@ -45,7 +45,7 @@
{{ $t('assetFile.contentView') }}
-
+
@@ -166,7 +167,7 @@
-
+
+
+ +
+
+ +
+
+ +
-- Gitee From 17cd086a13d3382603f3d51000d0fad42b7d7dce Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=8E=E5=A8=9C?= Date: Thu, 24 Apr 2025 20:53:11 +0800 Subject: [PATCH 2/2] =?UTF-8?q?=E8=AF=84=E6=B5=8B=E7=AE=A1=E7=90=86?= =?UTF-8?q?=E6=8A=BD=E5=B1=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/evaluate/testData.vue | 565 ++++++++++++++++++-------------- 1 file changed, 310 insertions(+), 255 deletions(-) diff --git a/src/views/evaluate/testData.vue b/src/views/evaluate/testData.vue index 14d3993..de1f09b 100644 --- a/src/views/evaluate/testData.vue +++ b/src/views/evaluate/testData.vue @@ -1,19 +1,45 @@ @@ -26,7 +52,20 @@ const props = defineProps({ rowData: Object, }); -let chartInstance: echarts.ECharts | null = null; +const currentPage = ref(1); +const totalCount = ref(0); +const currentPageSize = ref(20); +const pagination = ref({ + pageSizes: [10, 20, 30, 40, 50], + layout: 'total,sizes,prev,pager,next,jumper', +}); + +const handleChangePage = (pageNum: number, pageSize: number) => { + currentPage.value = pageNum; + currentPageSize.value = pageSize; +}; + +let chartInstanceR: echarts.ECharts | null = null; let chartInstanceL: echarts.ECharts | null = null; let resizeTimer: NodeJS.Timeout | null = null; @@ -36,32 +75,18 @@ const debounceResize = () => { clearTimeout(resizeTimer); } resizeTimer = setTimeout(() => { - if (chartInstance && props.visible) { - chartInstance.resize(); + if (chartInstanceR && chartInstanceL && props.visible) { + chartInstanceR.resize(); + chartInstanceL.resize(); } }, 100); }; -// 计算环形渐变方向的核心函数 -function getCoordinates(startAngle:number, endAngle:number) { - const startRad = (startAngle - 90) * Math.PI / 180; // 转换为弧度（坐标系偏移90度） - const endRad = (endAngle - 90) * Math.PI / 180; - - // 计算起点和终点在圆上的坐标（基于0.5,0.5的圆心） - const x = 0.5 + 0.5 * Math.cos(startRad); - const y = 0.5 + 0.5 * Math.sin(startRad); - const x2 = 0.5 + 0.5 * Math.cos(endRad); - const y2 = 0.5 + 0.5 * Math.sin(endRad); - - return { x, y, x2, y2 }; -} -// 示例：当圆环从225度开始到-45度结束时 -const coords = getCoordinates(225, -45); // 返回{x: 0.146, y: 0.146, x2: 0.854, y2: 0.854} const initChart = async () => { try { // 等待DOM更新 await nextTick(); - + // 基于准备好的dom，初始化echarts实例 const chartDom = document.getElementById('rightChart'); const chartDomL = document.getElementById('leftChart'); @@ -69,215 +94,178 @@ const initChart = async () => { console.error('Chart DOM element not found'); return; } - + // 如果已经有实例，先销毁 - if (chartInstance) { - chartInstance.dispose(); + if (chartInstanceR) { + chartInstanceR.dispose(); } - - chartInstance = echarts.init(chartDom); - chartInstanceL = echarts.init(chartDomL); - const option = { - // 鼠标悬浮的提示 - tooltip: { - formatter: '{b} : {c}' - }, - series: [ - { - type: 'gauge', - min: 0, //最大值 - max: 100, //最小值 - startAngle: 200, //仪表盘起始角度。正右手侧为0度，正上方为90度，正左手侧为180度。 - endAngle: -20, //仪表盘结束角度 - itemStyle: { - color: '#f37215', //颜色 - shadowColor: 'rgba(0,138,255,0.45)', //阴影颜色 - shadowBlur: 10, //图形阴影的模糊大小 - shadowOffsetX: 2, //阴影水平方向上的偏移距离 - shadowOffsetY: 2 //阴影垂直方向上的偏移距离 - }, - progress: { - show: true, //是否显示进度条 - width: 18, //进度条宽度 - itemStyle: { - color: { - type: 'linear', - x: 1, - y: 0, - x2: 0, - y2: 1, - colorStops: [ - { - offset: 0, - color: 'green' // 0% 处的颜色 - }, - { - offset: 0.3, - color: 'yellow' // 100% 处的颜色 - }, - { - offset: 0.7, - color: 'orange' // 100% 处的颜色 - }, - { - offset: 1, - color: 'red' // 100% 处的颜色 - } - ], - global: false // 缺省为 false - } + if (chartInstanceL) { + chartInstanceL.dispose(); } - }, - pointer: { - show: false, //是否显示指针 - itemStyle: { - color: { - type: 'linear', - x: 1, - y: 0, - x2: 0, - y2: 1, - colorStops: [ - { - offset: 0, - color: '#f12711' // 0% 处的颜色 - }, - { - offset: 1, - color: '#f5af19' // 100% 处的颜色 - } - ], - global: false // 缺省为 false - } - } - }, - axisLine: { - show: false, //是否显示仪表盘轴线 - lineStyle: { - width: 18 //轴线宽度 - } - }, - axisTick: { - show: false, //是否显示刻度 - distance: -29, - itemStyle: { - color: '#fff', - width: 2 - } - }, - splitLine: { - show: false, //是否显示分隔线 - }, - axisLabel: { - show: false, //是否显示标签 - }, - title: { - show: true, //是否显示标题 - }, - detail: { - show: true, //是否显示详情 - valueAnimation: true, //是否开启标签的数字动画 - borderRadius: 8, //文字块的圆角 - // offsetCenter: [0, '70%'], //相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比 - fontSize: 50, //文字的字体大小 - fontWeight: 'bolder', //文字字体的粗细 - formatter: '{value}', //格式化函数或者字符串 - }, - data: [ - { - value: 90, - name: '高危' - } - ] - } - ] -}; -chartInstance.setOption(option); - - // chartInstance.setOption({ - // title: { - // text: '85', - // x: 'center', - // y: 'center', - // textStyle: { - // fontSize: 36, - // fontWeight: 'bold', - // color: '#333' - // } - // }, - // series: [ - // { - // type: 'gauge', - // radius: ['70%', '80%'], - // startAngle: 225, // 左下角起始（角度坐标系：0度为右侧，顺时针增加） - // endAngle: -45, // 右下角结束（等效315度） - // clockWise: true, // 顺时针填充 - // data: [ - // { - // value: 85, - // name: '完成率', - // itemStyle: { - // color: { - // type: 'linear', - // ...coords, - // colorStops: [ - // { offset: 0.0, color: '#00FF00' }, // 0%位置：绿色 - // { offset: 0.5, color: '#FFFF00' }, // 50%位置：黄色 - // { offset: 0.75, color: '#FFA500' }, // 75%位置：橙色 - // { offset: 1.0, color: '#FF0000' } // 100%位置：红色 - // ], - // globalCoord: false // 确保渐变基于图形坐标系[5](@ref) - // } - // } - // }, - // { - // value: 15, - // name: '剩余', - // itemStyle: { - // color: '#EBEEF5' - // } - // } - // ], - // label: { - // show: false - // }, - // hoverAnimation: false, - // silent: true - // } - // ] - // }); + chartInstanceR = echarts.init(chartDom); + chartInstanceL = echarts.init(chartDomL); + + chartInstanceR.setOption({ + title: { + text: '综合评分', + left: 'left', + textStyle: { + fontSize: 14, + color: '#333', + fontWeight: '700', + } + }, + series: [ + { + type: 'gauge', + min: 0, //最大值 + max: 100, //最小值 + startAngle: 225, //仪表盘起始角度。正右手侧为0度，正上方为90度，正左手侧为180度。 + endAngle: -45, //仪表盘结束角度 + itemStyle: { + color: '#f37215', //颜色 + shadowColor: 'rgba(0,138,255,0.45)', //阴影颜色 + shadowBlur: 10, //图形阴影的模糊大小 + shadowOffsetX: 2, //阴影水平方向上的偏移距离 + shadowOffsetY: 2 //阴影垂直方向上的偏移距离 + }, + progress: { + show: true, //是否显示进度条 + width: 10, //进度条宽度 + itemStyle: { + color: { + type: 'linear', + x: 1, + y: 0, + x2: 0, + y2: 1, + colorStops: [ + { + offset: 1, + color: 'green' // 0% 处的颜色 + }, + { + offset: 0.7, + color: 'yellow' // 100% 处的颜色 + }, + { + offset: 0.3, + color: 'orange' // 100% 处的颜色 + }, + { + offset: 0, + color: 'red' // 100% 处的颜色 + } + ], + global: false // 缺省为 false + } + } + }, + pointer: { + icon: 'triangle', + width: 8, + length: '10%', + itemStyle: { + color: 'black', + shadowColor: 'rgba(0,0,0,0.3)', + shadowBlur: 8 + }, + offsetCenter: [0, '-60%'] + }, + axisLine: { + show: false, //是否显示仪表盘轴线 + lineStyle: { + width: 18 //轴线宽度 + } + }, + axisTick: { + show: false, //是否显示刻度 + distance: -29, + itemStyle: { + color: '#fff', + width: 2 + } + }, + splitLine: { + show: false, //是否显示分隔线 + }, + axisLabel: { + show: false, //是否显示标签 + }, + title: { + show: true, //是否显示标题 + }, + detail: { + show: true, //是否显示详情 + valueAnimation: true, //是否开启标签的数字动画 + offsetCenter: [0, 0], //相对于仪表盘中心的偏移位置 + fontSize: 32, //文字的字体大小 + color: 'black', + fontWeight: 'bolder', //文字字体的粗细 + backgroundColor: 'white', // 添加白色背景 + borderRadius: 100, // 设置圆形边框 + padding: [10, 10, 10, 10], // 设置内边距使背景更大 + width: 120, // 设置背景宽度 + height: 120, // 设置背景高度 + shadowColor: 'rgba(141,152,170,0.4)', + shadowBlur: 20, // 阴影模糊大小 + }, + data: [ + { + value: 82.5, + } + ] + } + ] + }); chartInstanceL.setOption({ color: ['rgb(141,152,170)'], textStyle: { color: 'rgb(141,152,170)' }, lineStyle: { - color: 'rgb(141,152,170)' + color: 'rgb(141,152,170)' }, grid: { left: '1%', // 左侧距离容器3%宽度（百分比更适配响应式） right: '1%', // 右侧距离容器3%宽度 + bottom: '1%', // 底部距离容器3%宽度 + top: '22%', // 顶部距离容器3%宽度 containLabel: true // 确保坐标轴标签不被截断[3,5](@ref) }, - title: { text: '评估质量' }, // 继承全局字体颜色 + title: { + text: '评估质量', + textStyle: { + fontSize: 14, + } + }, xAxis: { data: ['上下文相关性', '召回率', '忠实性', '答案的相关性', '最大公共子串', '编辑距离', '杰卡徳距离'], + axisTick: { + show: false + }, + axisLine: { + lineStyle: { + color: 'rgb(141,152,170)', + } + } + }, yAxis: { - interval:50, + interval: 50, type: 'value', - name:'分数（分）', + name: '分数（分）', textStyle: { color: 'black', }, splitLine: { show: true, lineStyle: { - type: 'dashed', - color: 'rgb(141,152,170)', - dash: [30,15], // [实线长度, 间隔长度]（数值越大越稀疏） + type: 'dashed', + color: 'rgb(141,152,170)', + dash: [30, 15], // [实线长度, 间隔长度]（数值越大越稀疏） opacity: 0.5 } } @@ -288,7 +276,7 @@ chartInstance.setOption(option); data: [76, 70, 78, 80, 74, 82, 77], barWidth: '10%', itemStyle: { - color:'rgb(0,98,220)', + color: 'rgb(0,98,220)', borderWidth: 1, shadowColor: 'rgba(0,92,219,0.2)', shadowBlur: 10, @@ -304,16 +292,6 @@ chartInstance.setOption(option); } } -// 监听visible属性变化 -watch(() => props.visible, async (newVal) => { - if (newVal) { - // 添加小延时确保DOM已经渲染 - setTimeout(async () => { - await initChart(); - }, 100); - } -}, { immediate: true }); - // 监听窗口大小变化 onMounted(() => { window.addEventListener('resize', debounceResize); @@ -328,18 +306,26 @@ watch(() => props.visible, (newVal) => { }, 100); } else { // drawer关闭时清理图表实例 - if (chartInstance) { - chartInstance.dispose(); - chartInstance = null; + if (chartInstanceR) { + chartInstanceR.dispose(); + chartInstanceR = null; + } + if (chartInstanceL) { + chartInstanceL.dispose(); + chartInstanceL = null; } } }, { immediate: true }); // 组件销毁前清理 onBeforeUnmount(() => { - if (chartInstance) { - chartInstance.dispose(); - chartInstance = null; + if (chartInstanceR) { + chartInstanceR.dispose(); + chartInstanceR = null; + } + if (chartInstanceL) { + chartInstanceL.dispose(); + chartInstanceL = null; } if (resizeTimer) { clearTimeout(resizeTimer); @@ -349,39 +335,108 @@ onBeforeUnmount(() => { - \ No newline at end of file -- Gitee