From 0b9e7cd644fa0afa8cf1507824a465f213c1f6e3 Mon Sep 17 00:00:00 2001
From: xuhuajiao <13476289682@163.com>
Date: Thu, 8 May 2025 17:04:12 +0800
Subject: [PATCH] =?UTF-8?q?=E6=A1=A3=E6=A1=88=E7=BB=9F=E8=AE=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../module/archivesInfo/index.vue             |  34 +-
 .../module/archivesInfo/index.vue             |  35 +-
 .../dataStatistics/index.vue                  | 404 +++++++++++-------
 .../module/archivesInfo/index.vue             |  35 +-
 .../components/archivesDetail/detail.vue      |  35 +-
 5 files changed, 380 insertions(+), 163 deletions(-)

diff --git a/src/views/archiveKeeping/inStorage/pendingInArchive/module/archivesInfo/index.vue b/src/views/archiveKeeping/inStorage/pendingInArchive/module/archivesInfo/index.vue
index 0f0f14d..6e2177d 100644
--- a/src/views/archiveKeeping/inStorage/pendingInArchive/module/archivesInfo/index.vue
+++ b/src/views/archiveKeeping/inStorage/pendingInArchive/module/archivesInfo/index.vue
@@ -28,6 +28,30 @@
               <p style="flex:1">{{ item.context === 1 ? '有' : '无' }}</p>
             </el-col>
           </el-row>
+          <el-row>
+            <el-col v-for="(item,index) in archivesDetailsData.slice(archivesDetailsData.length-4,archivesDetailsData.length)" :key="'last'+index" :span="item.isLine ? 24 : 12" class="base-info-item">
+              <span>{{ item.fieldCnName }}：</span>
+              <div v-if="item.fieldName === 'folder_location' && item.context" :style="{ width: item.editLength+'px'}">
+                {{ item.editLength ? item.context : '12' }}
+                <div v-if="item.context.indexOf(',')">
+                  <el-tag
+                    v-for="(val,key) in item.context.split(',')"
+                    :key="key"
+                    :type="val"
+                    effect="dark"
+                  >
+                    {{ val }}
+                  </el-tag>
+                </div>
+                <div v-else-if="!item.context.indexOf(',')">
+                  <el-tag effect="dark">{{ item.context }}</el-tag>
+                </div>
+              </div>
+              <div v-else :style="{ width: item.editLength+'px'}" :class="[ (item.fieldName === 'borrow_type') ? 'row-state row-lending' : '' ]">
+                {{ item.context }}
+              </div>
+            </el-col>
+          </el-row>
         </div>
         <!-- 附件 -->
         <UploadFile v-if="archivesTabIndex==1" ref="uploadFile" class="item-content" :is-upload-detail="false" :storage-category="storageCategory" :arc-id="arcId" />
