前言
本周针对之前的班级管理部分开发了学生角色的代码。并且为了方便教师联系同学,以拓扑图的方式展示了某一门课程中,和某一同学在同一行政班的同学都有谁。
一、学生可以查看自己都上了哪些课
二、查人的拓扑图
为了方便教师联系同学,以拓扑图的方式展示了某一门课程中,和某一同学在同一行政班的同学都有谁。
比如说老师想找李四,但是找不到李四,老师就可以找王五。
这里的拓扑图用的是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>