项目实训记录（8周）

前言

本周针对之前的班级管理部分开发了学生角色的代码。并且为了方便教师联系同学，以拓扑图的方式展示了某一门课程中，和某一同学在同一行政班的同学都有谁。

---

一、学生可以查看自己都上了哪些课

二、查人的拓扑图

为了方便教师联系同学，以拓扑图的方式展示了某一门课程中，和某一同学在同一行政班的同学都有谁。

比如说老师想找李四，但是找不到李四，老师就可以找王五。
这里的拓扑图用的是vis的库，但是可能是我用的不好，感觉还是有点丑。

<template>

  <div>
    <el-row>
      <el-col :span="4">
        <el-button
            type="primary" plain
            @click="init()">显现图像
        </el-button>
      </el-col>
    </el-row>



    <div id="mynetwork"></div>
  </div>
</template>

<script>
import vis from "vis";
export default {
  name:'tuopu',
  data () {
    return {
      cid:'',
      sid:'',
      realclass:'',

      name:'',//要查人的名字
      nodes:[],
      edges: [
      ],
      options: {},
    }
  },
  created(){

    if(this.$route.query.cid!=null){
      this.cid=this.$route.query.cid
    }
    if(this.$route.query.sid!=null){
      this.sid=this.$route.query.sid
    }
    if(this.$route.query.realclass!=null){
      this.realclass=this.$route.query.realclass
    }
    if(this.$route.query.name!=null){
      this.name=this.$route.query.name
    }


    console.log("hahahah ")
    console.log("sid"+this.sid)
    console.log("realclass"+this.realclass)
    console.log("cid"+this.cid)
    console.log("hahahah ")

//在所有选这门课的人中，要找和这个人在同一个行政班级，除了他以外的所有人
    this.axios({
      url: '/teacher/search_classmate1',
      method: 'get',
      params: {

        cid: this.cid,
        rclass: this.realclass,//真实的班级
        sid:this.sid,
        name:this.name

      },
    }).then(
        (res) => {
          console.log(res)
          this.nodes = res.data
          //this.index=this.comments.length
        },
        function (res) {
          console.log(res)
          console.log('啊呀，出错啦')
        }
    )


//这是要画边
    this.axios({
      url: '/teacher/search_classmate2',
      method: 'get',
      params: {

        cid: this.cid,
        rclass: this.realclass,//真实的班级
        sid:this.sid,
        name:this.name

      },
    }).then(
        (res) => {
          console.log(res)
          this.edges = res.data
          //this.index=this.comments.length
        },
        function (res) {
          console.log(res)
          console.log('啊呀，出错啦')
        }
    )

  },


  methods: {

    init () {
      let _this = this;
      var container = document.getElementById("mynetwork");
      var data = {
        nodes: _this.nodes,
        edges: _this.edges,
      };
      _this.options = {
        edges: {
          width: 1,
          length: 60,
          shadow: true,
          smooth: {
            enabled: false
          },
          arrows: {
            to: {
              enabled: true,
              scaleFactor: 1,
              type: "arrow"
            },
          },
          color: {
            color: "#bc68e6",
            highlight: "yellow",
            hover: "#1fe1c6",
            inherit: "from",
            opacity: 1.0
          },
          font: {
            color: 'yellow',
            size: 14,
            face: 'arial',
            background: 'white',
            strokeWidth: 10,
            strokeColor: 'rgb(112, 184, 240)',
            align: 'horizontal',
            multi: false,
            vadjust: 0,
            bold: {
              color: "green",
            },
          },
        },
        nodes: {

          font: {
            bold: {
              color: "red",
            },
          },
        },
        physics: {
          enabled: false,
        },
        interaction: {
          dragNodes: false, //是否能拖动节点
          dragView: true, //是否能拖动画布
          hover: true, //鼠标移过后加粗该节点和连接线
          multiselect: true, //按 ctrl 多选
          selectable: true, //是否可以点击选择
          selectConnectedEdges: true, //选择节点后是否显示连接线
          hoverConnectedEdges: true, //鼠标滑动节点后是否显示连接线
          zoomView: true //是否能缩放画布
        },

      };
      _this.network = new vis.Network(container, data, _this.options);
    }
  }
};
</script>

<style>
#mynetwork {
  width: 1000px;
  height: 400px;
  border: 1px solid lightgray;
}
canvas {
  cursor: pointer;
}
</style>