hz/learning-system-portal
1
0
Fork 0
mirror of https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git synced 2025-12-08 18:36:43 +08:00
Code Issues Packages Projects Releases Wiki Activity

案例调整

Browse Source
This commit is contained in:
lmj
2022-06-06 17:56:36 +08:00
parent e8d237d862
commit 596af21fa8
2 changed files with 350 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

200
src/views/portal/case/Detail.vue
View File

@@ -1,5 +1,5 @@
<template>
<div>
<div id="case-list-content">
<portal-header current="case" :goSearch="2"></portal-header>
<div class="portal-content xcontent" style="margin-top: 30px;">
<el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb-nav">
@@ -38,28 +38,83 @@
</el-col>
</el-row>
</div>
<div style="width: 245px;margin-left: 10px;"><!--排行榜-->
<div id="fixd-box">
<el-card class="ranking-card">
<div slot="header">
<span>排行榜</span>
</div>
<div>
<el-row class="ranking-title" v-for="(item,index) in ankingList" :key="index">
<el-col :span="6">
<img v-if="index===0" :src="`${webBaseUrl}/images/first.png`"/>
<img v-if="index===1" :src="`${webBaseUrl}/images/second.png`"/>
<img v-if="index===2" :src="`${webBaseUrl}/images/third.png`"/>
</el-col>
<el-col class="center" :span="18">{{item.sysCreateUname}}</el-col>
<!-- <el-col class="center" :span="7">{{''}}</el-col>
<el-col class="center" :span="7">{{item.counts}}</el-col> -->
</el-row>
</div>
</el-card>
</div>
</div>
<div style="width: 245px;margin-left: 5px;">
<div>
<div id="fixd-box">
<el-card class="ranking-card" >
<div slot="header">
<span style="font-size: 14px;font-weight: 600;color: #333333;">好评榜</span>
</div>
<div style="padding-bottom:10px">
<el-row class="ranking-title">
<!-- <el-col :span="15" style="color: #333333;font-size: 14px;">名称</el-col> -->
<!-- <el-col :offset="4" :span="5" class="center" style="color: #333333;font-size: 14px;">分数</el-col> -->
</el-row>
<el-row class="ranking-title bacolor" v-for="(item, index) in ankingList" :key="index" >
<el-col :span="6" style="height:34px">
<img v-if="index===0" :src="`${webBaseUrl}/images/first.png`"/>
<img v-if="index===1" :src="`${webBaseUrl}/images/second.png`"/>
<img v-if="index===2" :src="`${webBaseUrl}/images/third.png`"/>
<span style="margin-left: 10px" v-if="index!=2&&index!=0&&index!=1">{{index+1}}</span>
</el-col>
<el-tooltip :enterable="false" @click.native="jumpRouter(item)" effect="light" :content="item.sysCreateUname" placement="top-start">
<el-col :span="15" style="cursor: pointer;" class="title-line-ellipsis"> {{ item.sysCreateUname }}</el-col>
</el-tooltip>
<!-- <el-col class="center" style="color: #FF8E00;" :span="5">{{ item.score }}</el-col> -->
</el-row>
</div>
</el-card>
<div style="height: 10px;"></div>
<el-card class="ranking-card" >
<div slot="header">
<span style="font-size: 14px;font-weight: 600;color: #333333;">人气榜</span>
</div>
<div style="padding-bottom:10px">
<el-row class="ranking-title">
<!-- <el-col :span="15" style="color: #333333;font-size: 14px;">名称</el-col> -->
<!-- <el-col :offset="4" :span="5" class="center" style="color: #333333;font-size: 14px;">分数</el-col> -->
</el-row>
<el-row class="ranking-title bacolor" v-for="(item, index) in Popularity" :key="index" >
<el-col :span="6" style="height:34px">
<img v-if="index===0" :src="`${webBaseUrl}/images/first.png`"/>
<img v-if="index===1" :src="`${webBaseUrl}/images/second.png`"/>
<img v-if="index===2" :src="`${webBaseUrl}/images/third.png`"/>
<span style="margin-left: 10px" v-if="index!=2&&index!=0&&index!=1">{{index+1}}</span>
</el-col>
<el-tooltip :enterable="false" @click.native="jumpRouter(item)" effect="light" :content="item.title" placement="top-start">
<el-col :span="15" style="cursor: pointer;" class="title-line-ellipsis"> {{ item.title }}</el-col>
</el-tooltip>
<!-- <el-col class="center" style="color: #FF8E00;" :span="5">{{ item.score }}</el-col> -->
</el-row>
</div>
</el-card>
<div style="height: 10px;"></div>
<el-card class="ranking-card" >
<div slot="header">
<span style="font-size: 14px;font-weight: 600;color: #333333;">人气榜</span>
</div>
<div style="padding-bottom:10px">
<el-row class="ranking-title">
<!-- <el-col :span="15" style="color: #333333;font-size: 14px;">名称</el-col> -->
<!-- <el-col :offset="4" :span="5" class="center" style="color: #333333;font-size: 14px;">分数</el-col> -->
</el-row>
<el-row class="ranking-title bacolor" v-for="(item, index) in Positive" :key="index" >
<el-col :span="6" style="height:34px">
<img v-if="index===0" :src="`${webBaseUrl}/images/first.png`"/>
<img v-if="index===1" :src="`${webBaseUrl}/images/second.png`"/>
<img v-if="index===2" :src="`${webBaseUrl}/images/third.png`"/>
<span style="margin-left: 10px" v-if="index!=2&&index!=0&&index!=1">{{index+1}}</span>
</el-col>
<el-tooltip :enterable="false" @click.native="jumpRouter(item)" effect="light" :content="item.title" placement="top-start">
<el-col :span="15" style="cursor: pointer;" class="title-line-ellipsis"> {{ item.title }}</el-col>
</el-tooltip>
<!-- <el-col class="center" style="color: #FF8E00;" :span="5">{{ item.score }}</el-col> -->
</el-row>
</div>
</el-card>
</div>
</div>
</div>
</div>
</div>
<portal-footer></portal-footer>
@@ -77,7 +132,8 @@ import comments from '@/components/Portal/comments.vue';
import apiCase from '@/api/modules/cases.js';
import apiUser from '@/api/system/user.js';
import author from '@/components/Portal/authorInfo.vue';
import apiMessage from '@/api/system/message.js'
import apiMessage from '@/api/system/message.js';
import apiDict from "@/api/modules/dict.js"
export default {
name: 'atticle',
components: { portalHeader, portalFooter, interactBar, author, comments,pdfPreview },
@@ -86,6 +142,9 @@ export default {
},
data() {
return {
ankingList:[],
Popularity:[],
Positive:[],
resolveId: '',
basePath:process.env.VUE_APP_FILE_BASE_URL,
pdfPath:'',
@@ -104,24 +163,70 @@ export default {
this.getCaseData();
}
this.getAnkingData();
this.getPopularity();
this.getPositive();
window.addEventListener(
"scroll",
this.handleScroll
);
},
methods: {
getAnkingData(){
apiCase.usernameList(10).then(res=>{
handleScroll() {
let innerHeight = document.querySelector('#case-list-content').clientHeight
let outerHeight = document.documentElement.clientHeight
let scrollTop = document.documentElement.scrollTop
if ((outerHeight + scrollTop + 350) >= innerHeight) {
if(this.moreState == 1 && this.course.pageIndex < 4) {
this.loadMore();
}
}
if(scrollTop > 630) {
document.querySelector('#fixd-box').style.cssText = "position: fixed;top: -400px;width:245.5px";
} else {
document.querySelector('#fixd-box').style.cssText = "position: static";
}
},
getAnkingData(){
apiCase.usernameList(5).then(res=>{
if(res.status==200){
this.ankingList=res.result
// console.log(res)
}
})
},
getPopularity(){
apiCase.queryPraises(5).then(res=>{
if(res.status==200){
this.Popularity=res.result
// console.log(this.Popularity)
}
})
},
getPositive(){
apiCase.queryComments(5).then(res=>{
if(res.status==200){
this.Positive=res.result
console.log(res)
}
})
},
getCaseData() {
apiCase.detail(this.resolveId,true).then(res => {
if (res.status == 200) {
if (JSON.stringify(res.result) != '{}') {
this.caseDetail = res.result;
console.log(this.caseDetail.filePath)
this.getCaseUserDetail();
if(this.caseDetil.filePath){
this.pdfPath=this.basePath+this.caseDetil.filePath;
if(this.caseDetail.filePath){
this.pdfPath=this.basePath+this.caseDetail.filePath;
}else{
this.$message.error('内容文件不存在或已被删除，请与管理员联系');
}
@@ -159,6 +264,43 @@ export default {
</script>
<style scoped lang="scss">
::v-deep .el-card__body{
padding: 0;
}
::v-deep .bacolor:nth-child(odd){
background-color: #f6f6f6;
padding: 0 5px;
}
::v-deep .bacolor:nth-child(even){
background-color: #fff;
padding: 0 5px;
}
.ranking-title {
line-height: 34px;
font-size: 15px;
color: #333333;
.center-titlt{
font-size: 15px;
color: #333333;
}
.center{
text-align: right;
}
img{
margin-top: 5px;
}
}
::v-deep .title-line-ellipsis{
// width: 100%;
display: -webkit-box;
overflow: hidden;
text-overflow:ellipsis;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
box-sizing: border-box;
word-break:break-all;
}
.nav {
margin-bottom: 10px;
}

201
src/views/portal/case/Index.vue
View File

@@ -29,11 +29,11 @@
<el-col :span="24">
<!-- <div class="item-title">组织领域</div> -->
<div style="margin-top:10px; display: flex;">
<div style="line-height: 25px;">
<div style="line-height: 25px;width:11.5%">
<span class="item-title" style="padding-right: 5px;">组织领域</span>
<span class="item-line"></span>
</div>
<div>
<div style="flex:1;">
<el-radio-group v-model="category" size="mini" @change="search()">
<el-radio-button label="0">全部</el-radio-button>
<el-radio-button v-for="item in domain" :key="item.code" :label="item.code"> {{ item.name}}</el-radio-button>
@@ -52,14 +52,15 @@
<el-col :span="24">
<!-- <div class="item-title">专业领域</div> -->
<div style="margin-top:10px; display: flex;">
<div style="line-height: 25px;">
<div style="line-height: 25px;width:11.5%">
<span class="item-title" style="padding-right: 5px;">专业分类</span>
<span class="item-line"></span>
</div>
<div>
<div style="flex:1" id="searchBox">
<el-radio-group v-model="type2" size="mini" @change="search()">
<el-radio-button label="0">全部</el-radio-button>
<el-radio-button v-for="item in Profess" :key="item.code" :label="item.code" > {{ item.name }} </el-radio-button>
<!-- <el-radio-button label="1">经营</el-radio-button>
<el-radio-button label="2">领用</el-radio-button>
<el-radio-button label="3">研发</el-radio-button>
@@ -69,6 +70,7 @@
<el-radio-button label="7">质量</el-radio-button> -->
</el-radio-group>
</div>
</div>
</el-col>
@@ -94,6 +96,13 @@
</el-col>
</el-row> -->
</div>
<div class="searBox">
<el-button type="text" id="closeSearchBtn" @click="closeSearch">
{{word}}
<i :class="showAll ? 'el-icon-arrow-up ': 'el-icon-arrow-down'"></i>
</el-button>
</div>
<!-- <el-row class="search-div-more">
<el-col :span="24">
<el-button type="text" @click="queryExpand = true" v-if="!queryExpand">收起</el-button>
@@ -150,19 +159,71 @@
</el-col>
</el-row>
</div>
<div style="width: 245px;margin-left: 5px;">
<div id="fixd-box">
<el-card class="ranking-card">
<div slot="header">
<span>排行榜</span>
</div>
<div>
<el-row class="ranking-title" v-for="(item,index) in ankingList" :key="index">
<el-col :span="6">
<div style="width: 245px;margin-left: 5px;">
<div>
<div id="fixd-box">
<el-card class="ranking-card" >
<div slot="header">
<span style="font-size: 14px;font-weight: 600;color: #333333;">好评榜</span>
</div>
<div style="padding-bottom:10px">
<el-row class="ranking-title">
<!-- <el-col :span="15" style="color: #333333;font-size: 14px;">名称</el-col> -->
<!-- <el-col :offset="4" :span="5" class="center" style="color: #333333;font-size: 14px;">分数</el-col> -->
</el-row>
<el-row class="ranking-title bacolor" v-for="(item, index) in ankingList" :key="index" >
<el-col :span="6" style="height:34px">
<img v-if="index===0" :src="`${webBaseUrl}/images/first.png`"/>
<img v-if="index===1" :src="`${webBaseUrl}/images/second.png`"/>
<img v-if="index===2" :src="`${webBaseUrl}/images/third.png`"/>
<span style="margin-left: 10px" v-if="index!=2&&index!=0&&index!=1">{{index+1}}</span>
</el-col>
<el-tooltip :enterable="false" @click.native="jumpRouter(item)" effect="light" :content="item.sysCreateUname" placement="top-start">
<el-col :span="15" style="cursor: pointer;" class="title-line-ellipsis"> {{ item.sysCreateUname }}</el-col>
</el-tooltip>
<!-- <el-col class="center" style="color: #FF8E00;" :span="5">{{ item.score }}</el-col> -->
</el-row>
</div>
</el-card>
<div style="height: 10px;"></div>
<el-card class="ranking-card" >
<div slot="header">
<span style="font-size: 14px;font-weight: 600;color: #333333;">人气榜</span>
</div>
<div style="padding-bottom:10px">
<el-row class="ranking-title">
<!-- <el-col :span="15" style="color: #333333;font-size: 14px;">名称</el-col> -->
<!-- <el-col :offset="4" :span="5" class="center" style="color: #333333;font-size: 14px;">分数</el-col> -->
</el-row>
<el-row class="ranking-title bacolor" v-for="(item, index) in Popularity" :key="index" >
<el-col :span="6" style="height:34px">
<img v-if="index===0" :src="`${webBaseUrl}/images/first.png`"/>
<img v-if="index===1" :src="`${webBaseUrl}/images/second.png`"/>
<img v-if="index===2" :src="`${webBaseUrl}/images/third.png`"/>
<span style="margin-left: 10px" v-if="index!=2&&index!=0&&index!=1">{{index+1}}</span>
</el-col>
<el-tooltip :enterable="false" @click.native="jumpRouter(item)" effect="light" :content="item.title" placement="top-start">
<el-col :span="15" style="cursor: pointer;" class="title-line-ellipsis"> {{ item.title }}</el-col>
</el-tooltip>
<!-- <el-col class="center" style="color: #FF8E00;" :span="5">{{ item.score }}</el-col> -->
</el-row>
</div>
</el-card>
<div style="height: 10px;"></div>
<el-card class="ranking-card" >
<div slot="header">
<span style="font-size: 14px;font-weight: 600;color: #333333;">人气榜</span>
</div>
<div style="padding-bottom:10px">
<el-row class="ranking-title">
<!-- <el-col :span="15" style="color: #333333;font-size: 14px;">名称</el-col> -->
<!-- <el-col :offset="4" :span="5" class="center" style="color: #333333;font-size: 14px;">分数</el-col> -->
</el-row>
<el-row class="ranking-title bacolor" v-for="(item, index) in Positive" :key="index" >
<el-col :span="6" style="height:34px">
<img v-if="index===0" :src="`${webBaseUrl}/images/first.png`"/>
<img v-if="index===1" :src="`${webBaseUrl}/images/second.png`"/>
<img v-if="index===2" :src="`${webBaseUrl}/images/third.png`"/>
<span style="margin-left: 10px" v-if="index!=2&&index!=0&&index!=1">{{index+1}}</span>
</el-col>
<el-tooltip :enterable="false" @click.native="jumpRouter(item)" effect="light" :content="item.title" placement="top-start">
@@ -174,6 +235,8 @@
</el-card>
</div>
</div>
</div>
<el-row :gutter="10">
</el-row>
<div style="height: 50px;"></div>
@@ -213,6 +276,14 @@ export default {
components: { portalHeader, portalFooter, portalFloatTools, interactBar,timeShow ,author},
computed: {
...mapGetters(['userInfo','portalCase']),
word: function() {
if (this.showAll == false) {
//对文字进行处理
return "展开搜索";
} else {
return "收起搜索";
}
},
isMore() {
let isOk = true;
if(this.caseList.list.length === this.caseList.count) {
@@ -223,13 +294,13 @@ export default {
},
data() {
return {
showAll:true,//是否展开全部
searchRecords:[],
caseList:{
count:0,
list:[]
},
ankingList:[],
Popularity:[],
Positive:[],
domain:[],
@@ -254,7 +325,11 @@ export default {
searchTags: []
};
},
mounted() {
this.$nextTick(function() {
this.closeSearch();
});
if(!this.portalCase.readProtocol){
this.protocolDialogVisible = true;
}
@@ -271,6 +346,7 @@ export default {
this.handleScroll
);
},
watch:{
// queryCondition:{
// handler(newValue,oldValue){
@@ -284,6 +360,43 @@ export default {
window.removeEventListener("scroll",this.handleScroll);
},
methods: {
closeSearch() {
this.showAll = !this.showAll;
var searchBoxHeght = document.getElementById("searchBox");
if (this.showAll == false) {
searchBoxHeght.style.height = 60 + "px";
} else {
searchBoxHeght.style.height = "auto";
}
},
getAnkingData(){
apiCase.usernameList(5).then(res=>{
if(res.status==200){
this.ankingList=res.result
// console.log(res)
}
})
},
getPopularity(){
apiCase.queryPraises(5).then(res=>{
if(res.status==200){
this.Popularity=res.result
// console.log(this.Popularity)
}
})
},
getPositive(){
apiCase.queryComments(5).then(res=>{
if(res.status==200){
this.Positive=res.result
console.log(res)
}
})
},
getdomain(){
let key ='org_domain'
apiDict.items(key).then(res =>{
@@ -314,13 +427,13 @@ export default {
let innerHeight = document.querySelector('#case-list-content').clientHeight
let outerHeight = document.documentElement.clientHeight
let scrollTop = document.documentElement.scrollTop
// if ((outerHeight + scrollTop + 350) >= innerHeight) {
// if(this.moreState == 1 && this.course.pageIndex < 4) {
// this.loadMore();
// }
// }
if(scrollTop > 100) {
document.querySelector('#fixd-box').style.cssText = "position: fixed;top: 0;width:245px";
if ((outerHeight + scrollTop + 350) >= innerHeight) {
if(this.moreState == 1 && this.course.pageIndex < 4) {
this.loadMore();
}
}
if(scrollTop > 630) {
document.querySelector('#fixd-box').style.cssText = "position: fixed;top: -400px;width:245.5px";
} else {
document.querySelector('#fixd-box').style.cssText = "position: static";
}
@@ -449,6 +562,50 @@ export default {
</script>
<style scoped lang="scss">
.searBox{
text-align: center;
margin: 10px auto 0 auto;
}
#searchBox {
overflow: hidden;
}
.ranking-title {
line-height: 34px;
font-size: 15px;
color: #333333;
.center-titlt{
font-size: 15px;
color: #333333;
}
.center{
text-align: right;
}
img{
margin-top: 5px;
}
}
::v-deep .title-line-ellipsis{
// width: 100%;
display: -webkit-box;
overflow: hidden;
text-overflow:ellipsis;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
box-sizing: border-box;
word-break:break-all;
}
::v-deep .el-card__body{
padding: 0;
}
::v-deep .bacolor:nth-child(odd){
background-color: #f6f6f6;
padding: 0 5px;
}
::v-deep .bacolor:nth-child(even){
background-color: #fff;
padding: 0 5px;
}
::v-deep .el-card{
border: none;
border-radius: 0px;