- <template>
- <div class="posLeft">
- <card class="cardT" title="借阅统计">
- <div class="borrowAnalysis">
- <div class="borrowAnalysisItem">
- <div class="borrowAnalysisItemIn">
- <div class="icon"></div>
- <div class="info">
- <p class="in_label">累计借阅</p>
- <p class="in_value">{{ topData.totalCount || 0 }}</p>
- </div>
- </div>
- </div>
- <div class="borrowAnalysisItem">
- <div class="borrowAnalysisItemIn">
- <div class="icon"></div>
- <div class="info">
- <p class="in_label">本月借阅</p>
- <p class="in_value">{{ topData.monthCount || 0 }}</p>
- </div>
- </div>
- </div>
- <div class="borrowAnalysisItem">
- <div class="borrowAnalysisItemIn">
- <div class="icon"></div>
- <div class="info">
- <p class="in_label">逾期人数</p>
- <p class="in_value">{{ topData.expireUserCount || 0 }}</p>
- </div>
- </div>
- </div>
- <div class="borrowAnalysisItem">
- <div class="borrowAnalysisItemIn">
- <div class="icon"></div>
- <div class="info">
- <p class="in_label">逾期次数</p>
- <p class="in_value">{{ topData.expireCount || 0 }}</p>
- </div>
- </div>
- </div>
- </div>
- </card>
- <card class="cardT" title="资料统计" :tips="centerData.tips">
- <div class="fileAnalysis">
- <div class="fileAnalysisItem" v-for="(item, index) in centerData.dataList">
- <div class="left">
- <div class="icon" :style="{ color: colors[index % 6] }"></div>
- <div class="label">{{ item.analysisName }}</div>
- </div>
- <div class="right">
- <div class="value">{{ item.analysisCount }}</div>
- <div class="unit">个</div>
- </div>
- </div>
- </div>
- </card>
- <card class="cardT" title="热门词条" :tips="footData.tips">
- <el-table ref="table" :data="footData.dataList" style="height: 100%" class="table">
- <el-table-column width="55" label="排名">
- <template #default="{ row, $index }">
- <div class="first" v-if="$index === 0"></div>
- <div class="second" v-else-if="$index === 1"></div>
- <div class="third" v-else-if="$index === 2"></div>
- <div v-else>{{ $index + 1 < 10 ? '0' + ($index + 1) : $index + 1 }}</div>
- </template>
- </el-table-column>
- <el-table-column label="标签" prop="typeName" show-overflow-tooltip width="80" />
- <el-table-column label="数量" prop="count" show-overflow-tooltip width="60" />
- <el-table-column label="占比" prop="percent" show-overflow-tooltip>
- <template #default="{ row }">
- <div class="proportion">
- <div class="proportionIn" :style="{ width: `${row.percent}%` }"></div>
- </div>
- </template>
- </el-table-column>
- <el-table-column prop="percent" show-overflow-tooltip width="80">
- <template #default="{ row }">
- <span style="color: #37c4ff">{{ `${row.percent}%` }}</span>
- </template>
- </el-table-column>
- </el-table>
- </card>
- </div>
- </template>
-
- <script setup>
- import { ref, reactive } from 'vue';
- import card from './card.vue';
- import { inheritAttr } from '@/utils/v3';
- import {
- getDocumentSubjectBorrowAnalysis,
- getDocumentSubjectFileTypeAnalysis,
- getDocumentSubjectFileTagAnalysis,
- } from '@/api/document/thematicMap';
-
- const topData = reactive({
- expireCount: '',
- expireUserCount: '',
- monthCount: '',
- totalCount: '',
- });
-
- const centerData = reactive({
- totalNum: 0,
- dataList: [],
- tips: '',
- });
- const colors = ['#116BFF', '#FF5D5D', '#48E398', '#FFBE78', '#FFF373', '#DB7AFF'];
-
- const footData = reactive({
- totalNum: 0,
- dataList: [],
- tips: '',
- });
-
- const getDocumentSubjectBorrowAnalysisFn = async () => {
- const res = await getDocumentSubjectBorrowAnalysis();
- if (res?.code !== 200) return;
- inheritAttr(res.data, topData);
- };
-
- const getDocumentSubjectFileTypeAnalysisFn = async () => {
- const res = await getDocumentSubjectFileTypeAnalysis();
- if (res?.code !== 200) return;
- inheritAttr(res.data, centerData);
- centerData.tips = `累计${centerData.totalNum}个`;
- };
-
- const getDocumentSubjectFileTagAnalysisFn = async () => {
- const res = await getDocumentSubjectFileTagAnalysis();
- if (res?.code !== 200) return;
- console.log(res.data);
- if (!Array.isArray(res.data)) return;
- footData.dataList = res.data;
- footData.totalNum = footData.dataList.reduce((pre, item) => (pre += item.count * 1), 0);
- footData.tips = `累计${footData.totalNum}个`;
- };
-
- onMounted(() => {
- getDocumentSubjectBorrowAnalysisFn();
- getDocumentSubjectFileTypeAnalysisFn();
- getDocumentSubjectFileTagAnalysisFn();
- });
- </script>
-
- <style lang="scss" scoped>
- .posLeft {
- height: 100%;
- .cardT {
- height: calc(33.33% - 10px);
- margin-top: 15px;
- &:nth-of-type(1) {
- margin-top: 0;
- }
- }
- .borrowAnalysis {
- display: flex;
- height: 100%;
- flex-wrap: wrap;
- .borrowAnalysisItem {
- width: calc(50% - 5px);
- height: calc(50% - 5px);
- margin-top: 10px;
- margin-right: 10px;
- background: linear-gradient(0deg, rgba(33, 99, 174, 0.2) 0%, rgba(33, 99, 174, 0.1) 100%);
- border-radius: 4px;
- display: flex;
- justify-content: center;
- &:nth-of-type(1) {
- margin-top: 0;
- .icon {
- background: url('@/assets/images/document/thematicMap/month.png') no-repeat;
- background-size: 100% 100%;
- }
- }
- &:nth-of-type(2) {
- margin-top: 0;
- margin-right: 0;
- .icon {
- background: url('@/assets/images/document/thematicMap/total.png') no-repeat;
- background-size: 100% 100%;
- }
- }
- &:nth-of-type(3) {
- .icon {
- background: url('@/assets/images/document/thematicMap/people.png') no-repeat;
- background-size: 100% 100%;
- }
- }
- &:nth-of-type(4) {
- margin-right: 0;
- .icon {
- background: url('@/assets/images/document/thematicMap/overdue.png') no-repeat;
- background-size: 100% 100%;
- }
- }
- .borrowAnalysisItemIn {
- // width: 100%;
- height: 100%;
- display: flex;
- align-items: center;
- .icon {
- width: 34px;
- height: 34px;
- margin-right: 26px;
- }
- .info {
- p {
- margin: 0;
- &:first-of-type {
- font-size: 14px;
- color: #6093da;
- }
- &:last-of-type {
- margin-top: 12px;
- font-size: 24px;
- font-weight: bold;
- color: #cae0ff;
- }
- }
- }
- }
- }
- }
- .fileAnalysis {
- display: flex;
- flex-wrap: wrap;
- height: 100%;
- overflow: auto;
- overflow-x: hidden;
- .fileAnalysisItem {
- display: flex;
- align-items: center;
- justify-content: center;
- width: calc(50% - 5px);
- height: 60px;
- margin-right: 10px;
- color: #116bff;
- font-size: 14px;
- background: linear-gradient(0deg, rgba(33, 99, 174, 0.2) 0%, rgba(33, 99, 174, 0.1) 100%);
- border-radius: 4px;
- &:nth-of-type(2n) {
- margin-right: 0;
- }
- .left {
- display: flex;
- align-items: center;
- margin-right: 25px;
- .icon {
- width: 8px;
- height: 8px;
- border-radius: 50%;
- background-color: #116bff;
- margin-right: 6px;
- }
- }
- .right {
- display: flex;
- align-items: center;
- .value {
- color: #cae0ff;
- font-size: 20px;
- margin-right: 10px;
- }
- }
- }
- }
- .table {
- .first,
- .second,
- .third {
- width: 12px;
- height: 18px;
- margin: 0 auto;
- }
- .first {
- background: url('@/assets/images/document/thematicMap/first.png') no-repeat;
- background-size: 100% 100%;
- }
- .second {
- background: url('@/assets/images/document/thematicMap/second.png') no-repeat;
- background-size: 100% 100%;
- }
- .third {
- background: url('@/assets/images/document/thematicMap/third.png') no-repeat;
- background-size: 100% 100%;
- }
- .proportion {
- height: 8px;
- background: rgba(15, 105, 255, 0.1);
- .proportionIn {
- height: 100%;
- background: rgba(15, 105, 255);
- }
- }
- }
- }
- </style>