统计信息调整
This commit is contained in:
fan
parent
144fecf31a
commit
545440b7e7
10
src/api/record.js
Normal file
10
src/api/record.js
Normal file
@ -0,0 +1,10 @@
|
||||
import request from '@/utils/request';
|
||||
|
||||
/** 查询用户使用记录统计 */
|
||||
export function queryUserSimulationRecord(params, userId) {
|
||||
return request({
|
||||
url: `/api/record/stats/list/criteria/${userId}`,
|
||||
method: 'get',
|
||||
params
|
||||
});
|
||||
}
|
||||
@ -1,97 +0,0 @@
|
||||
<template>
|
||||
<div id="mychart1" style="width:100%;height:100%"/>
|
||||
</template>
|
||||
<script>
|
||||
import * as echarts from 'echarts';
|
||||
import { getLessonList } from '@/api/management/userexam';
|
||||
export default {
|
||||
name: 'ExamStatistics',
|
||||
data() {
|
||||
return {
|
||||
myChart2:null,
|
||||
title:{
|
||||
show:true,
|
||||
subtext:'',
|
||||
subtextStyle:{color:'#358ff8',fontSize:14},
|
||||
text:'学习时长统计',
|
||||
textAlign:'center',
|
||||
left:'50%',
|
||||
top:'5px',
|
||||
textStyle:{
|
||||
color:'#f00'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
async mounted() {
|
||||
this.initChart()
|
||||
this.loadData();
|
||||
},
|
||||
methods: {
|
||||
initChart(){
|
||||
var chartDom1 = document.getElementById('mychart1');
|
||||
this.myChart1 = echarts.init(chartDom1);
|
||||
let option1={
|
||||
title: this.title,
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: function (params, ticket, callback) {
|
||||
let value=params.data.value;
|
||||
let hour=0;
|
||||
let minu=0;
|
||||
let seconds=0;
|
||||
hour=Math.floor(value/3600);
|
||||
minu=Math.floor((value%3600)/60);
|
||||
seconds=Math.floor((value%3600)%60);
|
||||
// hour=hour>9?hour:'0'+hour;
|
||||
// minu=minu>9?minu:'0'+minu;
|
||||
// seconds=seconds>9?seconds:'0'+seconds;
|
||||
let temp=hour+'时'+minu+"分"+seconds+'秒';
|
||||
let start=params.data.name?params.data.name+': ':params.data.name;
|
||||
return '<p>'+start+temp+'</p>'
|
||||
}
|
||||
},
|
||||
color:['#358ff8','#91cb74','#f7c757','#ec6566','#73c0de','#4ca273','#ee8250','#9a60b4','#ea7ccc','#59eca9'],
|
||||
legend: {orient: 'vertical',left: 'left',top:'65px'},
|
||||
series: [
|
||||
{
|
||||
data:[{value:0,name:''}],
|
||||
label:{show:false},
|
||||
radius: '60%',
|
||||
top:'60px',
|
||||
showEmptyCircle:true,
|
||||
type: 'pie'
|
||||
}
|
||||
]
|
||||
}
|
||||
option1 && this.myChart1 && this.myChart1.setOption(option1);
|
||||
},
|
||||
loadData(){
|
||||
getLessonList().then(response => {
|
||||
let timeList=response.data;
|
||||
if(timeList){
|
||||
let realList=[];
|
||||
let allcount=0;
|
||||
timeList.forEach(eachItem=>{
|
||||
allcount+=parseInt(eachItem.duration);
|
||||
realList.push({value:eachItem.duration,name:eachItem.statsProjectName});
|
||||
})
|
||||
let option=this.myChart1.getOption();
|
||||
let hour=0;
|
||||
let minu=0;
|
||||
let seconds=0;
|
||||
hour=Math.floor(allcount/3600);
|
||||
minu=Math.floor((allcount%3600)/60);
|
||||
seconds=Math.floor((allcount%3600)%60);
|
||||
if(timeList.length==0){realList=[{value:0,name:''}]}
|
||||
option.title[0].subtext="总时长: "+hour+'时'+minu+"分"+seconds+'秒';
|
||||
option.series[0].data=realList;
|
||||
option && this.myChart1 && this.myChart1.setOption(option);
|
||||
}
|
||||
}).catch(error=>{
|
||||
this.$message.error(error.message)
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -1,42 +1,64 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="student_title_content">{{ '统计信息' }}</div>
|
||||
<el-button type="text" style="position: fixed;right: 20px;top: 70px;" @click="back">返回</el-button>
|
||||
<div class="statisticChart">
|
||||
<div class="statisticChartLeft" >
|
||||
<!-- id="mychart1" -->
|
||||
<exam-statistics/>
|
||||
</div>
|
||||
<!-- <div class="statisticChartCenter"> -->
|
||||
<!-- :creatorId="creatorId" :orgId="orgId" -->
|
||||
<!-- <grade-statistics :userId="userId"/> -->
|
||||
<!-- </div> -->
|
||||
<div id="mychart3" class="statisticChartRight" />
|
||||
</div>
|
||||
<div class="statistics-box">
|
||||
<div class="student_title_content">{{ '统计信息' }}</div>
|
||||
<el-button type="text" style="position: fixed;right: 20px;top: 70px;color: #fbfbfb;" @click="back">返回</el-button>
|
||||
<!-- <div class="statisticChart">-->
|
||||
<!-- <div id="mychart3" class="statisticChartRight" />-->
|
||||
<!-- </div>-->
|
||||
<div style="width: 90%;margin: 0 auto;">
|
||||
<el-form :inline="true" :model="queryForm" class="demo-form-inline">
|
||||
<el-form-item label="统计单位">
|
||||
<el-select v-model="queryForm.timeUnit" placeholder="统计单位">
|
||||
<el-option
|
||||
v-for="item in timeUnitList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="统计时段">
|
||||
<el-date-picker
|
||||
v-model="queryForm.times"
|
||||
type="datetimerange"
|
||||
:clearable="false"
|
||||
format="yyyy-MM-dd HH:mm:ss"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="loadData">查询</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div id="mychart4" style="width: 100%;height: 500px;margin-top: 50px;" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import * as echarts from 'echarts';
|
||||
// import GradeStatistics from './gradeStatistic.vue';
|
||||
import ExamStatistics from './examStatistic.vue';
|
||||
import { getSimulationTimeChart } from '@/api/management/userexam';
|
||||
import { getSubSystemByProjectCode } from '@/api/trainingPlatform';
|
||||
import { queryUserSimulationRecord } from '@/api/record';
|
||||
import { timestampFormat } from '@/utils/date';
|
||||
export default {
|
||||
name: 'StudentStatistics',
|
||||
// GradeStatistics
|
||||
components: {
|
||||
ExamStatistics
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
myChart3:null,
|
||||
// creatorId:'',
|
||||
// orgId:'',
|
||||
// userId:'',
|
||||
queryForm: {
|
||||
timeUnit: 'DAY',
|
||||
times: []
|
||||
},
|
||||
timeUnitList:[
|
||||
{ label: '天', value: 'DAY' },
|
||||
{ label: '月', value: 'MONTH' },
|
||||
{ label: '年', value: 'YEAR' }
|
||||
],
|
||||
myChart:null,
|
||||
title:{
|
||||
show:true,
|
||||
subtext:'',
|
||||
subtextStyle:{color:'#358ff8',fontSize:14},
|
||||
subtextStyle:{color:'#358ff8', fontSize:14},
|
||||
text:'仿真时长统计',
|
||||
textAlign:'center',
|
||||
left:'50%',
|
||||
@ -44,112 +66,113 @@ export default {
|
||||
textStyle:{
|
||||
color:'#f00'
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
};
|
||||
},
|
||||
async mounted() {
|
||||
this.initChart()
|
||||
this.queryForm.times = [timestampFormat('YYYY-MM-DD HH:mm:ss', new Date() - 1000 * 60 * 60 * 24 * 7), timestampFormat('YYYY-MM-DD HH:mm:ss', new Date())];
|
||||
this.initChart();
|
||||
this.loadData();
|
||||
// this.userId=this.$store.state.user.id;
|
||||
// this.orgId=this.$store.state.user.companyId;
|
||||
},
|
||||
methods: {
|
||||
initChart(){
|
||||
var chartDom3 = document.getElementById('mychart3');
|
||||
this.myChart3 = echarts.init(chartDom3);
|
||||
let option3={
|
||||
title: this.title,
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: function (params, ticket, callback) {
|
||||
let value=params.data.value;
|
||||
let hour=0;
|
||||
let minu=0;
|
||||
let seconds=0;
|
||||
hour=Math.floor(value/3600);
|
||||
minu=Math.floor((value%3600)/60);
|
||||
seconds=Math.floor((value%3600)%60);
|
||||
// hour=hour>9?hour:'0'+hour;
|
||||
// minu=minu>9?minu:'0'+minu;
|
||||
// seconds=seconds>9?seconds:'0'+seconds;
|
||||
let temp=hour+'时'+minu+"分"+seconds+'秒';
|
||||
let start=params.data.name?params.data.name+': ':params.data.name;
|
||||
return '<p>'+start+temp+'</p>'
|
||||
initChart() {
|
||||
const charDom = document.getElementById('mychart4');
|
||||
this.myChart = echarts.init(charDom);
|
||||
const option = {
|
||||
title:{
|
||||
show:true,
|
||||
text:'仿真时长统计',
|
||||
textAlign:'center',
|
||||
left:'50%',
|
||||
top:'0',
|
||||
textStyle:{
|
||||
color:'#fff',
|
||||
fontSize: 26
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
name: '时长',
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#fff',
|
||||
width: 3
|
||||
}
|
||||
},
|
||||
nameTextStyle: {
|
||||
fontSize: 18
|
||||
},
|
||||
data: []
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
name: '时长',
|
||||
nameTextStyle: {
|
||||
fontSize: 18
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#fff',
|
||||
width: 3
|
||||
}
|
||||
}
|
||||
},
|
||||
color:['#358ff8','#91cb74','#f7c757','#ec6566','#73c0de','#4ca273','#ee8250','#9a60b4','#ea7ccc','#59eca9'],
|
||||
legend: {left: 'left',top:'65px',orient:'horizontal'},
|
||||
// http://2i38984j47.qicp.vip/doc/UserExamController.html
|
||||
series: [
|
||||
{
|
||||
data:[{value:0,name:''}],
|
||||
label:{show:false},
|
||||
showEmptyCircle:true,
|
||||
radius: '60%',
|
||||
top:'60px',
|
||||
type: 'pie'
|
||||
data: [],
|
||||
type: 'bar',
|
||||
itemStyle: {
|
||||
color: '#3c9bee'
|
||||
},
|
||||
barMaxWidth: 20,
|
||||
label: {
|
||||
show: true
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
option3 && this.myChart3 && this.myChart3.setOption(option3);
|
||||
};
|
||||
this.myChart.setOption(option);
|
||||
},
|
||||
loadData(){
|
||||
// getPublishLessonListByMapId({mapId:this.mapId}).then(response => {
|
||||
getSubSystemByProjectCode().then(response => {
|
||||
let mapIdList = response.data;
|
||||
if(mapIdList.length>0){
|
||||
getSimulationTimeChart(mapIdList[0].id).then(res=>{
|
||||
let list=mapIdList[0].children.find(child=>{return child.id=='Simulation'})
|
||||
let dataMap={};
|
||||
if(list){
|
||||
list.children.forEach(item=>{
|
||||
dataMap[item.id]=item.name
|
||||
})
|
||||
}
|
||||
let timeList=res.data;
|
||||
if(timeList){
|
||||
let realList=[];
|
||||
let allcount=0;
|
||||
timeList.forEach(eachItem=>{
|
||||
let realtName=dataMap[eachItem.statsProjectId];
|
||||
if(realtName){
|
||||
allcount+=parseInt(eachItem.duration);
|
||||
realList.push({value:eachItem.duration,name:realtName});
|
||||
}
|
||||
})
|
||||
if(timeList.length==0){realList=[{value:0,name:''}]}
|
||||
let option=this.myChart3.getOption();
|
||||
option.series[0].data=realList;
|
||||
let hour=0;
|
||||
let minu=0;
|
||||
let seconds=0;
|
||||
hour=Math.floor(allcount/3600);
|
||||
minu=Math.floor((allcount%3600)/60);
|
||||
seconds=Math.floor((allcount%3600)%60);
|
||||
option.title[0].subtext="总时长: "+hour+'时'+minu+"分"+seconds+'秒';
|
||||
option && this.myChart3 && this.myChart3.setOption(option);
|
||||
}
|
||||
}).catch(error=>{
|
||||
this.$message.error(error.message)
|
||||
});
|
||||
}
|
||||
}).catch(error=>{
|
||||
this.$message.error(error.message)
|
||||
loadData() {
|
||||
const data = { timeUnit: this.queryForm.timeUnit, startTime: this.queryForm.times[0], endTime: this.queryForm.times[1] };
|
||||
queryUserSimulationRecord(data, this.$store.state.user.id).then(resp => {
|
||||
const option = this.myChart.getOption();
|
||||
const dates = [];
|
||||
const datas = [];
|
||||
(resp.data || []).forEach(item => {
|
||||
datas.push(item.duration);
|
||||
dates.push(item.timeSegment);
|
||||
});
|
||||
option.series[0].data = datas;
|
||||
option.xAxis[0].data = dates;
|
||||
console.log(dates, '***********', option);
|
||||
option && this.myChart && this.myChart.setOption(option);
|
||||
});
|
||||
},
|
||||
back(){
|
||||
back() {
|
||||
this.$router.go(-1);
|
||||
},
|
||||
onSubmit() {
|
||||
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
.statistics-box{
|
||||
background: linear-gradient(to bottom, #01468B, #00172E);
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.student_title_content {
|
||||
width: 100%;
|
||||
margin: 20px 0 30px;
|
||||
padding: 30px;
|
||||
text-align: left;
|
||||
font-size: 22px;
|
||||
padding-left: 30px;
|
||||
color: #fbfbfb;
|
||||
}
|
||||
/deep/.el-form-item__label{
|
||||
color: #fbfbfb;
|
||||
}
|
||||
.statisticChart{
|
||||
width:90%;
|
||||
@ -163,11 +186,6 @@ export default {
|
||||
height: 500px;
|
||||
/* border:1px #ccc solid */
|
||||
}
|
||||
/* .statisticChartCenter{
|
||||
width: 40%;
|
||||
display: inline-block;
|
||||
height: 500px;
|
||||
} */
|
||||
.statisticChartRight{
|
||||
/* width: 30%; */
|
||||
width: 50%;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user