zm/tougao_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

tijiao

Browse Source
This commit is contained in:
始于初见
2025-01-20 10:03:22 +08:00
parent 4c18bc54b8
commit ce347a77c1
15 changed files with 2565 additions and 733 deletions
Download Patch File Download Diff File Expand all files Collapse all files

400
src/components/page/GenerateCharts.vue
View File

@@ -1,11 +1,5 @@
<template>
<div style="height:100%">
<!-- <div class="crumbs">
<el-breadcrumb separator="/">
<el-breadcrumb-item> <i class="el-icon-document-copy"></i> Text Proofread </el-breadcrumb-item>
</el-breadcrumb>
</div> -->
<div style="height: 100%">
<div
class="container"
style="
@@ -58,7 +52,6 @@
<div class="unfetteredBox" style="height: 100%">
<common-word-html-type-setting
:urlList="{
img: 'api/Preaccept/getMainImages',
table: 'api/Preaccept/getMainTables'
@@ -79,11 +72,8 @@
</common-word-html-type-setting>
</div>
</div>
<div
v-if="htmlContent"
style="width: 100%; width: calc(100% - 295px); float: right; height: calc(100%); background-color: #f8f8f9"
>
<div class="toolbar">
<div style="width: 100%; width: calc(100% - 285px); float: right; height: calc(100%); background-color: #e4e9ed">
<!-- <div class="toolbar">
<div class="toolbar_item" @click="handleImageAdd('img')">
<img src="@/assets/img/upload.png" style="object-fit: contain" />
<span>Add Figure </span>
@@ -92,16 +82,19 @@
<img src="@/assets/img/uploadTable.png" style="object-fit: contain" />
<span>Add Table </span>
</div>
</div>
</div> -->
<!---->
<common-word
v-if="htmlContent"
ref="commonWord"
:value="htmlContent"
:contentList="Main_List"
:comments="comments"
:wordStyle="wordStyle"
@onDrop="onDrop"
@saveContent="saveContent"
@deleteComment="deleteComment"
@editComment="editComment"
@loaded="loadedWord"
@onEdit="onEdit"
@onDelete="onDelete"
@@ -109,9 +102,15 @@
@onAddComment="onAddComment"
@onEditTitle="onEditTitle"
@changeComment="changeComment"
style="width: calc(100%); height: calc(100% - 50px); margin-top: -1px"
style="width: calc(100%); height: calc(100%)"
:style="`100%`"
></common-word>
>
<template slot="comment">
<div style="" class="commentList annotations">
</div>
</template>
</common-word>
</div>
<!-- <div style="height: 20px" v-if="Art_Doi == undefined"></div> -->
@@ -222,10 +221,10 @@
:close-on-click-modal="false"
>
<el-form ref="editMes" :model="commentForm" label-width="115px">
<el-form-item label="Select Content:" v-if="commentForm.commentLabel">
<p style="background: #eef0f4;line-height: 20px;padding: 10px;box-sizing: border-box;">{{ commentForm.commentLabel }}</p>
<p style="background: #eef0f4; line-height: 20px; padding: 10px; box-sizing: border-box">
{{ commentForm.commentLabel }}
</p>
</el-form-item>
<el-form-item label="Word">
<span slot="label">
@@ -297,6 +296,8 @@ import bottomTinymce from '@/components/page/components/Tinymce';
export default {
data() {
return {
isEditComment: false,
comments: [],
remarkImageUrl: 'https://submission.tmrjournals.com/public/usericon/20241222/4e77ba3f29ce3cf798b36f24dc411b76.png',
isFirstComponentLoaded: false,
isWordComponentLoaded: false,
@@ -428,20 +429,30 @@ export default {
}
},
created() {
bus.$on('collapse', (msg) => {
this.collapse = msg;
localStorage.setItem('collapse', this.collapse);
bus.$emit('collapse-content', msg);
});
this.isShowEditComment();
this.getDate();
this.getCommentList();
// this.loadDictionary().catch(console.error);
},
activated() {
this.isShowEditComment();
this.getDate();
this.getCommentList();
},
methods: {
isShowEditComment() {
if (localStorage.getItem('U_role')) {
var identity = localStorage.getItem('U_role');
if (identity.includes('editor')) {
this.isEditComment = true;
} else {
this.isEditComment = false;
}
}
},
loadedWord() {
this.isWordComponentLoaded = true;
},
@@ -516,8 +527,29 @@ export default {
this.addComment(content);
}
},
async saveContent(content) {
deleteComment(comment, index) {
console.log('comment at line 480:', comment);
if (this.isEditComment) {
this.$confirm(this.$t('commonTable.removeAnnotations'), 'Prompt', {
confirmButtonText: 'Submit',
cancelButtonText: 'Cancel',
type: 'warning'
})
.then(() => {
this.$api
.post('api/Preaccept/clearMainsRemark', {
am_id: comment.am_id
})
.then((res) => {
this.getDate()
this.getCommentList();
});
// this.comments.splice(index, 1); // 删除评论
})
.catch(() => {});
}
},
async saveContent(content,am_id) {
var that = this;
var str = content.replace(/^<p>(.*?)<\/p>$/, '$1') ? content.replace(/^<p>(.*?)<\/p>$/, '$1') : '';
if (str == '') {
@@ -528,7 +560,7 @@ export default {
}
await that.$api
.post(that.urlList.editContent, {
am_id: this.currentId,
am_id: am_id,
content: str
})
.then(async (res) => {
@@ -684,7 +716,6 @@ export default {
},
async addComment(content) {
console.log('content at line 603:', this.commentForm);
var str = content.replace(/^<p>(.*?)<\/p>$/, '$1') ? content.replace(/^<p>(.*?)<\/p>$/, '$1') : '';
if (str == '') {
this.$message({
@@ -702,6 +733,7 @@ export default {
this.$forceUpdate();
this.commentVisible = false;
this.getDate();
this.getCommentList();
this.$nextTick(() => {});
} else {
this.$message.error(res.msg);
@@ -724,51 +756,48 @@ export default {
}
);
}
console.log('data at line 575:', data);
},
editComment(comment) {
this.commentForm = {
...comment
};
this.commentVisible = true;
},
async onAddComment(data) {
console.log('data at line 858:', data);
var form = this.Main_List.find((item) => item.am_id == data.mainId);
this.commentForm = {
commentLabel:data.label,
commentLabel: data.label ? data.label : '',
...form
};
this.commentVisible = true;
},
async onEditTitle(data) {
var url;
switch (data.value){
switch (data.value) {
case 1:
url = 'api/Preaccept/changeH1';
break;
case 2:
url = 'api/Preaccept/changeH2';
url = 'api/Preaccept/changeH2';
break;
case 3:
url = 'api/Preaccept/changeH3';
url = 'api/Preaccept/changeH3';
break;
}
console.log('data at line 739:', data)
await this.$api
.post(url, {
am_id: data.mainId,
})
.then(async (res) => {
this.getDate();
})
.catch((err) => {
this.$message.error(err.msg);
});
// var form = this.Main_List.find((item) => item.am_id == data.mainId);
// this.commentForm = {
// commentLabel:data.label,
// ...form
// };
// this.commentVisible = true;
console.log('data at line 739:', data);
await this.$api
.post(url, {
am_id: data.mainId
})
.then(async (res) => {
this.getDate();
this.getCommentList();
})
.catch((err) => {
this.$message.error(err.msg);
});
},
clearButton() {
var deleteButtons = document.querySelectorAll('.wordButtonContainer');
@@ -915,120 +944,123 @@ export default {
})
.then((res) => {
this.comments = res.data.list;
console.log('this.comments at line 537:', this.comments);
// this.positionAnnotations();
});
},
getWord() {
var htmlContent = `<h3 class="man_Title" contenteditable="false">${this.detailTitle} </h3>`;
htmlContent += this.Main_List.map((item) => {
//批注
let contentHtml = '';
var isRemark = ``;
if (item.remark && item.remark != '') {
// isRemark = `<img class="isRemark" main-id="${item.am_id}" src="${this.remarkImageUrl}" alt="" style="width:20px;height:20px;"/>`;
isRemark = `<span class="isRemark" main-id="${item.am_id}"><img class="isRemarkIcon" main-id="${item.am_id}" src="${
this.remarkImageUrl
}" alt="" style="width: 20px; height: 20px" />
// var htmlContent = `<h3 class="man_Title" contenteditable="false">${this.detailTitle} </h3>`;
// htmlContent += this.Main_List.map((item) => {
// //批注
// let contentHtml = '';
// var isRemark = ``;
// if (item.remark && item.remark != '') {
// // isRemark = `<img class="isRemark" main-id="${item.am_id}" src="${this.remarkImageUrl}" alt="" style="width:20px;height:20px;"/>`;
// isRemark = `<span class="isRemark" main-id="${item.am_id}"><img class="isRemarkIcon" main-id="${item.am_id}" src="${
// this.remarkImageUrl
// }" alt="" style="width: 20px; height: 20px" />
<span class="isRemarkIcon" main-id="${item.am_id}" > (${item.am_id})</span>
${item.state == 0 ? `<span class="Resolved" main-id="${item.am_id}">Resolved</span>` : ''}
</span>
// <span class="isRemarkIcon" main-id="${item.am_id}" > (${item.am_id})</span>
// ${item.state == 0 ? `<span class="Resolved" main-id="${item.am_id}">Resolved</span>` : ''}
// </span>
`;
}
// 判断是否是图片
if (item.type == 1) {
var extension = item.image.url.split('.').pop().toLowerCase();
if (extension == 'tif') {
contentHtml = `
<p contenteditable="false" main-state="${item.state}" class="MaxPicture pMain" data-id="${item.ami_id}" main-id="${
item.am_id
}">
<img src="" data-img-id="${item.ami_id}" style="width: ${item.width ? `${item.width}px` : '100%'}" />
<font class="font" style="width: ${item.width ? `${item.width}px` : '100%'}">${item.image.note ? item.image.note : ''}</font>
</p>
`;
} else if (['jpg', 'jpeg', 'png'].includes(extension)) {
contentHtml = `
<p contenteditable="false" main-state="${item.state}" class="MaxPicture pMain" data-id="${
item.ami_id
}" main-id="${item.am_id}">
${isRemark}
<img src="${this.mediaUrl + item.image.url}" style="width: ${
item.width ? `${item.width}px` : '100%'
}" />
<font class="font" style="width: ${item.width ? `${item.width}px` : '100%'}" >${
item.image.note ? item.image.note : ''
}</font>
</p>
`;
} else {
contentHtml = `
<p contenteditable="false" main-state="${item.state}" class="MaxPicture pMain" data-id="${
item.ami_id
}" main-id="${item.am_id}">
${isRemark}
<span
style="
text-align: center;
font-size: 30px;
display: flex;
align-items: center;
justify-content: center;
"
>
Figures ( .${item.image.url.split('.').pop().toUpperCase()})
</span>
// `;
// }
// // 判断是否是图片
// if (item.type == 1) {
// var extension = item.image.url.split('.').pop().toLowerCase();
// if (extension == 'tif') {
// contentHtml = `
// <p contenteditable="false" main-state="${item.state}" class="MaxPicture pMain" data-id="${item.ami_id}" main-id="${
// item.am_id
// }">
// <img src="" data-img-id="${item.ami_id}" style="width: ${item.width ? `${item.width}px` : '100%'}" />
// <font class="font" style="width: ${item.width ? `${item.width}px` : '100%'}">${item.image.note ? item.image.note : ''}</font>
// </p>
// `;
// } else if (['jpg', 'jpeg', 'png'].includes(extension)) {
// contentHtml = `
// <p contenteditable="false" main-state="${item.state}" class="MaxPicture pMain" data-id="${
// item.ami_id
// }" main-id="${item.am_id}">
// ${isRemark}
// <img src="${this.mediaUrl + item.image.url}" style="width: ${
// item.width ? `${item.width}px` : '100%'
// }" />
// <font class="font" style="width: ${item.width ? `${item.width}px` : '100%'}" >${
// item.image.note ? item.image.note : ''
// }</font>
// </p>
// `;
// } else {
// contentHtml = `
// <p contenteditable="false" main-state="${item.state}" class="MaxPicture pMain" data-id="${
// item.ami_id
// }" main-id="${item.am_id}">
// ${isRemark}
// <span
// style="
// text-align: center;
// font-size: 30px;
// display: flex;
// align-items: center;
// justify-content: center;
// "
// >
// Figures ( .${item.image.url.split('.').pop().toUpperCase()})
// </span>
<font class="font" style="width: ${item.width ? `${item.width}px` : '100%'}" >${
item.image.note ? item.image.note : ''
}</font>
</p>
`;
}
} else if (item.type == 2) {
var tableList = JSON.parse(item.table.table_data);
// <font class="font" style="width: ${item.width ? `${item.width}px` : '100%'}" >${
// item.image.note ? item.image.note : ''
// }</font>
// </p>
// `;
// }
// } else if (item.type == 2) {
// var tableList = JSON.parse(item.table.table_data);
contentHtml = `
<div contenteditable="false" data-id="${item.amt_id}" main-state="${item.state}" main-id="${
item.am_id
}" class="thumbnailTableBox wordTableHtml table_Box pMain" style="width: 100%; padding: 8px 15px; box-sizing: border-box; border-radius: 4px; position: relative;">
${isRemark}
<font class="font tableTitle" style="width:100%" >${item.table.title ? item.table.title : ''}</font>
<table border="1" style="width: auto; border-collapse: collapse; text-align: center; ">
${tableList
.map((row) => {
return `
<tr>
${row
.map((cell) => {
return `
<td colspan="${cell.colspan || 1}" rowspan="${cell.rowspan || 1}">
<span>${cell.text || ''}</span>
</td>
`;
})
.join('')} <!-- join the cells in the row -->
</tr>
`;
})
.join('')} <!-- join the rows -->
</table>
<font class="font" style="width:100%" >${item.table.note ? item.table.note : ''}</font>
</div>
`;
} else {
contentHtml = `<p class="pMain" main-state="${item.state}" contenteditable="false" data-id="${item.am_id}" main-id="${item.am_id}">${isRemark}${item.content}</p>`;
}
// contentHtml = `
// <div contenteditable="false" data-id="${item.amt_id}" main-state="${item.state}" main-id="${
// item.am_id
// }" class="thumbnailTableBox wordTableHtml table_Box pMain" style="width: 100%; padding: 8px 15px; box-sizing: border-box; border-radius: 4px; position: relative;">
// ${isRemark}
// <font class="font tableTitle" style="width:100%" >${item.table.title ? item.table.title : ''}</font>
// <table border="1" style="width: auto; border-collapse: collapse; text-align: center; ">
// ${tableList
// .map((row) => {
// return `
// <tr>
// ${row
// .map((cell) => {
// return `
// <td colspan="${cell.colspan || 1}" rowspan="${cell.rowspan || 1}">
// <span>${cell.text || ''}</span>
// </td>
// `;
// })
// .join('')} <!-- join the cells in the row -->
// </tr>
// `;
// })
// .join('')} <!-- join the rows -->
// </table>
// <font class="font" style="width:100%" >${item.table.note ? item.table.note : ''}</font>
// </div>
// `;
// } else {
// contentHtml = `<p class="pMain" main-state="${item.state}" contenteditable="false" data-id="${item.am_id}" main-id="${item.am_id}">${isRemark}${item.content}</p>`;
// }
// 判断是否是表格类型
// // 判断是否是表格类型
return contentHtml;
}).join('');
this.htmlContent = htmlContent;
// return contentHtml;
// }).join('');
// this.htmlContent = htmlContent;
this.htmlContent = 'true';
},
// 获取数据
async getDate() {
// this.isFirstComponentLoaded = false;
// this.isWordComponentLoaded = false;
this.imagesList = [];
@@ -1374,6 +1406,20 @@ export default {
this.$message.error(this.$t('commonTable.uploadImageInfo'));
}
return isValidFormat; // 返回false将阻止文件上传
},
positionAnnotations() {
this.$nextTick(() => {
this.comments.forEach((item) => {
const contentElement = document.querySelector('[remark-main-id="' + item.am_id + '"]');
const annotationElement = document.querySelector('[data-target="main-' + item.am_id + '"]');
if (contentElement && annotationElement) {
const rect = contentElement.getBoundingClientRect();
annotationElement.style.position = 'absolute';
annotationElement.style.top = `${rect.top}px`;
}
});
});
}
}
};
@@ -1688,4 +1734,42 @@ export default {
.editFormPizhu img {
margin-right: 10px;
}
.go-content-box {
background-color: #f2f3f5;
}
.commentList {
width: 350px !important;
padding: 15px;
position: relative;
box-sizing: border-box;
/* background-color: #fafafa; */
background-color: #fafafa;
box-shadow: 0 1px 3px rgb(16 17 19 / 6%);
}
/* 为整个页面的滚动条设置样式 */
::-webkit-scrollbar {
width: 8px; /* 垂直滚动条的宽度 */
height: 8px; /* 水平滚动条的高度 */
}
/* 滚动条轨道样式 */
::-webkit-scrollbar-track {
background: #f1f1f1; /* 滚动条轨道颜色 */
border-radius: 10px; /* 轨道圆角 */
}
/* 滚动条滑块样式 */
::-webkit-scrollbar-thumb {
background: #888; /* 滚动条滑块颜色 */
border-radius: 10px; /* 滑块圆角 */
}
/* 滑块在悬停时的样式 */
::-webkit-scrollbar-thumb:hover {
background: #555; /* 滑块悬停时的颜色 */
}
</style>