@@ -95,10 +119,14 @@ export default {
     }
   },
   computed: {
+    // filteredArray() {
+    //   const lastIndex = this.archivesDetailsData.length - 1
+    //   return this.archivesDetailsData
+    //     .filter((item, index) => index !== lastIndex || item.fieldName !== 'is_entity')
+    // }
     filteredArray() {
-      const lastIndex = this.archivesDetailsData.length - 1
-      return this.archivesDetailsData
-        .filter((item, index) => index !== lastIndex || item.fieldName !== 'is_entity')
+      const length = this.archivesDetailsData.length
+      return this.archivesDetailsData.slice(0, length - 5)
     }
   },
   created() {
diff --git a/src/views/archivesManage/managementLibrary/module/archivesInfo/index.vue b/src/views/archivesManage/managementLibrary/module/archivesInfo/index.vue
index 30c5a10..e6cfaf3 100644
--- a/src/views/archivesManage/managementLibrary/module/archivesInfo/index.vue
+++ b/src/views/archivesManage/managementLibrary/module/archivesInfo/index.vue
@@ -29,6 +29,30 @@
               <p style="flex:1">{{ item.context === 1 ? '有' : '无' }}</p>
             </el-col>
           </el-row>
+          <el-row>
+            <el-col v-for="(item,index) in archivesDetailsData.slice(archivesDetailsData.length-4,archivesDetailsData.length)" :key="'last'+index" :span="item.isLine ? 24 : 12" class="base-info-item">
+              <span>{{ item.fieldCnName }}：</span>
+              <div v-if="item.fieldName === 'folder_location' && item.context" :style="{ width: item.editLength+'px'}">
+                {{ item.editLength ? item.context : '12' }}
+                <div v-if="item.context.indexOf(',')">
+                  <el-tag
+                    v-for="(val,key) in item.context.split(',')"
+                    :key="key"
+                    :type="val"
+                    effect="dark"
+                  >
+                    {{ val }}
+                  </el-tag>
+                </div>
+                <div v-else-if="!item.context.indexOf(',')">
+                  <el-tag effect="dark">{{ item.context }}</el-tag>
+                </div>
+              </div>
+              <div v-else :style="{ width: item.editLength+'px'}" :class="[ (item.fieldName === 'borrow_type') ? 'row-state row-lending' : '' ]">
+                {{ item.context }}
+              </div>
+            </el-col>
+          </el-row>
         </div>
         <!-- 附件 -->
         <UploadFile v-if="archivesTabIndex==1" ref="uploadFile" class="item-content" :is-upload-detail="false" :selected-category="selectedCategory" :arc-id="arcId" />
@@ -100,10 +124,15 @@ export default {
     }
   },
   computed: {
+    // filteredArray() {
+    //   const lastIndex = this.archivesDetailsData.length - 1
+    //   return this.archivesDetailsData
+    //     .filter((item, index) => index !== lastIndex || item.fieldName !== 'is_entity')
+    // }
     filteredArray() {
-      const lastIndex = this.archivesDetailsData.length - 1
-      return this.archivesDetailsData
-        .filter((item, index) => index !== lastIndex || item.fieldName !== 'is_entity')
+      // 获取数组长度
+      const length = this.archivesDetailsData.length
+      return this.archivesDetailsData.slice(0, length - 5)
     }
   },
   created() {
diff --git a/src/views/archivesStatistics/dataStatistics/index.vue b/src/views/archivesStatistics/dataStatistics/index.vue
index 18042eb..e026b86 100644
--- a/src/views/archivesStatistics/dataStatistics/index.vue
+++ b/src/views/archivesStatistics/dataStatistics/index.vue
@@ -1,185 +1,287 @@
 <template>
-  <div class="app-container" style="height: calc(100vh - 140px);">
-    <el-table :data="tableData" style="width: 100%">
-      <el-table-column prop="company_name" label="公司名称" width="150" align="center" />
-      <el-table-column label="数据统计" align="center">
-        <template slot-scope="scope">
-          <el-table :data="scope.row.archive_types" style="width: 100%">
-            <el-table-column prop="type_name" label="档案门类" width="150" align="center" />
-            <el-table-column label="收集库" align="center">
-              <el-table-column prop="collection.未归档" label="未归档" align="center" />
-              <el-table-column prop="collection.归档中" label="归档中" align="center" />
-              <el-table-column prop="collection.已装盒" label="已装盒" align="center" />
-              <el-table-column prop="collection.未装盒" label="未装盒" align="center" />
-              <el-table-column prop="collection.全部" label="全部" align="center" />
-            </el-table-column>
-            <el-table-column label="管理库" align="center">
-              <el-table-column prop="management.已装盒" label="已装盒" align="center" />
-              <el-table-column prop="management.未装盒" label="未装盒" align="center" />
-              <el-table-column prop="management.已入库" label="已入库" align="center" />
-              <el-table-column prop="management.未入库" label="未入库" align="center" />
-              <el-table-column prop="management.审批中" label="审批中" align="center" />
-              <el-table-column prop="management.全部" label="全部" align="center" />
-            </el-table-column>
-          </el-table>
-        </template>
-      </el-table-column>
-    </el-table>
+  <div class="app-container">
+    <div v-for="(company, companyIndex) in allData" :key="'company-' + companyIndex" class="company-section">
+      <h3 class="table-header">{{ company.name }}</h3>
+      <div class="grid-table">
+        <div class="grid-header">
+          <div class="grid-header-tr">
+            <div class="header-row colspan2 rowspan2 th-style">档案门类</div>
+          </div>
+          <div class="grid-header-tr">
+            <div class="header-row th-style">收集整编</div>
+            <div class="row-cell">
+              <div class="colspan th-style">回收站</div>
+              <div class="colspan6 th-style">收集库</div>
+            </div>
+          </div>
+          <div class="grid-header-tr">
+            <div class="header-row th-style">档案管理</div>
+            <div class="row-cell">
+              <div class="colspan th-style">销毁库</div>
+              <div class="colspan6 th-style">管理库</div>
+            </div>
+          </div>
+        </div>
+        <div v-for="(row, rowIndex) in company.tableData" :key="'row-' + rowIndex" class="grid-content">
+          <div class="colspan2 rowspan3"> {{ row.category }} </div>
+          <div>
+            <div class="colspan rowspan2"> {{ row.recycle }} </div>
+            <div class="grid-item placeholder-line" />
+          </div>
+          <div>
+            <div class="grid-item">
+              <div class="colspan">未归档</div>
+              <div class="colspan">{{ row.unfiled }}</div>
+              <div class="colspan">归档中</div>
+              <div class="colspan">{{ row.collectArchiving }}</div>
+            </div>
+            <div class="grid-item">
+              <div class="colspan">未装盒</div>
+              <div class="colspan">{{ row.collectPacked }}</div>
+              <div class="colspan">已装盒</div>
+              <div class="colspan">{{ row.collectPacked }}</div>
+            </div>
+            <div class="grid-item placeholder-line " />
+          </div>
+          <div>
+            <div class="grid-item">
+              <div class="colspan rowspan2">全部</div>
+              <div class="colspan rowspan2">{{ row.collectAll }}</div>
+            </div>
+            <div class="grid-item placeholder-line placeholder-line-right" />
+          </div>
+          <div class="colspan rowspan3"> {{ row.destroy }} </div>
+          <div>
+            <div class="grid-item">
+              <div class="colspan">未装盒</div>
+              <div class="colspan">{{ row.manageUnpacked }}</div>
+              <div class="colspan">已装盒</div>
+              <div class="colspan">{{ row.managePacked }}</div>
+            </div>
+            <div class="grid-item">
+              <div class="colspan">未入库</div>
+              <div class="colspan">{{ row.manageUnstored }}</div>
+              <div class="colspan">已入库</div>
+              <div class="colspan">{{ row.manageStored }}</div>
+            </div>
+            <div class="grid-item">
+              <div class="colspan">空闲中</div>
+              <div class="colspan">{{ row.manageIdle }}</div>
+              <div class="colspan">审批中</div>
+              <div class="colspan">{{ row.manageApproving }}</div>
+            </div>
+          </div>
+          <div class="grid-item">
+            <div class="colspan rowspan3">全部</div>
+            <div class="colspan rowspan3">{{ row.collectAll }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
-const tableData = [
+const allData = [
   {
-    'company_name': '武汉飞天智能',
-    'archive_types': [
+    name: '武汉飞天智能',
+    tableData: [
       {
-        'type_id': 1,
-        'type_name': '文书档案（文件）',
-        'collection': {
-          '未归档': 5,
-          '归档中': 0,
-          '已装盒': 1,
-          '未装盒': 4,
-          '全部': 5
-        },
-        'management': {
-          '已装盒': 3,
-          '未装盒': 29,
-          '已入库': 0,
-          '未入库': 32,
-          '审批中': 0,
-          '全部': 32
-        }
+        category: '文书档案（文件）',
+        recycle: 4,
+        unfiled: 0,
+        collectArchiving: 0,
+        collectPacked: 1,
+        collectAll: 5,
+        destroy: 4,
+        manageUnpacked: 4,
+        managePacked: 1,
+        manageUnstored: 4,
+        manageStored: 1,
+        manageIdle: 5,
+        manageApproving: 0,
+        manageAll: 5
       },
       {
-        'type_id': 2,
-        'type_name': '文书档案（案卷）',
-        'collection': {
-          '未归档': 1,
-          '归档中': 0,
-          '已装盒': 0,
-          '未装盒': 0,
-          '全部': 4
-        },
-        'management': {
-          '已装盒': 1,
-          '未装盒': 13,
-          '已入库': 0,
-          '未入库': 14,
-          '审批中': 0,
-          '全部': 14
-        }
+        category: '文书档案（案卷）',
+        recycle: 4,
+        unfiled: 0,
+        collectArchiving: 0,
+        collectPacked: 1,
+        collectAll: 5,
+        destroy: 4,
+        manageUnpacked: 4,
+        managePacked: 1,
+        manageUnstored: 4,
+        manageStored: 1,
+        manageIdle: 5,
+        manageApproving: 0,
+        manageAll: 5
       },
       {
-        'type_id': 3,
-        'type_name': '科技档案项目',
-        'collection': {
-          '未归档': 5,
-          '归档中': 0,
-          '已装盒': 0,
-          '未装盒': 5,
-          '全部': 5
-        },
-        'management': {
-          '已装盒': 0,
-          '未装盒': 0,
-          '已入库': 0,
-          '未入库': 0,
-          '审批中': 0,
-          '全部': 0
-        }
+        category: '互联网项目',
+        recycle: 4,
+        unfiled: 0,
+        collectArchiving: 0,
+        collectPacked: 1,
+        collectAll: 5,
+        destroy: 4,
+        manageUnpacked: 4,
+        managePacked: 1,
+        manageUnstored: 4,
+        manageStored: 1,
+        manageIdle: 5,
+        manageApproving: 0,
+        manageAll: 5
       }
     ]
   },
   {
-    'company_name': '阅行客（武汉）科技',
-    'archive_types': [
+    name: '闵行客（武汉）科技',
+    tableData: [
       {
-        'type_name': '文书档案（文件）',
-        'collection': {
-          '未归档': 5,
-          '归档中': 1,
-          '已装盒': 0,
-          '未装盒': 5,
-          '全部': 5
-        },
-        'management': {
-          '已装盒': 0,
-          '未装盒': 7,
-          '已入库': 0,
-          '未入库': 7,
-          '审批中': 0,
-          '全部': 7
-        }
+        category: '文书档案（文件）',
+        recycle: 4,
+        unfiled: 0,
+        collectArchiving: 0,
+        collectPacked: 1,
+        collectAll: 5,
+        destroy: 4,
+        manageUnpacked: 4,
+        managePacked: 1,
+        manageUnstored: 4,
+        manageStored: 1,
+        manageIdle: 5,
+        manageApproving: 0,
+        manageAll: 5
       },
       {
-        'type_name': '文书档案（案卷）',
-        'collection': {
-          '未归档': 4,
-          '归档中': 0,
-          '已装盒': 2,
-          '未装盒': 2,
-          '全部': 4
-        },
-        'management': {
-          '已装盒': 0,
-          '未装盒': 4,
-          '已入库': 0,
-          '未入库': 4,
-          '审批中': 0,
-          '全部': 4
-        }
+        category: '文书档案（案卷）',
+        recycle: 4,
+        unfiled: 0,
+        collectArchiving: 0,
+        collectPacked: 1,
+        collectAll: 5,
+        destroy: 4,
+        manageUnpacked: 4,
+        managePacked: 1,
+        manageUnstored: 4,
+        manageStored: 1,
+        manageIdle: 5,
+        manageApproving: 0,
+        manageAll: 5
       }
     ]
   }
 ]
+
 export default {
   name: 'DataStatistics',
   data() {
     return {
-      tableData: tableData
+      allData: allData
     }
-  },
-  computed: {
-  },
-  watch: {
-  },
-  created() {
-  },
-  mounted() {
-  },
-  methods: {
   }
 }
 </script>
 
 <style lang="scss" scoped>
-::v-deep .el-table .cell{
-  padding: 0 !important;
-  margin-left: -2px !important;
-  margin-top: -2px !important;
-}
-::v-deep .el-table .el-table__body-wrapper{
-  // border-bottom: 1px solid #000;
-  // margin-top: -1px !important;
-}
-::v-deep .el-table .el-table__body-wrapper td.el-table__cell,
-::v-deep .el-table .el-table__fixed-right td.el-table__cell {
-  padding: 0 !important;
-  border-left: 1px solid #000;
-  border-bottom: 1px solid #000;
-  border-right: 1px solid #000;
-}
-::v-deep.el-table .el-table__header-wrapper th.el-table__cell,
-::v-deep.el-table .el-table__header th.el-table__cell{
-  border: 1px solid #000;
-  // border-left: 1px solid yellow;
-  // border-top: 1px solid yellow;
-  // border-bottom: 1px solid yellow;
-}
-::v-deep .el-table td.el-table__cell div{
-  // margin-left: -1px !important;
-  // border-bottom: 1px solid #000 !important;
+$base-line-height: 30px;
+$border-color: #ddd;
+$bg-color: #e8f2ff;
+
+.grid-table{
+  border-left: 1px solid $border-color;
+}
+
+.app-container {
+  height: calc(100vh - 140px);
+  line-height: $base-line-height;
+}
+
+.company-section {
+  margin-bottom: 20px;
+}
+
+.table-header{
+  height: 40px;
+  line-height: 40px;
+  text-align: center;
+  border: 1px solid $border-color;
+  border-bottom: none;
+  width: calc(100vw - 297px);
+  color: #000;
+  background-color: $bg-color;
+}
+
+.grid-header{
+  display: flex;
+  justify-content: flex-start;
+
+  .grid-header-tr{
+    border-top: 1px solid $border-color;
+    text-align: center;
+  }
+
+  .header-row{
+    @extend .cell-base;
+  }
+}
+
+.cell-base {
+  border-right: 1px solid $border-color;
+  border-bottom: 1px solid $border-color;
+  text-align: center;
+}
+
+.colspan{
+  @extend .cell-base;
+  width: calc((100vw - 298px) / 16);
+}
+
+.colspan2{
+  @extend .colspan;
+  width: calc((100vw - 298px) / 16 * 2);
+}
+
+.colspan6{
+  @extend .colspan;
+  width: calc((100vw - 298px) / 16 * 6);
+}
+.th-style{
+  // background-color: $bg-color;
+  color: #000;
+  font-weight: bold;
+}
+
+.placeholder-line{
+  height: $base-line-height + 1;
+  border-bottom: 1px solid $border-color;
+}
+.placeholder-line-right{
+  border-right: 1px solid $border-color;
+}
+
+.rowspan2{
+  height: $base-line-height * 2 + 2;
+  line-height: $base-line-height * 2  + 2;
+}
+
+.rowspan3{
+  height: $base-line-height * 3 + 3;
+  line-height: $base-line-height * 3 + 3;
+}
+
+.row-cell{
+  display: flex;
+  justify-content: flex-start;
+  div{
+    border-right:1px solid $border-color;
+  }
+}
+
+.grid-content, .grid-item{
+  display: flex;
+  justify-content: flex-start;
 }
 </style>
diff --git a/src/views/collectReorganizi/collectionLibrary/module/archivesInfo/index.vue b/src/views/collectReorganizi/collectionLibrary/module/archivesInfo/index.vue
index 760cb5a..77ed944 100644
--- a/src/views/collectReorganizi/collectionLibrary/module/archivesInfo/index.vue
+++ b/src/views/collectReorganizi/collectionLibrary/module/archivesInfo/index.vue
@@ -29,6 +29,30 @@
               <p style="flex:1">{{ item.context === 1 ? '有' : '无' }}</p>
             </el-col>
           </el-row>
+          <el-row>
+            <el-col v-for="(item,index) in archivesDetailsData.slice(archivesDetailsData.length-4,archivesDetailsData.length)" :key="'last'+index" :span="item.isLine ? 24 : 12" class="base-info-item">
+              <span>{{ item.fieldCnName }}：</span>
+              <div v-if="item.fieldName === 'folder_location' && item.context" :style="{ width: item.editLength+'px'}">
+                {{ item.editLength ? item.context : '12' }}
+                <div v-if="item.context.indexOf(',')">
+                  <el-tag
+                    v-for="(val,key) in item.context.split(',')"
+                    :key="key"
+                    :type="val"
+                    effect="dark"
+                  >
+                    {{ val }}
+                  </el-tag>
+                </div>
+                <div v-else-if="!item.context.indexOf(',')">
+                  <el-tag effect="dark">{{ item.context }}</el-tag>
+                </div>
+              </div>
+              <div v-else :style="{ width: item.editLength+'px'}" :class="[ (item.fieldName === 'borrow_type') ? 'row-state row-lending' : '' ]">
+                {{ item.context }}
+              </div>
+            </el-col>
+          </el-row>
         </div>
         <!-- 附件 -->
         <UploadFile v-if="archivesTabIndex==1" ref="uploadFile" class="item-content" :is-upload-detail="false" :selected-category="selectedCategory" :arc-id="arcId" />
@@ -98,10 +122,15 @@ export default {
     }
   },
   computed: {
+    // filteredArray() {
+    //   const lastIndex = this.archivesDetailsData.length - 1
+    //   return this.archivesDetailsData
+    //     .filter((item, index) => index !== lastIndex || item.fieldName !== 'is_entity')
+    // }
     filteredArray() {
-      const lastIndex = this.archivesDetailsData.length - 1
-      return this.archivesDetailsData
-        .filter((item, index) => index !== lastIndex || item.fieldName !== 'is_entity')
+      // 获取数组长度
+      const length = this.archivesDetailsData.length
+      return this.archivesDetailsData.slice(0, length - 5)
     }
   },
   created() {
diff --git a/src/views/components/archivesDetail/detail.vue b/src/views/components/archivesDetail/detail.vue
index 33997c3..ecd1863 100644
--- a/src/views/components/archivesDetail/detail.vue
+++ b/src/views/components/archivesDetail/detail.vue
@@ -27,6 +27,30 @@
               <p style="flex:1">{{ item.context === 1 ? '有' : '无' }}</p>
             </el-col>
           </el-row>
+          <el-row>
+            <el-col v-for="(item,index) in archivesDetailsData.slice(archivesDetailsData.length-4,archivesDetailsData.length)" :key="'last'+index" :span="item.isLine ? 24 : 12" class="base-info-item">
+              <span>{{ item.fieldCnName }}：</span>
+              <div v-if="item.fieldName === 'folder_location' && item.context" :style="{ width: item.editLength+'px'}">
+                {{ item.editLength ? item.context : '12' }}
+                <div v-if="item.context.indexOf(',')">
+                  <el-tag
+                    v-for="(val,key) in item.context.split(',')"
+                    :key="key"
+                    :type="val"
+                    effect="dark"
+                  >
+                    {{ val }}
+                  </el-tag>
+                </div>
+                <div v-else-if="!item.context.indexOf(',')">
+                  <el-tag effect="dark">{{ item.context }}</el-tag>
+                </div>
+              </div>
+              <div v-else :style="{ width: item.editLength+'px'}" :class="[ (item.fieldName === 'borrow_type') ? 'row-state row-lending' : '' ]">
+                {{ item.context }}
+              </div>
+            </el-col>
+          </el-row>
         </div>
         <!-- 附件 -->
         <UploadFile v-if="archivesTabIndex===1" ref="uploadFile" class="item-content" :is-upload-detail="false" :selected-category="selectedCategory" :arc-id="arcId" :category-id="categoryId" :is-show-utilize-handle-btn="isShowUtilizeHandleBtn" :archives-details-data="archivesDetailsData" />
@@ -93,10 +117,15 @@ export default {
     }
   },
   computed: {
+    // filteredArray() {
+    //   const lastIndex = this.archivesDetailsData.length - 1
+    //   return this.archivesDetailsData
+    //     .filter((item, index) => index !== lastIndex || item.fieldName !== 'is_entity')
+    // }
     filteredArray() {
-      const lastIndex = this.archivesDetailsData.length - 1
-      return this.archivesDetailsData
-        .filter((item, index) => index !== lastIndex || item.fieldName !== 'is_entity')
+      // 获取数组长度
+      const length = this.archivesDetailsData.length
+      return this.archivesDetailsData.slice(0, length - 5)
     }
   },
   created() {