图

src/components/pages/classroomObservation/components/echartsRTCH.vue

@@ -34,7 +34,6 @@ export default {
       let fontColor = "#1a7ad3";
       ctx.imageSmoothingEnabled = false;
       ctx.lineWidth = 1;
-      console.log(canvasWidth);
       const img = new Image();
       img.src = require("../../../../assets/icon/classroomObservation/rt-ch_echarts.png");
       img.onload = () => {

src/components/pages/classroomObservation/index.vue

@@ -420,14 +420,16 @@ export default {
                     this.$nextTick(() => {
                       this.getCourseList().then(_ => {
                         this.getFileIdId();
-                        this.$refs.messageAreaRef.getData(tagList?tagList.dialogTagList:[]).then(res => {
-                          if (tagList) {
-                            this.$refs.messageAreaRef.changeAnalysisName(
-                              tagList.dialogTagList,
-                              1
-                            );
-                          }
-                        });
+                        this.$refs.messageAreaRef
+                          .getData(tagList ? tagList.dialogTagList : [])
+                          .then(res => {
+                            if (tagList) {
+                              this.$refs.messageAreaRef.changeAnalysisName(
+                                tagList.dialogTagList,
+                                1
+                              );
+                            }
+                          });
                         this.$refs.chatAreaRef.getData();
                         resolve();
                       });
@@ -600,14 +602,10 @@ export default {
             }
 
             if (i2.jsonData.CH && i2.jsonData.RT) {
-              tagHtml += `<div style="width:100vw;text-align:center;">
-								<img src="${await this.getImageSrcToBase64(
-                  require("../../../assets/icon/classroomObservation/rt-ch.png")
-                )}" style="width:200px;height:200px;margin:auto;">
-								<div style="color:#1A7AD3;font-style:italic;font-weight:blob;">RT：${
-                  i2.jsonData.RT
-                }CH：${i2.jsonData.CH}</div>
-								</div>`;
+              tagHtml += `<div style="width:100vw;text-align:center;"><img style="margin:auto" src="${await this.getEChartsechartsRTCHImage({
+                RT: i2.jsonData.RT,
+                CH: i2.jsonData.CH
+              })}"/></div>`;
             }
 
             let _content = md.render(i2.jsonData.content);
@@ -824,6 +822,58 @@ export default {
         }
       });
     },
+    getEChartsechartsRTCHImage(data) {
+      return new Promise(resolve => {
+        try {
+          let canvas = document.createElement("canvas");
+          let ctx = canvas.getContext("2d");
+          canvas.width = 300 * window.devicePixelRatio;
+          canvas.height = 350 * window.devicePixelRatio;
+          // 缩放绘图上下文
+          ctx.scale(1, 1);
+
+          let canvasWidth = canvas.width;
+          let canvasHeight = canvas.height;
+          let fontColor = "#1a7ad3";
+          ctx.imageSmoothingEnabled = false;
+          ctx.lineWidth = 1;
+          const img = new Image();
+          img.src = require("../../../assets/icon/classroomObservation/rt-ch_echarts.png");
+          img.onload = () => {
+            ctx.drawImage(img, 25, 25, 250, 250);
+						ctx.fillStyle = fontColor;
+            ctx.beginPath();
+            ctx.arc(
+              250 * parseFloat(data.RT) + 25,
+              250 - 250 * parseFloat(data.CH) + 25,
+              4,
+              0,
+              2 * Math.PI
+            );
+            ctx.fill();
+            ctx.stroke();
+            ctx.fillStyle = "black";
+            ctx.font = `20px serif`;
+            ctx.fillText("1", 10, 40);
+            ctx.fillText("Ch", 0, 150);
+            ctx.fillText("0", 10, 290);
+            ctx.fillText("Rt", 140, 295);
+            ctx.fillText("1", 280, 275);
+
+            ctx.fillStyle = fontColor;
+            ctx.font = "italic bold 24px Arial";
+            ctx.fillText(`RT=${data.RT}    CH=${data.CH}`, 40, 330);
+
+            // 将 canvas 转换为 base64 格式的图片地址
+            const base64Image = canvas.toDataURL("image/png");
+            resolve(base64Image);
+          };
+        } catch (e) {
+          console.log(e);
+          resolve("#");
+        }
+      });
+    },
     drawRoundedRect(ctx, x, y, width, height, radius) {
       // 限制 radius 的最大值，防止它超过矩形的宽度或高度的一半
       const actualRadius = Math.min(radius, width / 2, height / 2);