5 changed files with 380 additions and 163 deletions
-
34src/views/archiveKeeping/inStorage/pendingInArchive/module/archivesInfo/index.vue
-
35src/views/archivesManage/managementLibrary/module/archivesInfo/index.vue
-
404src/views/archivesStatistics/dataStatistics/index.vue
-
35src/views/collectReorganizi/collectionLibrary/module/archivesInfo/index.vue
-
35src/views/components/archivesDetail/detail.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> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue