显示批注

src/components/CommonPreview.vue

@@ -26,6 +26,8 @@
             :component-list="component_list"
             :background="background"
             :can-remark="isTrue(courseware_info.is_my_audit_task) && isTrue(courseware_info.is_can_add_audit_remark)"
+            :show-remark="isShowAudit"
+            :component-remark-obj="remark_list_obj"
             @computeScroll="computeScroll"
             @addRemark="addRemark"
             ref="courserware"
@@ -146,6 +148,7 @@ export default {
       data: { row_list: [] },
       component_list: [],
       remark_list: [],
+      remark_list_obj: {}, // 存放转为以组件为对象的数组
       visible: false,
       remark_content: '',
       submit_loading: false,
@@ -232,10 +235,20 @@ export default {
     // 审校批注列表
     getCoursewareAuditRemarkList(id) {
       this.remark_list = [];
+      this.remark_list_obj = {};
       GetCoursewareAuditRemarkList({
         courseware_id: id,
       }).then(({ remark_list }) => {
         this.remark_list = remark_list;
+        remark_list.forEach((item) => {
+          // 组件的审批
+          if (item.component_id !== 'WHOLE') {
+            if (!this.remark_list_obj[item.component_id]) {
+              this.remark_list_obj[item.component_id] = [];
+            }
+            this.remark_list_obj[item.component_id].push(item);
+          }
+        });
       });
     },
     addRemark(selectNode, x, y, componentId) {

src/icons/svg/icon_info.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1750763248804" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4816" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M606.8 895.7H214c-47.9 0-86.8-38.9-86.8-86.8V215c0-47.9 38.8-86.8 86.7-86.8h593.9c23-0.1 45.1 9.1 61.4 25.4 16.4 16.4 25.3 38.2 25.4 61.4l-1.4 392.8v0.1c0.2 17.7 14.6 31.9 32.3 31.7 17.4-0.2 31.5-14.2 31.7-31.6l1.3-392.9v-0.1c0-83.2-67.4-150.7-150.6-150.7H214c-83.1-0.1-150.6 67.3-150.6 150.4V808.9c-0.1 83.1 67.2 150.6 150.3 150.7h393.2c17.6 0 31.9-14.3 31.9-31.9 0-17.7-14.3-32-32-32z" p-id="4817"></path><path d="M949.3 905l-122-122c61.5-86.4 41.3-206.4-45.2-267.9s-206.4-41.3-267.9 45.2c-61.5 86.4-41.3 206.4 45.2 267.9 66.7 47.4 156 47.4 222.7 0l122 122c12.5 12.5 32.7 12.5 45.2 0s12.5-32.7 0-45.2zM671 799.8c-70.7 0-127.9-57.3-127.9-127.9s57.2-128 127.9-128 127.9 57.3 127.9 127.9c0 33.9-13.5 66.5-37.5 90.5-23.9 24.1-56.5 37.6-90.4 37.5z m95.9-447.5c17.6 0 31.9-14.4 31.9-32s-14.3-32.1-31.9-32.1l-511.6-0.2c-17.7 0-31.9 14.3-31.9 32 0 17.6 14.3 32.1 31.9 32.1l511.6 0.2zM447.1 544c17.6 0 31.9-14.3 31.9-31.9 0-17.6-14.3-31.9-31.9-31.9H255.3c-17.6 0-31.9 14.3-31.9 31.9s14.3 31.9 31.9 31.9h191.8zM255.3 671.8c-17.6 0-31.9 14.3-31.9 31.9 0 17.6 14.3 31.9 31.9 31.9h127.9c17.6 0.2 32.1-14 32.3-31.6 0.2-17.6-14-32.1-31.6-32.3h-0.7l-127.9 0.1z" p-id="4818"></path></svg>

src/views/book/courseware/preview/CoursewarePreview.vue

@@ -44,6 +44,29 @@
                 <SvgIcon icon-class="icon_publish" size="24" />
                 添加批注
               </div>
+              <div
+                :key="'show' + grid.id + k"
+                v-if="showRemark && Object.keys(componentRemarkObj).length !== 0 && componentRemarkObj[grid.id]"
+              >
+                <el-popover
+                  v-for="(items, indexs) in componentRemarkObj[grid.id]"
+                  :key="indexs"
+                  placement="bottom"
+                  width="200"
+                  trigger="click"
+                >
+                  <div v-html="items.content"></div>
+                  <template #reference>
+                    <SvgIcon
+                      icon-class="icon_info"
+                      size="24"
+                      class="remark-info"
+                      slot="reference"
+                      :style="{ left: items.position_x - 12 + 'px', top: items.position_y - 12 + 'px' }"
+                    />
+                  </template>
+                </el-popover>
+              </div>
             </template>
           </div>
         </template>
@@ -80,6 +103,13 @@ export default {
       type: Boolean,
       default: false,
     },
+    showRemark: {
+      type: Boolean,
+      default: false,
+    },
+    componentRemarkObj: {
+      type: Object,
+    },
   },
   data() {
     return {
@@ -290,7 +320,8 @@ export default {
     }
   }
 
-  .custom-context-menu {
+  .custom-context-menu,
+  .remark-info {
     position: absolute;
     z-index: 999;
     display: flex;