- <template>
- <div class="posCenter">
- <card class="cardO" title="资料增量" :tips="topData.tips">
- <top :echart-data="topData.data" v-if="topData.show" />
- </card>
- <card class="cardT" title="借阅统计">
- <div class="wrapper">
- <div class="types">
- <div class="typeItem">
- <div class="typeText">申请</div>
- <div class="label">累计申请</div>
- <div class="value">{{ centerData.data.applyTotal }}</div>
- </div>
- <div class="typeItem">
- <div class="typeText">借阅中</div>
- <div class="label">累计借阅中</div>
- <div class="value">{{ centerData.data.readTotal }}</div>
- </div>
- <div class="typeItem">
- <div class="typeText">归还</div>
- <div class="label">累计归还</div>
- <div class="value">{{ centerData.data.returnedTotal }}</div>
- </div>
- </div>
- <div class="type_chart">
- <typeChart :echart-data="centerData.data" v-if="centerData.show" />
- </div>
- <div class="autoScrollTableWrapper" ref="autoScrollTableWrapperRef">
- <autoScrollTable :table-data="footData.data" v-if="footData.show" />
- </div>
- </div>
- </card>
- </div>
- </template>
-
- <script setup>
- import { ref, reactive, onBeforeUnmount, nextTick } from 'vue'
- import card from './card.vue'
- import { inheritAttr } from '@/utils/v3'
- import createResizeObserver from '@/utils/resizeObserver'
- import {
- getDocumentSubjectFileAddAnalysis,
- getDocumentSubjectBorrowDetailAnalysis,
- getDocumentSubjectOperateLog
- } from '@/api/document/thematicMap'
- import top from './echart/center/top.vue'
- import typeChart from './echart/center/typeChart.vue'
- import autoScrollTable from './echart/center/autoScrollTable.vue'
- const { proxy } = getCurrentInstance()
- const topData = reactive({
- data: {
- archiveAddNums: [],
- archiveAddTotal: 0,
- fileAddNums: [],
- fileAddTotal: 0,
- readAddNums: [],
- readAddTotal: [],
- timeList: []
- },
- tips: '',
- show: false
- })
- const centerData = reactive({
- data: {
- applyNums: [],
- applyTotal: 0,
- readNums: [],
- readTotal: 0,
- returnedNums: [],
- returnedTotal: 0,
- timeList: []
- },
- show: false
- })
- const footData = reactive({
- data: [],
- show: false
- })
- let unobserve = null
-
- const getDocumentSubjectFileAddAnalysisFn = async () => {
- const res = await getDocumentSubjectFileAddAnalysis()
- if(res?.code !== 200) return
- inheritAttr(res.data, topData.data)
- topData.tips = `累计${res.data.fileAddTotal || 0}个`
- topData.show = true
- }
-
- const getDocumentSubjectBorrowDetailAnalysisFn = async () => {
- const res = await getDocumentSubjectBorrowDetailAnalysis()
- if(res?.code !== 200) return
- inheritAttr(res.data, centerData.data)
- centerData.show = true
- }
-
- const getDocumentSubjectOperateLogFn = async () => {
- const res = await getDocumentSubjectOperateLog()
- if(res?.code !== 200) return
- footData.data = res.data || []
- footData.show = true
- }
-
- onMounted(() => {
- getDocumentSubjectFileAddAnalysisFn()
- getDocumentSubjectBorrowDetailAnalysisFn()
- getDocumentSubjectOperateLogFn()
- //监听盒子大小变化重载组件
- unobserve = createResizeObserver(proxy.$refs.autoScrollTableWrapperRef, () => {
- footData.show = false
- nextTick(() => {
- footData.show = true
- })
- })
- })
-
- onBeforeUnmount(() => {
- //取消监听
- unobserve()
- })
- </script>
-
- <style lang="scss" scoped>
- .posCenter {
- height: 100%;
- .cardO {
- height: calc(33.33% - 10px);
- }
- .cardT {
- margin-top: 15px;
- height: calc(66.66% - 5px)
- }
- .wrapper {
- height: 100%;
- .types {
- display: flex;
- justify-content: space-between;
- align-items: center;
- height: 40px;
- .typeItem {
- flex: 1;
- display: flex;
- justify-content: center;
- align-items: center;
- height: 100%;
- margin: 0 10px;
- &:nth-of-type(1) {
- background: url('@/assets/images/document/thematicMap/apply.png') no-repeat;
- background-size: 100% 100%;
- .typeText {
- color: #FFB643;
- }
- }
- &:nth-of-type(2) {
- background: url('@/assets/images/document/thematicMap/borrow.png') no-repeat;
- background-size: 100% 100%;
- .typeText {
- color: #FF4040;
- }
- }
- &:nth-of-type(3) {
- background: url('@/assets/images/document/thematicMap/give_back.png') no-repeat;
- background-size: 100% 100%;
- .typeText {
- color: #41D356;
- }
- }
- .typeText {
- font-size: 16px;
- font-weight: 700;
- }
- .label {
- font-size: 12px;
- margin: 0 10px;
- }
- .value {
- font-size: 18px;
- font-weight: 700;
- }
- }
- }
- .type_chart {
- margin-top: 20px;
- height: 174px;
- }
- .autoScrollTableWrapper {
- margin-top: 20px;
- height: calc(100% - 254px);
- }
- }
- }
-
- </style>