2 changed files with 116 additions and 248 deletions
@ -1,278 +1,137 @@ |
|||||
<template> |
<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> |
</div> |
||||
</template> |
</template> |
||||
|
|
||||
<script> |
<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 { |
export default { |
||||
name: 'BorrowingStatistics', |
name: 'BorrowingStatistics', |
||||
components: { }, |
|
||||
data() { |
data() { |
||||
return { |
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() { |
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: { |
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> |
</script> |
||||
|
|
||||
<style lang="scss" scoped> |
<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> |
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue