Newer
Older
KaiFengPC / src / views / document / thematicMap / posLeft.vue
@zhangdeliang zhangdeliang on 23 May 8 KB 初始化项目
  1. <template>
  2. <div class="posLeft">
  3. <card class="cardT" title="借阅统计">
  4. <div class="borrowAnalysis">
  5. <div class="borrowAnalysisItem">
  6. <div class="borrowAnalysisItemIn">
  7. <div class="icon"></div>
  8. <div class="info">
  9. <p class="in_label">累计借阅</p>
  10. <p class="in_value">{{ topData.totalCount || 0 }}</p>
  11. </div>
  12. </div>
  13. </div>
  14. <div class="borrowAnalysisItem">
  15. <div class="borrowAnalysisItemIn">
  16. <div class="icon"></div>
  17. <div class="info">
  18. <p class="in_label">本月借阅</p>
  19. <p class="in_value">{{ topData.monthCount || 0 }}</p>
  20. </div>
  21. </div>
  22. </div>
  23. <div class="borrowAnalysisItem">
  24. <div class="borrowAnalysisItemIn">
  25. <div class="icon"></div>
  26. <div class="info">
  27. <p class="in_label">逾期人数</p>
  28. <p class="in_value">{{ topData.expireUserCount || 0 }}</p>
  29. </div>
  30. </div>
  31. </div>
  32. <div class="borrowAnalysisItem">
  33. <div class="borrowAnalysisItemIn">
  34. <div class="icon"></div>
  35. <div class="info">
  36. <p class="in_label">逾期次数</p>
  37. <p class="in_value">{{ topData.expireCount || 0 }}</p>
  38. </div>
  39. </div>
  40. </div>
  41. </div>
  42. </card>
  43. <card class="cardT" title="资料统计" :tips="centerData.tips">
  44. <div class="fileAnalysis">
  45. <div class="fileAnalysisItem" v-for="(item, index) in centerData.dataList">
  46. <div class="left">
  47. <div class="icon" :style="{ color: colors[index % 6] }"></div>
  48. <div class="label">{{ item.analysisName }}</div>
  49. </div>
  50. <div class="right">
  51. <div class="value">{{ item.analysisCount }}</div>
  52. <div class="unit"></div>
  53. </div>
  54. </div>
  55. </div>
  56. </card>
  57. <card class="cardT" title="热门词条" :tips="footData.tips">
  58. <el-table ref="table" :data="footData.dataList" style="height: 100%" class="table">
  59. <el-table-column width="55" label="排名">
  60. <template #default="{ row, $index }">
  61. <div class="first" v-if="$index === 0"></div>
  62. <div class="second" v-else-if="$index === 1"></div>
  63. <div class="third" v-else-if="$index === 2"></div>
  64. <div v-else>{{ $index + 1 < 10 ? '0' + ($index + 1) : $index + 1 }}</div>
  65. </template>
  66. </el-table-column>
  67. <el-table-column label="标签" prop="typeName" show-overflow-tooltip width="80" />
  68. <el-table-column label="数量" prop="count" show-overflow-tooltip width="60" />
  69. <el-table-column label="占比" prop="percent" show-overflow-tooltip>
  70. <template #default="{ row }">
  71. <div class="proportion">
  72. <div class="proportionIn" :style="{ width: `${row.percent}%` }"></div>
  73. </div>
  74. </template>
  75. </el-table-column>
  76. <el-table-column prop="percent" show-overflow-tooltip width="80">
  77. <template #default="{ row }">
  78. <span style="color: #37c4ff">{{ `${row.percent}%` }}</span>
  79. </template>
  80. </el-table-column>
  81. </el-table>
  82. </card>
  83. </div>
  84. </template>
  85.  
  86. <script setup>
  87. import { ref, reactive } from 'vue';
  88. import card from './card.vue';
  89. import { inheritAttr } from '@/utils/v3';
  90. import {
  91. getDocumentSubjectBorrowAnalysis,
  92. getDocumentSubjectFileTypeAnalysis,
  93. getDocumentSubjectFileTagAnalysis,
  94. } from '@/api/document/thematicMap';
  95.  
  96. const topData = reactive({
  97. expireCount: '',
  98. expireUserCount: '',
  99. monthCount: '',
  100. totalCount: '',
  101. });
  102.  
  103. const centerData = reactive({
  104. totalNum: 0,
  105. dataList: [],
  106. tips: '',
  107. });
  108. const colors = ['#116BFF', '#FF5D5D', '#48E398', '#FFBE78', '#FFF373', '#DB7AFF'];
  109.  
  110. const footData = reactive({
  111. totalNum: 0,
  112. dataList: [],
  113. tips: '',
  114. });
  115.  
  116. const getDocumentSubjectBorrowAnalysisFn = async () => {
  117. const res = await getDocumentSubjectBorrowAnalysis();
  118. if (res?.code !== 200) return;
  119. inheritAttr(res.data, topData);
  120. };
  121.  
  122. const getDocumentSubjectFileTypeAnalysisFn = async () => {
  123. const res = await getDocumentSubjectFileTypeAnalysis();
  124. if (res?.code !== 200) return;
  125. inheritAttr(res.data, centerData);
  126. centerData.tips = `累计${centerData.totalNum}个`;
  127. };
  128.  
  129. const getDocumentSubjectFileTagAnalysisFn = async () => {
  130. const res = await getDocumentSubjectFileTagAnalysis();
  131. if (res?.code !== 200) return;
  132. console.log(res.data);
  133. if (!Array.isArray(res.data)) return;
  134. footData.dataList = res.data;
  135. footData.totalNum = footData.dataList.reduce((pre, item) => (pre += item.count * 1), 0);
  136. footData.tips = `累计${footData.totalNum}个`;
  137. };
  138.  
  139. onMounted(() => {
  140. getDocumentSubjectBorrowAnalysisFn();
  141. getDocumentSubjectFileTypeAnalysisFn();
  142. getDocumentSubjectFileTagAnalysisFn();
  143. });
  144. </script>
  145.  
  146. <style lang="scss" scoped>
  147. .posLeft {
  148. height: 100%;
  149. .cardT {
  150. height: calc(33.33% - 10px);
  151. margin-top: 15px;
  152. &:nth-of-type(1) {
  153. margin-top: 0;
  154. }
  155. }
  156. .borrowAnalysis {
  157. display: flex;
  158. height: 100%;
  159. flex-wrap: wrap;
  160. .borrowAnalysisItem {
  161. width: calc(50% - 5px);
  162. height: calc(50% - 5px);
  163. margin-top: 10px;
  164. margin-right: 10px;
  165. background: linear-gradient(0deg, rgba(33, 99, 174, 0.2) 0%, rgba(33, 99, 174, 0.1) 100%);
  166. border-radius: 4px;
  167. display: flex;
  168. justify-content: center;
  169. &:nth-of-type(1) {
  170. margin-top: 0;
  171. .icon {
  172. background: url('@/assets/images/document/thematicMap/month.png') no-repeat;
  173. background-size: 100% 100%;
  174. }
  175. }
  176. &:nth-of-type(2) {
  177. margin-top: 0;
  178. margin-right: 0;
  179. .icon {
  180. background: url('@/assets/images/document/thematicMap/total.png') no-repeat;
  181. background-size: 100% 100%;
  182. }
  183. }
  184. &:nth-of-type(3) {
  185. .icon {
  186. background: url('@/assets/images/document/thematicMap/people.png') no-repeat;
  187. background-size: 100% 100%;
  188. }
  189. }
  190. &:nth-of-type(4) {
  191. margin-right: 0;
  192. .icon {
  193. background: url('@/assets/images/document/thematicMap/overdue.png') no-repeat;
  194. background-size: 100% 100%;
  195. }
  196. }
  197. .borrowAnalysisItemIn {
  198. // width: 100%;
  199. height: 100%;
  200. display: flex;
  201. align-items: center;
  202. .icon {
  203. width: 34px;
  204. height: 34px;
  205. margin-right: 26px;
  206. }
  207. .info {
  208. p {
  209. margin: 0;
  210. &:first-of-type {
  211. font-size: 14px;
  212. color: #6093da;
  213. }
  214. &:last-of-type {
  215. margin-top: 12px;
  216. font-size: 24px;
  217. font-weight: bold;
  218. color: #cae0ff;
  219. }
  220. }
  221. }
  222. }
  223. }
  224. }
  225. .fileAnalysis {
  226. display: flex;
  227. flex-wrap: wrap;
  228. height: 100%;
  229. overflow: auto;
  230. overflow-x: hidden;
  231. .fileAnalysisItem {
  232. display: flex;
  233. align-items: center;
  234. justify-content: center;
  235. width: calc(50% - 5px);
  236. height: 60px;
  237. margin-right: 10px;
  238. color: #116bff;
  239. font-size: 14px;
  240. background: linear-gradient(0deg, rgba(33, 99, 174, 0.2) 0%, rgba(33, 99, 174, 0.1) 100%);
  241. border-radius: 4px;
  242. &:nth-of-type(2n) {
  243. margin-right: 0;
  244. }
  245. .left {
  246. display: flex;
  247. align-items: center;
  248. margin-right: 25px;
  249. .icon {
  250. width: 8px;
  251. height: 8px;
  252. border-radius: 50%;
  253. background-color: #116bff;
  254. margin-right: 6px;
  255. }
  256. }
  257. .right {
  258. display: flex;
  259. align-items: center;
  260. .value {
  261. color: #cae0ff;
  262. font-size: 20px;
  263. margin-right: 10px;
  264. }
  265. }
  266. }
  267. }
  268. .table {
  269. .first,
  270. .second,
  271. .third {
  272. width: 12px;
  273. height: 18px;
  274. margin: 0 auto;
  275. }
  276. .first {
  277. background: url('@/assets/images/document/thematicMap/first.png') no-repeat;
  278. background-size: 100% 100%;
  279. }
  280. .second {
  281. background: url('@/assets/images/document/thematicMap/second.png') no-repeat;
  282. background-size: 100% 100%;
  283. }
  284. .third {
  285. background: url('@/assets/images/document/thematicMap/third.png') no-repeat;
  286. background-size: 100% 100%;
  287. }
  288. .proportion {
  289. height: 8px;
  290. background: rgba(15, 105, 255, 0.1);
  291. .proportionIn {
  292. height: 100%;
  293. background: rgba(15, 105, 255);
  294. }
  295. }
  296. }
  297. }
  298. </style>