joylink/rt-sim-training-client
6
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

统计信息调整

Browse Source
This commit is contained in:
fan 2023-05-22 13:47:09 +08:00
parent 144fecf31a
commit 545440b7e7
3 changed files with 142 additions and 211 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/api/record.js Normal file
View 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
});
}

97
src/views/organization/studentStatistics/examStatistic.vue
View File

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

246
src/views/organization/studentStatistics/index.vue
View File

@ -1,42 +1,64 @@
<template> <template>
<div> <div class="statistics-box">
<div class="student_title_content">{{ '统计信息' }}</div> <div class="student_title_content">{{ '统计信息' }}</div>
<el-button type="text" style="position: fixed;right: 20px;top: 70px;" @click="back">返回</el-button> <el-button type="text" style="position: fixed;right: 20px;top: 70px;color: #fbfbfb;" @click="back">返回</el-button>
<div class="statisticChart"> <!-- <div class="statisticChart">-->
<div class="statisticChartLeft" > <!-- <div id="mychart3" class="statisticChartRight" />-->
<!-- id="mychart1" --> <!-- </div>-->
<exam-statistics/> <div style="width: 90%;margin: 0 auto;">
</div> <el-form :inline="true" :model="queryForm" class="demo-form-inline">
<!-- <div class="statisticChartCenter"> --> <el-form-item label="统计单位">
<!-- :creatorId="creatorId" :orgId="orgId" --> <el-select v-model="queryForm.timeUnit" placeholder="统计单位">
<!-- <grade-statistics :userId="userId"/> --> <el-option
<!-- </div> --> v-for="item in timeUnitList"
<div id="mychart3" class="statisticChartRight" /> :key="item.value"
</div> :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> </div>
</template> </template>
<script> <script>
import * as echarts from 'echarts'; import * as echarts from 'echarts';
// import GradeStatistics from './gradeStatistic.vue'; import { queryUserSimulationRecord } from '@/api/record';
import ExamStatistics from './examStatistic.vue'; import { timestampFormat } from '@/utils/date';
import { getSimulationTimeChart } from '@/api/management/userexam';
import { getSubSystemByProjectCode } from '@/api/trainingPlatform';
export default { export default {
name: 'StudentStatistics', name: 'StudentStatistics',
// GradeStatistics
components: {
ExamStatistics
},
data() { data() {
return { return {
myChart3:null, queryForm: {
// creatorId:'', timeUnit: 'DAY',
// orgId:'', times: []
// userId:'', },
timeUnitList:[
{ label: '天', value: 'DAY' },
{ label: '月', value: 'MONTH' },
{ label: '年', value: 'YEAR' }
],
myChart:null,
title:{ title:{
show:true, show:true,
subtext:'', subtext:'',
subtextStyle:{color:'#358ff8',fontSize:14}, subtextStyle:{color:'#358ff8', fontSize:14},
text:'仿真时长统计', text:'仿真时长统计',
textAlign:'center', textAlign:'center',
left:'50%', left:'50%',
@ -44,112 +66,113 @@ export default {
textStyle:{ textStyle:{
color:'#f00' color:'#f00'
} }
}, }
} };
}, },
async mounted() { 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.loadData();
// this.userId=this.$store.state.user.id;
// this.orgId=this.$store.state.user.companyId;
}, },
methods: { methods: {
initChart(){ initChart() {
var chartDom3 = document.getElementById('mychart3'); const charDom = document.getElementById('mychart4');
this.myChart3 = echarts.init(chartDom3); this.myChart = echarts.init(charDom);
let option3={ const option = {
title: this.title, title:{
tooltip: { show:true,
trigger: 'item', text:'仿真时长统计',
formatter: function (params, ticket, callback) { textAlign:'center',
let value=params.data.value; left:'50%',
let hour=0; top:'0',
let minu=0; textStyle:{
let seconds=0; color:'#fff',
hour=Math.floor(value/3600); fontSize: 26
minu=Math.floor((value%3600)/60); }
seconds=Math.floor((value%3600)%60); },
// hour=hour>9?hour:'0'+hour; xAxis: {
// minu=minu>9?minu:'0'+minu; type: 'category',
// seconds=seconds>9?seconds:'0'+seconds; name: '时长',
let temp=hour+'时'+minu+"分"+seconds+'秒'; axisLine: {
let start=params.data.name?params.data.name+': ':params.data.name; lineStyle: {
return '<p>'+start+temp+'</p>' 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: [ series: [
{ {
data:[{value:0,name:''}], data: [],
label:{show:false}, type: 'bar',
showEmptyCircle:true, itemStyle: {
radius: '60%', color: '#3c9bee'
top:'60px', },
type: 'pie' barMaxWidth: 20,
label: {
show: true
}
} }
] ]
} };
option3 && this.myChart3 && this.myChart3.setOption(option3); this.myChart.setOption(option);
}, },
loadData(){ loadData() {
// getPublishLessonListByMapId({mapId:this.mapId}).then(response => { const data = { timeUnit: this.queryForm.timeUnit, startTime: this.queryForm.times[0], endTime: this.queryForm.times[1] };
getSubSystemByProjectCode().then(response => { queryUserSimulationRecord(data, this.$store.state.user.id).then(resp => {
let mapIdList = response.data; const option = this.myChart.getOption();
if(mapIdList.length>0){ const dates = [];
getSimulationTimeChart(mapIdList[0].id).then(res=>{ const datas = [];
let list=mapIdList[0].children.find(child=>{return child.id=='Simulation'}) (resp.data || []).forEach(item => {
let dataMap={}; datas.push(item.duration);
if(list){ dates.push(item.timeSegment);
list.children.forEach(item=>{ });
dataMap[item.id]=item.name option.series[0].data = datas;
}) option.xAxis[0].data = dates;
} console.log(dates, '***********', option);
let timeList=res.data; option && this.myChart && this.myChart.setOption(option);
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)
}); });
}, },
back(){ back() {
this.$router.go(-1); this.$router.go(-1);
},
onSubmit() {
} }
} }
}; };
</script> </script>
<style scoped> <style scoped>
.statistics-box{
background: linear-gradient(to bottom, #01468B, #00172E);
height: 100%;
overflow-y: auto;
}
.student_title_content { .student_title_content {
width: 100%; width: 100%;
margin: 20px 0 30px; padding: 30px;
text-align: left; text-align: left;
font-size: 22px; font-size: 22px;
padding-left: 30px; color: #fbfbfb;
}
/deep/.el-form-item__label{
color: #fbfbfb;
} }
.statisticChart{ .statisticChart{
width:90%; width:90%;
@ -163,11 +186,6 @@ export default {
height: 500px; height: 500px;
/* border:1px #ccc solid */ /* border:1px #ccc solid */
} }
/* .statisticChartCenter{
width: 40%;
display: inline-block;
height: 500px;
} */
.statisticChartRight{ .statisticChartRight{
/* width: 30%; */ /* width: 30%; */
width: 50%; width: 50%;