2 changed files with 116 additions and 248 deletions
@ -1,278 +1,137 @@ |
|||
<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)" /> --> |
|||
<div class="app-container row-container"> |
|||
<div class="connection-header"> |
|||
<div class="head-search"> |
|||
<el-select |
|||
v-model="fondsIds" |
|||
multiple |
|||
collapse-tags |
|||
placeholder="请选择所属全宗" |
|||
style="width: 320px;" |
|||
> |
|||
<el-option |
|||
v-for="item in fondsOptions" |
|||
:key="item.id" |
|||
:label="item.fondsName" |
|||
:value="item.id" |
|||
/> |
|||
</el-select> |
|||
<el-select |
|||
v-model="years" |
|||
multiple |
|||
collapse-tags |
|||
placeholder="请选择年份" |
|||
style="width: 150px;" |
|||
> |
|||
<el-option |
|||
v-for="item in yearsOptions" |
|||
:key="item.id" |
|||
:label="item.name" |
|||
:value="item.id" |
|||
/> |
|||
</el-select> |
|||
<el-button class="filter-item filter-search" size="mini" type="success" icon="el-icon-search" @click="getBorrowdStatistics">查询</el-button> |
|||
<el-button class="filter-item filter-refresh" size="mini" type="warning" icon="el-icon-refresh-left" @click="resetQuery">重置</el-button> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- <mavon-editor |
|||
class="md" |
|||
:value="markDownText" |
|||
:subfield="false" |
|||
:default-open="'preview'" |
|||
:toolbars-flag="false" |
|||
:editable="false" |
|||
:scroll-style="true" |
|||
:ishljs="true" |
|||
/> --> |
|||
<el-table class="archives-table" :data="allData" :summary-method="getSummaries" show-summary border style="width: 100%;"> |
|||
<el-table-column type="index" label="序号" width="60" align="center" /> |
|||
<el-table-column prop="year" label="统计年度" align="center" /> |
|||
<!-- <el-table-column prop="borrowPersonCount" label="实体借阅量（卷/件）" align="center" /> --> |
|||
<el-table-column prop="borrowElectronicCount" label="电子借阅量（份/件）" align="center" /> |
|||
<el-table-column prop="borrowPersonCount" label="借阅人次（人次）" align="center" /> |
|||
</el-table> |
|||
|
|||
</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' |
|||
import { FetchFondsAll } from '@/api/system/fonds' |
|||
import { FetchBorrowdStatistics, FetchArchivedAllYear } from '@/api/statistics/statistics' |
|||
|
|||
export default { |
|||
name: 'BorrowingStatistics', |
|||
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: '' |
|||
allData: [], |
|||
fondsOptions: [], |
|||
fondsIds: [], |
|||
yearsOptions: [], |
|||
years: [] |
|||
} |
|||
}, |
|||
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('复制成功') |
|||
} |
|||
} |
|||
}) |
|||
}) |
|||
computed: { |
|||
}, |
|||
mounted() { |
|||
// const md = new MarkdownIt() |
|||
// console.log('md', md) |
|||
// this.markdownContent = md.render(this.markdownText2) |
|||
// console.log(' this.markdownContent', this.markdownContent) |
|||
this.getFondsDatas() |
|||
this.getArchivedAllYearDatas() |
|||
this.getBorrowdStatistics() |
|||
}, |
|||
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 |
|||
getSummaries(param) { |
|||
const { columns, data } = param |
|||
const sums = [] |
|||
columns.forEach((column, index) => { |
|||
if (index === 1) { |
|||
sums[index] = '全年累计总量' |
|||
return |
|||
} |
|||
console.log('latex', latex) |
|||
if (latex) { |
|||
try { |
|||
return katex.renderToString(latex, { |
|||
throwOnError: false |
|||
}) |
|||
} catch (e) { |
|||
console.error('KaTeX rendering error:', e) |
|||
return match |
|||
} |
|||
const values = data.map(item => Number(item[column.property])) |
|||
if (!values.every(value => isNaN(value))) { |
|||
sums[index] = values.reduce((prev, curr) => { |
|||
return prev + curr |
|||
}, 0) |
|||
} else { |
|||
sums[index] = '-' |
|||
} |
|||
return match |
|||
}) |
|||
return sums |
|||
}, |
|||
resetQuery() { |
|||
this.fondsIds = [] |
|||
this.years = [] |
|||
this.getBorrowdStatistics() |
|||
}, |
|||
goToHtml() { |
|||
// 这里的 'test.html' 是你放在 public 目录下的 HTML 文件名称 |
|||
// window.location.href = 'report/annual.htm' |
|||
window.open('report/annual.htm', '_blank') |
|||
getFondsDatas() { |
|||
FetchFondsAll().then(res => { |
|||
this.fondsOptions = res |
|||
}) |
|||
}, |
|||
getArchivedAllYearDatas() { |
|||
FetchArchivedAllYear().then(res => { |
|||
this.yearsOptions = res.map(item => ({ |
|||
id: item, |
|||
name: item |
|||
})) |
|||
}) |
|||
}, |
|||
getBorrowdStatistics() { |
|||
FetchBorrowdStatistics({ |
|||
fondsIds: this.fondsIds, |
|||
years: this.years |
|||
}).then(res => { |
|||
this.allData = res |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</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; |
|||
.app-container { |
|||
height: calc(100vh - 140px); |
|||
.head-search{ |
|||
.el-select, |
|||
.el-button{ |
|||
margin-right: 10px; |
|||
} |
|||
} |
|||
::v-deep .el-table__footer{ |
|||
font-size: 14px; |
|||
} |
|||
::v-deep .el-table__empty-block{ |
|||
border-bottom: 1px solid #e4e7ed; |
|||
} |
|||
} |
|||
|
|||
// .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> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue