mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git
synced 2025-12-25 02:32:52 +08:00
1298 lines
38 KiB
Vue
1298 lines
38 KiB
Vue
<template>
|
||
<div id="case-list-content">
|
||
<div style="margin-bottom: 30px" class="case-banner">
|
||
<portal-header current="case" textColor="#fff" :goSearch="2">
|
||
</portal-header>
|
||
</div>
|
||
<div class="">
|
||
<div class="xcontent2">
|
||
<div class="xcontent2-main" style="margin-right: 30px" id="content-div">
|
||
<div v-if="noData">
|
||
<div class="detail">
|
||
<div class="xpage-detail-crumbs">
|
||
<router-link to="/case"
|
||
><span class="crumbs-first">案例列表</span></router-link
|
||
>
|
||
<span class="crumbs-line">/</span>
|
||
<span class="crumbs-last">案例详情</span>
|
||
</div>
|
||
<div class="title">
|
||
<h5>{{ caseDetail.title }}</h5>
|
||
<span style="text-align: right" v-if="caseDetail.sysCreateTime">
|
||
<i class="el-icon-time"></i>
|
||
{{ caseDetail.sysCreateTime.substring(0, 10) }}</span
|
||
>
|
||
</div>
|
||
<div class="label">
|
||
<author
|
||
:aid="caseDetail.sysCreateAid"
|
||
:onlyAvatar="true"
|
||
:avatar="authorInfo.avatar"
|
||
:sex="authorInfo.sex"
|
||
:name="authorInfo.name"
|
||
></author>
|
||
<span
|
||
>案主：{{ authorInfo.name }} ({{ authorInfo.orgInfo }})</span
|
||
>
|
||
<!-- <span>案主：{{ authorInfo.name }}</span>
|
||
<span>工号：{{ authorInfo.code }}</span>
|
||
<span>组织：{{ authorInfo.orgInfo }} </span> -->
|
||
<span> {{ authorInfo.sign }}</span>
|
||
</div>
|
||
<!-- <div class="label">
|
||
<span style="margin-left:0px;" v-if="caseDetail.sysCreateTime">{{ caseDetail.sysCreateTime.substring(0,10) }}</span>
|
||
<interactBar :data="caseDetail" :type="3" :comments="false" :shares="true"></interactBar>
|
||
</div> -->
|
||
<!-- <div class="case-summary"><span>{{ caseDetail.summary }}</span></div> -->
|
||
<div class="btn-div clearfix">
|
||
<div
|
||
style="color: #2974d6; font-weight: 450"
|
||
v-if="caseDetail.orgDomain"
|
||
class="item"
|
||
>
|
||
{{ orgDomainTranslate(caseDetail.orgDomain) }}
|
||
</div>
|
||
<div
|
||
style="color: #2974d6; font-weight: 450"
|
||
class="item"
|
||
v-if="
|
||
caseDetail.orgDomain == '' && caseDetail.orgDomainParent
|
||
"
|
||
>
|
||
{{ orgDomainTranslate(caseDetail.orgDomainParent) }}
|
||
</div>
|
||
<!-- <div style="color:#2974D6;font-weight: 450;" v-if="caseDetail.majorType" class="item">{{ majorTypeTranslate(caseDetail.majorType) }}</div> -->
|
||
<div
|
||
class="item"
|
||
style="color: #2974d6; font-weight: 450"
|
||
v-for="(item, idx) in caseDetail.majorType"
|
||
:key="idx"
|
||
>
|
||
{{ majorTypeTranslate(item) }}
|
||
</div>
|
||
<div v-if="caseDetail.keyword1" class="item">
|
||
{{ caseDetail.keyword1 }}
|
||
</div>
|
||
<div v-if="caseDetail.keyword2" class="item">
|
||
{{ caseDetail.keyword2 }}
|
||
</div>
|
||
<div v-if="caseDetail.keyword3" class="item">
|
||
{{ caseDetail.keyword3 }}
|
||
</div>
|
||
<div v-if="caseDetail.keyword4" class="item">
|
||
{{ caseDetail.keyword4 }}
|
||
</div>
|
||
<div v-if="caseDetail.keyword5" class="item">
|
||
{{ caseDetail.keyword5 }}
|
||
</div>
|
||
<!-- <span v-if="caseDetail.caseType" class="item">{{ caseDetail.caseType }}</span>
|
||
<span v-if="caseDetail.caseType1" class="item">{{ caseDetail.caseType1 }}</span>
|
||
<span v-if="caseDetail.caseType2" class="item">{{ caseDetail.caseType2 }}</span> -->
|
||
</div>
|
||
<div class="case-summary">
|
||
<span>{{ caseDetail.summary }}</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div
|
||
v-if="Internet == 1"
|
||
:body-style="{ padding: '0px' }"
|
||
class="jianjie"
|
||
id="pdfPreview"
|
||
>
|
||
<pdfPreview v-if="pdfPath" :filePath="pdfPath"></pdfPreview>
|
||
</div>
|
||
<el-card
|
||
v-if="Internet == 2"
|
||
style="background-color: #eee"
|
||
class="jianjie pdftext"
|
||
id="pdfPreview"
|
||
>
|
||
<div style="margin-top: 40px">
|
||
<span
|
||
>十分抱歉，您当前的网络环境不符合观看要求。<br />
|
||
为了保障案例信息的安全，您需要接入公司内网才能观看。</span
|
||
>
|
||
</div>
|
||
<div style="margin-top: 20px" @click="retest">
|
||
<el-button type="primary">重新检测</el-button>
|
||
</div>
|
||
</el-card>
|
||
<el-card
|
||
v-else-if="Internet == 3"
|
||
style="background-color: #eee"
|
||
class="jianjie pdftext"
|
||
id="pdfPreview"
|
||
>
|
||
<div style="margin-top: 40px">
|
||
<span>网络安全检测中...</span>
|
||
</div>
|
||
</el-card>
|
||
|
||
<div class="postfixt-bot">
|
||
<div class="postfixt-bot-box" id="pdfTopBox">
|
||
<div style="display: flex; justify-content: space-between">
|
||
<div style="margin-left: 20px">
|
||
<div style="margin-top: 3px">
|
||
<i
|
||
style="font-size: 22px; color: #a3b1cc"
|
||
v-show="zoomShow"
|
||
@click="zoomBox()"
|
||
class="el-icon-zoom-in"
|
||
></i>
|
||
<i
|
||
style="font-size: 22px; color: #a3b1cc"
|
||
v-show="!zoomShow"
|
||
@click="zoomBox()"
|
||
class="el-icon-zoom-out"
|
||
></i>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div style="display: inline-block">
|
||
<interactBar
|
||
v-if="caseDetail.id"
|
||
:data="caseDetail"
|
||
:type="3"
|
||
:comments="false"
|
||
:shares="true"
|
||
:unicom="true"
|
||
></interactBar>
|
||
</div>
|
||
<div style="display: inline-block; margin: 0 20px">
|
||
<i
|
||
style="font-size: 25px; color: #6e7b84"
|
||
@click="goTop()"
|
||
class="el-icon-arrow-up"
|
||
></i>
|
||
<!-- <el-button type="primary" >返回顶部</el-button> -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- :authorId="articleDetailData.sysCreateAid" -->
|
||
<div id="comments-box">
|
||
<comments
|
||
@success="success"
|
||
v-if="resolveId != ''"
|
||
:obj-type="3"
|
||
:obj-id="resolveId"
|
||
:authorId="caseDetail.authorId"
|
||
:toUsers="toUsers"
|
||
></comments>
|
||
</div>
|
||
</div>
|
||
<div v-else>
|
||
<el-empty :image-size="200"></el-empty>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="xcontent2-minor"
|
||
:style="{ display: zoomShow ? '' : 'none' }"
|
||
>
|
||
<AICaseConsult />
|
||
<div id="fixd-box">
|
||
<router-link class="the_charts" to="/case/charts">
|
||
<div class="text">排行榜</div>
|
||
<div class="icon">></div>
|
||
</router-link>
|
||
<div>
|
||
<div
|
||
class="portal-ranking ranking-bg"
|
||
style="padding: 20px 15px; max-height: 222px"
|
||
>
|
||
<div style="display: flex; justify-content: space-between">
|
||
<p class="ranking-title">好评榜</p>
|
||
<el-dropdown trigger="click" @command="positiveReview">
|
||
<span class="el-dropdown-link">
|
||
{{ favorableName
|
||
}}<i class="el-icon-arrow-down el-icon--right"></i>
|
||
</span>
|
||
<el-dropdown-menu slot="dropdown">
|
||
<el-dropdown-item command="total">总</el-dropdown-item>
|
||
<el-dropdown-item command="quarter"
|
||
>季度</el-dropdown-item
|
||
>
|
||
</el-dropdown-menu>
|
||
</el-dropdown>
|
||
</div>
|
||
<ul class="ranking-data">
|
||
<li
|
||
v-for="(item, index) in Positive"
|
||
:key="index"
|
||
class="title-line-ellipsis"
|
||
style="cursor: pointer; margin-top: 15px; line-height: 22px"
|
||
@click="jumpRouter(item)"
|
||
>
|
||
<span class="portal-right-text blue-one" v-if="index == 0">
|
||
<img
|
||
:src="`${webBaseUrl}/images/listblue01.png`"
|
||
alt=""
|
||
/>
|
||
</span>
|
||
<span class="portal-right-text blue-tow" v-if="index == 1">
|
||
<img
|
||
:src="`${webBaseUrl}/images/listblue02.png`"
|
||
alt=""
|
||
/>
|
||
</span>
|
||
<span
|
||
class="portal-right-text blue-three"
|
||
v-if="index == 2"
|
||
>
|
||
<img
|
||
:src="`${webBaseUrl}/images/listblue03.png`"
|
||
alt=""
|
||
/>
|
||
</span>
|
||
<span class="portal-right-text" v-if="index == 3">
|
||
<img :src="`${webBaseUrl}/images/list04.png`" alt="" />
|
||
</span>
|
||
<span class="portal-right-text" v-if="index == 4">
|
||
<img :src="`${webBaseUrl}/images/list05.png`" alt="" />
|
||
</span>
|
||
<span class="portal-title-desc" style="font-size: 14px">{{
|
||
item.caseTitle
|
||
}}</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div
|
||
style="padding: 20px 15px; max-height: 222px; margin-top: 20px"
|
||
class="portal-ranking ranking-bg1"
|
||
>
|
||
<div style="display: flex; justify-content: space-between">
|
||
<p class="ranking-title">人气榜</p>
|
||
<el-dropdown trigger="click" @command="popularityReview">
|
||
<span class="el-dropdown-link">
|
||
{{ popularityName
|
||
}}<i class="el-icon-arrow-down el-icon--right"></i>
|
||
</span>
|
||
<el-dropdown-menu slot="dropdown">
|
||
<el-dropdown-item command="total">总</el-dropdown-item>
|
||
<el-dropdown-item command="quarter"
|
||
>季度</el-dropdown-item
|
||
>
|
||
</el-dropdown-menu>
|
||
</el-dropdown>
|
||
</div>
|
||
<ul class="ranking-data">
|
||
<li
|
||
v-for="(item, index) in Popularity"
|
||
:key="index"
|
||
class="title-line-ellipsis"
|
||
style="cursor: pointer; margin-top: 15px; line-height: 22px"
|
||
@click="jumpRouter(item)"
|
||
>
|
||
<span
|
||
class="portal-right-text orange-one"
|
||
v-if="index == 0"
|
||
>
|
||
<img :src="`${webBaseUrl}/images/list-01.png`" alt="" />
|
||
</span>
|
||
<span
|
||
class="portal-right-text orange-tow"
|
||
v-if="index == 1"
|
||
>
|
||
<img :src="`${webBaseUrl}/images/list02.png`" alt="" />
|
||
</span>
|
||
<span
|
||
class="portal-right-text orange-three"
|
||
v-if="index == 2"
|
||
>
|
||
<img :src="`${webBaseUrl}/images/list03.png`" alt="" />
|
||
</span>
|
||
<span class="portal-right-text" v-if="index == 3">
|
||
<img :src="`${webBaseUrl}/images/list04.png`" alt="" />
|
||
</span>
|
||
<span class="portal-right-text" v-if="index == 4">
|
||
<img :src="`${webBaseUrl}/images/list05.png`" alt="" />
|
||
</span>
|
||
<span class="portal-title-desc" style="font-size: 14px">{{
|
||
item.caseTitle
|
||
}}</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div
|
||
v-if="recommendRank.length > 0"
|
||
class="portal-ranking ranking-bg2"
|
||
style="padding: 20px 15px; max-height: 222px; margin-top: 20px"
|
||
>
|
||
<p class="ranking-title">推荐榜</p>
|
||
<ul class="ranking-data">
|
||
<li
|
||
v-for="(item, index) in recommendRank"
|
||
:key="index"
|
||
class="title-line-ellipsis"
|
||
style="cursor: pointer; margin-top: 15px; line-height: 22px"
|
||
>
|
||
<router-link :to="'/case/detail?id=' + item.caseId">
|
||
<span
|
||
class="portal-right-text blue-one"
|
||
v-if="index == 0"
|
||
>
|
||
<img
|
||
:src="`${webBaseUrl}/images/listred01 .png`"
|
||
alt=""
|
||
/>
|
||
</span>
|
||
<span
|
||
class="portal-right-text blue-tow"
|
||
v-if="index == 1"
|
||
>
|
||
<img
|
||
:src="`${webBaseUrl}/images/listred02.png`"
|
||
alt=""
|
||
/>
|
||
</span>
|
||
<span
|
||
class="portal-right-text blue-three"
|
||
v-if="index == 2"
|
||
>
|
||
<img
|
||
:src="`${webBaseUrl}/images/listred03.png`"
|
||
alt=""
|
||
/>
|
||
</span>
|
||
<span class="portal-title-desc" style="font-size: 14px">{{
|
||
item.caseTitle
|
||
}}</span>
|
||
</router-link>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<!-- <div class="course-resources pointer"> -->
|
||
<!-- 资源位 -->
|
||
<!-- <img @click="banJump()" :src="fileBaseUrl + resonimg.image" alt=""> -->
|
||
<!-- </div> -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</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 pdfPreview from "@/components/PdfPreview/view.vue";
|
||
import interactBar from "@/components/Portal/interactBar.vue";
|
||
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 apiDict from "@/api/modules/dict.js";
|
||
import { encrypt } from "@/utils/jsencrypt.js";
|
||
import cookies from "vue-cookies";
|
||
import { formatDate } from "@/utils/datetime.js";
|
||
import { cutFullName } from "@/utils/tools.js";
|
||
import apiPlace from "@/api/phase2/place.js";
|
||
import portalFloatTools from "@/components/PortalFloatTools.vue";
|
||
import AICaseConsult from "@/views/portal/case/components/AICaseConsult.vue";
|
||
export default {
|
||
name: "atticle",
|
||
components: {
|
||
AICaseConsult,
|
||
portalHeader,
|
||
portalFloatTools,
|
||
portalFooter,
|
||
interactBar,
|
||
author,
|
||
comments,
|
||
pdfPreview,
|
||
},
|
||
computed: {
|
||
...mapGetters(["userInfo"]),
|
||
},
|
||
data() {
|
||
return {
|
||
switch: {
|
||
total: "总",
|
||
quarter: "季度",
|
||
},
|
||
favorableName: "季度",
|
||
popularityName: "季度",
|
||
fileBaseUrl: process.env.VUE_APP_FILE_BASE_URL,
|
||
resonimg: {},
|
||
Internet: 3, //1是成功 2是是失败 3是检测中
|
||
noData: true,
|
||
authorSign: "", //提问人的个性签名
|
||
zoomShow: true,
|
||
isTopBoxShow: true,
|
||
toUsers: [],
|
||
ankingList: [],
|
||
Popularity: [],
|
||
Positive: [],
|
||
recommendRank: [],
|
||
resolveId: "",
|
||
basePath: process.env.VUE_APP_FILE_BASE_URL,
|
||
pdfPath: "",
|
||
caseDetail: {
|
||
sysCreateAid: "",
|
||
id: "",
|
||
filePath: "",
|
||
},
|
||
ankingList: [],
|
||
authorInfo: {
|
||
aid: "",
|
||
name: "",
|
||
orgInfo: "",
|
||
avatar: "",
|
||
code: "",
|
||
sex: null,
|
||
},
|
||
domain: [],
|
||
Profess: [],
|
||
orgData: [],
|
||
setTimeCase: null,
|
||
dataTime: sessionStorage.getItem("startTime") || 0,
|
||
defaultMaxTime: 1800, //最大时长
|
||
cumulativeDuration: 0, //累计时长
|
||
secondTime: 15, //秒数
|
||
};
|
||
},
|
||
mounted() {
|
||
console.log(this.dataTime);
|
||
this.allRequests();
|
||
},
|
||
|
||
beforeRouteEnter(to, from, next) {
|
||
let time = new Date().getTime();
|
||
sessionStorage.setItem("startTime", time);
|
||
next();
|
||
},
|
||
beforeRouteUpdate(to, from, next) {
|
||
if (to.query.id != from.query.id) {
|
||
window.removeEventListener("scroll", this.handleScroll);
|
||
clearInterval(this.setTimeCase);
|
||
// 结束时间
|
||
let recordEndTime = new Date().getTime();
|
||
this.endTimeRequst(from.query.id, recordEndTime);
|
||
//时间重新赋值
|
||
let time = new Date().getTime();
|
||
sessionStorage.setItem("startTime", time);
|
||
this.dataTime = time;
|
||
this.allRequests(to.query.id);
|
||
}
|
||
next();
|
||
},
|
||
beforeRouteLeave(to, from, next) {
|
||
to.meta.keepAlive = true;
|
||
next();
|
||
},
|
||
beforeDestroy() {
|
||
console.log("销毁了");
|
||
// 结束时间
|
||
let recordEndTime = new Date().getTime();
|
||
this.endTimeRequst(this.resolveId, recordEndTime);
|
||
sessionStorage.removeItem("startTime");
|
||
window.removeEventListener("scroll", this.handleScroll);
|
||
clearTimeout(this.setTimeCase);
|
||
this.cumulativeDuration = 0;
|
||
},
|
||
methods: {
|
||
positiveReview(e) {
|
||
this.favorableName = this.switch[e];
|
||
this.getPositive();
|
||
},
|
||
popularityReview(e) {
|
||
this.popularityName = this.switch[e];
|
||
this.getPopularity();
|
||
},
|
||
endTimeRequst(caseId, recordEndTime) {
|
||
console.log(this.dataTime);
|
||
let time = (recordEndTime - this.dataTime) / 1000 / 60;
|
||
if (time > 10080) {
|
||
time = 0;
|
||
}
|
||
//结束之前的查看取时间
|
||
apiCase.endReadTimer({
|
||
caseId,
|
||
browseDuration: Math.ceil(time),
|
||
createTime: formatDate(new Date()),
|
||
});
|
||
},
|
||
allRequests(id = "") {
|
||
this.Intsucc();
|
||
|
||
this.resolveId = id ? id : this.$route.query.id;
|
||
this.$watermark.set(this.userInfo.name + this.userInfo.loginName);
|
||
if (this.resolveId) {
|
||
this.getCaseData();
|
||
}
|
||
this.getdomain();
|
||
this.getProfess();
|
||
this.getAnkingData();
|
||
this.getPopularity();
|
||
this.getPositive();
|
||
this.getQueryRecommendRank();
|
||
this.couresreso();
|
||
this.retest();
|
||
window.addEventListener("scroll", this.handleScroll);
|
||
},
|
||
banJump() {
|
||
if (this.resonimg.JumpUrl) {
|
||
window.open(this.resonimg.JumpUrl);
|
||
}
|
||
},
|
||
jumecase(item) {
|
||
this.$router.push({ path: "./Detail.vue", query: { id: item.id } });
|
||
},
|
||
couresreso() {
|
||
let key = "case";
|
||
apiPlace.detail(key).then((res) => {
|
||
let lmj = JSON.parse(res.result.content);
|
||
// console.log(lmj)
|
||
this.resonimg = lmj[0];
|
||
});
|
||
},
|
||
retest() {
|
||
this.Internet = 3;
|
||
let $this = this;
|
||
let xmlhttp = this.getXmlHttpRequest();
|
||
let timedOut = false;
|
||
let timer = setTimeout(function () {
|
||
timedOut = true;
|
||
xmlhttp.abort();
|
||
}, 5000);
|
||
// 1. 拼接随机参数（时间戳+随机数，确保URL唯一，破缓存）
|
||
const url =
|
||
window.location.protocol +
|
||
"//uapi.boe.com.cn/500.html?t=" +
|
||
Date.now() +
|
||
Math.random();
|
||
// 2. 打开 HEAD 请求（URL已带随机参数）
|
||
xmlhttp.open("HEAD", url, true);
|
||
|
||
// 3. 设置禁用缓存的请求头（覆盖现代浏览器+老IE+代理）
|
||
xmlhttp.setRequestHeader(
|
||
"Cache-Control",
|
||
"no-cache, no-store, must-revalidate"
|
||
);
|
||
xmlhttp.setRequestHeader("Pragma", "no-cache"); // IE兼容
|
||
xmlhttp.setRequestHeader("Expires", "0"); // 禁止过期缓存复用
|
||
// xmlhttp.open("HEAD", window.location.protocol + "//uapi.boe.com.cn/500.html", true);
|
||
xmlhttp.send();
|
||
xmlhttp.onreadystatechange = function () {
|
||
if (xmlhttp.readyState == 4) {
|
||
if (xmlhttp.status == 200) {
|
||
clearTimeout(timer);
|
||
$this.Internet = 1;
|
||
$this.$store.dispatch("userTrigger", {
|
||
key: "ViewCase", //后台的事件key 发布文章且审核通过
|
||
title: "查看案例", //事件的标题
|
||
parameters: "", //用户自定义参数 name:value,name:value
|
||
content: "查看了案例", //事件的内容
|
||
objId: $this.resolveId, //关联的id
|
||
objType: "3", //关联的类型
|
||
objInfo: $this.caseDetail?.title,
|
||
aid: $this.userInfo.aid, //当前登录人的id
|
||
aname: $this.userInfo.name, //当前人的姓名
|
||
status: 1, //状态，直接写1
|
||
});
|
||
$this.sendEventData();
|
||
} else {
|
||
clearTimeout(timer);
|
||
$this.Internet = 2;
|
||
}
|
||
} else {
|
||
if (timedOut) return; //忽略中止请求
|
||
clearTimeout(timer); //取消等待的超时
|
||
}
|
||
};
|
||
},
|
||
getXmlHttpRequest() {
|
||
if (window.XMLHttpRequest) {
|
||
return new XMLHttpRequest();
|
||
} else if (window.ActiveXObject) {
|
||
return new ActiveXObject("Microsoft.XMLHTTP");
|
||
}
|
||
},
|
||
Intsucc() {
|
||
const loading = this.$loading({
|
||
lock: true,
|
||
text: "正在进行安全检测",
|
||
spinner: "el-icon-loading",
|
||
background: "rgba(0, 0, 0, 0.7)",
|
||
});
|
||
setTimeout(() => {
|
||
loading.close();
|
||
}, 2000);
|
||
},
|
||
|
||
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;
|
||
// this.Profess = this.Profess.split(",")
|
||
}
|
||
});
|
||
},
|
||
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;
|
||
},
|
||
zoomBox() {
|
||
this.zoomShow = !this.zoomShow;
|
||
},
|
||
jumpRouter(item) {
|
||
// console.log(item)
|
||
// location.href =`${this.webBaseUrl}/case/detail?id=${item.id}`
|
||
// this.$router.push(`/case/detail?id=${item.id}`);
|
||
const currentRoute = this.$router.currentRoute;
|
||
if (currentRoute.query.id !== item.caseId) {
|
||
this.$router.push("/case/detail?id=" + item.caseId);
|
||
} else {
|
||
// 结束时间
|
||
let recordEndTime = new Date().getTime();
|
||
this.endTimeRequst(item.id, recordEndTime);
|
||
location.href = `${this.webBaseUrl}/case/detail?id=${item.caseId}`;
|
||
}
|
||
},
|
||
goTop() {
|
||
document.documentElement.scrollTop = 0;
|
||
},
|
||
createPlayUrl(u) {
|
||
let nowDate = new Date();
|
||
let ctime = parseInt(nowDate.getTime() / 1000);
|
||
let beforeUrl = parseInt(nowDate.getTime() / 1000) + "/" + u;
|
||
let urlSign = encodeURIComponent(encrypt(beforeUrl));
|
||
cookies.set("CASE_TIME", ctime); //写客户端的cookie保存
|
||
//以下判断是为了区分本地环境和服务器环境
|
||
if (process.env.NODE_ENV == "development") {
|
||
this.pdfPath = process.env.VUE_APP_FILE_BASE_URL + u;
|
||
} else {
|
||
this.pdfPath =
|
||
process.env.VUE_APP_BASE_API +
|
||
"/xboe/m/case/content/resource?sign=" +
|
||
urlSign;
|
||
}
|
||
},
|
||
handleScroll() {
|
||
let innerw = document.querySelector("#fixd-box");
|
||
let innerHeight =
|
||
document.querySelector("#case-list-content").clientHeight;
|
||
let pdfTopBox = document.querySelector("#comments-box");
|
||
let pdfPreview = document.querySelector("#pdfPreview"); //pdf盒子距离顶部的高度
|
||
let contentDiv = document.querySelector("#content-div").clientWidth;
|
||
let outerHeight = document.documentElement.clientHeight;
|
||
let outerWidth = innerw.clientWidth;
|
||
let scrollTop = document.documentElement.scrollTop;
|
||
if (outerHeight + scrollTop + 350 >= innerHeight) {
|
||
if (this.moreState == 1 && this.course.pageIndex < 4) {
|
||
this.loadMore();
|
||
}
|
||
}
|
||
if (pdfPreview.getBoundingClientRect().top < 0) {
|
||
document.querySelector(
|
||
"#pdfTopBox"
|
||
).style.cssText = `position: fixed;bottom:0;box-shadow: -3px 3px 10px 10px rgba(90, 119, 186, .1);width:${
|
||
contentDiv - 9
|
||
}px;`;
|
||
} else {
|
||
document.querySelector("#pdfTopBox").style.cssText = "position:static";
|
||
}
|
||
if (pdfTopBox.getBoundingClientRect().top < 1000) {
|
||
document.querySelector("#pdfTopBox").style.cssText = "position:static";
|
||
}
|
||
if (scrollTop > 240) {
|
||
this.isTopBoxShow = true;
|
||
document.querySelector("#fixd-box").style.cssText =
|
||
"position: fixed;top: 10px;width:" + outerWidth + "px";
|
||
} else {
|
||
document.querySelector("#fixd-box").style.cssText = "position: static";
|
||
}
|
||
},
|
||
|
||
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;
|
||
// if (res.result.length < 5) {
|
||
// for (let i = 0; i = (5 - res.result.length); i++) {
|
||
// this.Popularity.push({
|
||
// authorName: '',
|
||
// count: 1,
|
||
// id: '',
|
||
// title: '',
|
||
// })
|
||
// }
|
||
// }
|
||
// }
|
||
// })
|
||
apiCase
|
||
.queryPraisesNew(3, this.popularityName == "季度" ? 1 : 2)
|
||
.then((res) => {
|
||
if (res.status == 200) {
|
||
this.Popularity = res.result;
|
||
}
|
||
});
|
||
},
|
||
getQueryRecommendRank() {
|
||
apiCase.queryRecommendRank(3).then((res) => {
|
||
if (res.status == 200) {
|
||
this.recommendRank = res.result;
|
||
}
|
||
});
|
||
},
|
||
getPositive() {
|
||
// apiCase.queryComments(5).then(res => {
|
||
// if (res.status == 200) {
|
||
// this.Positive = res.result;
|
||
// if (res.result.length < 5) {
|
||
// for (let i = 0; i = (5 - res.result.length); i++) {
|
||
// this.Positive.push({
|
||
// authorName: '',
|
||
// count: 1,
|
||
// id: '',
|
||
// title: '',
|
||
// })
|
||
// }
|
||
// }
|
||
// }
|
||
// })
|
||
apiCase
|
||
.queryCommentsNew(3, this.favorableName == "季度" ? 3 : 4)
|
||
.then((res) => {
|
||
if (res.status == 200) {
|
||
this.Positive = res.result;
|
||
}
|
||
});
|
||
},
|
||
sendEventData() {
|
||
this.setTimeCase && clearTimeout(this.setTimeCase);
|
||
let startTime = new Date().getTime();
|
||
this.setTimeCase = setTimeout(() => {
|
||
let endTime = new Date().getTime();
|
||
let totalTime = Math.round((endTime - startTime) / 1000);
|
||
this.cumulativeDuration += totalTime;
|
||
if (this.cumulativeDuration <= this.defaultMaxTime) {
|
||
console.log(totalTime, "时长");
|
||
this.sendStudyTime(totalTime);
|
||
this.secondTime = 60;
|
||
this.sendEventData();
|
||
} else {
|
||
this.cumulativeDuration = 0;
|
||
clearTimeout(this.setTimeCase);
|
||
this.setTimeCase = null;
|
||
}
|
||
}, this.secondTime * 1000); //15秒记录一次之后1分钟之后发送阅读案例事件
|
||
},
|
||
sendStudyTime(totalTime) {
|
||
this.$store.dispatch("userTrigger", {
|
||
key: "ReadCase", //后台的事件key 发布文章且审核通过
|
||
title: "阅读案例", //事件的标题
|
||
parameters: "second:" + totalTime, //用户自定义参数 name:value,name:value
|
||
content: "阅读了案例", //事件的内容
|
||
objId: this.resolveId, //关联的id
|
||
objType: "3", //关联的类型
|
||
objInfo: this.caseDetail.title,
|
||
aid: this.userInfo.aid, //当前登录人的id
|
||
aname: this.userInfo.name, //当前人的姓名
|
||
status: 1, //状态，直接写1
|
||
});
|
||
},
|
||
getCaseData() {
|
||
// 清空pdf数据
|
||
this.pdfPath = "";
|
||
|
||
let $this = this;
|
||
apiCase.details(this.resolveId, true).then((res) => {
|
||
if (res.status == 200) {
|
||
if (JSON.stringify(res.result) != "{}") {
|
||
this.caseDetail = res.result.case;
|
||
this.caseDetail.majorType = this.caseDetail.majorType.split(",");
|
||
this.getCaseUserDetail();
|
||
if (this.caseDetail.filePath) {
|
||
//this.pdfPath=this.basePath+this.caseDetail.filePath;
|
||
this.createPlayUrl(this.caseDetail.filePath);
|
||
//this.sendEventData();//移到检查之后
|
||
} else {
|
||
this.$message.error("内容文件不存在或已被删除，请与管理员联系");
|
||
}
|
||
}
|
||
} else {
|
||
this.noData = false;
|
||
this.$message.error(res.message);
|
||
}
|
||
});
|
||
},
|
||
getCaseUserDetail() {
|
||
apiUser.getByIds([this.caseDetail.authorId]).then((res) => {
|
||
if (res.status == 200 && res.result.length > 0) {
|
||
this.authorInfo = res.result[0];
|
||
|
||
this.authorInfo.orgInfo = cutFullName(this.authorInfo.orgInfo, 1);
|
||
|
||
this.toUsers = [
|
||
{
|
||
name: res.result[0].name,
|
||
aid: res.result[0].aid,
|
||
sex: res.result[0].sex,
|
||
},
|
||
];
|
||
//console.log(res.result,'res.result');
|
||
}
|
||
});
|
||
},
|
||
success(value) {
|
||
let content =
|
||
this.userInfo.name + "评论了我的案例" + "-" + this.caseDetail.title;
|
||
let query = {
|
||
refId: this.caseDetail.id,
|
||
sendType: 1,
|
||
title: "系统消息",
|
||
refType: 3,
|
||
source: 1,
|
||
pageUrl: location.href,
|
||
sendAid: this.userInfo.aid,
|
||
content: content,
|
||
sendName: this.userInfo.name,
|
||
accpetId: this.caseDetail.sysCreateAid,
|
||
acceptName: this.caseDetail.sysCreateBy,
|
||
};
|
||
apiMessage.save(query).then((res) => {
|
||
if (res.status == 200) {
|
||
}
|
||
});
|
||
// let con=value.sysCreateBy+' 评论了我的文章'+'-'+this.articleDetailData.title;
|
||
// let query={refId:value.objId,content:con,accpetId:value.sysCreateAid,sendType:1,sendName:'系统',acceptName:'文章',title:'系统消息'}
|
||
// apiMessage.save(query).then(res=>{
|
||
// if(res.status==200){
|
||
|
||
// }
|
||
// })
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.case-banner {
|
||
height: 240px;
|
||
background: url("../../../../public/images/case-banner.png");
|
||
}
|
||
|
||
.course-resources {
|
||
margin-top: 26px;
|
||
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 8px;
|
||
}
|
||
}
|
||
.the_charts {
|
||
position: relative;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin-bottom: 10px;
|
||
font-size: 18px;
|
||
max-width: 400px;
|
||
min-width: 260px;
|
||
height: 47px;
|
||
background: #ddedff;
|
||
border-radius: 8px;
|
||
.text {
|
||
font-size: 18px;
|
||
color: #387df7;
|
||
}
|
||
.icon {
|
||
position: absolute;
|
||
font-size: 18px;
|
||
color: #387df7;
|
||
right: 25px;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
}
|
||
}
|
||
.pdftext {
|
||
// padding: 0 20px;
|
||
span {
|
||
font-size: 22px;
|
||
color: #ccc;
|
||
font-weight: bold;
|
||
line-height: 40px;
|
||
padding: 0 20px;
|
||
}
|
||
|
||
text-align: center;
|
||
}
|
||
|
||
.fixd-box-show {
|
||
display: none;
|
||
}
|
||
|
||
::v-deep .interact-bar .interact-bar-btns {
|
||
justify-content: flex-start !important;
|
||
}
|
||
|
||
::v-deep .interact-bar-btn {
|
||
margin-left: 0px !important;
|
||
margin-right: 15px !important;
|
||
}
|
||
|
||
.postfixt-bot {
|
||
height: 60px;
|
||
//margin-top: 10px;
|
||
line-height: 60px;
|
||
|
||
// background-color: #fff;
|
||
// border: 1px solid #eee;
|
||
// z-index: 999;
|
||
.postfixt-bot-box {
|
||
// text-align: right;
|
||
background-color: #fff;
|
||
// border: 1px solid #eee;
|
||
}
|
||
}
|
||
|
||
.el-card {
|
||
border: none;
|
||
}
|
||
|
||
.case-summary {
|
||
font-size: 15px;
|
||
color: #454545;
|
||
word-break: break-all;
|
||
line-height: 25px;
|
||
}
|
||
|
||
::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;
|
||
}
|
||
|
||
.detail {
|
||
background-color: #fff;
|
||
padding: 50px;
|
||
|
||
.title {
|
||
display: flex;
|
||
width: 100%;
|
||
|
||
h5 {
|
||
margin: 0;
|
||
font-size: 20px;
|
||
line-height: 45px;
|
||
font-weight: 600;
|
||
flex: 1;
|
||
}
|
||
|
||
span {
|
||
margin-left: auto;
|
||
line-height: 45px;
|
||
color: #999999;
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
|
||
.label {
|
||
font-size: 15px;
|
||
color: #999999;
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
|
||
span {
|
||
margin-left: 10px;
|
||
|
||
&:last-of-type {
|
||
flex: 1;
|
||
}
|
||
}
|
||
}
|
||
|
||
.type {
|
||
color: #0079fe;
|
||
}
|
||
|
||
.clearfix:after {
|
||
content: "020";
|
||
display: block;
|
||
height: 0;
|
||
clear: both;
|
||
visibility: hidden;
|
||
}
|
||
|
||
.btn-div {
|
||
margin: 0px 0 5px 0;
|
||
padding-bottom: 5px;
|
||
padding-top: 5px;
|
||
height: 100%;
|
||
width: 100%;
|
||
|
||
.item {
|
||
float: left;
|
||
margin: 7px 10px 0px 0px;
|
||
background: rgba(44, 104, 255, 0.06);
|
||
border-radius: 2px;
|
||
padding: 0px 10px;
|
||
line-height: 24px;
|
||
text-align: center;
|
||
font-size: 12px;
|
||
height: 24px;
|
||
box-sizing: border-box;
|
||
color: #2c68ff;
|
||
}
|
||
|
||
.item-right {
|
||
float: right;
|
||
}
|
||
}
|
||
}
|
||
|
||
.jianjie {
|
||
// margin: 15px 0;
|
||
margin-top: 30px;
|
||
background-color: #f5f7fa;
|
||
min-height: 300px;
|
||
padding: 0px 0px 0px 0px;
|
||
|
||
.content {
|
||
padding: 10px 0;
|
||
line-height: 25px;
|
||
}
|
||
|
||
.btn-div {
|
||
margin: 8px 0;
|
||
padding: 10px 0;
|
||
color: #666;
|
||
|
||
.item {
|
||
margin-right: 30px;
|
||
}
|
||
|
||
.item-right {
|
||
float: right;
|
||
}
|
||
}
|
||
}
|
||
|
||
.bottom-btn {
|
||
padding: 10px 50px;
|
||
|
||
.article-info-tools-btn {
|
||
padding: 5px 0px;
|
||
margin: 0 10px;
|
||
}
|
||
}
|
||
|
||
.bottom-div {
|
||
margin-top: 10px;
|
||
background-color: #fff;
|
||
padding: 5px 20px 10px 20px;
|
||
|
||
.title {
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
line-height: 50px;
|
||
border-bottom: 1px solid #dfdfdf;
|
||
|
||
.tip {
|
||
color: #666;
|
||
font-size: 12px;
|
||
margin: 0 10px;
|
||
}
|
||
}
|
||
|
||
.submit-div {
|
||
margin: 15px 0;
|
||
}
|
||
|
||
.bottom {
|
||
text-align: right;
|
||
}
|
||
|
||
.data {
|
||
margin-top: 10px;
|
||
background-color: #fff;
|
||
padding: 5px 20px 10px 20px;
|
||
|
||
.data-item {
|
||
border-bottom: 1px solid #dfdfdf;
|
||
margin-top: 10px;
|
||
|
||
.top {
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
|
||
span {
|
||
font-size: 14px;
|
||
color: #666;
|
||
font-weight: normal;
|
||
}
|
||
}
|
||
|
||
.text {
|
||
margin: 15px 0 5px 0;
|
||
padding-left: 40px;
|
||
line-height: 35px;
|
||
}
|
||
|
||
.huifu {
|
||
padding-left: 40px;
|
||
padding-bottom: 10px;
|
||
border-bottom: 1px solid #dfdfdf;
|
||
}
|
||
|
||
.result-div {
|
||
padding-left: 40px;
|
||
padding-top: 10px;
|
||
|
||
.top {
|
||
font-size: 16px;
|
||
}
|
||
}
|
||
|
||
.up-div {
|
||
padding: 0 15px;
|
||
|
||
.up-btn {
|
||
padding: 8px 20px;
|
||
color: #000;
|
||
}
|
||
}
|
||
|
||
img {
|
||
margin-right: 10px;
|
||
width: 30px;
|
||
border: 1px solid #eee;
|
||
border-radius: 50%;
|
||
vertical-align: middle;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.right-box {
|
||
line-height: 25px;
|
||
|
||
.ranking-card {
|
||
margin-bottom: 10px;
|
||
|
||
.el-col {
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.center {
|
||
text-align: center;
|
||
}
|
||
}
|
||
|
||
.ranking-title {
|
||
}
|
||
|
||
.aligh-title {
|
||
font-size: 14px;
|
||
color: #333333;
|
||
}
|
||
|
||
.ranking-data {
|
||
margin: 10px 0;
|
||
color: #999999;
|
||
}
|
||
}
|
||
</style>
|