|
|
<template> <!-- style="height: calc(100vh - 140px);" --> <div class="app-container row-container"> <div class="custom-main"> <!-- <el-card class="box-card" @click="goToHtml"> 认证材料 </el-card> <el-card class="box-card" @click="goToHtml"> 学籍表测试 </el-card> <el-card class="box-card" @click="goToHtml"> 交接统计 </el-card> <el-card class="box-card" @click="goToHtml"> 单个电子文件大小统计 </el-card> <el-card class="box-card" @click="goToHtml"> 电子文件统计 </el-card> --> <el-card class="box-card"> <div @click="goToHtml">文书档案年度分类统计</div> </el-card> <el-card class="box-card"> <div @click="goToHtml">文书档案年度保管期限统计</div> </el-card>
<!-- <div v-katex:auto class="mdTextBox" v-html="renderMdText(markDownText)" /> -->
<mavon-editor class="md" :value="markDownText" :subfield="false" :default-open="'preview'" :toolbars-flag="false" :editable="false" :scroll-style="true" :ishljs="true" />
</div> </div></template>
<script>import MarkdownIt from 'markdown-it'import MarkdownItHighlightjs from 'markdown-it-highlightjs'import 'highlight.js/styles/a11y-dark.css'import katex from 'katex'import 'katex/dist/katex.min.css'
// import MarkdownItAbbr from 'markdown-it-abbr'
// import MarkdownItAnchor from 'markdown-it-anchor'
// import MarkdownItFootnote from 'markdown-it-footnote'
// import MarkdownItHighlightjs from 'markdown-it-highlightjs'
// import MarkdownItSub from 'markdown-it-sub'
// import MarkdownItSup from 'markdown-it-sup'
// import MarkdownItTasklists from 'markdown-it-task-lists'
// import MarkdownItTOC from 'markdown-it-toc-done-right'
// import 'highlight.js/styles/default.css'
import markdownText2 from '@/assets/test.md'
export default { name: 'CustomDefinedStatistics', components: { }, data() { return { markdownText2: markdownText2, // 渲染的文本
markDownText: `## 项目背景
> 描述项目或产品的现状，让项目成员了解当前存在的问题与痛点。>
+ 痛点1...+ 痛点2...+ 痛点3...
## 项目目标> 描述本项目期望达成的目标，目标需满足Smart原则：>> 1. 具体的（Specific）> 2. 可以衡量的（Measurable）> 3. 可以达到的（Attainable）> 4. 要与其他目标具有一定的相关性（Relevant）> 5. 有明确的截止期限（Time-bound）>## 关键事项> 为达成上述目标，需要完成哪些关键事项。>
+ 关键事项1...+ 关键事项2...+ 关键事项3...
## 里程碑> 整个项目中，关键节点的里程碑计划。>
## 人员安排> 输入项目的所有干系人，包括内部和外部干系人。>
| **人员** | **岗位** || --- | --- || @<font style="color:#8C8C8C;background-color:#F5F5F5;">提及</font> | 项目经理 || @<font style="color:#8C8C8C;background-color:#F5F5F5;">提及</font> | 技术负责人 || @<font style="color:#8C8C8C;background-color:#F5F5F5;">提及</font> | 产品负责人 |
## 风险提示> 对公司战略、项目结题、法务风险问题进行提示，并说明应对措施。>`,
markdownRender: new MarkdownIt({ html: true, linkify: true, typographer: true, xhtmlOut: false }).use(MarkdownItHighlightjs), // .use(MarkdownItAbbr)
// .use(MarkdownItAnchor)
// .use(MarkdownItFootnote)
// .use(MarkdownItHighlightjs)
// .use(MarkdownItSub)
// .use(MarkdownItSup)
// .use(MarkdownItTasklists)
// .use(MarkdownItTOC)
markdownContent: '' } }, updated() { const that = this this.$nextTick(() => { // 获取页面上的pre和code标签
const codeBlocks = document.querySelectorAll('pre code') codeBlocks.forEach((block) => { let newDiv // 获取code标签
const preElement = block // 获取code标签的父元素
const parentElement = preElement.parentNode // 获取parentElement下的第一个div元素
const firstDiv = parentElement.querySelector('div') // 检查是否找到了div元素
if (!firstDiv) { // 创建一个div
newDiv = document.createElement('div') // 给div添加文字内容
newDiv.innerText = '复制代码' // 给div设置class样式
newDiv.setAttribute('class', 'copyButton') // 把div插入到code标签前面
parentElement.insertBefore(newDiv, preElement) // 给div添加点击事件
newDiv.onclick = function() { const textArea = document.createElement('textarea') textArea.value = preElement.innerText document.body.appendChild(textArea) textArea.select() document.execCommand('copy') document.body.removeChild(textArea) that.$message.success('复制成功') } } }) }) }, mounted() { // const md = new MarkdownIt()
// console.log('md', md)
// this.markdownContent = md.render(this.markdownText2)
// console.log(' this.markdownContent', this.markdownContent)
}, methods: { // renderMdText(text) {
// // 生成html
// return this.markdownRender.render(text)
// }
renderMdText(text) { // markdown转html
text = this.markdownRender.render(text) text = this.renderMath(text) // text = this.decodeHTMLEntities(text) // 手动解码 HTML 实体
return text }, // decodeHTMLEntities(text) {
// const parser = new DOMParser()
// const doc = parser.parseFromString(text, 'text/html')
// return doc.documentElement.textContent
// },
// markdown转latex
renderMath(html) { // 匹配 $$...$$, \[...\], \(...\), and $...$
const regex = /(\$\$([\s\S]+?)\$\$)|(\\\[([\s\S]+?)\\\])|(\\\(([\s\S]+?)\\\))|(\$([^\$]+?)\$)/g return html.replace(regex, (match, p1, p2, p3, p4, p5, p6, p7, p8) => { let latex if (p2) { // $$...$$
latex = p2 } else if (p4) { // \[...\]
latex = p4 } else if (p6) { // \(...\)
latex = p6 } else if (p8) { // $...$
latex = p8 } console.log('latex', latex) if (latex) { try { return katex.renderToString(latex, { throwOnError: false }) } catch (e) { console.error('KaTeX rendering error:', e) return match } } return match }) }, goToHtml() { // 这里的 'test.html' 是你放在 public 目录下的 HTML 文件名称
// window.location.href = 'report/annual.htm'
window.open('report/annual.htm', '_blank') } }}</script>
<style lang="scss" scoped>.custom-main{ display: flex; justify-content: flex-start; flex-wrap: wrap; ::v-deep .el-card{ margin: 0 20px 20px 0; width: calc(100% / 4 - 40px); height: 100px; line-height: 100px; text-align: center; cursor: pointer; }}
// .mdTextBox{
// width: 1400px;
// ::v-deep h1{
// font-size: 24px;
// line-height: 48px;
// font-weight: 800;
// }
// ::v-deep h2{
// font-size: 22px;
// line-height: 42px;
// font-weight: 700;
// }
// ::v-deep h3{
// font-size: 20px;
// line-height: 36px;
// font-weight: 600;
// }
// ::v-deep img{
// width: 500px;
// }
// ::v-deep a{
// color: #335fee;
// line-height: 20px;
// }
// ::v-deep p {
// line-height: 20px;
// }
// }
</style>
|
