You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
198 lines
6.5 KiB
198 lines
6.5 KiB
<template>
|
|
<div class="app-container" style="background-color: #031435;">
|
|
<div>
|
|
<el-row :gutter="20">
|
|
<el-col :xs="24" :sm="24" :lg="8">
|
|
<div class="top-row container-wrap" style="height:calc(25vh - 40px)">
|
|
<span class="right-top-line" />
|
|
<span class="left-bottom-line" />
|
|
<h3 class="table-title">
|
|
<p class="title-arrow">档案借阅</p>
|
|
</h3>
|
|
<div class="chart-wrapper" style="height: calc(100% - 40px);">
|
|
<lend-across :lend-data="lendData" />
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :xs="24" :sm="24" :lg="8">
|
|
<div class="top-row container-wrap" style="height:calc(25vh - 40px)">
|
|
<span class="right-top-line" />
|
|
<span class="left-bottom-line" />
|
|
<h3 class="table-title">
|
|
<p class="title-arrow">档案类别</p>
|
|
</h3>
|
|
<el-date-picker
|
|
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>
|
|
</el-col>
|
|
<el-col :xs="24" :sm="24" :lg="8">
|
|
<div class="top-row container-wrap" style="height:calc(25vh - 40px)">
|
|
<span class="right-top-line" />
|
|
<span class="left-bottom-line" />
|
|
<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 v-if="typeData.length !== 0" class="chart-wrapper" style="height: calc(100% - 40px);">
|
|
<type-pie :type-data="typeData" />
|
|
</div>
|
|
<div v-else class="empty-main">
|
|
<svg-icon icon-class="empty" class-name="empty-img" />
|
|
<p>暂无数据</p>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
<!-- 中间 -->
|
|
<el-row class="center-box">
|
|
<el-col class="center-chart" style="margin-right:20px">
|
|
<div class="container-wrap" style="height:calc(25vh - 40px)">
|
|
<span class="right-top-line" />
|
|
<span class="left-bottom-line" />
|
|
<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 :storage-data="storageData" />
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col class="center-chart">
|
|
<div class=" container-wrap" style="height:calc(25vh - 40px)">
|
|
<span class="right-top-line" />
|
|
<span class="left-bottom-line" />
|
|
<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 v-if="searchAcrivesData.searchName.length !==0 && searchAcrivesData.searchName.searchValue !==0" class="chart-wrapper" style="height: calc(100% - 40px);">
|
|
<AcrossBar ref="searchCharts" :search-acrives-data="searchAcrivesData" />
|
|
</div>
|
|
<div v-else class="empty-main">
|
|
<svg-icon icon-class="empty" class-name="empty-img" />
|
|
<p>暂无数据</p>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
|
|
</el-row>
|
|
<!-- 底部 -->
|
|
<el-row :gutter="20">
|
|
<el-col :xs="24" :sm="24" :lg="25">
|
|
<div class="container-wrap" style="height:calc(25vh - 40px)">
|
|
<span class="right-top-line" />
|
|
<span class="left-bottom-line" />
|
|
<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 :add-arcives-data="addArcivesData" />
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import lendAcross from '@/views/components/echarts/lendAcross.vue'
|
|
import catePie from '@/views/components/echarts/catePie.vue'
|
|
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 { statisticsCrud } from './mixins/statistics'
|
|
export default {
|
|
components: { lendAcross, catePie, typePie, BarEcharts, AcrossBar, LineEchart },
|
|
mixins: [statisticsCrud],
|
|
data() {
|
|
return {
|
|
}
|
|
},
|
|
mounted() {
|
|
},
|
|
methods: {
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import '~@/assets/styles/lend-manage.scss';
|
|
.container-wrap{
|
|
position: relative;
|
|
min-height:calc(100vh - 636px) ;
|
|
}
|
|
::v-deep .el-date-editor{
|
|
position: absolute;
|
|
right: 20px;
|
|
top: 10px;
|
|
width: 100px;
|
|
z-index: 99;
|
|
|
|
.el-input__inner{
|
|
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{
|
|
margin:20px 0;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
.center-chart{
|
|
padding:0;
|
|
height:100%;
|
|
flex: 1;
|
|
}
|
|
}
|
|
</style>
|