From 6f28ad3fcf4239444370ecc60cbb24ed26fa2c66 Mon Sep 17 00:00:00 2001
From: xuhuajiao <13476289682@163.com>
Date: Thu, 28 May 2026 16:35:06 +0800
Subject: [PATCH] =?UTF-8?q?=E5=80=9F=E9=98=85=E7=BB=9F=E8=AE=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/statistics/statistics.js              |  11 +-
 .../borrowingStatistics/index.vue             | 353 ++++++------------
 2 files changed, 116 insertions(+), 248 deletions(-)

diff --git a/src/api/statistics/statistics.js b/src/api/statistics/statistics.js
index c337e97..fa519e8 100644
--- a/src/api/statistics/statistics.js
+++ b/src/api/statistics/statistics.js
@@ -26,6 +26,14 @@ export function FetchRoomCollectionStatistics(params) {
   })
 }
 
+// 借阅统计
+export function FetchBorrowdStatistics(params) {
+  return request({
+    url: 'api/control/getBorrowdStatistics' + '?' + qs.stringify(params, { indices: false }),
+    method: 'get'
+  })
+}
+
 // 删除AI辅助著录
 // export function FetchDelAssistEnter(data) {
 //   return request({
@@ -38,5 +46,6 @@ export function FetchRoomCollectionStatistics(params) {
 export default {
   FetchTotalStatistics,
   FetchArchivedAllYear,
-  FetchRoomCollectionStatistics
+  FetchRoomCollectionStatistics,
+  FetchBorrowdStatistics
 }
diff --git a/src/views/archivesStatistics/borrowingStatistics/index.vue b/src/views/archivesStatistics/borrowingStatistics/index.vue
index 03c6d17..ef3032a 100644
--- a/src/views/archivesStatistics/borrowingStatistics/index.vue
+++ b/src/views/archivesStatistics/borrowingStatistics/index.vue
@@ -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...
-
-## 里程碑
-> 整个项目中，关键节点的里程碑计划。
->
-
-![画板](http://gips0.baidu.com/it/u=3602773692,1512483864&fm=3028&app=3028&f=JPEG&fmt=auto?w=960&h=1280)
-
-## 人员安排
-> 输入项目的所有干系人，包括内部和外部干系人。
->
-
-| **人员** | **岗位** |
-| --- | --- |
-| @<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>