本次进行了专题详情页的具体实现
具体代码如下:
<template>
<div>
<div class="title" >
<div style="height: 50px;line-height:50px;border-bottom: 1px solid #ccc; display: flex">
<!--网页信息-->
<div class="head" style="padding-left: 30px;font-weight: bold;color: dodgerblue" icon="el-icon-d-arrow-left">
<el-link @click="back" style="color:dodgerblue;text-decoration:none;">返回 </el-link>
<router-link :to="{ name:'Blogs'}" style="color:dodgerblue;text-decoration:none;font-weight: lighter" icon="el-icon-d-arrow-left"> | 返回首页</router-link>
</div>
<div style="color:dodgerblue;padding-left: 30px;font-weight: bold" >{{subName }}专题
</div>
<div>
<template slot-scope="props">
<span style="margin-left: 10px">{{ props.row.subName }}</span>
</template>
</div>
<div style="flex: 1">
</div>
<span style="margin-right: 8px;color: black" :content="username" > {{username}}
</span>
<div style="width:55px;padding-top: 3px">
<!-- 查询用户头像-->
<el-avatar src=iconurl>
<img :src="iconurl">
</el-avatar>
</div>
<div style="width: 150px;">
<!--个人信息姓名获取\下拉菜单-->
<el-dropdown>
<span class="el-dropdown-link">
<el-button type="primary">
个人中心<i class="el-icon-arrow-down el-icon--right"></i>
</el-button>
</span>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item icon="el-icon-user">
<router-link :to="{name:'Blog'}" style="color: #333333;text-decoration: none">个人中心</router-link>
</el-dropdown-item>
<el-dropdown-item icon="el-icon-plus">
<router-link :to="{name:'BlogEdit'}" style="color: #333333;text-decoration: none">创建博客</router-link>
</el-dropdown-item>
<span v-if="form.category"><el-dropdown-item icon="el-icon-circle-plus">创建专题</el-dropdown-item></span>
<el-dropdown-item icon="el-icon-close">
<el-link style="color: #333333;text-decoration: none" @click="logout">退出登录
</el-link>
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
</div>
</div>
<div style="display: flex;justify-content: center">
<div style="height: 200px;min-width:600px;max-width:1200px;margin: auto;">
<div >
<div class="text item">
<div class="item_tag" >
<span >专题简介:</span>
</div>
<div class="item_desr">
<span > {{content}}</span>
</div>
</div>
<div class="text item">
<div class="item_tag">
<span>创建时间:</span>
</div>
<div class="item_desr">
{{date}}
</div>
</div>
<div class="text item">
<div class="item_tag">
<span>创建者:</span>
</div>
<div class="item_desr">
<span>
{{founder}}
</span>
</div>
</div>
<div class="text item">
<div class="item_tag">
<span>查看专题下的学生列表</span>
</div>
<div class="item_desr">
<router-link :to="{ name:'studentlist',query:{sid:this.sid}}" style="color:dodgerblue;text-decoration:none">
<el-button size="mini" style="color:black" class="joinsubject">参与该专题的学生列表</el-button>
</router-link>
</div>
</div>
<div class="text item">
<div class="item_tag">
<span id="s1" style="visibility: hidden" >选择加入专题:</span>
</div>
<div id="s11" style="visibility: hidden" class="item_desr">
<el-button v-if="!judge" size="mini" @click="joinsubject" style="color:black" class="joinsubject">
加入专题
</el-button><a v-if="!judge" style="font-weight: bold;color: dodgerblue"><-加入专题才能查看资料哦</a>
<el-button v-if="judge" size="mini" @click="quitsubject" style="color:black" class="joinsubject">
退出专题
</el-button>
</div>
</div>
</div>
</div>
<div id="myChart" style="height: 380px;width:440px;min-width:300px;margin-top: 25px;"></div>
<!-- background-color: #8cc5ff-->
</div>
<div>
<el-container>
<el-header class="el-header" style="font-weight: bold;color: #FFFFFF ;font-size: larger;">专题学习资源
</el-header>
<el-main class="el-main">
<template slot-scope="props">
<el-collapse v-model="activeNames" @change="handleChange">
<el-collapse-item v-bind:disabled="$data.dis" id="bt1" title="< 专题知识资源 >" name="1">
<div class="new">
<el-button id="t1" style="visibility: hidden" @click="uploadFile" type="primary" plain >上传资源<i class="el-icon-upload el-icon--right">
</i></el-button>
</div>
<div>
<el-table
:data="table"
height="400"
style="width: 100%">
<el-table-column
prop="name"
label="资源名称"
width="930">
</el-table-column>
<el-table-column
fixed="right"
label="操作">
<template slot-scope="scope">
<el-button-group>
<el-button type="primary"plain icon="el-icon-view"@click="handleClick(scope.row.url)">查看</el-button>
<el-button v-bind:disabled="$data.show" type="primary"plain icon="el-icon-delete" @click="Delete(scope.row.rid)">删除</el-button>
</el-button-group>
</template>
</el-table-column>
</el-table>
</div>
</el-collapse-item>
<el-collapse-item id="bt2" title="< 教师专题文章 >" name="2" >
<div class="new">
<el-button id="t2" style="visibility: hidden" type="primary" plain >
<router-link :to="{name:'BlogEdit',query:{sid:sid,atype:0}}">
<el-link style="color: #333333;text-decoration: none">发布文章</el-link>
</router-link>
<i class="el-icon-edit el-icon--right">
</i></el-button></div>
<el-table
:data="tableData"
height="400"
style="width: 100%">
<el-table-column
prop="title"
label="文章名称"
width="380">
<template slot-scope="props">
<span style="margin-left: 10px">{{ props.row.title }}</span>
</template>
</el-table-column>
<el-table-column
label="评分"
width="100">
<template slot-scope="props">
<span content="time">{{props.row.mark}}</span>
</template>
</el-table-column>
<el-table-column
prop="editTime"
label="简介"
width="450">
<template slot-scope="props">
<span style="margin-left: 10px">{{ props.row.summary }}</span>
</template>
</el-table-column>
<el-table-column
label="操作">
<template slot-scope="props">
<el-button type="primary"plain icon="el-icon-reading" @click="getarticle(props.row.aid)">查看</el-button>
</template>
</el-table-column>
</el-table>
</el-collapse-item>
<el-collapse-item id="bt3" title="< 学生知识分享 >" name="3" >
<div class="new">
<el-button id="s2" style="visibility: hidden" type="primary" plain >
<router-link :to="{name:'BlogEdit',query:{sid:sid,atype:0}}">
<el-link style="color: #333333;text-decoration: none">发布文章</el-link>
</router-link>
<i class="el-icon-edit el-icon--right">
</i></el-button></div>
<el-table
:data="tableData1"
height="400"
style="width: 100%">
<el-table-column
prop="title"
label="文章名称"
width="380">
<template slot-scope="props">
<span style="margin-left: 10px">{{ props.row.title }}</span>
</template>
</el-table-column>
<el-table-column
label="评分"
width="100">
<template slot-scope="props">
<span content="time">{{props.row.mark}}</span>
</template>
</el-table-column>
<el-table-column
prop="author"
label="发布者"
width="450">
<template slot-scope="props">
<span style="margin-left: 10px">{{ props.row.author }}</span>
</template>
</el-table-column>
<el-table-column
label="操作">
<template slot-scope="props">
<el-button type="primary"plain icon="el-icon-reading" @click="getarticle(props.row.aid)">查看</el-button>
</template>
</el-table-column>
</el-table>
</el-collapse-item>
</el-collapse>
</template>
</el-main>
</el-container>
<el-container>
<el-header class="el-header" style="font-weight: bold;color: #FFFFFF ;font-size: larger">
专题学习成果
</el-header>
<el-main class="el-main">
<template slot-scope="props">
<el-collapse v-model="activeNames" @change="handleChange">
<el-collapse-item id="bt4" title="< 学生学习心得 >" name="4">
<div class="new">
<el-button id="s3" style="visibility: hidden" type="primary" plain>
<router-link :to="{name:'BlogEdit',query:{sid:sid,atype:1}}">
<el-link style="color: #333333;text-decoration: none">发布文章</el-link>
</router-link>
<i class="el-icon-edit el-icon--right">
</i></el-button></div>
<el-table
:data="tableData2"
height="400"
style="width: 100%">
<el-table-column
prop="name"
label="专题学习总结"
width="380">
<template slot-scope="props">
<span style="margin-left: 10px">{{ props.row.title }}</span>
</template>
</el-table-column>
<el-table-column
label="评分"
width="100">
<template slot-scope="props">
<span content="time">{{props.row.mark}}</span>
</template>
</el-table-column>
<el-table-column
prop="date"
label="发布者"
width="450">
<template slot-scope="props">
<span style="margin-left: 10px">{{ props.row.author }}</span>
</template>
</el-table-column>
<el-table-column
label="操作">
<template slot-scope="props">
<el-button type="primary"plain icon="el-icon-reading" @click="getarticle(props.row.aid)">查看</el-button>
</template>
</el-table-column>
</el-table>
</el-collapse-item>
</el-collapse>
</template>
</el-main>
</el-container>
</div>
</div>
</template>
<script>
import Headers_copy from "@/components/headers_copy";
import QS from "qs";
import * as echarts from "echarts";
const axios = require('axios');
export default {
name: "ClassDetail",
components: {
Headers_copy,
},
data() {
return {
table: [],
tableData: [],
tableData1: [],
tableData2: [],
dis:true,
show:true,
sid: this.$route.query.sid,
activeNames: [],
uid: sessionStorage.getItem("uid"),
username: '',
iconurl: '',
category: '',
drawer: false,
form: [],
subjectdetail: [],
subName: '',
founder: '',
content: '',
date: '',
judge:'',
dvalue:[],
}
},
created() {
const _this = this
//查询是否在专题内
axios.post("http://47.107.40.143:8080//inSubject", QS.stringify(
{
sid: this.$route.query.sid,
uid: sessionStorage.getItem("uid"),
})).then(res => {
console.log("查询用户是否在专题内")
console.log(res)
console.log("judge定义",res.data.data.judge)
_this.judge = res.data.data.judge
})
axios.post("http://47.107.40.143:8080//checkSubject", QS.stringify(
{
sid: this.$route.query.sid,
status: 1
})).then(res => {
console.log(res)
_this.tableData = res.data.data
})
axios.post("http://47.107.40.143:8080//checkSubject", QS.stringify(
{
sid: this.$route.query.sid,
status: 0,
atype: 0
})).then(res => {
console.log(res)
_this.tableData1 = res.data.data
})
axios.post("http://47.107.40.143:8080//checkSubject", QS.stringify(
{
sid: this.$route.query.sid,
status: 0,
atype: 1
})).then(res => {
console.log(res)
_this.tableData2 = res.data.data
})
axios.get("http://47.107.40.143:8080//getResourceBySid",
{
params: {
sid: this.$route.query.sid
}
}).then(res => {
_this.table = res.data.data
console.log(res)
})
this.load();
axios.get("http://47.107.40.143:8080//getSubjectDetails",
{
params: {
sid: this.$route.query.sid
}
}).then(res => {
this.subName = res.data.data.subName
this.founder = res.data.data.founder
this.content = res.data.data.content
this.date = res.data.data.date
console.log(res)
console.log('传递的专题名为', this.subName)
})
axios.get("http://47.107.40.143:8080/getSubjectNumbers",
{
params: {
sid: this.$route.query.sid
}
}).then(res => {
for(let i=0;i<5;i++){
this.dvalue.push(res.data.data[i])
}
})
},
beforeUpdate() {
let this_ = this;
let myChart = echarts.init(document.getElementById('myChart'), null, {renderer: 'svg'});
setTimeout(() => {
if (this.judge=="1")
this.dis=false
if(this.username==this.founder){
this.show=false
}
if(this.category=="1"){
this.dis=false
document.getElementById("t1").style.visibility='visible';
document.getElementById("t2").style.visibility='visible';
console.log("这是教师,显示俩")
console.log(this.category)
}else{
document.getElementById("s1").style.visibility='visible';
document.getElementById("s11").style.visibility='visible';
document.getElementById("s2").style.visibility='visible';
document.getElementById("s3").style.visibility='visible';
console.log("这是学生,显示仨")
console.log(this.category)
}
let dataname = ['参与人数', '教师文章', '专题资源', '学生分享', '学习心得'];
let datavaule = this.dvalue;
let indicator = [];
let maxd = 1;
for (let i = 0; i < dataname.length; i++) {
if (datavaule[i] > maxd) {
maxd = datavaule[i];
}
}
maxd = maxd * 1.2;
for (let i = 0; i < dataname.length; i++) {
indicator.push({
name: dataname[i],
max: maxd,
});
}
function contains(arrays, obj) {
let i = arrays.length;
while (i--) {
if (arrays[i] === obj) {
return i;
}
}
return false;
}
let option = {
tooltip: {
formatter: function() {
let html = '';
for (let i = 0; i < datavaule.length; i++) {
html += dataname[i] + ' : ' + datavaule[i] + '<br>'
}
return html
}
},
radar: {
// shape: 'circle',
name: {
formatter: function (value) {
let i = contains(dataname, value);
let percent = datavaule[i];
let name = dataname[i];
let text = '';
if (name == '参与人数') {
text = '{a1|' + name + '}' + '\n' + '{a2|' + percent + '人}';
} else if (name == '教师文章') {
text = '{b1|' + name + '}' + '\n' + '{b2|' + percent + '篇}';
} else if (name == '专题资源') {
text = '{c1|' + name + '}' + '\n' + '{c2|' + percent + '篇}';
} else if (name == '学生分享') {
text = '{d1|' + name + '}' + '\n' + '{d2|' + percent + '篇}';
} else {
text = '{e1|' + name + '}' + '\n' + '{e2|' + percent + '篇}';
}
return text;
},
textStyle: {
rich: {
//幼龄林
a1: {
fontSize: 10,
color: '#578501',
align: 'center',
},
a2: {
fontSize: 10,
align: 'center',
color: '#578501',
padding: 4,
},
//中龄林
b1: {
fontSize: 10,
color: '#01A8A1',
align: 'center',
},
b2: {
fontSize: 10,
align: 'center',
color: '#01A8A1',
padding: 4,
},
//近熟林
c1: {
fontSize: 10,
color: '#129200',
align: 'center',
},
c2: {
fontSize: 10,
align: 'center',
color: '#129200',
padding: 4,
},
//成熟林
d1: {
fontSize: 10,
color: '#FDB400',
align: 'center',
},
d2: {
fontSize: 10,
align: 'center',
color: '#FDB400',
padding: 4,
},
//过熟林
e1: {
fontSize: 10,
color: '#FD6C00',
align: 'center',
padding: 4,
},
e2: {
fontSize: 10,
align: 'center',
color: '#FD6C00',
padding: 4,
},
},
},
},
indicator: indicator,
},
series: [
{
name: '数量',
type: 'radar',
// areaStyle: {normal: {}},
itemStyle: { normal: { areaStyle: { type: 'default' } } },
data: [datavaule],
},
],
};
//代码
myChart.setOption(option);
}, 300);
//建议加上以下这一行代码,不加的效果图如下(当浏览器窗口缩小的时候)。超过了div的界限(红色边框)
window.addEventListener('resize',function() {myChart.resize()});
},
methods:
{
joinsubject() {
this.$confirm('是否确定加入该专题?(只有加入该专题才可以查看资源,加入后也请积极参与互评工作哦)', '确认信息', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
axios.post("http://47.107.40.143:8080//joinSubject", QS.stringify(
{
sid: this.sid,
uid: this.uid
})).then(res => {
console.log(res)
console.log("加入专题状态", res.data.code)
this.$alert(res.data.msg,'提示');
})
this.$router.go(0)
})
}
,
Delete(s)
{
axios.post("http://47.107.40.143:8080/deleteFiles", QS.stringify(
{
rid:s,
})).then(res => {
console.log(res)
window.location.reload()
})
},
quitsubject(){
this.$confirm('是否确定退出该专题?(退出该专题后将不可查看教师资源)', '确认信息', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
axios.post("http://47.107.40.143:8080/exitSubject", QS.stringify(
{
sid: this.sid,
uid: this.uid
})).then(res => {
console.log(res)
console.log("加入专题状态", res.data.code)
this.$alert(res.data.msg,'提示');
})
this.$router.go(0)
})
}
,
handleClick(s){
window.open(s)
},
uploadFile() {
this.$router.push(
{
name:"upload",
query:{
aid:"-1",
sid:this.sid
}
}
)
},
//加载头部信息,包括用户头像、用户名、用户权限
load(){
axios.get("/head",{params:{uid:this.uid}}).then(res =>{
this.username = res.data.data[0].username
this.iconurl=res.data.data[0].iconurl
this.category=res.data.data[0].category
console.log('传到页面的数据为'+this.username)
console.log('传到页面的数据为'+this.iconurl)
})
},
//后端清除数据,跳转登陆界面
getarticle(s){
this.$router.push(
{
name:'BlogDetail',
query:{aid:s}
}
)
},
back(){
this.$router.go(-1);//返回上一层
},
logout() {
const _this = this
// _this.$axios.get("/logout").then(res =>
// {
_this.$store.commit("REMOVE_INFO")
_this.$router.push("/login")
},
},
}
</script>
<style scoped>
.head{
}
.head:hover{
margin-top: -5px;
}
.joinsubject{
}
.joinsubject:hover{
margin-top: -5px;
}
.new{
margin-left: 750px;
}
.el-table__header th {
padding: 0;
height: 30px;
line-height: 30px;
}
.el-header {
background-color: #409EFF;
color: #333;
text-align: center;
line-height: 60px;
}
.el-main {
background-color: #E9EEF3;
color: #333;
text-align: center;
line-height: 220px;
}
.item {
margin-bottom: 10px;
}
.item_tag{
float:left;
text-align:left;
margin: auto;
}
.item_desr{
margin-left: 30%;
min-height: 30px;
text-align:left;
}
.text {
width: 100%;
font-size: 12px;
font-family: "Microsoft YaHei";
color: black;
}
</style>
界面布局如下: