292 lines
11 KiB
HTML
292 lines
11 KiB
HTML
<!doctype html>
|
||
<html>
|
||
|
||
<head>
|
||
<title></title>
|
||
|
||
<vt:include file="inc/meta_api.inc" />
|
||
<script src="/Utility/ElementUi/index.js"></script>
|
||
<style>
|
||
.box-card {
|
||
width: 500px;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.item {
|
||
height: 50px;
|
||
line-height: 50px;
|
||
}
|
||
|
||
.item>span {
|
||
display: block;
|
||
width: 60px;
|
||
text-align: right;
|
||
float: left;
|
||
}
|
||
|
||
.item .el-input {
|
||
width: auto;
|
||
width: calc(100% - 100px);
|
||
float: left;
|
||
margin-left: 5px;
|
||
}
|
||
|
||
#log-box {
|
||
width: calc(100% - 540px);
|
||
position: absolute;
|
||
right: 8px;
|
||
top: 8px;
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<div id="vue-app">
|
||
<!-- 查询框-->
|
||
<el-card class="box-card">
|
||
<div slot="header" class="clearfix">
|
||
<span>按名称或账号查询</span>
|
||
<el-button style="float: right; padding: 8px 20px;margin-top: -5px;" type="primary"
|
||
@click="getAccountLogs">
|
||
查询
|
||
</el-button>
|
||
</div>
|
||
<div class="item">
|
||
<span>姓名：</span>
|
||
<el-input placeholder="请输入内容" v-model="name" class="textbox"></el-input>
|
||
</div>
|
||
<div class="item">
|
||
<span>账号：</span>
|
||
<el-input placeholder="请输入内容" v-model="acc" class="textbox"></el-input>
|
||
</div>
|
||
</el-card>
|
||
<!--学习记录的查询结果-->
|
||
<el-card class="box-card" v-show="result.showBox">
|
||
<div slot="header" class="clearfix">
|
||
<span>来自学习记录（LogForStudentStudy)的查询结果</span>
|
||
|
||
</div>
|
||
<el-table :data="result.logs" v-loading="loading" stripe style="width: 100%">
|
||
<el-table-column prop="Ac_ID" label="ID" width="100">
|
||
</el-table-column>
|
||
<el-table-column prop="Ac_Name" label="姓名" width="100">
|
||
</el-table-column>
|
||
<el-table-column prop="Ac_AccName" label="账号" width="120">
|
||
</el-table-column>
|
||
<el-table-column label="学习记录" width="80" fixed="right">
|
||
<template slot-scope="scope">
|
||
<el-button @click="getStudyLog(scope.row)" type="text" size="small">查看</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</el-card>
|
||
<!--账户表的学员信息-->
|
||
<el-card class="box-card" v-show="result.showBox">
|
||
<div slot="header" class="clearfix">
|
||
<span>通过学习记录，反查账户（Accounts)</span>
|
||
|
||
</div>
|
||
<el-table :data="result.accounts" v-loading="loading" stripe style="width: 100%">
|
||
<el-table-column prop="Ac_ID" label="ID" width="100">
|
||
</el-table-column>
|
||
<el-table-column prop="Ac_Name" label="姓名" width="100">
|
||
</el-table-column>
|
||
<el-table-column prop="Ac_AccName" label="账号" width="120">
|
||
</el-table-column>
|
||
<el-table-column prop="Ac_LastTime" label="最后登录">
|
||
</el-table-column>
|
||
|
||
</el-table>
|
||
</el-card>
|
||
<el-card class="box-card" v-show="result.showBox">
|
||
<div slot="header" class="clearfix">
|
||
<span>通过学员姓名，反查账户（Accounts)</span>
|
||
|
||
</div>
|
||
<el-table :data="result.acc4name" v-loading="loading" stripe style="width: 100%">
|
||
<el-table-column prop="Ac_ID" label="ID" width="100">
|
||
</el-table-column>
|
||
<el-table-column prop="Ac_Name" label="姓名" width="100">
|
||
</el-table-column>
|
||
<el-table-column prop="Ac_AccName" label="账号" width="120">
|
||
</el-table-column>
|
||
<el-table-column prop="Ac_LastTime" label="最后登录">
|
||
</el-table-column>
|
||
|
||
</el-table>
|
||
</el-card>
|
||
<!-- 学习记录-->
|
||
<el-card class="box-card" id="log-box" v-show="log.showBox">
|
||
<div slot="header" class="clearfix">
|
||
<span><b>{{log.name}}</b> 的学习记录</span>
|
||
<template>
|
||
<el-select style="display: none" v-model="log.curr_Course" style="float: right" placeholder="课程"
|
||
@change="getCourse">
|
||
<el-option v-for="item in courses" :key="item.Cou_ID" :label="item.Cou_Name"
|
||
:value="item.Cou_ID">
|
||
</el-option>
|
||
</el-select>
|
||
</template>
|
||
</div>
|
||
<el-table :data="log.logs" stripe style="width: 100%">
|
||
<el-table-column prop="Ac_ID" label="ID" width="100">
|
||
</el-table-column>
|
||
<el-table-column prop="Ac_Name" label="姓名" width="100">
|
||
</el-table-column>
|
||
<el-table-column prop="Ac_AccName" label="账号" width="120">
|
||
</el-table-column>
|
||
<el-table-column prop="Cou_ID" label="课程" :filters="coursesFilter" :filter-method="filterHandler">
|
||
<template slot-scope="scope">
|
||
{{scope.row.Org_ID}}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="Ol_ID" label="章节" width="60">
|
||
</el-table-column>
|
||
<el-table-column prop="Lss_IP" label="IP">
|
||
</el-table-column>
|
||
<el-table-column prop="Lss_LastTime" label="时间">
|
||
</el-table-column>
|
||
</el-table>
|
||
</el-card>
|
||
</div>
|
||
|
||
</body>
|
||
|
||
<script>
|
||
var vm = new Vue({
|
||
data: {
|
||
name: '', //学员姓名
|
||
acc: '', //学员账号
|
||
loading: true,
|
||
result: {
|
||
accounts: new Array(), //查询到学员信息
|
||
logs: new Array(), //查询到学员信息
|
||
acc4name: new Array(), //通过姓名查询来的账号
|
||
success: false,
|
||
showBox: false,
|
||
showError: false
|
||
},
|
||
//学习记录
|
||
log: {
|
||
showBox: false,
|
||
name: '', //当学员名称
|
||
acid: 0, //当前学员id
|
||
logs: new Array(),
|
||
course: [],
|
||
curr_Course: ''
|
||
},
|
||
courses: new Array(),
|
||
//课程筛选
|
||
coursesFilter: new Array()
|
||
},
|
||
methods: {
|
||
//获取学员账户信息
|
||
getAccountLogs: function () {
|
||
$api.get('Account/ForLogs', { acc: this.acc, name: this.name }, function () {
|
||
vm.result.accounts = [];
|
||
vm.result.showBox = true;
|
||
vm.loading = true;
|
||
}, function () {
|
||
vm.loading = false;
|
||
}).then(function (response) {
|
||
var data = response.data;
|
||
if (data.Success) {
|
||
vm.result.logs = data.Data;
|
||
}
|
||
vm.result.acc4name = [];
|
||
for (var i = 0; i < vm.result.logs.length; i++) {
|
||
var acid = vm.result.logs[i].Ac_ID;
|
||
$api.get('Account/ForID', { id: acid }).then(function (d) {
|
||
var data = d.data;
|
||
if (data.Success) {
|
||
vm.result.accounts.push(data.Data);
|
||
var acname = data.Data.Ac_Name;
|
||
$api.get('Account/ForName', { name: acname }).then(function (d) {
|
||
var data = d.data;
|
||
if (data.Success) {
|
||
for (var j = 0; j < data.Data.length; j++) {
|
||
vm.result.acc4name.push(data.Data[j]);
|
||
}
|
||
}
|
||
});
|
||
}
|
||
});
|
||
}
|
||
|
||
}).catch(function (error) {
|
||
console.log(error);
|
||
});
|
||
},
|
||
//获取学员学习记录
|
||
getStudyLog: function (acc) {
|
||
vm.log.name = acc.Ac_Name;
|
||
vm.log.acid = acc.Ac_ID;
|
||
vm.log.showBox = true;
|
||
$api.get('Account/StudyLog', { acid: acc.Ac_ID, couid: -1 }).then(function (response) {
|
||
var data = response.data;
|
||
if (data.Success) {
|
||
var courses = new Array();
|
||
for (var i = 0; i < data.Data.length; i++) {
|
||
if (courses.indexOf(data.Data[i].Cou_ID) > -1)
|
||
continue;
|
||
courses.push(data.Data[i].Cou_ID);
|
||
}
|
||
vm.courses = [];
|
||
vm.coursesFilter = [];
|
||
for (var j = 0; j < courses.length; j++) {
|
||
$api.get('Course/ForID', { id: courses[j] }).then(function (response) {
|
||
var data = response.data;
|
||
if (data.Success) {
|
||
vm.courses.push(data.Data);
|
||
vm.coursesFilter.push({ text: data.Data.Cou_Name, value: data.Data.Cou_ID });
|
||
}
|
||
});
|
||
}
|
||
vm.log.logs = data.Data;
|
||
}
|
||
|
||
}).catch(function (error) {
|
||
console.log(error);
|
||
});
|
||
|
||
},
|
||
getCourse: function (couid) {
|
||
$api.get('Account/StudyLog', { acid: vm.log.acid, couid: couid }).then(function (response) {
|
||
var data = response.data;
|
||
if (data.Success) {
|
||
vm.log.logs = data.Data;
|
||
}
|
||
});
|
||
},
|
||
//获取课程名称
|
||
getCourName: function (log) {
|
||
var couname = '';
|
||
for (var j = 0; j < vm.courses.length; j++) {
|
||
if (vm.courses[j].Cou_ID == log.Cou_ID) {
|
||
couname = vm.Cou_Name;
|
||
}
|
||
}
|
||
return couname;
|
||
},
|
||
filterHandler(value, row, column) {
|
||
const property = column['property'];
|
||
var rowid = row[property];
|
||
return row[property] === value;
|
||
}
|
||
},
|
||
watch: {
|
||
courses: function () {
|
||
for (var i = 0; i < vm.courses.length; i++) {
|
||
for (var j = 0; j < vm.log.logs.length; j++) {
|
||
if (vm.courses[i].Cou_ID == vm.log.logs[j].Cou_ID) {
|
||
vm.log.logs[j].Org_ID = vm.courses[i].Cou_Name;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
});
|
||
vm.$mount('#vue-app');
|
||
</script>
|
||
|
||
</html> |