You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
278 lines
8.0 KiB
278 lines
8.0 KiB
<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>
|