2021/7/19 学习知识汇聚平台：专题详情页具体实现

本次进行了专题详情页的具体实现

具体代码如下：
 

<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>

界面布局如下：