mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git
synced 2025-12-10 03:16:42 +08:00
985 lines
31 KiB
Vue
985 lines
31 KiB
Vue
<template>
|
||
<div id="case-list-content">
|
||
<portal-header current="case" @emitInput="emitInput"></portal-header>
|
||
<div class="xcontent portal-content">
|
||
<div style="flex: 1;" class="xcol content-div">
|
||
<el-row>
|
||
<el-col :span="24">
|
||
<el-card :body-style="{ padding: '0px' }" class="left-div">
|
||
<el-row class="search-div">
|
||
<!-- <el-row>
|
||
<el-col :span="10" class="search-keyword">
|
||
<el-input placeholder="请输入关键词搜索" v-model="keyWord" clearable><el-button slot="append" icon="el-icon-search" @click="search"></el-button></el-input>
|
||
<div class="tip">热门搜索词：物联网 教师 辅导 绩效</div>
|
||
<div class="tip" style="font-size: 14px;">
|
||
热门搜索词：<span style="cursor:pointer;font-size:15px;margin-left: 10px;" v-for="(item,index) in searchRecords" :key="index" @click="useHotword(item)">{{item.keyword}}</span>
|
||
</div>
|
||
</el-col>
|
||
</el-row> -->
|
||
<div class="searchbar" v-if="searchTags.length > 0">
|
||
<div style="line-height: 30px;">
|
||
<span class="item-title">搜索条件</span>
|
||
<el-tag closable v-for="(tag, tagIdx) in searchTags" :key="tagIdx" @close="tagsClose(tag,tagIdx)">{{ tag.value }}</el-tag>
|
||
</div>
|
||
</div>
|
||
<el-row class="search-item">
|
||
<el-col :span="24">
|
||
<div style="margin-top:10px; display: flex;">
|
||
<div style="line-height: 25px;padding-right: 5px;">
|
||
<span class="item-title" style="padding-right: 5px;">组织领域</span>
|
||
<span class="item-line"></span>
|
||
</div>
|
||
<div style="flex:1;">
|
||
<el-radio-group v-model="queryCondition.orgDomain" size="mini" @change="search()">
|
||
<el-radio-button :label="null">全部</el-radio-button>
|
||
<el-radio-button v-for="item in domain" :key="item.code" :label="item.code"> {{ item.name}}</el-radio-button>
|
||
</el-radio-group>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
<div class="search-div-collapse">
|
||
<el-row class="search-item">
|
||
<el-col :span="24">
|
||
<div style="margin-top:10px; display: flex;">
|
||
<div style="line-height: 25px;padding-right: 5px;">
|
||
<span class="item-title" style="padding-right: 5px;">专业分类</span>
|
||
<span class="item-line"></span>
|
||
</div>
|
||
<div style="flex:1" id="searchBox">
|
||
<el-radio-group v-model="queryCondition.majorType" size="mini" @change="search()">
|
||
<el-radio-button :label="null">全部</el-radio-button>
|
||
<el-radio-button v-for="item in Profess" :key="item.code" :label="item.code" > {{ item.name }} </el-radio-button>
|
||
</el-radio-group>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
<div class="searBox" v-if="searchwd">
|
||
<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>
|
||
<el-row style="height:10px;background-color:#f6f7fc;" >
|
||
</el-row>
|
||
<el-row class="order-div" style="border: 1px solid #EBEEF5;border-bottom:none">
|
||
<span class="quyer-tag">
|
||
<el-button type="text" class="order-class" @click="searchData('comments')" :class="{ actice: queryCondition.orderField == 'comments' }">最热</el-button>
|
||
<el-button type="text" class="order-class" @click="searchData('')" :class="{ actice: queryCondition.orderField == '' }">最新</el-button>
|
||
<!-- <el-button type="text" class="order-class" @click="queryCondition.breCommend = queryCondition.breCommend == ture ? true : null" :class="{ actice: queryCondition.breCommend == true }">组织推荐</el-button> -->
|
||
</span>
|
||
</el-row>
|
||
<el-row class="data-content" style="border: 1px solid #EBEEF5;border-top:none;border-bottom:none">
|
||
<el-col :span="24" v-for="item in caseList.list" :key="item.id" class="case-list">
|
||
<div class="case-info">
|
||
<div class="case-info-cont">
|
||
<router-link :to="'/case/detail?id='+item.id">
|
||
<div class="case-info-title">
|
||
<div class="case-titdiv">
|
||
<span class="case-tittext" v-html="item.title"></span>
|
||
<div class="case-info-date">
|
||
<i class="el-icon-time"></i>
|
||
<time-show :time="item.sysCreateTime"></time-show>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div style="height:32px; ">
|
||
<author :avatar="item.authorInfo.avatar" :name="item.authorInfo.name" :info="item.authorInfo.orgInfo" :sex="item.authorInfo.sex"></author>
|
||
</div>
|
||
<div class="keyword-text clearfix">
|
||
<div style="color:#666" v-if="item.orgDomain">{{ orgDomainTranslate(item.orgDomain) }}</div>
|
||
<div style="color:#666" v-if="item.orgDomain == '' && item.orgDomainParent">{{ orgDomainTranslate(item.orgDomainParent) }}</div>
|
||
<div style="color:#666" v-if="item.majorType">{{ majorTypeTranslate(item.majorType) }}</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>
|
||
</router-link>
|
||
<div class="case-info-summary" @click="jumcasedet(item)">
|
||
<!-- <router-link :to="'/case/detail?id='+item.id"> -->
|
||
{{displayAll(item)}}
|
||
<!-- </router-link> -->
|
||
<span style="color:#588afc;cursor:pointer;" v-if="item.summary.length>180" @click.stop="changeIsAll(item)">
|
||
{{item.isAll?'收起':'展开'}}
|
||
</span>
|
||
</div>
|
||
<div style="display: flex;justify-content: space-between;">
|
||
<div style="margin:8px 0;">
|
||
<interactBar :type="0" :shares="false" :data="item" :readonly="true"></interactBar> </div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
<div class="pagination-div">
|
||
<span class="pag-text" @click="loadMore()" v-if="moreState == 1">加载更多</span>
|
||
<span class="pag-text-msg" v-else-if="moreState == 2">数据加载中</span>
|
||
<span class="pag-text-msg" v-else-if="moreState == 3 && !isSeach">没有更多数据了</span>
|
||
<span class="pag-text-msg" v-else-if="isSeach">没有查询到相关内容</span>
|
||
</div>
|
||
<div v-if="isSeach" style="height:382px">
|
||
</div>
|
||
</el-card>
|
||
</el-col>
|
||
</el-row>
|
||
</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" effect="light" :content="item.sysCreateUname" :visible-arrow="false" popper-class="text-tooltip" placement="bottom">
|
||
<el-col :span="15" 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="bottom" :visible-arrow="false" popper-class="text-tooltip">
|
||
<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="bottom" :visible-arrow="false" popper-class="text-tooltip">
|
||
<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>
|
||
|
||
<el-row :gutter="10">
|
||
</el-row>
|
||
<div style="height: 50px;"></div>
|
||
<el-dialog class="protocol" :visible.sync="protocolDialogVisible" width="30%" :show-close="false">
|
||
<div class="protocol-title">案例查阅及使用用户协议</div>
|
||
<div class="protocol-content">
|
||
  本专区内案例为BOE各组织沉淀的通用案例、 组织案例、卓越绩效案例、管理案例、 职级晋升案例、企业文化案例等。 案例内容记录作者亲历的、真实的、已完成的、
