Newer
Older
KaiFengPC / src / views / document / thematicMap / posCenter.vue
@zhangdeliang zhangdeliang on 23 May 4 KB 初始化项目
  1. <template>
  2. <div class="posCenter">
  3. <card class="cardO" title="资料增量" :tips="topData.tips">
  4. <top :echart-data="topData.data" v-if="topData.show" />
  5. </card>
  6. <card class="cardT" title="借阅统计">
  7. <div class="wrapper">
  8. <div class="types">
  9. <div class="typeItem">
  10. <div class="typeText">申请</div>
  11. <div class="label">累计申请</div>
  12. <div class="value">{{ centerData.data.applyTotal }}</div>
  13. </div>
  14. <div class="typeItem">
  15. <div class="typeText">借阅中</div>
  16. <div class="label">累计借阅中</div>
  17. <div class="value">{{ centerData.data.readTotal }}</div>
  18. </div>
  19. <div class="typeItem">
  20. <div class="typeText">归还</div>
  21. <div class="label">累计归还</div>
  22. <div class="value">{{ centerData.data.returnedTotal }}</div>
  23. </div>
  24. </div>
  25. <div class="type_chart">
  26. <typeChart :echart-data="centerData.data" v-if="centerData.show" />
  27. </div>
  28. <div class="autoScrollTableWrapper" ref="autoScrollTableWrapperRef">
  29. <autoScrollTable :table-data="footData.data" v-if="footData.show" />
  30. </div>
  31. </div>
  32. </card>
  33. </div>
  34. </template>
  35.  
  36. <script setup>
  37. import { ref, reactive, onBeforeUnmount, nextTick } from 'vue'
  38. import card from './card.vue'
  39. import { inheritAttr } from '@/utils/v3'
  40. import createResizeObserver from '@/utils/resizeObserver'
  41. import {
  42. getDocumentSubjectFileAddAnalysis,
  43. getDocumentSubjectBorrowDetailAnalysis,
  44. getDocumentSubjectOperateLog
  45. } from '@/api/document/thematicMap'
  46. import top from './echart/center/top.vue'
  47. import typeChart from './echart/center/typeChart.vue'
  48. import autoScrollTable from './echart/center/autoScrollTable.vue'
  49. const { proxy } = getCurrentInstance()
  50. const topData = reactive({
  51. data: {
  52. archiveAddNums: [],
  53. archiveAddTotal: 0,
  54. fileAddNums: [],
  55. fileAddTotal: 0,
  56. readAddNums: [],
  57. readAddTotal: [],
  58. timeList: []
  59. },
  60. tips: '',
  61. show: false
  62. })
  63. const centerData = reactive({
  64. data: {
  65. applyNums: [],
  66. applyTotal: 0,
  67. readNums: [],
  68. readTotal: 0,
  69. returnedNums: [],
  70. returnedTotal: 0,
  71. timeList: []
  72. },
  73. show: false
  74. })
  75. const footData = reactive({
  76. data: [],
  77. show: false
  78. })
  79. let unobserve = null
  80.  
  81. const getDocumentSubjectFileAddAnalysisFn = async () => {
  82. const res = await getDocumentSubjectFileAddAnalysis()
  83. if(res?.code !== 200) return
  84. inheritAttr(res.data, topData.data)
  85. topData.tips = `累计${res.data.fileAddTotal || 0}个`
  86. topData.show = true
  87. }
  88.  
  89. const getDocumentSubjectBorrowDetailAnalysisFn = async () => {
  90. const res = await getDocumentSubjectBorrowDetailAnalysis()
  91. if(res?.code !== 200) return
  92. inheritAttr(res.data, centerData.data)
  93. centerData.show = true
  94. }
  95.  
  96. const getDocumentSubjectOperateLogFn = async () => {
  97. const res = await getDocumentSubjectOperateLog()
  98. if(res?.code !== 200) return
  99. footData.data = res.data || []
  100. footData.show = true
  101. }
  102.  
  103. onMounted(() => {
  104. getDocumentSubjectFileAddAnalysisFn()
  105. getDocumentSubjectBorrowDetailAnalysisFn()
  106. getDocumentSubjectOperateLogFn()
  107. //监听盒子大小变化重载组件
  108. unobserve = createResizeObserver(proxy.$refs.autoScrollTableWrapperRef, () => {
  109. footData.show = false
  110. nextTick(() => {
  111. footData.show = true
  112. })
  113. })
  114. })
  115.  
  116. onBeforeUnmount(() => {
  117. //取消监听
  118. unobserve()
  119. })
  120. </script>
  121.  
  122. <style lang="scss" scoped>
  123. .posCenter {
  124. height: 100%;
  125. .cardO {
  126. height: calc(33.33% - 10px);
  127. }
  128. .cardT {
  129. margin-top: 15px;
  130. height: calc(66.66% - 5px)
  131. }
  132. .wrapper {
  133. height: 100%;
  134. .types {
  135. display: flex;
  136. justify-content: space-between;
  137. align-items: center;
  138. height: 40px;
  139. .typeItem {
  140. flex: 1;
  141. display: flex;
  142. justify-content: center;
  143. align-items: center;
  144. height: 100%;
  145. margin: 0 10px;
  146. &:nth-of-type(1) {
  147. background: url('@/assets/images/document/thematicMap/apply.png') no-repeat;
  148. background-size: 100% 100%;
  149. .typeText {
  150. color: #FFB643;
  151. }
  152. }
  153. &:nth-of-type(2) {
  154. background: url('@/assets/images/document/thematicMap/borrow.png') no-repeat;
  155. background-size: 100% 100%;
  156. .typeText {
  157. color: #FF4040;
  158. }
  159. }
  160. &:nth-of-type(3) {
  161. background: url('@/assets/images/document/thematicMap/give_back.png') no-repeat;
  162. background-size: 100% 100%;
  163. .typeText {
  164. color: #41D356;
  165. }
  166. }
  167. .typeText {
  168. font-size: 16px;
  169. font-weight: 700;
  170. }
  171. .label {
  172. font-size: 12px;
  173. margin: 0 10px;
  174. }
  175. .value {
  176. font-size: 18px;
  177. font-weight: 700;
  178. }
  179. }
  180. }
  181. .type_chart {
  182. margin-top: 20px;
  183. height: 174px;
  184. }
  185. .autoScrollTableWrapper {
  186. margin-top: 20px;
  187. height: calc(100% - 254px);
  188. }
  189. }
  190. }
  191.  
  192. </style>