|
@@ -68,23 +68,23 @@
|
|
|
<Row>
|
|
|
<Col :span="5" style="text-align: center;">
|
|
|
<span style="color: #94998a;">{{$t('schoolMgmt.block1Title1')}}</span>
|
|
|
- <h5 style="font-size: 2em;color: #FAFAFA;font-weight: 100;">4 <small>(36%)</small></h5>
|
|
|
+ <h5 style="font-size: 2em;color: #FAFAFA;font-weight: 100;">{{classCount.activeCount}} <small>({{classCount.activeCount/classCount.total | percentFormat(0)}}%)</small></h5>
|
|
|
</Col>
|
|
|
<Col :span="5" style="text-align: center;">
|
|
|
<span style="color: #94998a;">{{$t('schoolMgmt.block1Title2')}}</span>
|
|
|
- <h5 style="font-size: 2em;color: #FAFAFA;font-weight: 100;">1 <small>(9%)</small></h5>
|
|
|
+ <h5 style="font-size: 2em;color: #FAFAFA;font-weight: 100;">{{classCount.failCount}} <small>({{classCount.failCount/classCount.total | percentFormat(0)}}%)</small></h5>
|
|
|
</Col>
|
|
|
<Col :span="5" style="text-align: center;">
|
|
|
<span style="color: #94998a;">{{$t('schoolMgmt.block1Title3')}}</span>
|
|
|
- <h5 style="font-size: 2em;color: #FAFAFA;font-weight: 100;">3 <small>(27%)</small></h5>
|
|
|
+ <h5 style="font-size: 2em;color: #FAFAFA;font-weight: 100;">{{classCount.updateCount}} <small>({{classCount.updateCount/classCount.total | percentFormat(0)}}%)</small></h5>
|
|
|
</Col>
|
|
|
<Col :span="5" style="text-align: center;">
|
|
|
<span style="color: #94998a;">{{$t('schoolMgmt.block1Title4')}}</span>
|
|
|
- <h5 style="font-size: 2em;color: #FAFAFA;font-weight: 100;">18 <small>(77%)</small></h5>
|
|
|
+ <h5 style="font-size: 2em;color: #FAFAFA;font-weight: 100;">{{classCount.loginCount}} <small>({{classCount.loginCount/classCount.total | percentFormat(0)}}%)</small></h5>
|
|
|
</Col>
|
|
|
<Col :span="4" style="text-align: center;">
|
|
|
<span style="color: #94998a;">{{$t('schoolMgmt.block1Title5')}}</span>
|
|
|
- <h5 style="font-size: 2em;color: #FAFAFA;font-weight: 100;">11</h5>
|
|
|
+ <h5 style="font-size: 2em;color: #FAFAFA;font-weight: 100;">{{classCount.total}}</h5>
|
|
|
</Col>
|
|
|
</Row>
|
|
|
</div>
|
|
@@ -92,7 +92,7 @@
|
|
|
</div>
|
|
|
<div style="height: 40%;width:100%;position: relative;overflow: auto;">
|
|
|
<div class="scrollstyle" style="position: absolute;right: 0px;left: 0;top: 0;bottom: 0;overflow-x: hidden;overflow-y: auto;">
|
|
|
- <div class="classInfo" v-for="(item, index) in classInfoData" :key="index">
|
|
|
+ <div class="classInfo" v-for="(item, index) in classInfo" :key="index">
|
|
|
<Row type="flex" justify="center" align="bottom" style="border-bottom: solid 1px #94998a;padding-bottom: 7px;">
|
|
|
<Col :span="15">
|
|
|
<h5>{{ item.groupNum }}, {{item.groupName}}</h5>
|
|
@@ -131,25 +131,25 @@
|
|
|
<Col :span="9" class="info-col-main">
|
|
|
<div class="info-col-content">
|
|
|
<span>{{ $t('schoolMgmt.block2Title1')}}</span><br/><small>{{ $t('schoolMgmt.block2SubTitle1')}}</small>
|
|
|
- <h5>8<small>/9</small></h5>
|
|
|
+ <h5>{{hiTeachACT.today}}<small>/{{hiTeachACT.yesterday}}</small></h5>
|
|
|
</div>
|
|
|
</Col>
|
|
|
<Col :span="5" class="info-col-secondary">
|
|
|
<div class="info-col-content border-right">
|
|
|
<br/><small>{{ $t('schoolMgmt.block2SubTitle2')}}</small>
|
|
|
- <h5>8</h5>
|
|
|
+ <h5>{{hiTeachACT.weekAgoAVG}}</h5>
|
|
|
</div>
|
|
|
</Col>
|
|
|
<Col :span="5" class="info-col-secondary">
|
|
|
<div class="info-col-content border-right">
|
|
|
<br/><small>{{ $t('schoolMgmt.block2SubTitle3')}}</small>
|
|
|
- <h5>8</h5>
|
|
|
+ <h5>{{hiTeachACT.mounthAgoAVG}}</h5>
|
|
|
</div>
|
|
|
</Col>
|
|
|
<Col :span="5" class="info-col-secondary">
|
|
|
<div class="info-col-content">
|
|
|
<br/><small>{{ $t('schoolMgmt.block2SubTitle4')}}</small>
|
|
|
- <h5>8</h5>
|
|
|
+ <h5>{{hiTeachACT.semesterAVG}}</h5>
|
|
|
</div>
|
|
|
</Col>
|
|
|
</Row>
|
|
@@ -166,25 +166,25 @@
|
|
|
<Col :span="9" class="info-col-main">
|
|
|
<div class="info-col-content">
|
|
|
<span>{{ $t('schoolMgmt.block2Title2')}}</span><br/><small>{{ $t('schoolMgmt.block2SubTitle1')}}</small>
|
|
|
- <h5>54<small>/65</small></h5>
|
|
|
+ <h5>{{courseACT.today}}<small>/{{courseACT.yesterday}}</small></h5>
|
|
|
</div>
|
|
|
</Col>
|
|
|
<Col :span="5" class="info-col-secondary">
|
|
|
<div class="info-col-content border-right">
|
|
|
<br/><small>{{ $t('schoolMgmt.block2SubTitle2')}}</small>
|
|
|
- <h5>61.2</h5>
|
|
|
+ <h5>{{courseACT.weekAgoAVG}}</h5>
|
|
|
</div>
|
|
|
</Col>
|
|
|
<Col :span="5" class="info-col-secondary">
|
|
|
<div class="info-col-content border-right">
|
|
|
<br/><small>{{ $t('schoolMgmt.block2SubTitle3')}}</small>
|
|
|
- <h5>58.9</h5>
|
|
|
+ <h5>{{courseACT.mounthAgoAVG}}</h5>
|
|
|
</div>
|
|
|
</Col>
|
|
|
<Col :span="5" class="info-col-secondary">
|
|
|
<div class="info-col-content">
|
|
|
<br/><small>{{ $t('schoolMgmt.block2SubTitle4')}}</small>
|
|
|
- <h5>53.1</h5>
|
|
|
+ <h5>{{courseACT.semesterAVG}}</h5>
|
|
|
</div>
|
|
|
</Col>
|
|
|
</Row>
|
|
@@ -201,25 +201,25 @@
|
|
|
<Col :span="9" class="info-col-main">
|
|
|
<div class="info-col-content">
|
|
|
<span>{{ $t('schoolMgmt.block2Title3')}}</span><br/><small>{{ $t('schoolMgmt.block2SubTitle1')}}</small>
|
|
|
- <h5>1,892<small>/2,863</small></h5>
|
|
|
+ <h5>{{participants.today}}<small>/{{participants.yesterday}}</small></h5>
|
|
|
</div>
|
|
|
</Col>
|
|
|
<Col :span="5" class="info-col-secondary">
|
|
|
<div class="info-col-content border-right">
|
|
|
<br/><small>{{ $t('schoolMgmt.block2SubTitle2')}}</small>
|
|
|
- <h5>2,542</h5>
|
|
|
+ <h5>{{participants.weekAgoAVG}}</h5>
|
|
|
</div>
|
|
|
</Col>
|
|
|
<Col :span="5" class="info-col-secondary">
|
|
|
<div class="info-col-content border-right">
|
|
|
<br/><small>{{ $t('schoolMgmt.block2SubTitle3')}}</small>
|
|
|
- <h5>2,301</h5>
|
|
|
+ <h5>{{participants.mounthAgoAVG}}</h5>
|
|
|
</div>
|
|
|
</Col>
|
|
|
<Col :span="5" class="info-col-secondary">
|
|
|
<div class="info-col-content">
|
|
|
<br/><small>{{ $t('schoolMgmt.block2SubTitle4')}}</small>
|
|
|
- <h5>2,436</h5>
|
|
|
+ <h5>{{participants.semesterAVG}}</h5>
|
|
|
</div>
|
|
|
</Col>
|
|
|
</Row>
|
|
@@ -548,61 +548,11 @@ import RingPie from '@/components/schoolMgmtDashboard/RingPie'
|
|
|
import LegendPie from '@/components/schoolMgmtDashboard/LegendPie'
|
|
|
import ClassLine from '@/components/schoolMgmtDashboard/ClassLine'
|
|
|
import ClassBar from '@/components/schoolMgmtDashboard/ClassBar'
|
|
|
-
|
|
|
+import { mapState } from 'vuex'
|
|
|
export default {
|
|
|
name:'smart-dashboard',
|
|
|
data () {
|
|
|
return {
|
|
|
- classInfoData:[
|
|
|
- {
|
|
|
- groupNum: 'GE305', // 教室代號
|
|
|
- groupName: this.$t('schoolMgmt.text1') + '3', // 教室名稱
|
|
|
- groupTotal: 50, // 上課人數
|
|
|
- system: 'Hiteach 3 TBL', // 使用版本
|
|
|
- serialExp: '2021-09-30', // 序號到期時間
|
|
|
- whiteBoardDriver: 'HBI082', // 電子白板資訊
|
|
|
- IRSDriver: 'RF05H', // IRS資訊
|
|
|
- teacher:{ // 教師資訊
|
|
|
- name: 'picc',
|
|
|
- id: 'picc#1234'
|
|
|
- },
|
|
|
- mode: 0, // 0:未啟動,1: 運行中, 2: 報修中
|
|
|
- usetime: '--:--:--', // 使用時間
|
|
|
- hot: 7 // 教室熱度
|
|
|
- },
|
|
|
- {
|
|
|
- groupNum: 'GE305', // 教室代號
|
|
|
- groupName: this.$t('schoolMgmt.text1') + '3', // 教室名稱
|
|
|
- groupTotal: 50, // 上課人數
|
|
|
- system: 'Hiteach 3 TBL', // 使用版本
|
|
|
- serialExp: '2021-09-30', // 序號到期時間
|
|
|
- whiteBoardDriver: 'HBI082', // 電子白板資訊
|
|
|
- IRSDriver: 'RF05H', // IRS資訊
|
|
|
- teacher:{ // 教師資訊
|
|
|
- name: 'picc',
|
|
|
- id: 'picc#1234'
|
|
|
- },
|
|
|
- mode: 1, // 0:未啟動,1: 運行中, 2: 報修中
|
|
|
- usetime: ' 00:45:03', // 使用時間
|
|
|
- hot: 7 // 教室熱度
|
|
|
- },
|
|
|
- {
|
|
|
- groupNum: 'GE305', // 教室代號
|
|
|
- groupName: this.$t('schoolMgmt.text1') + '3', // 教室名稱
|
|
|
- groupTotal: 50, // 上課人數
|
|
|
- system: 'Hiteach 3 TBL', // 使用版本
|
|
|
- serialExp: '2021-09-30', // 序號到期時間
|
|
|
- whiteBoardDriver: 'HBI082', // 電子白板資訊
|
|
|
- IRSDriver: 'RF05H', // IRS資訊
|
|
|
- teacher:{ // 教師資訊
|
|
|
- name: 'picc',
|
|
|
- id: 'picc#1234'
|
|
|
- },
|
|
|
- mode: 2, // 0:未啟動,1: 運行中, 2: 報修中
|
|
|
- usetime: '--:--:--', // 使用時間
|
|
|
- hot: 7 // 教室熱度
|
|
|
- },
|
|
|
- ],
|
|
|
scolBeg:{
|
|
|
percent: '',
|
|
|
today: '',
|
|
@@ -656,11 +606,25 @@ export default {
|
|
|
]
|
|
|
}
|
|
|
},
|
|
|
- components:{
|
|
|
- LegendPie,
|
|
|
- RingPie,
|
|
|
- ClassBar,
|
|
|
- ClassLine
|
|
|
+ computed:{
|
|
|
+ ...mapState({
|
|
|
+ schoolData: state => state.schoolMgmt.data,
|
|
|
+ }),
|
|
|
+ classCount(){ // 教室總數
|
|
|
+ return this.schoolData.classCount
|
|
|
+ },
|
|
|
+ classInfo(){ // 開啟教室資訊
|
|
|
+ return this.schoolData.classInfo
|
|
|
+ },
|
|
|
+ hiTeachACT(){ //教室開機數
|
|
|
+ return this.schoolData.hiTeachACT
|
|
|
+ },
|
|
|
+ courseACT(){ // 課堂開機數
|
|
|
+ return this.schoolData.courseACT
|
|
|
+ },
|
|
|
+ participants(){ //課堂參與人數
|
|
|
+ return this.schoolData.participants
|
|
|
+ },
|
|
|
},
|
|
|
methods:{
|
|
|
pieHeightLight: function(type, value) {
|
|
@@ -728,10 +692,30 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
+ filters: {
|
|
|
+ commaFormat: function(value) { // 加上千分位符號
|
|
|
+ return value.toString().replace(/^(-?\d+?)((?:\d{3})+)(?=\.\d+$|$)/, function (all, pre, groupOf3Digital) {
|
|
|
+ return pre + groupOf3Digital.replace(/\d{3}/g, ',$&');
|
|
|
+ })
|
|
|
+ },
|
|
|
+ percentFormat: function(num, pos){
|
|
|
+ return (num* 100).toFixed(pos)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ components:{
|
|
|
+ LegendPie,
|
|
|
+ RingPie,
|
|
|
+ ClassBar,
|
|
|
+ ClassLine
|
|
|
+ },
|
|
|
created(){
|
|
|
- this.$api.ClassMgmt.GetTestData('234234');
|
|
|
+ let _this = this;
|
|
|
+ this.$api.SchoolMgmt.GetTestIoTData({}).then(res => {
|
|
|
+ _this.$store.state.schoolMgmt.data = res
|
|
|
+ })
|
|
|
},
|
|
|
mounted(){
|
|
|
+ console.log(this.schoolData)
|
|
|
var c=document.getElementById("floorplan");
|
|
|
var ctx=c.getContext("2d");
|
|
|
var img=document.getElementById("planImg");
|