|
||
典型工作事件，提炼解决具体问题的心得、思路经验、方法等。 仅供BOE员工查询、学习、交流使用，未经允许不得以任何方式外传。
|
||
</div>
|
||
<span slot="footer" class="dialog-footer">
|
||
<el-checkbox label="我已阅读并同意。" @change="protocolCheck" style="float: left"></el-checkbox>
|
||
<el-tooltip :disabled="!protocolConfirmButton" effect="light" content="请先勾选‘我已阅读并同意。’" placement="bottom">
|
||
<span><el-button type="primary" :disabled="protocolConfirmButton" @click="protocolConfirm">确 定</el-button></span>
|
||
</el-tooltip>
|
||
</span>
|
||
</el-dialog>
|
||
</div>
|
||
<portal-footer></portal-footer>
|
||
<portalFloatTools></portalFloatTools>
|
||
</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 {cutFullName} from "@/utils/tools.js";
|
||
export default {
|
||
name: "index",
|
||
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) {
|
||
isOk = false;
|
||
}
|
||
return isOk;
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
moreState: 1, // 1 加载更多 2 加载中 3无数据
|
||
isSeach: false,
|
||
searchwd: true,
|
||
showAll: true, //是否展开全部
|
||
searchRecords: [],
|
||
caseList: {
|
||
count: 0,
|
||
list: []
|
||
},
|
||
ankingList: [],
|
||
Popularity: [],
|
||
Positive: [],
|
||
domain: [],
|
||
Profess: [],
|
||
optionsList: [], //分类数据
|
||
protocolDialogVisible: false,
|
||
protocolConfirmButton: true,
|
||
queryCondition: {
|
||
pageIndex: 1,
|
||
pageSize: 10,
|
||
isTop: true,
|
||
orderField: "comments",
|
||
// breCommend:null,
|
||
keyWord: "",
|
||
majorType: "", //专业分类
|
||
orgDomain: "", // 组织领域
|
||
orderAsc: false
|
||
},
|
||
keyWord: "",
|
||
anking: 2,
|
||
queryExpand: true, // true更多，false收起
|
||
category: 0,
|
||
type2: 0,
|
||
type3: 0,
|
||
isFind: false,
|
||
searchTags: [],
|
||
orgData: [],
|
||
};
|
||
},
|
||
|
||
mounted() {
|
||
this.$nextTick(function() {
|
||
this.closeSearch();
|
||
});
|
||
if (!this.portalCase.readProtocol) {
|
||
this.protocolDialogVisible = true;
|
||
}
|
||
this.keyWord = this.$route.query.keyword;
|
||
if (this.keyWord != "") {
|
||
this.isSeach = true;
|
||
}
|
||
this.getAnkingData();
|
||
this.getPopularity();
|
||
this.searchterm();
|
||
this.getPositive();
|
||
this.getProfess();
|
||
this.getdomain();
|
||
// this.getCaseData();
|
||
this.search();
|
||
window.addEventListener("scroll", this.handleScroll);
|
||
},
|
||
|
||
watch: {
|
||
// queryCondition:{
|
||
// handler(newValue,oldValue){
|
||
// this.getCaseData()
|
||
// },
|
||
// deep:true,
|
||
// immediate:true
|
||
// }
|
||
},
|
||
beforeDestroy() {
|
||
window.removeEventListener("scroll", this.handleScroll);
|
||
},
|
||
methods: {
|
||
jumcasedet(item) {
|
||
this.$router.push({path:'/case/detail',query:{id:item.id}});
|
||
|
||
},
|
||
debounce(func, wait) {
|
||
// 非立即执行
|
||
let timeout;
|
||
return function() {
|
||
let context = this;
|
||
let args = arguments;
|
||
if (timeout) clearTimeout(timeout);
|
||
timeout = setTimeout(() => {
|
||
func.apply(context, args);
|
||
}, wait);
|
||
};
|
||
},
|
||
//展示全部
|
||
displayAll(item) {
|
||
if (!item.isAll && item.summary && item.summary.length > 180) {
|
||
return item.summary.slice(0, 180) + "...";
|
||
}
|
||
return item.summary;
|
||
},
|
||
changeIsAll(item) {
|
||
item.isAll = !item.isAll;
|
||
},
|
||
closeSearch() {
|
||
this.showAll = !this.showAll;
|
||
var searchBoxHeght = document.getElementById("searchBox");
|
||
var searchBoxWidth = document.getElementById("searchBox");
|
||
if (searchBoxWidth.clientWidth > 950) {
|
||
this.searchwd = false;
|
||
}
|
||
if (this.showAll == false) {
|
||
searchBoxHeght.style.height = 70 + "px";
|
||
} else {
|
||
searchBoxHeght.style.height = "auto";
|
||
}
|
||
},
|
||
|
||
getAnkingData() {
|
||
apiCase.usernameList(5).then(res => {
|
||
if (res.status == 200) {
|
||
this.ankingList = res.result;
|
||
}
|
||
});
|
||
},
|
||
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 => {
|
||
if (res.status == 200) {
|
||
this.domain = res.result;
|
||
if(res.result.length > 0) {
|
||
this.orgDomainLevel(res.result)
|
||
}
|
||
}
|
||
});
|
||
},
|
||
getProfess() {
|
||
let key = "major_type";
|
||
apiDict.items(key).then(res => {
|
||
if (res.status == 200) {
|
||
this.Profess = res.result;
|
||
}
|
||
});
|
||
},
|
||
orgDomainLevel(organization) {
|
||
this.orgData = [];
|
||
organization.forEach(item=>{
|
||
this.orgData.push(item);
|
||
if(item.list && item.list != "" && item.list.length > 0){
|
||
item.list.forEach(it =>{
|
||
this.orgData.push(it);
|
||
})
|
||
}
|
||
})
|
||
},
|
||
orgDomainTranslate(code){ // 组织领域翻译
|
||
if(code == '') {
|
||
return
|
||
}
|
||
let name = '';
|
||
let data = this.orgData.find(item => item.code == code);
|
||
if(data == undefined){
|
||
name = '';
|
||
} else {
|
||
name = data.name;
|
||
}
|
||
return name;
|
||
},
|
||
majorTypeTranslate(code){ // 专业分类翻译
|
||
let name = '';
|
||
let data = this.Profess.find(item => item.code == code);
|
||
if(data == undefined){
|
||
name = '';
|
||
} else {
|
||
name = data.name;
|
||
}
|
||
return name;
|
||
},
|
||
emitInput(val) {
|
||
this.keyWord = val;
|
||
this.isSeach = true;
|
||
this.queryCondition.pageIndex = 1;
|
||
this.search();
|
||
},
|
||
searchData(num) {
|
||
this.queryCondition.pageIndex = 1;
|
||
this.queryCondition.orderField = num;
|
||
this.getCaseData();
|
||
},
|
||
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.debounce(this.loadMore(), 5000);
|
||
}
|
||
}
|
||
if (scrollTop > 630) {
|
||
document.querySelector("#fixd-box").style.cssText =
|
||
"position: fixed;top: -500px;width:245.5px";
|
||
} else {
|
||
document.querySelector("#fixd-box").style.cssText = "position: static";
|
||
}
|
||
},
|
||
useHotword(item) {
|
||
this.keyWord = item.keyword;
|
||
this.search();
|
||
},
|
||
searchterm() {
|
||
apiSearchterm.list(5, 3).then(res => {
|
||
if (res.status === 200) {
|
||
this.searchRecords = res.result;
|
||
}
|
||
});
|
||
},
|
||
loadMore() {
|
||
this.queryCondition.pageIndex += 1;
|
||
this.getCaseData();
|
||
},
|
||
protocolCheck(obj) {
|
||
this.protocolConfirmButton = !obj;
|
||
},
|
||
protocolConfirm() {
|
||
this.protocolDialogVisible = false;
|
||
this.$store.dispatch("portal/SetReadProtocol", true);
|
||
},
|
||
handleSizeChange(item) {
|
||
this.queryCondition.pageSize = item;
|
||
},
|
||
handleCurrentChange(item) {
|
||
this.queryCondition.pageIndex = item;
|
||
},
|
||
search() {
|
||
apiSearchterm.save({ keyword: this.keyWord, type: 3 });
|
||
if (!this.isFind) {
|
||
this.isFind = true;
|
||
}
|
||
this.queryCondition.pageIndex = 1;
|
||
if (this.keyWord != this.queryCondition.keyWord) {
|
||
this.queryCondition.keyWord = this.keyWord;
|
||
}
|
||
this.getCaseData();
|
||
},
|
||
async getCaseData() {
|
||
this.getTags();
|
||
if (this.queryCondition.pageIndex == 1) {
|
||
this.caseList.list = [];
|
||
}
|
||
this.moreState = 2;
|
||
await apiCase
|
||
.queryList(this.queryCondition)
|
||
.then(res => {
|
||
if (res.status == 200) {
|
||
if (res.result.list.length > 0) {
|
||
this.isSeach = false;
|
||
res.result.list.forEach(item => {
|
||
item.isAll = false;
|
||
item.authorInfo = {
|
||
aid: "",
|
||
name: "",
|
||
orgInfo: "",
|
||
avatar: "",
|
||
sex: null
|
||
};
|
||
});
|
||
this.caseList.list.push(...res.result.list);
|
||
this.caseList.count = res.result.count;
|
||
this.getCaseUserData(res.result.list);
|
||
this.moreState = 1;
|
||
if (res.result.count === res.result.list.length) {
|
||
this.moreState = 3;
|
||
}
|
||
} else {
|
||
this.moreState = 3;
|
||
}
|
||
} else {
|
||
this.$message.error(res.message);
|
||
}
|
||
})
|
||
.catch(err => {
|
||
console.log(err);
|
||
});
|
||
},
|
||
getTags() {
|
||
this.searchTags = [];
|
||
let caseData = deepClone(this.queryCondition);
|
||
for (let i in caseData) {
|
||
if (
|
||
caseData[i] !== "" &&
|
||
i !== "pageIndex" &&
|
||
i !== "pageSize" &&
|
||
i !== "orderField" &&
|
||
i !== "orderAsc" &&
|
||
i !== "isTop" &&
|
||
caseData[i] !== null &&
|
||
caseData[i] !== undefined
|
||
) {
|
||
if (caseData[i] == "0") {
|
||
return;
|
||
}
|
||
if(i == 'majorType'){
|
||
this.searchTags.push({ type:'majorType',value:this.majorTypeTranslate(caseData[i])})
|
||
}
|
||
if(i == 'orgDomain'){
|
||
this.searchTags.push({type:'orgDomain',value:this.orgDomainTranslate(caseData[i])})
|
||
}
|
||
if(i == 'keyWord'){
|
||
this.searchTags.push({type:'keyWord',value:caseData[i]})
|
||
}
|
||
}
|
||
}
|
||
},
|
||
tagsClose(tag, index) {
|
||
for (let i in this.queryCondition) {
|
||
if (tag.type === i) {
|
||
if (i == "majorType") {
|
||
this.queryCondition.majorType = null;
|
||
}
|
||
if (i == "orgDomain") {
|
||
this.queryCondition.orgDomain = null;
|
||
}
|
||
if (i == "keyWord") {
|
||
this.queryCondition.keyWord = "";
|
||
this.keyWord = "";
|
||
}
|
||
this.queryCondition[i] = "";
|
||
this.searchTags.splice(index, 1);
|
||
this.getCaseData();
|
||
}
|
||
}
|
||
},
|
||
getCaseUserData(caseList) {
|
||
let ids = caseList.map((item, index) => {
|
||
return item.authorId;
|
||
});
|
||
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);
|
||
}
|
||
});
|
||
},
|
||
getPopularity() {
|
||
apiCase.queryPraises(5).then(res => {
|
||
if (res.status == 200) {
|
||
this.Popularity = res.result;
|
||
}
|
||
});
|
||
},
|
||
getPositive() {
|
||
apiCase.queryComments(5).then(res => {
|
||
if (res.status == 200) {
|
||
this.Positive = res.result;
|
||
}
|
||
});
|
||
},
|
||
|
||
jumpRouter(item) {
|
||
// console.log(item)
|
||
this.$router.push(`/case/detail?id=${item.id}`);
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
::v-deep .el-button {
|
||
border-radius: 0px;
|
||
}
|
||
.case-titdiv {
|
||
|
||
line-height: 30px;
|
||
display: flex;
|
||
.case-tittext {
|
||
font-size: 18px;
|
||
width: 80%;
|
||
display: -webkit-box;
|
||
overflow: hidden;
|
||
word-break: break-all;
|
||
text-overflow: ellipsis;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 1;
|
||
box-sizing: border-box;
|
||
}
|
||
}
|
||
::v-deep .interact-bar .interact-bar-btns .interact-bar-btn {
|
||
margin-left: 0;
|
||
margin-right: 20px;
|
||
}
|
||
.clearfix:after{
|
||
content: "020";
|
||
display: block;
|
||
height: 0;
|
||
clear: both;
|
||
visibility: hidden;
|
||
}
|
||
.keyword-text {
|
||
|
||
div {
|
||
margin-top: 5px;
|
||
float: left;
|
||
height: 19px;
|
||
line-height: 19px;
|
||
font-size: 12px;
|
||
color: #9c9c9c;
|
||
border: 1px solid #c2c3c8;
|
||
padding: 0px 5px;
|
||
border-radius: 2px;
|
||
margin-right: 8px;
|
||
}
|
||
}
|
||
.searBox {
|
||
text-align: center;
|
||
margin: 0px 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;
|
||
border: 1px solid #ebeef5;
|
||
}
|
||
::v-deep .el-radio-button__inner,
|
||
.el-radio-group {
|
||
vertical-align: top;
|
||
}
|
||
::v-deep .el-radio-button__inner {
|
||
background: none;
|
||
}
|
||
::v-deep .el-radio-button:first-child .el-radio-button__inner {
|
||
border-left: none;
|
||
|
||
// border-radius: 4px 0 0 4px;
|
||
//box-shadow: none!important;
|
||
}
|
||
|
||
.item-title {
|
||
margin: 10px 10px 10px 0;
|
||
//font-size: 14px;
|
||
font-weight: 600;
|
||
color: #333333;
|
||
// line-height: 20px;
|
||
}
|
||
.item-line {
|
||
padding-left: 2px;
|
||
height: 20px;
|
||
|
||
background: #ddd;
|
||
}
|
||
|
||
.portal-content {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
// .item-title{
|
||
// margin-bottom: 5px;
|
||
// line-height: 36px;
|
||
// font-size: 14px;
|
||
// font-weight: 600;
|
||
// color: #333333;
|
||
// }
|
||
}
|
||
.searchbar {
|
||
background-color: #ffffff;
|
||
// border: 1px solid #f3f3f3;
|
||
// width: 1200px;
|
||
// padding: 5px 20px;
|
||
// margin-bottom: 10px;
|
||
}
|
||
|
||
.fixed {
|
||
position: fixed;
|
||
top: 0px;
|
||
background-color: #f0f0f0;
|
||
z-index: 999;
|
||
height: 50px;
|
||
}
|
||
.protocol {
|
||
.protocol-title {
|
||
font-size: 20px;
|
||
font-weight: 600;
|
||
text-align: center;
|
||
margin-bottom: 25px;
|
||
}
|
||
.protocol-content {
|
||
font-size: 14px;
|
||
line-height: 25px;
|
||
}
|
||
}
|
||
.left-div {
|
||
border: none;
|
||
.quyer-tag {
|
||
// margin-left: 10px;
|
||
.order-class {
|
||
color: #666666;
|
||
width: 52px;
|
||
// text-align: left;
|
||
border: 1px solid #dfdfdf;
|
||
// padding-left: 5px;
|
||
// padding-top: 5px;
|
||
// padding-bottom: 5px;
|
||
// padding: 8px 20px;
|
||
.el-icon--right {
|
||
margin-left: 0;
|
||
}
|
||
}
|
||
.actice {
|
||
background: #3e7fff;
|
||
color: #fff;
|
||
}
|
||
}
|
||
/* 分页div */
|
||
.pagination-div {
|
||
text-align: center;
|
||
padding: 10px 0;
|
||
.pag-text {
|
||
}
|
||
}
|
||
.order-div {
|
||
padding: 12px 15px;
|
||
background-color: #fff;
|
||
// margin-bottom: ;
|
||
}
|
||
.data-content {
|
||
background-color: #fff;
|
||
padding: 5px 10px;
|
||
.case-list:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.case-list {
|
||
border-bottom: 1px solid #dfdfdf;
|
||
margin: 8px 0px;
|
||
padding-bottom: 15px;
|
||
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-size: 12px;
|
||
height: 30px;
|
||
font-weight: 200;
|
||
color: #8590a6;
|
||
i {
|
||
margin-right: 5px;
|
||
}
|
||
}
|
||
}
|
||
.case-info-summary {
|
||
margin-top:3px;
|
||
cursor: pointer;
|
||
margin-bottom: 5px;
|
||
word-break: break-all;
|
||
line-height: 25px;
|
||
font-size: 15px;
|
||
color: #121212;
|
||
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;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.search-div {
|
||
background: #fff;
|
||
padding: 10px 25px;
|
||
.search-keyword {
|
||
line-height: 30px;
|
||
.tip {
|
||
font-size: 12px;
|
||
color: #999999;
|
||
// margin-bottom: 20px;
|
||
}
|
||
}
|
||
.search-item {
|
||
// padding: 10px 0;
|
||
}
|
||
// .search-item:not(:last-child) {
|
||
// // border-bottom: 1px solid #dfdfdf;
|
||
// }
|
||
}
|
||
.search-div-collapse {
|
||
display: block;
|
||
}
|
||
.search-div-expand {
|
||
display: none;
|
||
}
|
||
.search-div-more {
|
||
text-align: center;
|
||
}
|
||
}
|
||
|
||
.ranking-card {
|
||
.center {
|
||
text-align: center;
|
||
}
|
||
}
|
||
.right-box {
|
||
line-height: 25px;
|
||
|
||
.ranking-title {
|
||
}
|
||
.aligh-title {
|
||
font-size: 14px;
|
||
color: #333333;
|
||
}
|
||
.ranking-data {
|
||
margin: 10px 0;
|
||
color: #999999;
|
||
}
|
||
}
|
||
</style>
|