|
@@ -1,6 +1,7 @@
|
|
|
<template>
|
|
|
<div class="schooliotbox">
|
|
|
<div class="containerbox">
|
|
|
+ <dv-loading v-if="loading">{{ $t('researchCenter.dashboard.loading') }}</dv-loading>
|
|
|
<!--header-->
|
|
|
<!--title-->
|
|
|
<div class="container-title">
|
|
@@ -8,7 +9,7 @@
|
|
|
<div class="title-center">
|
|
|
<dv-decoration-8 class="dv-dec-8" :color="['#568aea', '#000000']" />
|
|
|
<div class="title-text">
|
|
|
- <span class="title-textbox">{{$t('schoolIot.title')}}</span>
|
|
|
+ <span class="title-textbox">{{$t('areaIot.title')}}</span>
|
|
|
<dv-decoration-6 class="dv-dec-6" :reverse="true" :color="['#50e3c2', '#67a1e5']" />
|
|
|
</div>
|
|
|
<dv-decoration-8 class="dv-dec-8" :reverse="true" :color="['#568aea', '#000000']" />
|
|
@@ -53,17 +54,17 @@
|
|
|
</p>
|
|
|
</div>
|
|
|
<div class="totalclass" v-show="item.key === 'roomnum' || item.key === 'teachnum' || item.key === 'studentnum'">
|
|
|
- <div v-if="item.key ==='roomnum'">
|
|
|
+ <div v-if="item.key ==='roomnum'">
|
|
|
<p class="totalclass-total">{{$t('schoolIot.basics.classTotals')}}</p>
|
|
|
- <p class="totalclass-num">70</p>
|
|
|
+ <p class="totalclass-num">{{item.total}}</p>
|
|
|
</div>
|
|
|
<div v-else-if="item.key ==='teachnum'">
|
|
|
<p class="totalclass-total">{{$t('schoolIot.basics.teachTotals')}}</p>
|
|
|
- <p class="totalclass-num">70</p>
|
|
|
+ <p class="totalclass-num">{{item.total}}</p>
|
|
|
</div>
|
|
|
<div v-else-if="item.key ==='studentnum'">
|
|
|
<p class="totalclass-total">{{$t('schoolIot.basics.studentTotals')}}</p>
|
|
|
- <p class="totalclass-num">70</p>
|
|
|
+ <p class="totalclass-num">{{item.total}}</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -91,13 +92,13 @@
|
|
|
<div class="right-box">
|
|
|
<!-- <dv-scroll-board :config="config" style="width:100%;height:100%" /> -->
|
|
|
<div class="right-box-left">
|
|
|
- <BaseCircle circleId="hiteach" chatName="HiTeach" :percent="45" subTitle="45" totalNum="158"></BaseCircle>
|
|
|
+ <BaseCircle circleId="hiteach" chatName="HiTeach" :percent="equipmentData.hiteachPercent" :subTitle="equipmentData.hiteachOnline" :totalNum="equipmentData.hiteachTotal"></BaseCircle>
|
|
|
</div>
|
|
|
<div class="right-box-left">
|
|
|
- <BaseCircle circleId="hita" chatName="HiTA" :percent="20" subTitle="15" totalNum="60"></BaseCircle>
|
|
|
+ <BaseCircle circleId="hita" chatName="HiTA" :percent="equipmentData.hitaPercent" :subTitle="equipmentData.hitaOnline" :totalNum="equipmentData.hitaTotal"></BaseCircle>
|
|
|
</div>
|
|
|
<div class="right-box-left">
|
|
|
- <BaseCircle circleId="hitachcc" chatName="HiTeach CC" :percent="10" subTitle="23" totalNum="0"></BaseCircle>
|
|
|
+ <BaseCircle circleId="hitachcc" chatName="HiTeach CC" :percent="equipmentData.ccPercent" :subTitle="equipmentData.ccOnline" totalNum="0"></BaseCircle>
|
|
|
</div>
|
|
|
</div>
|
|
|
</dv-border-box-11>
|
|
@@ -126,7 +127,7 @@
|
|
|
<div class="data-left">
|
|
|
<BaseCircle circleId="webirs" chatName="WebIRS" :percent="40" subTitle="45" totalNum="77"></BaseCircle>
|
|
|
</div> -->
|
|
|
- <barandLine ></barandLine>
|
|
|
+ <barandLine :baldata="baldatas"></barandLine>
|
|
|
</div>
|
|
|
<!-- <dv-decoration-2 :reverse="true" style="width:5px;height:95%;" :dur="5" /> -->
|
|
|
<!-- <div class="data-right">
|
|
@@ -145,7 +146,7 @@
|
|
|
<dv-border-box-12>
|
|
|
<div class="innerbox">
|
|
|
<p class="boxtitles">
|
|
|
- <span>课堂记录统计</span>
|
|
|
+ <span>{{$t('areaIot.classrank.title')}}</span>
|
|
|
<dv-decoration-3 style="width:200px;height:20px;"/>
|
|
|
</p>
|
|
|
<div class="barbox">
|
|
@@ -163,7 +164,7 @@
|
|
|
<dv-decoration-3 style="width:200px;height:20px;"/>
|
|
|
</p>
|
|
|
<div class="barbox">
|
|
|
- <Bar title="学期" :pieData="bars"></Bar>
|
|
|
+ <Bar title="学期" :cdata="bars"></Bar>
|
|
|
</div>
|
|
|
</div>
|
|
|
</dv-border-box-12>
|
|
@@ -180,7 +181,7 @@
|
|
|
import countTo from 'vue-count-to'
|
|
|
import BasePie from '@/components/echart/pie/index'
|
|
|
import YPie from './echarts/pie/index'
|
|
|
-import Bar from './echarts/bar/index'
|
|
|
+import Bar from './echarts/bar/bar'
|
|
|
import BaseCircle from "./echarts/circle/index";
|
|
|
import barandLine from './echarts/barandLine/barandLine'
|
|
|
export default {
|
|
@@ -200,39 +201,34 @@ export default {
|
|
|
month:null,
|
|
|
week:null,
|
|
|
day:null
|
|
|
- },
|
|
|
+ },
|
|
|
+ loading:false,
|
|
|
weekday: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
|
|
|
basicaList:[
|
|
|
// { title: '学校简码', icon: '#icon-xuanzexuexiao-01', value: 'hbcn', key: 'code' },
|
|
|
- { title: this.$t('schoolIot.basics.classnums'), icon: '#icon-shouhuifangzi', value: 65, key: 'roomnum' },
|
|
|
- { title: this.$t('schoolIot.basics.teachnums'), icon: '#icon-jiaoshijie', value: 158, key: 'teachnum' },
|
|
|
- { title: this.$t('schoolIot.basics.studentnums'), icon: '#icon-zongrenshu', value: 7603, key: 'studentnum' },
|
|
|
- { title: this.$t('schoolIot.basics.studentTime'), icon: '#icon-_shijian_xiaoshuai', value: 450, key: 'participationnum' },
|
|
|
- { title: this.$t('schoolIot.basics.classroomTotal'), icon: '#icon-ketang', value: 45, key: 'classnum' },
|
|
|
- { title: this.$t('schoolIot.basics.classroomTime'), icon: '#icon--shijian ', value: 648, key: 'classtime' },
|
|
|
+ { title: this.$t('schoolIot.basics.classnums'), icon: '#icon-shouhuifangzi', value: 0, key: 'roomnum',total:0 },
|
|
|
+ { title: this.$t('schoolIot.basics.teachnums'), icon: '#icon-jiaoshijie', value: 0, key: 'teachnum' ,total:0 },
|
|
|
+ { title: this.$t('schoolIot.basics.studentnums'), icon: '#icon-zongrenshu', value: 0, key: 'studentnum' ,total:0 },
|
|
|
+ { title: this.$t('schoolIot.basics.studentTime'), icon: '#icon-_shijian_xiaoshuai', value: 0, key: 'participationnum' },
|
|
|
+ { title: this.$t('schoolIot.basics.classroomTotal'), icon: '#icon-ketang', value: 0, key: 'classnum' },
|
|
|
+ { title: this.$t('schoolIot.basics.classroomTime'), icon: '#icon--shijian ', value:0, key: 'classtime' },
|
|
|
],
|
|
|
inuseList:[
|
|
|
- { title: this.$t('schoolIot.classrooming.taskNums'), value: 15, icon: 'iconfont icon-renwu',src:require("@/assets/image/iot/task.png"),class: 'task', textClass: 'task-text' },
|
|
|
- { title: this.$t('schoolIot.classrooming.productionNums'), value: 10, icon: 'iconfont icon-zuopinzhanshi',src:require("@/assets/image/iot/production.png"),class: 'accomplish', textClass: 'accomplish-text' },
|
|
|
- { title: this.$t('schoolIot.classrooming.topicNums'), value: 22, icon: 'iconfont icon-xingbiaoti-',src:require("@/assets/image/iot/exam.png"),class: 'topic', textClass: 'topic-text' },
|
|
|
- { title: this.$t('schoolIot.classrooming.interactionNums'), value: 58, icon: 'iconfont icon-hudongshequ',src:require("@/assets/image/iot/interact.png"),class: 'interaction', textClass: 'interaction-text' },
|
|
|
+ { title: this.$t('schoolIot.classrooming.taskNums'), value: 0, icon: 'iconfont icon-renwu',src:require("@/assets/image/iot/task.png"),class: 'task', textClass: 'task-text' },
|
|
|
+ { title: this.$t('schoolIot.classrooming.productionNums'), value: 0, icon: 'iconfont icon-zuopinzhanshi',src:require("@/assets/image/iot/production.png"),class: 'accomplish', textClass: 'accomplish-text' },
|
|
|
+ { title: this.$t('schoolIot.classrooming.topicNums'), value: 0, icon: 'iconfont icon-xingbiaoti-',src:require("@/assets/image/iot/exam.png"),class: 'topic', textClass: 'topic-text' },
|
|
|
+ { title: this.$t('schoolIot.classrooming.interactionNums'), value: 0, icon: 'iconfont icon-hudongshequ',src:require("@/assets/image/iot/interact.png"),class: 'interaction', textClass: 'interaction-text' },
|
|
|
],
|
|
|
config:{
|
|
|
- header: ['教师','学校','时间','科目'],
|
|
|
+ header: [this.$t('areaIot.classrank.schoolName'),this.$t('areaIot.classrank.teachNum'),this.$t('areaIot.classrank.classNum'),this.$t('areaIot.classrank.totalTime')],
|
|
|
data: [
|
|
|
- ['王老师','东城一小','72Min','语文'],
|
|
|
- ['李老师','锦江四小','32Min','数学'],
|
|
|
- ['金老师','川师附小','48Min','英语'],
|
|
|
- ['周老师','川师附小','54Min','数学'],
|
|
|
- ['郭老师','川师附小','22Min','音乐'],
|
|
|
- ['秦老师','锦江外国语小学','18Min','美术'],
|
|
|
- ['晓老师','锦江四小','72Min','英语'],
|
|
|
- ['车老师','锦江外国语小学','32Min','数学'],
|
|
|
- ['王老师','锦江外国语小学','48Min','英语'],
|
|
|
- ['李老师','锦江四小','54Min','语文'],
|
|
|
+ // ['王老师','东城一小','72Min','语文'],
|
|
|
+ // ['李老师','锦江四小','32Min','数学'],
|
|
|
+ // ['金老师','川师附小','48Min','英语'],
|
|
|
+ // ['周老师','川师附小','54Min','数学'],
|
|
|
],
|
|
|
index: true,
|
|
|
- indexHeader:'排名',
|
|
|
+ indexHeader:this.$t('areaIot.classrank.rank'),
|
|
|
// columnWidth: [200,200,200,200],
|
|
|
align: ['center'],
|
|
|
carousel: 'single',
|
|
@@ -267,9 +263,22 @@ export default {
|
|
|
],
|
|
|
bars:{
|
|
|
xdata:[this.$t('schoolIot.morphologyClass.cooperation'), this.$t('schoolIot.morphologyClass.interaction'), this.$t('schoolIot.morphologyClass.task'), this.$t('schoolIot.morphologyClass.differentiation'), this.$t('schoolIot.morphologyClass.examination')],
|
|
|
- value:[254, 3254, 1654, 2454, 757,]
|
|
|
+ value:[0, 0, 0, 0, 0,]
|
|
|
},
|
|
|
- locals:'',
|
|
|
+ locals: '',
|
|
|
+ //设备统计
|
|
|
+ equipmentData: {
|
|
|
+ hiteachTotal: "0",
|
|
|
+ hiteachOnline: "0",
|
|
|
+ hiteachPercent:0,
|
|
|
+ hitaTotal: "0",
|
|
|
+ hitaOnline: "0",
|
|
|
+ hitaPercent:0,
|
|
|
+ ccOnline: "0",
|
|
|
+ ccPercent:0,
|
|
|
+ },
|
|
|
+ schoolList: [],
|
|
|
+ baldatas: [],
|
|
|
}
|
|
|
},
|
|
|
mounted(){
|
|
@@ -277,7 +286,8 @@ export default {
|
|
|
},
|
|
|
created(){
|
|
|
this.locals=localStorage.local
|
|
|
- console.log(this.locals,'语言')
|
|
|
+ console.log(this.locals, '语言')
|
|
|
+ this.areaInit()
|
|
|
},
|
|
|
computed: {
|
|
|
schoolInfo() {
|
|
@@ -303,7 +313,133 @@ export default {
|
|
|
this.times.year = this.$tools.formatTime(new Date(), 'yyyy-MM-dd')
|
|
|
this.times.week = this.weekday[new Date().getDay()]
|
|
|
}, 1000)
|
|
|
- },
|
|
|
+ },
|
|
|
+ //获取数据
|
|
|
+ areaInit() {
|
|
|
+ let data = { areaId: sessionStorage.getItem('areaId') }
|
|
|
+ this.loading=true
|
|
|
+ // this.$api.iot.getAreaiot(data).then((res) => {
|
|
|
+ // console.log(res,'area back')
|
|
|
+ // })
|
|
|
+ this.$api.areaOverview.getoneselfArea(data).then((res) => {
|
|
|
+ console.log(res,'为取学校code')
|
|
|
+ res.state === 200 ? (this.schoolList=res.schoolInfos,this.getAreaiots()):''
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getAreaiots() {
|
|
|
+ let schoolcodeArr = []
|
|
|
+ this.schoolList.forEach((item) => {schoolcodeArr.push(item.id)})
|
|
|
+ let data = { schoolIds: schoolcodeArr }
|
|
|
+ this.$api.iot.getAreaiot(data).then((res) => {
|
|
|
+ console.log(res,'area iot back')
|
|
|
+ //header基础数据
|
|
|
+ let { classCnt, deviceAuthCnt,tmidCnt,teacherCnt, stuShow, studentCnt, stuLessonLengMin, lessonRecord, lessonLengMin } = res.area
|
|
|
+ this.basicaList[0].value = classCnt
|
|
|
+ this.basicaList[0].total = deviceAuthCnt
|
|
|
+ this.basicaList[1].value= tmidCnt
|
|
|
+ this.basicaList[1].total = teacherCnt
|
|
|
+ this.basicaList[2].value = stuShow
|
|
|
+ this.basicaList[2].total = studentCnt
|
|
|
+ this.basicaList[3].value = stuLessonLengMin
|
|
|
+ this.basicaList[4].value = lessonRecord
|
|
|
+ this.basicaList[5].value = lessonLengMin
|
|
|
+ //课中统计 和 设备统计
|
|
|
+ let { mission, missionFin, item, interact, htcDevTotalCnt, htcDevCnt, htaDevTotalCnt, htaDevCnt, htccDevCnt } = res.area
|
|
|
+ this.inuseList[0].value = mission
|
|
|
+ this.inuseList[1].value = missionFin
|
|
|
+ this.inuseList[2].value = item
|
|
|
+ this.inuseList[3].value = interact
|
|
|
+
|
|
|
+ this.equipmentData.hiteachTotal = htcDevTotalCnt.toString()
|
|
|
+ this.equipmentData.hiteachOnline = htcDevCnt.toString()
|
|
|
+ this.equipmentData.hiteachPercent=Math.round((htcDevCnt/htcDevTotalCnt)*100)
|
|
|
+ this.equipmentData.hitaTotal = htaDevTotalCnt.toString()
|
|
|
+ this.equipmentData.hitaOnline = htaDevCnt.toString()
|
|
|
+ this.equipmentData.hitaPercent=Math.round((htaDevCnt/htaDevTotalCnt)*100)
|
|
|
+ this.equipmentData.ccOnline = htccDevCnt.toString()
|
|
|
+ this.equipmentData.ccPercent = 100
|
|
|
+
|
|
|
+ //多型态课堂
|
|
|
+ let {lTypeCoop,lTypeIact,lTypeMis,lTypeDif,lTypeTst }=res.area
|
|
|
+ this.bars.value = [lTypeCoop, lTypeIact, lTypeMis, lTypeDif, lTypeTst]
|
|
|
+
|
|
|
+ //处理课堂及历程统计
|
|
|
+ let time = new Date()
|
|
|
+ let nowTime = this.timeCycle(time.toLocaleString('en-US',{hour12: false}).split(" "))
|
|
|
+ console.log(nowTime, '时间')
|
|
|
+ let startime = new Date(res.area.sdate);let targettime=new Date(res.area.edate)
|
|
|
+ let weekNum = this.calculateWeekNumber(startime, targettime)
|
|
|
+ console.log(weekNum, '第几周')
|
|
|
+ let totalData = []
|
|
|
+ for (let i = 1; i <= weekNum; i++){
|
|
|
+ totalData.push({week:i,class:0,works:0,topic:0,interaction:0,})
|
|
|
+ }
|
|
|
+ //循环数据
|
|
|
+ res.iotData.forEach(item => {
|
|
|
+ let times = new Date(item.year + '-' + item.month + '-' + item.day)
|
|
|
+ let returnWeek = this.calculateWeekNumber(startime, times)
|
|
|
+ let reresultIndex = totalData.findIndex((item) => { return item.week === returnWeek })
|
|
|
+ console.log(reresultIndex,'下标位置')
|
|
|
+ totalData[reresultIndex].class += item.lessonRecord
|
|
|
+ totalData[reresultIndex].works += item.missionFin
|
|
|
+ totalData[reresultIndex].topic += item.item
|
|
|
+ totalData[reresultIndex].interaction += item.interact
|
|
|
+ });
|
|
|
+ //处理成barandline需要的数据
|
|
|
+ let ultimatelyData = []
|
|
|
+ totalData.forEach((item) => {
|
|
|
+ let valueData=[item.class,item.works,item.topic,item.interaction]
|
|
|
+ ultimatelyData.push({name:item.week,value:valueData})
|
|
|
+ })
|
|
|
+ console.log(ultimatelyData, '最终数据')
|
|
|
+ this.baldatas = ultimatelyData
|
|
|
+
|
|
|
+ //处理学区课堂记录排名
|
|
|
+ let allSchool = res.school
|
|
|
+ let newArr = []
|
|
|
+ let arrsort = allSchool.sort((a, b) => b.lessonLengMin - a.lessonLengMin )
|
|
|
+ console.log(arrsort,'sort')
|
|
|
+ allSchool.forEach((item) => {
|
|
|
+ let arr = [item.schName, item.tmidCnt, item.classCnt,item.lessonLengMin]
|
|
|
+ newArr.push(arr)
|
|
|
+ })
|
|
|
+ console.log(newArr, '排行帮')
|
|
|
+ let newArrs={
|
|
|
+ header: [this.$t('areaIot.classrank.schoolName'),this.$t('areaIot.classrank.teachNum'),this.$t('areaIot.classrank.classNum'),this.$t('areaIot.classrank.totalTime')],
|
|
|
+ data: [],
|
|
|
+ index: true,
|
|
|
+ indexHeader:this.$t('areaIot.classrank.rank'),
|
|
|
+ // columnWidth: [200,200,200,200],
|
|
|
+ align: ['center'],
|
|
|
+ carousel: 'single',
|
|
|
+ headerBGC:'rgba(19, 25, 47, 0.6)',
|
|
|
+ oddRowBGC:'rgba(19, 25, 47, 0.6)',
|
|
|
+ evenRowBGC:'rgba(19, 25, 47, 0.6)',
|
|
|
+ waitTime:'4000'
|
|
|
+ }
|
|
|
+ newArrs.data=newArr
|
|
|
+ // this.config.data = newArr
|
|
|
+ this.config = newArrs
|
|
|
+ this.loading=false
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //时间转换
|
|
|
+ timeCycle(times) {
|
|
|
+ let time = times[1]
|
|
|
+ let mdy = times[0]
|
|
|
+ mdy = mdy.split('/')
|
|
|
+ let month = parseInt(mdy[0]);
|
|
|
+ let day = parseInt(mdy[1]);
|
|
|
+ let year = parseInt(mdy[2])
|
|
|
+ return year + '-' + month + '-' + day
|
|
|
+ },
|
|
|
+ //处理时间问题
|
|
|
+ calculateWeekNumber(startDate, targetDate) {
|
|
|
+ const oneDay = 24 * 60 * 60 * 1000; // 一天的毫秒数
|
|
|
+ const daysPassed = Math.round((targetDate - startDate) / oneDay);
|
|
|
+ const weekNumber = Math.ceil((daysPassed + startDate.getDay() + 1) / 7);
|
|
|
+ return weekNumber;
|
|
|
+ },
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
@@ -335,7 +471,7 @@ export default {
|
|
|
background-repeat: no-repeat;
|
|
|
}
|
|
|
.title-textbox{
|
|
|
- font-size: 28px;
|
|
|
+ font-size: 24px;
|
|
|
font-weight: bold;
|
|
|
position: absolute;
|
|
|
letter-spacing: 3px;
|
|
@@ -348,7 +484,8 @@ export default {
|
|
|
bottom: 15px;
|
|
|
left: 50%;
|
|
|
transform: translate(-50%);
|
|
|
- width: 80%;
|
|
|
+ width: 100%;
|
|
|
+ line-height: 24px;
|
|
|
}
|
|
|
.schooliotbox .dv-dec-10{
|
|
|
width:33.3%;
|