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> |
<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> |
</div> |
||||
</template> |
</template> |
||||
|
|
||||
<script> |
<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 { |
export default { |
||||
name: 'DataStatistics', |
name: 'DataStatistics', |
||||
data() { |
data() { |
||||
return { |
return { |
||||
tableData: tableData |
|
||||
|
allData: allData |
||||
} |
} |
||||
}, |
|
||||
computed: { |
|
||||
}, |
|
||||
watch: { |
|
||||
}, |
|
||||
created() { |
|
||||
}, |
|
||||
mounted() { |
|
||||
}, |
|
||||
methods: { |
|
||||
} |
} |
||||
} |
} |
||||
</script> |
</script> |
||||
|
|
||||
<style lang="scss" scoped> |
<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> |
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue