mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git
synced 2025-12-25 02:32:52 +08:00
666 lines
20 KiB
Vue
666 lines
20 KiB
Vue
<template>
|
||
<div class="excellent">
|
||
<div class="charts_header">
|
||
<portal-header textColor="#fff"></portal-header>
|
||
<div class="text">
|
||
浏览TOP榜单
|
||
</div>
|
||
</div>
|
||
<div class="ex_content">
|
||
<div class="ex_top">
|
||
<div class="ex_select">
|
||
<div class="ex_left">
|
||
<div style="margin-right: 12px;">
|
||
<el-select v-model="majorValue" @change="majorChange" placeholder="请选择专业">
|
||
<el-option
|
||
v-for="item in speciDataNew"
|
||
:key="item.name"
|
||
:label="item.name"
|
||
:value="item.code">
|
||
</el-option>
|
||
</el-select>
|
||
</div>
|
||
<div>
|
||
<el-select v-model="monthValue" @change="monthChange" placeholder="请选择月份">
|
||
<el-option
|
||
v-for="item in optionsMonth"
|
||
:key="item.value"
|
||
:label="item.label"
|
||
:value="item.value">
|
||
</el-option>
|
||
</el-select>
|
||
</div>
|
||
</div>
|
||
<div class="ex_right" @click="goCase">返回</div>
|
||
</div>
|
||
</div>
|
||
<div v-if="caseList.list.length != 0" class="data-content">
|
||
<div v-for="item in caseList.list" :key="item.id" class="case-list">
|
||
<div class="case-info" style="padding-bottom: 28px;">
|
||
<div class="case-info-cont">
|
||
<div @click="toCaseDetail(item.id, item.refId)" style="cursor: pointer;">
|
||
<div class="case-info-title">
|
||
<div class="case-titdiv">
|
||
<div class="case-tittext">
|
||
<span class="title-line-ellipsis" v-html="item.title"></span>
|
||
</div>
|
||
<div class="case-activeText">
|
||
<!-- <span v-if="item.breCommend" class="comWords"
|
||
style="background-color:rgba(232, 139, 72);">荐</span>
|
||
<span v-if="item.excellent" class="comWords" style="background-color:red;">最佳</span> -->
|
||
<span v-if="item.excellentTag" class="comWords" style="width: 98px;height: 24px;background: #F99000;border-radius: 2px;font-weight: 400;font-size: 12px;color: #FFFFFF;padding: 4px 10px;">
|
||
{{item.excellentTag}}
|
||
</span>
|
||
<span v-if="item.viewRankTags.length != 0" v-for="tag in item.viewRankTags" class="comWords" style="width: 98px;height: 24px;background: #F99000;border-radius: 2px;font-weight: 400;font-size: 12px;color: #FFFFFF;padding: 4px 10px;">
|
||
{{tag.tagName}}
|
||
</span>
|
||
</div>
|
||
<div class="case-info-date portal-time">
|
||
<i class="el-icon-time"></i>
|
||
<time-show :time="item.sysCreateTime"></time-show>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div style="height:58px;padding-top:14px ">
|
||
<author :avatar="item.authorInfo.avatar" :name="item.authorInfo.name" :info="item.authorInfo.orgInfo"
|
||
:sex="item.authorInfo.sex" :authorTags="item.authorTags" :aid="item.authorInfo.aid">
|
||
<template>
|
||
<div v-if="item.breCommend"
|
||
style="padding-top: 6px;flex: 1;display: flex;justify-content: flex-end;color: #999;font-size: 12px;">
|
||
<span>{{ item.recommendOrgName }}推荐</span>
|
||
</div>
|
||
</template>
|
||
</author>
|
||
</div>
|
||
<div @click="toCaseDetail(item.id, item.refId)" style="cursor: pointer;">
|
||
<div class="keyword-text clearfix">
|
||
<div style="color:#2974D6;font-weight: 450;" v-if="item.orgDomainParent">
|
||
{{ orgDomainTranslate(item.orgDomainParent) }}
|
||
</div>
|
||
<div style="color:#2974D6;font-weight: 450;" v-for="(item, idx) in item.majorType" :key="idx">
|
||
{{ majorTypeTranslate(item) }}
|
||
</div>
|
||
<div v-if="item.keyword1">{{ item.keyword1 }}</div>
|
||
<div v-if="item.keyword2">{{ item.keyword2 }}</div>
|
||
<div v-if="item.keyword3">{{ item.keyword3 }}</div>
|
||
<div v-if="item.keyword4">{{ item.keyword4 }}</div>
|
||
<div v-if="item.keyword5">{{ item.keyword5 }}</div>
|
||
</div>
|
||
</div>
|
||
<div class="case-info-summary two-line-ellipsis" @click="toCaseDetail(item.id, item.refId)">
|
||
{{ item.summary }}
|
||
</div>
|
||
<!-- <div style="display: flex;justify-content: flex-end;">
|
||
<div style="margin:8px 0;">
|
||
<interactBar :type="3" :data="item" :comments="false" :shares="true"></interactBar>
|
||
</div>
|
||
</div> -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div v-if="caseList.showPagCount > queryCondition.pageSize">
|
||
<pagination :size="queryCondition.pageSize" :total="caseList.count" :page="queryCondition.pageIndex"
|
||
layout="total, prev, pager, next, jumper" @change-page="currentChange"></pagination>
|
||
</div>
|
||
</div>
|
||
<div class="pagination-div" v-if="caseList.list.length == 0">
|
||
<span class="notcoures">
|
||
<img :src="`${webBaseUrl}/images/nocase.png`" alt="">
|
||
<h5>暂无案例，请优先学习其它案例吧～</h5>
|
||
</span>
|
||
</div>
|
||
<div v-if="isSeach" style="height:382px">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { mapGetters } from "vuex";
|
||
import portalHeader from "@/components/PortalHeader.vue";
|
||
import portalFooter from "@/components/PortalFooter.vue";
|
||
import portalFloatTools from "@/components/PortalFloatTools.vue";
|
||
import interactBar from "@/components/Portal/interactBar.vue";
|
||
import timeShow from "@/components/Portal/datetimeShow.vue";
|
||
import author from "@/components/Portal/authorInfo.vue";
|
||
import apiCase from "@/api/modules/cases.js";
|
||
import apiUser from "@/api/system/user.js";
|
||
import apiSearchterm from "@/api/modules/searchterm.js";
|
||
import { deepClone } from "../../../utils";
|
||
import apiDict from "@/api/modules/dict.js";
|
||
import apiType from "@/api/modules/type.js";
|
||
import { cutFullName } from "@/utils/tools.js";
|
||
import apiPlace from "@/api/phase2/place.js"
|
||
export default {
|
||
name: 'excellent',
|
||
components: {
|
||
portalHeader,
|
||
portalFooter,
|
||
portalFloatTools,
|
||
interactBar,
|
||
timeShow,
|
||
author
|
||
},
|
||
data() {
|
||
return {
|
||
majorId: '',
|
||
rankMonth: '',
|
||
optionsMonth: [],
|
||
majorValue: '',
|
||
monthValue: '',
|
||
caseList: {
|
||
count: 0,
|
||
list: [],
|
||
showPagCount: 0
|
||
},
|
||
isSeach: false,
|
||
domain: [],//组织领域
|
||
speciData: [],//专业分类
|
||
speciDataNew: [],
|
||
monthsObject: {},
|
||
treeList:[],
|
||
queryCondition: {
|
||
pageIndex: 1,
|
||
pageSize: 10,
|
||
majorType: '', //专业分类code
|
||
excellent: true,
|
||
keyWord: '',
|
||
orgDomainDtos: [],
|
||
caseType: process.env.VUE_APP_CASE_TYPE,
|
||
authorName: '',
|
||
notInIds: [],
|
||
type: 'all',
|
||
userId: '',
|
||
parent: '',
|
||
children: [],
|
||
name: '',
|
||
years: [],
|
||
// 随机
|
||
notInIds: [],//重复的id
|
||
orderField: "id",
|
||
orderAsc: false,//排序
|
||
sysType1:'',
|
||
sysType2:'',
|
||
sysType3:''
|
||
},
|
||
}
|
||
},
|
||
mounted() {
|
||
this.majorValue = this.$route.query.majorName
|
||
const dateStr = this.$route.query.riseRankTime;
|
||
const year = dateStr.substring(2, 4) + '年';
|
||
const month = dateStr.substring(5, 7) + '月';
|
||
this.monthValue = year + month;
|
||
this.getCaseData()
|
||
Promise.all([apiType.treeList(1,Number(this.caseType ?? 155),1), apiCase.majorTypes(),apiCase.queryAllTimePopularityOfMajor()]).then(rs => {
|
||
if (rs[0].code == 200) {
|
||
const {records} = rs[0].data
|
||
records.forEach(item => {
|
||
item.fielclass = false;
|
||
item.type = 'org_domain';
|
||
item.list = item.children ? item.children : []
|
||
if (Array.isArray(item.children)) {
|
||
item.list.forEach(sub => {
|
||
sub.list = sub.children ? sub.children : []
|
||
sub.fielclass = false
|
||
if (Array.isArray(sub.children)) {
|
||
sub.list.forEach(three => {
|
||
three.list = three.children ? three.children : []
|
||
three.fielclass = false
|
||
})
|
||
}
|
||
})
|
||
}
|
||
})
|
||
this.domain = records;
|
||
}
|
||
if (rs[1].status == 200) {
|
||
rs[1].result.forEach(item => {
|
||
item.fielclass = false;
|
||
item.type = 'major_type';
|
||
})
|
||
this.speciData = rs[1].result;
|
||
}
|
||
if(rs[2].status == 200){
|
||
const months = Object.keys(rs[2].result)
|
||
this.monthsObject = rs[2].result
|
||
months.forEach(item=>{
|
||
rs[1].result.forEach(sub=>{
|
||
if(item == sub.code){
|
||
this.speciDataNew.push(sub)
|
||
}
|
||
})
|
||
})
|
||
}
|
||
this.selectMonth(this.$route.query.majorId)
|
||
});
|
||
this.loadTypeData();//加载分类
|
||
},
|
||
computed: {
|
||
tagList() { //列表属性，用于计算
|
||
let list = [];
|
||
if (this.keyWord) {
|
||
list.push({ type: '0', code: 'keyword', name: this.keyWord, checked: true })
|
||
}
|
||
this.domain.forEach(one => {
|
||
var twoChildChecked = false;//是否有下级
|
||
one.list.forEach(two => {
|
||
if (two.fielclass) {
|
||
twoChildChecked = true;
|
||
}
|
||
var threeChildChecked = false;
|
||
two.list.forEach(three => {
|
||
if (three.fielclass) {
|
||
list.push(three);
|
||
threeChildChecked = true;
|
||
}
|
||
});
|
||
if (two.fielclass && !threeChildChecked) {
|
||
list.push(two);
|
||
}
|
||
});
|
||
if (one.fielclass && !twoChildChecked) {
|
||
list.push(one);
|
||
}
|
||
})
|
||
this.speciData.forEach(item => {
|
||
if (item.fielclass) {
|
||
list.push(item);
|
||
}
|
||
});
|
||
this.treeList.forEach(one => {
|
||
var twoChildChecked = false;//是否有下级
|
||
one.children && one.children.forEach(two => {
|
||
if (two.checked) {
|
||
twoChildChecked = true;
|
||
}
|
||
var threeChildChecked = false;
|
||
two.children && two.children.forEach(three => {
|
||
if (three.checked) {
|
||
list.push(three);
|
||
threeChildChecked = true;
|
||
}
|
||
});
|
||
if (two.checked && !threeChildChecked) {
|
||
list.push(two);
|
||
}
|
||
});
|
||
if (one.checked && !twoChildChecked) {
|
||
list.push(one);
|
||
}
|
||
})
|
||
|
||
return list;
|
||
},
|
||
},
|
||
methods: {
|
||
selectMonth(e){
|
||
this.optionsMonth = this.monthsObject[e].map(item=>{
|
||
return {
|
||
value: item,
|
||
label: item.split('-')[0]+'年'+item.split('-')[1]+'月'
|
||
}
|
||
})
|
||
},
|
||
majorChange(e){
|
||
this.selectMonth(e)
|
||
this.majorId = e
|
||
this.rankMonth = '20' + this.optionsMonth[0].value + '-' + '20'
|
||
this.monthValue = this.optionsMonth[0].label
|
||
this.getCaseData()
|
||
},
|
||
monthChange(e){
|
||
this.rankMonth ='20' + e + '-' + '20'
|
||
this.getCaseData()
|
||
},
|
||
orgDomainTranslate(code) { // 组织领域翻译
|
||
if (code == '') {
|
||
return
|
||
}
|
||
let name = '';
|
||
let data = this.domain.find(item => {
|
||
return item.code == code;
|
||
});
|
||
if (data) {
|
||
name = data.name;
|
||
}
|
||
return name;
|
||
},
|
||
majorTypeTranslate(code) { // 专业分类翻译
|
||
let name = '';
|
||
let data = this.speciData.find(item => item.code == code);
|
||
if (data) {
|
||
name = data.name;
|
||
}
|
||
return name;
|
||
},
|
||
async loadTypeData() {
|
||
try {
|
||
const { result, status } = await apiType.tree(1);
|
||
if (status === 200) {
|
||
result.forEach(one => {
|
||
one.checked = false;
|
||
if(!one.children) one.children = []
|
||
one.children && one.children.forEach(two => {
|
||
two.checked = false;
|
||
if(!two.children) two.children = []
|
||
two.children && two.children.forEach(three => {
|
||
three.checked = false;
|
||
if(!three.children) three.children = []
|
||
})
|
||
})
|
||
})
|
||
this.treeList = result
|
||
}
|
||
} catch (error) {
|
||
// console.log(error);
|
||
}
|
||
},
|
||
goCase() {
|
||
this.$router.go(-1);
|
||
},
|
||
toCaseDetail(id, refId) {
|
||
if (refId) {
|
||
apiCase.startReadTimer(refId)
|
||
}
|
||
this.$router.push({ path: '/case/detail', query: { id } });
|
||
},
|
||
getAllFielclass() { //获取全部选中的标签
|
||
let newlist = JSON.parse(JSON.stringify(this.domain))
|
||
return newlist.filter(one => {
|
||
one.list = one.list.filter(two => {
|
||
two.list = two.list.filter(three => {
|
||
return three.fielclass;
|
||
})
|
||
return two.fielclass;
|
||
});
|
||
return one.fielclass
|
||
})
|
||
},
|
||
currentChange(val) {
|
||
this.caseList.showPagCount = 0
|
||
this.queryCondition.pageIndex = val
|
||
this.getCaseData()
|
||
},
|
||
getCaseUserData(caseList) {
|
||
let ids = caseList.map((item, index) => {
|
||
return item.authorId;
|
||
});
|
||
//不能为空
|
||
if (!ids.length) return
|
||
|
||
const noReapetIds = [...new Set(ids)];
|
||
apiUser.getByIds(noReapetIds).then(res => {
|
||
if (res.status == 200) {
|
||
caseList.forEach((item, index) => {
|
||
res.result.some(author => {
|
||
if (author.aid == item.authorId) {
|
||
item.authorInfo = author;
|
||
author.orgInfo = cutFullName(author.orgInfo, 1);
|
||
return true;
|
||
} else {
|
||
return false;
|
||
}
|
||
});
|
||
});
|
||
} else {
|
||
this.$message.error(res.message);
|
||
}
|
||
});
|
||
},
|
||
async getCaseData() {
|
||
let majorTypeList = [];
|
||
let allFielclass = JSON.parse(JSON.stringify(this.getAllFielclass()));
|
||
// 获取树状id
|
||
this.queryCondition.orgDomainDtos = allFielclass.map(item => {
|
||
item.list = item.list.map(two => {
|
||
two.list = two.list.map(three => {
|
||
return {
|
||
parent: three.code
|
||
}
|
||
})
|
||
return {
|
||
parent: two.code,
|
||
children: two.list || []
|
||
}
|
||
})
|
||
return {
|
||
parent: item.code,
|
||
children: item.list || []
|
||
}
|
||
})
|
||
// 专业分类的id
|
||
this.tagList.forEach(tag => {
|
||
if (tag.type == '0') {
|
||
this.queryCondition.keyWord = tag.name;
|
||
} else if (tag.type == 'major_type') {
|
||
majorTypeList.push(tag.code);
|
||
}
|
||
});
|
||
this.queryCondition.majorType = majorTypeList.join(',');
|
||
this.queryCondition.majorId = this.majorId || this.$route.query.majorId
|
||
this.queryCondition.rankMonth = (this.rankMonth || this.$route.query.riseRankTime) + ' 00:00:00'
|
||
await apiCase.queryPopularityOfMajor(this.queryCondition).then((res) => {
|
||
if (res.status == 200) {
|
||
if (res.result.length > 0) {
|
||
this.isSeach = false;
|
||
res.result.forEach(item => {
|
||
item.majorType = item.majorType ? item.majorType.split(",") : [];
|
||
item.isAll = false;
|
||
item.authorInfo = {
|
||
aid: "",
|
||
name: "",
|
||
orgInfo: "",
|
||
avatar: "",
|
||
sex: null
|
||
};
|
||
});
|
||
}
|
||
res.result.forEach(item=>{
|
||
item.viewRankTags = item.viewRankTags.slice(0,2)
|
||
})
|
||
this.caseList.list = res.result
|
||
if(this.caseList.length == 0){
|
||
this.isSeach = true
|
||
}else{
|
||
this.isSeach = false
|
||
}
|
||
this.getCaseUserData(res.result);
|
||
// 给所有的赋值
|
||
this.caseList.count = res.result.count;
|
||
this.caseList.showPagCount = res.result.count;
|
||
} else {
|
||
this.$message.error(res.message);
|
||
}
|
||
}).catch(err => {
|
||
// console.log(err);
|
||
});
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.keyword-text {
|
||
|
||
div {
|
||
padding: 0px 8px;
|
||
margin-top: 5px;
|
||
float: left;
|
||
line-height: 24px;
|
||
font-size: 12px;
|
||
border-radius: 2px;
|
||
margin-right: 8px;
|
||
color: #2C68FF;
|
||
height: 24px;
|
||
background: rgba(44, 104, 255, 0.06);
|
||
}
|
||
}
|
||
.case-titdiv {
|
||
line-height: 30px;
|
||
display: flex;
|
||
|
||
.case-tittext {
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
color: #333333;
|
||
max-width: 67%;
|
||
}
|
||
|
||
.case-activeText {
|
||
line-height: 27.5px;
|
||
|
||
.comWords {
|
||
color: white;
|
||
font-size: 12px;
|
||
border-radius: 2px;
|
||
padding: 2px 4px;
|
||
margin-left: 20px;
|
||
}
|
||
|
||
}
|
||
}
|
||
.excellent{
|
||
background-color: #F2F5F7;
|
||
min-height: 100vh;
|
||
.charts_header{
|
||
width: 100%;
|
||
// height: 240px;
|
||
background: url('../../../../public/images/headerBack.png') no-repeat;
|
||
background-size: 100% 100%;
|
||
padding-bottom: 37px;
|
||
.text{
|
||
margin-top: 41px;
|
||
font-weight: 400;
|
||
font-size: 340%;
|
||
color: #FFFFFF;
|
||
padding-left: 98px;
|
||
}
|
||
}
|
||
|
||
.ex_content{
|
||
padding: 31px 90px 103px;
|
||
.ex_top{
|
||
background-color: #F2F5F7;
|
||
margin-bottom: 15px;
|
||
.ex_text{
|
||
font-size: 20px;
|
||
color: #fff;
|
||
margin-bottom: 10px;
|
||
}
|
||
.ex_select{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
.ex_left{
|
||
display: flex;
|
||
}
|
||
.ex_right{
|
||
width: 71px;
|
||
height: 38px;
|
||
background: #2478FF;
|
||
border-radius: 4px;
|
||
text-align: center;
|
||
line-height: 38px;
|
||
cursor: pointer;
|
||
color: #fff;
|
||
}
|
||
}
|
||
}
|
||
.data-content {
|
||
background-color: #fff;
|
||
padding: 5px 50px;
|
||
|
||
::v-deep .interact-bar-btns {
|
||
.interact-bar-btn {
|
||
text-align: right;
|
||
min-width: 78px !important;
|
||
margin-right: 0;
|
||
}
|
||
}
|
||
|
||
.case-list:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.case-list {
|
||
border-bottom: 1px solid rgba(153, 153, 153, .2);
|
||
margin-top: 10px;
|
||
margin-bottom: 25px;
|
||
padding-left: 5px;
|
||
padding-right: 5px;
|
||
}
|
||
|
||
.case-image {
|
||
width: 230px;
|
||
height: 170px;
|
||
float: left;
|
||
border: 1px solid #eee;
|
||
}
|
||
|
||
.case-info {
|
||
.case-info-cont {
|
||
.case-info-title {
|
||
font-size: 15px;
|
||
color: #333;
|
||
font-weight: 600;
|
||
height: 30px;
|
||
|
||
.case-info-date {
|
||
flex: 1;
|
||
text-align: right;
|
||
font-weight: normal;
|
||
|
||
// font-size: 12px;
|
||
// height: 30px;
|
||
// font-weight: 200;
|
||
// color: #8590a6;
|
||
i {
|
||
margin-right: 5px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.case-info-summary {
|
||
margin-top: 16px;
|
||
cursor: pointer;
|
||
margin-bottom: 5px;
|
||
word-break: break-all;
|
||
line-height: 24px;
|
||
font-size: 14px;
|
||
color: #333330;
|
||
font-weight: 400;
|
||
}
|
||
|
||
.case-info-tools {
|
||
height: 30px;
|
||
|
||
.case-info-tools-auth {
|
||
float: left;
|
||
font-size: 13px;
|
||
color: #999999;
|
||
|
||
img {
|
||
margin-right: 10px;
|
||
width: 30px;
|
||
border: 1px solid #eee;
|
||
border-radius: 50%;
|
||
vertical-align: middle;
|
||
}
|
||
}
|
||
|
||
.case-info-tools-btns {
|
||
float: right;
|
||
|
||
.case-info-tools-btn {
|
||
margin: 0 0 0 15px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |