|
|
|
@ -21,12 +21,15 @@ |
|
|
|
<h3 class="table-title"> |
|
|
|
<p class="title-arrow">档案类别</p> |
|
|
|
</h3> |
|
|
|
<div class="chart-wrapper" style="height: calc(100% - 40px);"> |
|
|
|
<el-date-picker |
|
|
|
v-model="value1" |
|
|
|
type="month" |
|
|
|
v-model="cateDate" |
|
|
|
type="year" |
|
|
|
placeholder="请选择" |
|
|
|
value-format="yyyy" |
|
|
|
:picker-options="pickerOptions" |
|
|
|
@change="handleCateDate" |
|
|
|
/> |
|
|
|
<div class="chart-wrapper" style="height: calc(100% - 40px);"> |
|
|
|
<cate-pie :cate-data="cateData" /> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -38,6 +41,13 @@ |
|
|
|
<h3 class="table-title"> |
|
|
|
<p class="title-arrow">档案类型</p> |
|
|
|
</h3> |
|
|
|
<el-date-picker |
|
|
|
v-model="typeDate" |
|
|
|
type="month" |
|
|
|
placeholder="请选择" |
|
|
|
value-format="yyyy-MM" |
|
|
|
@change="handleTypeDate" |
|
|
|
/> |
|
|
|
<div class="chart-wrapper" style="height: calc(100% - 40px);"> |
|
|
|
<type-pie :type-data="typeData" /> |
|
|
|
</div> |
|
|
|
@ -53,8 +63,17 @@ |
|
|
|
<h3 class="table-title"> |
|
|
|
<p class="title-arrow">出入库管理情况</p> |
|
|
|
</h3> |
|
|
|
<el-date-picker |
|
|
|
v-model="inOutStorageDate" |
|
|
|
class="storageInput" |
|
|
|
type="year" |
|
|
|
placeholder="请选择" |
|
|
|
value-format="yyyy" |
|
|
|
:picker-options="pickerOptions" |
|
|
|
@change="handleStorageDate" |
|
|
|
/> |
|
|
|
<div class="chart-wrapper" style="height: calc(100% - 40px);"> |
|
|
|
<BarEcharts /> |
|
|
|
<BarEcharts :storage-data="storageData" /> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</el-col> |
|
|
|
@ -65,8 +84,15 @@ |
|
|
|
<h3 class="table-title"> |
|
|
|
<p class="title-arrow">档案检索排名</p> |
|
|
|
</h3> |
|
|
|
<el-date-picker |
|
|
|
v-model="arcSearchDate" |
|
|
|
type="month" |
|
|
|
placeholder="请选择" |
|
|
|
value-format="yyyy-MM" |
|
|
|
@change="handleSearchDate" |
|
|
|
/> |
|
|
|
<div class="chart-wrapper" style="height: calc(100% - 40px);"> |
|
|
|
<AcrossBar /> |
|
|
|
<AcrossBar :search-acrives-data="searchAcrivesData" /> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</el-col> |
|
|
|
@ -81,8 +107,16 @@ |
|
|
|
<h3 class="table-title"> |
|
|
|
<p class="title-arrow">档案实际情况</p> |
|
|
|
</h3> |
|
|
|
<el-date-picker |
|
|
|
v-model="arcAddDate" |
|
|
|
type="year" |
|
|
|
placeholder="请选择" |
|
|
|
value-format="yyyy" |
|
|
|
:picker-options="pickerOptions" |
|
|
|
@change="handleArcAddSta" |
|
|
|
/> |
|
|
|
<div class="chart-wrapper" style="height: calc(100% - 40px);"> |
|
|
|
<LineEchart /> |
|
|
|
<LineEchart :add-arcives-data="addArcivesData" /> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</el-col> |
|
|
|
@ -98,14 +132,229 @@ import typePie from '@/views/components/echarts/typePie.vue' |
|
|
|
import BarEcharts from './module/barEcharts.vue' |
|
|
|
import AcrossBar from './module/acrossBar.vue' |
|
|
|
import LineEchart from './module/lineEchart.vue' |
|
|
|
import { FetchInitBorrowerNumStatistics, FetchInitArchivesTypeNum, FetchInitArchivesTypeStatistics, FetchStorageStatistics, FetchInitArchivesSearchRanking, FetchInitAddArchivesStatistics } from '@/api/archivesManage/statistics' |
|
|
|
export default { |
|
|
|
components: { lendAcross, catePie, typePie, BarEcharts, AcrossBar, LineEchart }, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
value1: '', |
|
|
|
lendData: [100, 18203, 23489, 29034, 104970], |
|
|
|
cateData: [1000, 700], |
|
|
|
typeData: [1110, 2000, 800, 600, 900] |
|
|
|
cateDate: '', |
|
|
|
typeDate: '', |
|
|
|
inOutStorageDate: '', |
|
|
|
arcSearchDate: '', |
|
|
|
arcAddDate: '', |
|
|
|
pickerOptions: { |
|
|
|
disabledDate(time) { |
|
|
|
return time.getTime() > Date.now() - 8.64e6 |
|
|
|
} |
|
|
|
}, |
|
|
|
lendData: [], |
|
|
|
cateData: [], |
|
|
|
typeData: [], |
|
|
|
storageData: { |
|
|
|
storageMonths: [], |
|
|
|
inStorageData: [], |
|
|
|
outStorageData: [] |
|
|
|
}, |
|
|
|
searchAcrivesData: { |
|
|
|
searchName: [], |
|
|
|
searchValue: [] |
|
|
|
}, |
|
|
|
addArcivesData: { |
|
|
|
addArcivesMonth: [], |
|
|
|
addArcivesNum: [] |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
this.getBorrowerNumSta() |
|
|
|
this.getArchivesTypeNum() |
|
|
|
this.getArchivesTypeStatistics() |
|
|
|
this.getStorageStatistics() |
|
|
|
this.getArchivesSearchRanking() |
|
|
|
this.getAddArchivesStatistics() |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
// 档案借阅统计 |
|
|
|
getBorrowerNumSta() { |
|
|
|
FetchInitBorrowerNumStatistics().then(res => { |
|
|
|
if (res) { |
|
|
|
delete res.total |
|
|
|
// 固定排序 '在库档案', '已借档案', '待借档案', '逾期档案', '异常档案' |
|
|
|
const borrowerArr = [] |
|
|
|
for (const i in res) { |
|
|
|
const obj = {} |
|
|
|
obj.name = i |
|
|
|
obj.value = res[i] |
|
|
|
if (i === 'inStorage') { |
|
|
|
obj.sequence = 1 |
|
|
|
} else if (i === 'borrow') { |
|
|
|
obj.sequence = 2 |
|
|
|
} else if (i === 'waitBorrow') { |
|
|
|
obj.sequence = 3 |
|
|
|
} else if (i === 'overdue') { |
|
|
|
obj.sequence = 4 |
|
|
|
} else if (i === 'abnormal') { |
|
|
|
obj.sequence = 5 |
|
|
|
} |
|
|
|
borrowerArr.push(obj) |
|
|
|
} |
|
|
|
this.arrSortByKey(borrowerArr, 'sequence', false) |
|
|
|
borrowerArr.forEach(item => { |
|
|
|
this.lendData.push(item.value) |
|
|
|
}) |
|
|
|
} |
|
|
|
}) |
|
|
|
}, |
|
|
|
// 档案类别 - 年选择 |
|
|
|
handleCateDate() { |
|
|
|
console.log(this.cateDate) |
|
|
|
this.getArchivesTypeNum() |
|
|
|
}, |
|
|
|
// 档案类别 |
|
|
|
getArchivesTypeNum() { |
|
|
|
let params |
|
|
|
if (this.cateDate) { |
|
|
|
params = { |
|
|
|
'type': this.cateDate |
|
|
|
} |
|
|
|
} else { |
|
|
|
params = { |
|
|
|
'type': 1 |
|
|
|
} |
|
|
|
} |
|
|
|
FetchInitArchivesTypeNum(params).then(res => { |
|
|
|
if (res) { |
|
|
|
for (const i in res) { |
|
|
|
this.cateData.push(res[i]) |
|
|
|
} |
|
|
|
} |
|
|
|
}) |
|
|
|
}, |
|
|
|
// 档案类型 - 月选择 |
|
|
|
handleTypeDate() { |
|
|
|
console.log(this.typeDate) |
|
|
|
this.getArchivesTypeStatistics() |
|
|
|
}, |
|
|
|
// 档案类型 |
|
|
|
getArchivesTypeStatistics() { |
|
|
|
let params |
|
|
|
if (this.typeDate) { |
|
|
|
params = { |
|
|
|
'type': this.typeDate |
|
|
|
} |
|
|
|
} else { |
|
|
|
params = { |
|
|
|
'type': 1 |
|
|
|
} |
|
|
|
} |
|
|
|
FetchInitArchivesTypeStatistics(params).then(res => { |
|
|
|
if (res) { |
|
|
|
res.map(item => { |
|
|
|
const obj = {} |
|
|
|
obj.name = item.archivesType |
|
|
|
obj.value = item.archivesNum |
|
|
|
this.typeData.push(obj) |
|
|
|
}) |
|
|
|
} |
|
|
|
}) |
|
|
|
}, |
|
|
|
// 档案类别 - 年选择 |
|
|
|
handleStorageDate() { |
|
|
|
console.log(this.inOutStorageDate) |
|
|
|
this.getStorageStatistics() |
|
|
|
}, |
|
|
|
// 出入库管理情况 |
|
|
|
getStorageStatistics() { |
|
|
|
let params |
|
|
|
let year |
|
|
|
if (this.inOutStorageDate) { |
|
|
|
params = { |
|
|
|
'type': this.inOutStorageDate |
|
|
|
} |
|
|
|
year = this.arcAddDate |
|
|
|
} else { |
|
|
|
params = { |
|
|
|
'type': 1 |
|
|
|
} |
|
|
|
year = new Date().getFullYear() |
|
|
|
} |
|
|
|
FetchStorageStatistics(params).then(res => { |
|
|
|
if (res) { |
|
|
|
this.storageData.storageMonths = [] |
|
|
|
res.months.forEach(item => { |
|
|
|
this.storageData.storageMonths.push(year + '/' + item) |
|
|
|
}) |
|
|
|
this.storageData.inStorageData = res.inStorage |
|
|
|
this.storageData.outStorageData = res.outStorage |
|
|
|
} |
|
|
|
}) |
|
|
|
}, |
|
|
|
handleSearchDate() { |
|
|
|
console.log(this.arcSearchDate) |
|
|
|
this.getArchivesSearchRanking() |
|
|
|
}, |
|
|
|
// 档案检索排名 |
|
|
|
getArchivesSearchRanking() { |
|
|
|
let params |
|
|
|
if (this.arcSearchDate) { |
|
|
|
params = { |
|
|
|
'type': this.arcSearchDate |
|
|
|
} |
|
|
|
} else { |
|
|
|
params = { |
|
|
|
'type': 1 |
|
|
|
} |
|
|
|
} |
|
|
|
FetchInitArchivesSearchRanking(params).then(res => { |
|
|
|
if (res) { |
|
|
|
this.arrSortByKey(res, 'num', true) |
|
|
|
this.searchAcrivesData.searchName = res.map(item => item.cnName) |
|
|
|
this.searchAcrivesData.searchValue = res.map(item => item.num) |
|
|
|
} |
|
|
|
}) |
|
|
|
}, |
|
|
|
handleArcAddSta() { |
|
|
|
console.log(this.arcAddDate) |
|
|
|
this.getAddArchivesStatistics() |
|
|
|
}, |
|
|
|
// 档案检索排名 |
|
|
|
getAddArchivesStatistics() { |
|
|
|
let params |
|
|
|
let year |
|
|
|
if (this.arcAddDate) { |
|
|
|
params = { |
|
|
|
'type': this.arcAddDate |
|
|
|
} |
|
|
|
year = this.arcAddDate |
|
|
|
} else { |
|
|
|
params = { |
|
|
|
'type': 1 |
|
|
|
} |
|
|
|
year = new Date().getFullYear() |
|
|
|
} |
|
|
|
FetchInitAddArchivesStatistics(params).then(res => { |
|
|
|
if (res) { |
|
|
|
this.addArcivesData.addArcivesMonth = [] |
|
|
|
res.months.forEach(item => { |
|
|
|
this.addArcivesData.addArcivesMonth.push(year + '/' + item) |
|
|
|
}) |
|
|
|
this.addArcivesData.addArcivesNum = res.nums |
|
|
|
} |
|
|
|
}) |
|
|
|
}, |
|
|
|
// array: 需要进行排序的数组 |
|
|
|
// key: 根据某个属性进行排序 |
|
|
|
// order: 升序/降序 true：升序 false:降序 |
|
|
|
arrSortByKey(array, property, order) { |
|
|
|
return array.sort(function(a, b) { |
|
|
|
const value1 = a[property] |
|
|
|
const value2 = b[property] |
|
|
|
if (order) { // 升序 |
|
|
|
return value1 - value2 |
|
|
|
} else { // 降序 |
|
|
|
return value2 - value1 |
|
|
|
} |
|
|
|
}) |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
@ -114,26 +363,32 @@ export default { |
|
|
|
<style lang="scss" scoped> |
|
|
|
@import '~@/assets/styles/lend-manage.scss'; |
|
|
|
.container-wrap{ |
|
|
|
min-height:calc(100vh - 636px) ; |
|
|
|
} |
|
|
|
.chart-wrapper{ |
|
|
|
position: relative; |
|
|
|
min-height:calc(100vh - 636px) ; |
|
|
|
} |
|
|
|
::v-deep .el-date-editor{ |
|
|
|
position: absolute; |
|
|
|
right: 20px; |
|
|
|
top: -30px; |
|
|
|
width: 116px; |
|
|
|
z-index: 9999; |
|
|
|
top: 10px; |
|
|
|
width: 100px; |
|
|
|
z-index: 99; |
|
|
|
|
|
|
|
.el-input__inner{ |
|
|
|
width: 116px; |
|
|
|
width: 100px; |
|
|
|
height: 30px; |
|
|
|
padding-left: 28px; |
|
|
|
padding-right: 10px; |
|
|
|
border: 1px solid #339cff; |
|
|
|
background-color: #021941; |
|
|
|
line-height: 30px; |
|
|
|
color: #fff; |
|
|
|
} |
|
|
|
.el-input__prefix{ |
|
|
|
left: 3px; |
|
|
|
} |
|
|
|
.el-input__suffix{ |
|
|
|
right: -2px; |
|
|
|
} |
|
|
|
} |
|
|
|
.center-box{ |
|
|
|
// width:100%; |
|
|
|
|
