mirror of
http://112.124.100.131/ebiz-ai/ebiz-ai-knowledge-manage.git
synced 2025-12-10 03:16:49 +08:00
feat(RenderMinerU): 实现 MD 文件加载及分页功能- 新增 getMd_info 和 mdIndex 函数,用于获取 MD 文件信息和内容
- 实现 MD 文件内容的渲染和分页滚动 - 优化编辑模式下的 Markdown 处理 - 去除无用的 console.log 语句 - 调整样式,隐藏滚动条
This commit is contained in:
@@ -15,12 +15,26 @@
|
||||
class="miner-u el-card is-always-shadow ml20"
|
||||
></iframe>
|
||||
<div style="flex:1;" class="mh20 miner-u-md" v-loading="finishedMiner" element-loading-text="正在识别中...">
|
||||
<el-tabs type="border-card" style="height: 100%;overflow: hidden" @tab-click="changeTab">
|
||||
<el-tab-pane label="预览" style="overflow:scroll;">
|
||||
<div v-html="markdownHtml" class="view-body" id="viewBody" ref="viewBody"></div>
|
||||
<el-tabs type="border-card" style="height: 100%;overflow: hidden" @tab-click="changeTab" v-model="tab">
|
||||
<el-tab-pane label="预览" style="overflow:scroll;" ref="scrollView" name="0">
|
||||
<div
|
||||
v-html="markdownHtml"
|
||||
class="view-body"
|
||||
id="viewBody"
|
||||
ref="viewBody"
|
||||
style="height:calc(100vh - 230px);overflow-y: scroll;overflow-x:hidden "
|
||||
></div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="编辑" :disabled="!isEdit" v-if="isEdit">
|
||||
<div class="lineH25 view-body" contenteditable id="md-editor" @blur="emitMarkDown" v-html="markdown"></div>
|
||||
<el-tab-pane label="编辑" :disabled="!isEdit" v-if="isEdit" name="1">
|
||||
<div
|
||||
class="lineH25 view-body"
|
||||
contenteditable
|
||||
id="md-editor"
|
||||
ref="mdEditor"
|
||||
@blur="emitMarkDown"
|
||||
v-html="markdown"
|
||||
style="height:calc(100vh - 230px);overflow-y: scroll;overflow-x:hidden "
|
||||
></div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
@@ -28,7 +42,17 @@
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { getPdfUrl, minerUBbox, minerUMarkDown, minerUMarkDownUpdate, minerURetry, minerUQuery, imageRetry } from '@/api/generatedApi/index'
|
||||
import {
|
||||
getPdfUrl,
|
||||
minerUBbox,
|
||||
minerUMarkDown,
|
||||
minerUMarkDownUpdate,
|
||||
minerURetry,
|
||||
minerUQuery,
|
||||
imageRetry,
|
||||
getMd_info,
|
||||
mdIndex
|
||||
} from '@/api/generatedApi/index'
|
||||
import { DEFAULT_COLOR_SECTION, PDF_COLOR_PICKER } from './pdf-color'
|
||||
import MarkdownIt from 'markdown-it'
|
||||
import markdownItKatex from 'markdown-it-katex'
|
||||
@@ -40,6 +64,8 @@ export default {
|
||||
name: 'index',
|
||||
data() {
|
||||
return {
|
||||
tab: '0',
|
||||
mdPges: 0,
|
||||
tableIdCounter: 0,
|
||||
finishedMiner: false,
|
||||
prdUrl: ``,
|
||||
@@ -59,7 +85,6 @@ export default {
|
||||
icon: 'el-icon-view',
|
||||
name: 'retry',
|
||||
click: tableElement => {
|
||||
console.log('重新识别')
|
||||
// 获取的 识别图片
|
||||
this.selectionImagePath = ''
|
||||
let chooseItem = this.findMatchingTable(tableElement)
|
||||
@@ -159,16 +184,38 @@ export default {
|
||||
if (newVal) {
|
||||
this.getMinerUStatus()
|
||||
this.prdUrl = getPdfUrl({ documentId: newVal })
|
||||
console.log('this.prdUrl')
|
||||
}
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
page: {
|
||||
handler(newVal, oldVal) {
|
||||
if (newVal) {
|
||||
this.changePage(newVal, this.tab)
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {},
|
||||
filters: {},
|
||||
methods: {
|
||||
//
|
||||
//changePage
|
||||
changePage(page) {
|
||||
let documentId = document.getElementById(`view-code-${page - 1}`)
|
||||
let viewBody = document.getElementById('viewBody')
|
||||
if (this.tab === '1') {
|
||||
documentId = document.getElementById(`ebiz-code-${page - 1}`)
|
||||
viewBody = document.getElementById('md-editor')
|
||||
}
|
||||
if (documentId) {
|
||||
viewBody.scrollTo({
|
||||
top: documentId.offsetTop - 16,
|
||||
behavior: 'smooth'
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
//重新识别
|
||||
retryMinerImage(chooseItem, loading, tableElement) {
|
||||
imageRetry({
|
||||
documentId: this.documentId,
|
||||
@@ -316,7 +363,6 @@ export default {
|
||||
|
||||
linesMap(table) {
|
||||
;(table.blocks ? table.blocks : []).map(lines => {
|
||||
console.log(lines)
|
||||
lines.lines.map(spans => {
|
||||
spans.spans.map(span => {
|
||||
this.selectionTable.push({ html: span.html, image_path: span.image_path })
|
||||
@@ -350,7 +396,10 @@ export default {
|
||||
this.$emit('getMarkDownIt', { innerText: pre })
|
||||
},
|
||||
saveMarkDown() {
|
||||
let pre = document.getElementById('md-editor').innerText
|
||||
let pre = document.getElementById('md-editor').innerHTML
|
||||
|
||||
// pre + ebiz-code标签
|
||||
|
||||
minerUMarkDownUpdate({
|
||||
documentId: this.documentId,
|
||||
newMd: pre
|
||||
@@ -395,32 +444,77 @@ export default {
|
||||
this.bboxList = this.formatJson(JSON.parse(JSON.stringify(res.content.content)))
|
||||
|
||||
this.setTableSelection(JSON.parse(JSON.stringify(res.content.content)))
|
||||
|
||||
console.log(this.selectionTable, 'this.selectionTable')
|
||||
// this.$refs.iframe 重新刷新iframe
|
||||
this.$refs.iframe.contentWindow.location.reload()
|
||||
this.getPDFDetailMarkDown()
|
||||
this.getMdPage()
|
||||
})
|
||||
},
|
||||
changeTab() {
|
||||
let pre = document.getElementById('md-editor').innerHTML
|
||||
|
||||
getMdPage() {
|
||||
let responseText = ''
|
||||
getMd_info({ documentId: this.documentId }).then(async res => {
|
||||
if (res) {
|
||||
this.mdPges = res.content.content.indexList
|
||||
|
||||
for (let i = 0; i < this.mdPges.length; i++) {
|
||||
let text = await mdIndex({ index: i, documentId: this.documentId })
|
||||
|
||||
responseText += `<ebiz-code id='ebiz-code-${i}'></ebiz-code>
|
||||
${text}`
|
||||
}
|
||||
this.getPDFDetailMarkDown(responseText)
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
changeTab(evt) {
|
||||
let editor = document.getElementById('md-editor')
|
||||
|
||||
// pre 获取 table的html 给table 增加 对照表的path id
|
||||
let pre = editor.innerHTML
|
||||
let tables = editor.querySelectorAll('table')
|
||||
if (tables) {
|
||||
tables.forEach(item => {
|
||||
let pathId = item.getAttribute('data-path-id')
|
||||
if (!pathId) {
|
||||
let ite = this.findMatchingTable(item)
|
||||
if (ite) {
|
||||
item.setAttribute('data-path-id', ite.image_path.replace(/\.[^/.]+$/, ''))
|
||||
item.setAttribute('data-path-type', ite.image_path.match(/\.[^/.]+$/)[0])
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// pre = JSON.stringify(pre)
|
||||
// let copyMdHtml = md.render(pre)
|
||||
// 给 copyMdHtml 里面的table 增加 class m-view
|
||||
// copyMdHtml = copyMdHtml.re
|
||||
this.markdownHtml = md.render(pre.replace(/class="m-view"/g, ''))
|
||||
this.markdownHtml = md.render(pre.replace(/class="m-view"/g, '').replace(/ebiz-code/g, 'view-code'))
|
||||
|
||||
setTimeout(() => {
|
||||
this.changePage(this.page, evt)
|
||||
}, 1000)
|
||||
},
|
||||
// 初始md 文档
|
||||
async getPDFDetailMarkDown() {
|
||||
async getPDFDetailMarkDown(responseText) {
|
||||
// responseText 判断是否包含ebiz-code
|
||||
const response = await fetch(minerUMarkDown({ documentId: this.documentId }))
|
||||
this.markdown = await response.text()
|
||||
// this.markdown 包含 ebiz-code
|
||||
if (this.markdown.indexOf('<ebiz-code ') < 0) {
|
||||
this.markdown = responseText
|
||||
}
|
||||
|
||||
this.markdown = this.markdown
|
||||
.replace(/<table/g, () => {
|
||||
const uniqueId = `table-${this.tableIdCounter++}`
|
||||
return `<table contenteditable='false' class="m-view"`
|
||||
})
|
||||
.replace(/<script/g, '< script')
|
||||
this.markdownHtml = this.md.render(this.markdown.replace(/class="m-view"/g, ''))
|
||||
|
||||
let text = this.markdown
|
||||
this.markdownHtml = this.md.render(this.markdown.replace(/class="m-view"/g, '').replace(/ebiz-code/g, 'view-code'))
|
||||
},
|
||||
// 向 iframe 发送消息
|
||||
sendMessageToIframe(type, message) {
|
||||
|
||||
Reference in New Issue
Block a user