| | |
| | | <p> |
| | | <span v-for="(item, index) in details.author" :key="index">{{ item }}</span> |
| | | </p> |
| | | <p v-if="details.abstract"> |
| | | <span>摘要:</span> |
| | | <span class="page-main-abstract" v-html="details.abstract"></span> |
| | | <p v-if="details.cleanAbstract"> |
| | | <span class="abstract-title">摘要:</span> |
| | | <span class="page-main-abstract-main" v-html="details.cleanAbstract"></span> |
| | | </p> |
| | | <p v-if="details.keyWords && details.keyWords.length > 0"> |
| | | <span>关键词:</span> |
| | |
| | | <li class="main-author"> |
| | | {{ item.author }} |
| | | </li> |
| | | <li class="main-title" :title="item.abstract" v-if="item.abstract"> |
| | | <li class="main-title" :title="item.abstract" v-if="item.cleanAbstract"> |
| | | <span>摘要: </span> |
| | | <span class="page-main-abstract" v-html="item.abstract"></span> |
| | | <span class="page-main-abstract" v-html="item.cleanAbstract"></span> |
| | | </li> |
| | | <li class="main-keyword" v-if="item.keyWords && item.keyWords.length > 0"> |
| | | <span>关键词:</span> |
| | |
| | | </li> |
| | | </ul> |
| | | </div> |
| | | <el-dialog v-model="dialogVisible" :title="pdfName" width="60vw" top="2vh" bottom="2vh" |
| | | <el-empty v-if="!loading && details == ''"></el-empty> |
| | | <el-dialog v-model="dialogVisible" :title="pdfName" width="60vw" top="3vh" bottom="2vh" |
| | | :visible.sync="dialogVisible" class="custom-dialog"> |
| | | <div class="pdfInfoBox"> |
| | | <div class="pdfInfoBox" v-loading="pdfLoading" element-loading-text="图片加载中" |
| | | element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)"> |
| | | <div v-for="(item, index) in pdfList" :key="index" class="pdfItem" :page="index + 1"> |
| | | <img :src="item.showSrc" alt="" style="min-height: 550px" loading="lazy" /> |
| | | <el-divider content-position="center"> 第 {{ index + 1 }} 页 </el-divider> |
| | | </div> |
| | | </div> |
| | | <el-empty v-if="!pdfLoading && !pdfList.length"></el-empty> |
| | | </el-dialog> |
| | | </div> |
| | | </template> |
| | |
| | | resourceTypeValueList: [], |
| | | // 查询结果 |
| | | resultList: [], |
| | | loading: false, |
| | | loading: true, |
| | | pdfLoading: false, |
| | | }; |
| | | }, |
| | | async mounted() { |
| | | await this.getContent(this.$route.query.id); |
| | | await this.getSelectData(); |
| | | console.log(this.details, "请求出来的数据"); |
| | | |
| | | // 查找关键词相匹配的文章 |
| | | if (this.details.keyWords && this.details.keyWords.length) { |
| | | for (let i = 0; i < this.details.keyWords.length; i++) { |
| | |
| | | this.inputType = "keyWords" |
| | | await this.getItemListOne() |
| | | } |
| | | this.loading = false; |
| | | console.log(this.resultList, "处理好的"); |
| | | } else { |
| | | this.getItemList() |
| | |
| | | if (this.resultList.length == 0) { |
| | | this.getItemList() |
| | | } |
| | | |
| | | //处理文件 |
| | | if (this.details.cmsItemType == "video" || this.details.cmsItemType == "audio") { |
| | | if (this.details.file != "") { |
| | | this.details.src = await this.getResourcePath(this.details.file) |
| | | console.log(this.details.src, "视频地址"); |
| | | } |
| | | } |
| | | |
| | |
| | | methods: { |
| | | // 根据id请求该页面数据 |
| | | async getContent(id) { |
| | | this.loading = true; |
| | | const res = await MG.resource |
| | | .getItem({ |
| | | path: "*", |
| | |
| | | cmsType: ["cmsItem"], |
| | | "Id=": [id + ""], |
| | | source: [], |
| | | isbn: [], |
| | | year: [], |
| | | abstract: [], |
| | | keyWords: [], |
| | |
| | | // 设置一个默认值或者进行其他错误处理 |
| | | item.keyWords = []; |
| | | } |
| | | if(item.author && item.author.length>0){ |
| | | if (item.author && item.author.length > 0) { |
| | | item.author = item.author.split(";"); |
| | | } |
| | | if (item.abstract) { |
| | | item.cleanAbstract = item.abstract.replace(/<[^>]+>/g, ""); |
| | | } |
| | | |
| | | const foundItem = this.category.list.find((citem) => citem.value == item.cmsItemType); |
| | | item.resourceTypeName = foundItem ? foundItem.name : ''; |
| | | }) |
| | | this.details = res.datas[0] |
| | | this.loading = false; |
| | | }, |
| | | |
| | | // 在此点击详情 |
| | |
| | | if (this.resultList.length == 0) { |
| | | this.getItemList() |
| | | } |
| | | |
| | | //处理文件 |
| | | if (this.details.cmsItemType == "video" || this.details.cmsItemType == "audio") { |
| | | if (this.details.file != "") { |
| | |
| | | showSrc: '' |
| | | }) |
| | | } |
| | | this.pdfLoading = false; |
| | | // 启动页码观察 |
| | | setTimeout(() => { |
| | | this.initObservation() |
| | |
| | | |
| | | //获取下拉选择框的内容 |
| | | async getSelectData() { |
| | | this.loading = true; |
| | | try { |
| | | // 同时发起两个异步请求,并等待它们的结果 |
| | | const [resourceListResult] = await Promise.all([ |
| | |
| | | // 'id=':[this.$route.params.key], |
| | | "resourceType*": this.resourceTypeValueList, |
| | | source: [], |
| | | isbn: [], |
| | | year: [], |
| | | abstract: [], |
| | | keyWords: [], |
| | |
| | | // 设置一个默认值或者进行其他错误处理 |
| | | item.keyWords = []; |
| | | } |
| | | if (item.abstract) { |
| | | item.cleanAbstract = item.abstract.replace(/<[^>]+>/g, ""); |
| | | } |
| | | const foundItem = this.category.list.find((citem) => citem.value == item.cmsItemType); |
| | | item.resourceTypeName = foundItem ? foundItem.name : ''; |
| | | console.log(this.details.id, ""); |
| | |
| | | this.resultList.push(item); |
| | | } |
| | | }); |
| | | // 排除自身且去重 |
| | | |
| | | // const relatedList = res.datas.filter((item) => { |
| | | // return item.id !== this.details.id; |
| | | // }); |
| | | // this.resultList.push(...relatedList) |
| | | // // 根据id去重 |
| | | // this.resultList = this.uniqueById(this.resultList); |
| | | // //最多显示10条 |
| | | // if (this.resultList.length > 10) { |
| | | // this.resultList = this.resultList.slice(0, 10); |
| | | // } |
| | | this.loading = false; |
| | | }, |
| | | |
| | | async openPdf(name) { |
| | | this.pdfLoading = true; |
| | | this.pdfList = [] |
| | | this.pdfName = name; |
| | | this.dialogVisible = true; |
| | |
| | | cmsType: ["cmsItem"], |
| | | "resourceType*": this.resourceTypeValueList, |
| | | source: [], |
| | | isbn: [], |
| | | year: [], |
| | | abstract: [], |
| | | keyWords: [], |
| | |
| | | } else { |
| | | // 设置一个默认值或者进行其他错误处理 |
| | | item.keyWords = []; |
| | | } |
| | | if (item.abstract) { |
| | | item.cleanAbstract = item.abstract.replace(/<[^>]+>/g, ""); |
| | | } |
| | | const foundItem = this.category.list.find((citem) => citem.value == item.cmsItemType); |
| | | item.resourceTypeName = foundItem ? foundItem.name : ''; |
| | |
| | | font-size: 14px; |
| | | background-color: transparent; |
| | | color: #937950; |
| | | border: 1px solid #6f5a3a; |
| | | border: 1px solid #937950; |
| | | border-radius: 0; |
| | | |
| | | &:hover { |
| | | background-color: #6f5a3a; |
| | | background-color: #937950; |
| | | color: #fffdf8; |
| | | } |
| | | } |
| | |
| | | font-size: 14px; |
| | | background-color: #937950; |
| | | color: #fff; |
| | | border: 1px solid #6f5a3a; |
| | | border: 1px solid #937950; |
| | | border-radius: 0; |
| | | |
| | | &:hover { |
| | | background-color: #6f5a3a; |
| | | background-color: #937950; |
| | | color: #fffdf8; |
| | | } |
| | | } |
| | |
| | | .page-main-abstract { |
| | | font-family: Source Han Sans !important; |
| | | font-size: 14px !important; |
| | | font-weight: 350 !important; |
| | | line-height: 26px !important; |
| | | color: #333333 !important; |
| | | font-weight: 100 !important; |
| | | } |
| | | |
| | | p:nth-child(1) { |
| | |
| | | margin-bottom: 13px; |
| | | font-family: Source Han Sans; |
| | | font-size: 14px; |
| | | font-weight: 350; |
| | | line-height: 26px; |
| | | color: #333333; |
| | | overflow: hidden; |
| | | display: -webkit-box; |
| | | -webkit-box-orient: vertical; |
| | | -webkit-line-clamp: 3; |
| | | |
| | | .abstract-title { |
| | | font-weight: bold; |
| | | } |
| | | |
| | | span { |
| | | font-family: Source Han Sans; |
| | | font-size: 14px; |
| | | font-weight: bold; |
| | | color: #333333; |
| | | } |
| | | |
| | | } |
| | | |
| | | p:nth-child(3) { |
| | |
| | | font-size: 16px; |
| | | font-weight: bold; |
| | | color: #937950; |
| | | margin-bottom: 5px; |
| | | |
| | | ::v-deep .el-button { |
| | | font-size: 14px; |
| | | background-color: transparent; |
| | | color: #937950; |
| | | border: 1px solid #6f5a3a; |
| | | border: 1px solid #937950; |
| | | border-radius: 0; |
| | | |
| | | &:hover { |
| | | background-color: #6f5a3a; |
| | | background-color: #937950; |
| | | color: #fffdf8; |
| | | } |
| | | } |
| | |
| | | border-left: 1px solid #2c2c2c; |
| | | } |
| | | |
| | | |
| | | |
| | | margin-bottom: 10px; |
| | | margin-bottom: 15px; |
| | | } |
| | | |
| | | .main-author { |
| | |
| | | overflow: hidden; |
| | | display: -webkit-box; |
| | | -webkit-box-orient: vertical; |
| | | -webkit-line-clamp: 4; |
| | | -webkit-line-clamp: 3; |
| | | |
| | | span { |
| | | font-family: Source Han Sans; |
| | |
| | | } |
| | | |
| | | .keyWord { |
| | | cursor: pointer; |
| | | |
| | | padding: 5px 10px; |
| | | color: #937950; |
| | | border: 1px solid #937950; |
| | |
| | | object-fit: contain; |
| | | } |
| | | } |
| | | |
| | | ::v-deep .el-loading-spinner { |
| | | .el-loading-text { |
| | | font-size: 14px; |
| | | color: #937950; |
| | | } |
| | | |
| | | .el-icon-loading { |
| | | font-size: 14px; |
| | | color: #937950; |
| | | } |
| | | } |
| | | </style> |
| | | |
| | | <style lang="less"> |