[學校管理儀錶板] 資料格式調整

TEAMModelOS/ClientApp/components/schoolmgmtdashboard/ClassBar.vue

@@ -14,159 +14,182 @@ export default {
         type: String
       },
       todayData:{
-        type: Object,
-        default: function(){
-          let demo = {};
-          demo[this.$t('schoolMgmt.text16')] = 9
-          demo[this.$t('schoolMgmt.text17')] = 11
-          demo[this.$t('schoolMgmt.text18')] = 16
-          demo[this.$t('schoolMgmt.text19')] = 6
-          demo[this.$t('schoolMgmt.text20')] = 13
-          demo[this.$t('schoolMgmt.text21')] = 22
-          return demo
-        }
       },
       lastWeekData:{
-        type: Object,
-        default: function(){
-          let demo = {};
-          demo[this.$t('schoolMgmt.text16')] = 5
-          demo[this.$t('schoolMgmt.text17')] = 7
-          demo[this.$t('schoolMgmt.text18')] = 12
-          demo[this.$t('schoolMgmt.text19')] = 1
-          demo[this.$t('schoolMgmt.text20')] = 2
-          demo[this.$t('schoolMgmt.text21')] = 24
-          return demo
-        }
       },
       callBack: {
         type: String
       }
     },
-    mounted(){
-        this.drawLine();
+    watch: {
+      todayData(val) {
+        if(val != null)
+          this.drawLine()
+      }
     },
     methods:{
-        drawLine(){
-            let _this = this
-            // 取得Y軸Label
-            let yLabel = Object.keys(this.todayData);
-            let todayDataArray = [];
-            let lastWeekDataArray = [];
+      drawLine(){
+          let _this = this
+          if(this.todayData == null) return false;
+          Object.keys(this.lastWeekData).forEach(function(item){
+            if(_this.isInteger(item)){
+              let newKey = _this.$t('schoolMgmt.grade'+ item);
+              _this.lastWeekData[newKey] = _this.lastWeekData[item];
+              delete _this.lastWeekData[item];
+            }            
+          })
 
-            // 今日資料
-            yLabel.map(function(key) {
-              todayDataArray.push(_this.todayData[key]);
-            });
-            // 上週資料
-            yLabel.map(function(key) {
-              lastWeekDataArray.push(_this.lastWeekData[key]);
-            });
+          Object.keys(this.todayData).forEach(function(item){
+            if(_this.isInteger(item)){
+              let newKey = _this.$t('schoolMgmt.grade'+ item);
+              _this.todayData[newKey] = _this.todayData[item];
+              delete _this.todayData[item];
+            }
+          })
 
-            // 基于准备好的dom，初始化echarts实例
-            this.myChart = this.$echarts.init(document.getElementById(this.id));
-            this.myChart.setOption({
-              backgroundColor: '#343a4073',
-              tooltip: {
-                trigger: 'axis',
-                axisPointer: {
-                  type: 'shadow'
-                },
-                // formatter: function(params){
-                //   // 故意開啟 但不設定使ToolTip 沒有彈跳的作用 但有Hover 功能
-                // }
-              },
-              grid: {
-                left: '5%',
-                right: '0',
-                bottom: '0',
-                top:'0',
-                containLabel: true
+          // 取得Y軸Label
+          let lastWeekKeys = Object.keys(this.lastWeekData);
+          let todayKeys = Object.keys(this.todayData);
+          let yLabel = lastWeekKeys;
+          
+          if(lastWeekKeys.length < todayKeys.length){
+            yLabel = todayKeys;
+          }
+
+          let todayDataArray = [];
+          let lastWeekDataArray = [];
+
+          // 今日資料
+          yLabel.map(function(key) {
+            todayDataArray.push(_this.todayData[key]);
+          });
+          // 上週資料
+          yLabel.map(function(key) {
+            lastWeekDataArray.push(_this.lastWeekData[key]);
+          });
+
+          // 基于准备好的dom，初始化echarts实例
+          this.myChart = this.$echarts.init(document.getElementById(this.id));
+          this.myChart.setOption({
+            backgroundColor: '#343a4073',
+            tooltip: {
+              trigger: 'axis',
+              axisPointer: {
+                type: 'shadow'
               },
-              xAxis: {
-                type: 'value',
-                boundaryGap: false,
-                axisLabel: {
-                    inside: true,
+              // formatter: function(params){
+              //   // 故意開啟 但不設定使ToolTip 沒有彈跳的作用 但有Hover 功能
+              // }
+            },
+            legend: {
+                    icon: 'circle',
+                    itemWidth: 20,
+                    itemHeight: 10,
+                    itemGap: 10,
+                    top: '0.5%',
+                    right: '4%',
                     textStyle: {
-                        color:'transparent'
+                        fontSize: 12,
+                        color: '#ffffff'
                     }
                 },
-                splitLine: {
-                    show: true,
-                    lineStyle: {
-                        color: 'rgba(185, 193, 173, 0.63)'
-                    }
-                }
-              },
-              yAxis: {
-                type: 'category',
-                axisLabel: {
+            grid: {
+              left: '5%',
+              right: '0',
+              bottom: '0',
+              top:'0',
+              containLabel: true
+            },
+            xAxis: {
+              type: 'value',
+              boundaryGap: false,
+              axisLabel: {
+                  inside: true,
                   textStyle: {
-                    fontSize: 12,
-                    color: '#94998a'
+                      color:'transparent'
                   }
-                },
-                splitLine: {
-                  lineStyle: {
-                    color: 'rgba(185, 193, 173, 0.63)',
-                  },
-                  show: true
-                },
-                axisLine: {
+              },
+              splitLine: {
+                  show: true,
                   lineStyle: {
-                    color: 'rgba(185, 193, 173, 0.63)',
-                    width: 1,
+                      color: 'rgba(185, 193, 173, 0.63)'
                   }
+              }
+            },
+            yAxis: {
+              type: 'category',
+              axisLabel: {
+                textStyle: {
+                  fontSize: 12,
+                  color: '#94998a'
+                }
+              },
+              splitLine: {
+                lineStyle: {
+                  color: 'rgba(185, 193, 173, 0.63)',
                 },
-                data: yLabel,
+                show: true
               },
-              series: [
-                {
-                  name: 'today',
-                  type: 'bar',
-                  data: todayDataArray,
-                  barWidth: 15, //柱子宽度
-                  itemStyle: {
-                    normal: {  //渐变色
-                      color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-                        offset: 0,
-                        color: "rgba(28, 208, 161, 1)" // 0% 处的颜色
-                      },{
-                        offset: 1,
-                        color: "rgba(28, 208, 161, 0.5)" // 100% 处的颜色
-                      }], false)
-                    }
+              axisLine: {
+                lineStyle: {
+                  color: 'rgba(185, 193, 173, 0.63)',
+                  width: 1,
+                }
+              },
+              data: yLabel,
+            },
+            series: [
+              {
+                name: _this.$t('schoolMgmt.today'),
+                type: 'bar',
+                data: todayDataArray,
+                barWidth: 13, //柱子宽度
+                itemStyle: {
+                  normal: {  //渐变色
+                    color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                      offset: 0,
+                      color: "rgba(28, 208, 161, 1)" // 0% 处的颜色
+                    },{
+                      offset: 1,
+                      color: "rgba(28, 208, 161, 0.5)" // 100% 处的颜色
+                    }], false)
                   }
-                },
-                {
-                  name: 'lastWeek',
-                  type: 'bar',
-                  data: lastWeekDataArray,
-                  barWidth: 15, //柱子宽度
-                  itemStyle: {
-                    normal: {  //渐变色
-                      color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-                        offset: 0,
-                        color: "rgba(228, 233, 220, 1)" // 0% 处的颜色
-                      },{
-                        offset: 1,
-                        color: "rgba(228, 233, 220, 0.5)" // 100% 处的颜色
-                      }], false)
-                    }
+                }
+              },
+              {
+                name: _this.$t('schoolMgmt.lastweek'),
+                type: 'bar',
+                data: lastWeekDataArray,
+                barWidth: 13, //柱子宽度
+                itemStyle: {
+                  normal: {  //渐变色
+                    color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                      offset: 0,
+                      color: "rgba(228, 233, 220, 1)" // 0% 处的颜色
+                    },{
+                      offset: 1,
+                      color: "rgba(228, 233, 220, 0.5)" // 100% 处的颜色
+                    }], false)
                   }
                 }
-              ]
-            })
-            //highlight觸發項
-            this.myChart.on('highlight', function (params) {
-              _this.$emit('highLightInfo', {'id': yLabel[params.batch[0].dataIndex], 'today': todayDataArray[params.batch[0].dataIndex], 'lastWeek': lastWeekDataArray[params.batch[1].dataIndex]});            
-            });            
-            this.myChart.on('downplay', function (params) {            
-              _this.$emit('downplay', yLabel[params.batch[0].dataIndex])
-            });
-        }
-    }
+              }
+            ]
+          })
+          //highlight觸發項
+          this.myChart.on('highlight', function (params) {
+            _this.$emit('highLightInfo', {'id': yLabel[params.batch[0].dataIndex], 'today': todayDataArray[params.batch[0].dataIndex], 'lastWeek': lastWeekDataArray[params.batch[1].dataIndex]});            
+          });            
+          this.myChart.on('downplay', function (params) {            
+            _this.$emit('downplay', yLabel[params.batch[0].dataIndex])
+          });
+      },
+      isInteger(obj) {
+        return typeof parseInt(obj) === 'number' && obj%1 === 0
+      }
+    },
+    mounted(){
+      this.drawLine();
+    },
 }
 
 </script>

TEAMModelOS/ClientApp/components/schoolmgmtdashboard/Classline.vue

@@ -10,18 +10,29 @@ export default {
     props:{
         id:{
             type: String
-        }
+        },
+        time:{
+            type: Array
+        },
+        data:{
+            type: Array
+        },
     },
     mounted(){
         this.drawLine();
     },
+    watch: {
+        data() {
+            this.drawLine()
+        }
+    },
     methods:{
         drawLine(){
             let _this = this
             // 基于准备好的dom，初始化echarts实例
             let myChart = this.$echarts.init(document.getElementById(this.id));
-            let arrlabel = ["","00:00", "01:00", "02:00", "03:00", "04:00", "05:00", "06:00", "07:00", "08:00", "09:00", "10:00", "11:00", "12:00", "13:00", "14:00", "15:00", "16:00", "17:00", "18:00", "19:00", "20:00", "21:00", "22:00", "23:00", "24:00", ""];
-            let arrTotal = ["0","0", "0", "0", "0", "0", "10", "20", "30", "25", "35", "40", "60", "10", "0", "20", "30", "60", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0"];
+            let arrlabel = this.time;
+            let arrTotal = this.data;
             myChart.setOption({
                 backgroundColor: 'rgba(17, 17, 17, 0.14)',
                 tooltip: {
@@ -60,7 +71,7 @@ export default {
                             color: '#94998a'
                         }
                     },
-                    boundaryGap: false,
+                    boundaryGap: true,
                     splitLine: {
                         lineStyle: {
                             color: 'rgba(185, 193, 173, 0.63)',

TEAMModelOS/ClientApp/components/schoolmgmtdashboard/RingPie.vue

@@ -9,6 +9,7 @@ export default {
             mychat: '',
             total: 0,
             heightlightIndex: 0,
+            data:[],
         }
     },
     props:{
@@ -16,16 +17,15 @@ export default {
             type: String
         },
         pieData:{
-            type: Array,
+            type: Object,
             default: function(){
-                return [
-                    {value:335, name:'新增檔案'},
-                    {value:310, name:'書面問答'},
-                    {value:234, name:'匯入.pptx'},
-                    {value:135, name:'PowerClick'},
-                    {value:1548, name:'開啟.hte'},
-                    {value:123, name:'其他'},
-                ]
+                return {
+                    "1": 0, // 一年級
+                    "2": 0, // 二年級
+                    "3": 0,
+                    "4": 0,
+                    "5": 0,
+                }
             },
         },
         defaultActive: {
@@ -54,13 +54,22 @@ export default {
         this.drawLine();
     },
     created(){
-        this.pieData.forEach(item => {
-            this.total += item.value
-        });
+    },
+    watch: {
+        pieData() {
+            this.drawLine()
+        }
     },
     methods:{
         drawLine(){
-            let _this = this
+            let _this = this;
+            this.data = [];
+            Object.keys(this.pieData).forEach(function(key) {
+                _this.data.push({'name': key, 'value': _this.pieData[key]})
+            });
+            this.data.forEach(item => {
+                _this.total += item.value
+            });
             // 基于准备好的dom，初始化echarts实例
             this.myChart = this.$echarts.init(document.getElementById(this.id));
             this.myChart.setOption({                
@@ -101,7 +110,7 @@ export default {
                                 show: false
                             }
                         },
-                        data: _this.pieData,
+                        data: _this.data,
                         itemStyle: _this.singleColor ? {
                             emphasis: {
                                 color: '#1CD0A1',
@@ -112,7 +121,7 @@ export default {
             });
             // mouseover觸發項
             this.myChart.on('mouseover', function (params) {
-                if(_this.pieData[_this.heightlightIndex].name != params.name){
+                if(_this.data[_this.heightlightIndex].name != params.name){
                     _this.myChart.dispatchAction({
                         type: 'downplay',
                         dataIndex: _this.heightlightIndex,
@@ -121,9 +130,11 @@ export default {
                 _this.$emit('highLightInfo', params);
             });
             if(this.defaultActive){
-                // 預設先給第一筆初始值
-                let now = this.pieData[0].value;
-                let params = {'value': this.pieData[0].value, 'name': this.pieData[0].name,'percent': Number((now/this.total)*100).toFixed(2)}
+                if(this.data.length == 0) return false;
+                // 預設先給第一筆初始值                
+                let now = this.data[0].value;
+                let name = this.data[0].name == 'Other' ? this.$t('schoolMgmt.Other') : this.data[0].name == 'UnKnown' ? this.$t('schoolMgmt.Other') : this.data[0].name;
+                let params = {'value': this.data[0].value, 'name': name ,'percent': Number((now/this.total)*100).toFixed(2)}
                 this.$emit('extraInfo', params);            
                 this.$emit('highLightInfo', params);  
                 // 預設第一個
@@ -136,7 +147,7 @@ export default {
         // 供外部呼叫用
         heightlight: function(dName){    
             let _this = this;
-            if(this.pieData[this.heightlightIndex].name != dName){
+            if(this.data[this.heightlightIndex].name != dName){
                 this.myChart.dispatchAction({
                     type: 'downplay',
                     dataIndex: _this.heightlightIndex,
@@ -148,7 +159,7 @@ export default {
                 name: dName
             });
             let now = 0;
-            this.pieData.forEach(item => {
+            this.data.forEach(item => {
                 if(item.name == dName){
                     now = item.value
                 }

TEAMModelOS/ClientApp/locale/lang/en-US/schoolMgmt.js

@@ -20,6 +20,9 @@ export default {
   block2SubTitle3: 'Month Avg',
   block2SubTitle4: 'SEM. Avg',
   block2SubTitle5: 'Hour(s)',
+  block2SubTitle6: 'Week Ttl',
+  block2SubTitle7: 'Month Ttl',
+  block2SubTitle8: 'SEM. Ttl',
   block3Title1: 'HiTeach Software',
   block3Title2: 'Course Percentage in grades',
   block3Title3: 'Course Status in grades',
@@ -27,7 +30,7 @@ export default {
   block3SubTitle2: 'Avg courses (Last week)',
   block3SubTitle3: 'Course Percentage',
   block4Title1: 'Accumulation Hour(s)',
-  block4Title2: 'HiTeach Software',
+  block4Title2: '蘇格拉底議課APP授權狀態',
   block4Title3: 'Operation System',
   block4SubTitle1: 'Total',
   block4SubTitle2: 'Accumulation',
@@ -40,26 +43,28 @@ export default {
   block4SubTitle9: 'Total Time',
   block4SubTitle10: 'Course Efficiency',
   block4SubTitle11: 'Course Efficiency Avg',
+  grade1: '1st Grade',
+  grade2: '2nd Grade',
+  grade3: '3rd Grade',
+  grade4: '4th Grade',
+  grade5: '5th Grade',
+  grade6: '6th Grade',
+  grade7: '7th Grade',
+  grade8: '8th Grade',
+  grade9: '9th Grade',
+  grade10: '10th Grade',
+  grade11: '11th Grade',
+  grade12: '12th Grade',
+  blankPageAdd: 'Open File',
+  selfpace: 'Q&A',
+  pptImport: '.pptx',
+  powerclick: 'PowerClick',
+  hteOpen: '.hte',
+  Other: 'Other',
+  today: 'Today',
+  lastweek: '7 days ago',
   text1: 'GE Classroom(s)',
   text2: 'S/N Expiration',
   text3: 'Total Courses (D)',
-  text4: '1st Grade',
-  text5: '2nd Grade',
-  text6: '3rd Grade',
-  text7: '4th Grade',
-  text8: '5th Grade',
-  text9: '6th Grade',
-  text10: 'Open File',
-  text11: 'Q&A',
-  text12: '.pptx',
-  text13: 'PowerClick',
-  text14: '.hte',
-  text15: 'Other',
-  text16: '1st Grade',
-  text17: '2nd Grade',
-  text18: '3rd Grade',
-  text19: '4th Grade',
-  text20: '5th Grade',
-  text21: '6th Grade',
   }
   

TEAMModelOS/ClientApp/locale/lang/zh-CN/schoolMgmt.js

@@ -20,14 +20,17 @@ export default {
     block2SubTitle3: '前30日平均',
     block2SubTitle4: '学期平均',
     block2SubTitle5: '今日使用时数',
+    block2SubTitle6: '前7日总数',
+    block2SubTitle7: '前30日总数',
+    block2SubTitle8: '学期总数',
     block3Title1: '今日智慧教室启用类型',
-    block3Title2: '今日各版本教室开课状态',
-    block3Title3: '各年级开课状态',
+    block3Title2: '智慧教室版本分布状态',
+    block3Title3: '各年级课堂总数',
     block3SubTitle1: '今日开课堂数',
     block3SubTitle2: '上週均课堂数',
     block3SubTitle3: '今日开课百分比',
-    block4Title1: '累计教堂时数',
-    block4Title2: '智慧教室版本',
+    block4Title1: '累计课堂时数',
+    block4Title2: '苏格拉底议课APP授权状态',
     block4Title3: '课堂作业系统',
     block4SubTitle1: '总计',    
     block4SubTitle2: '累计',
@@ -40,25 +43,27 @@ export default {
     block4SubTitle9: '累计课堂时数',
     block4SubTitle10: '最高单堂效率值',
     block4SubTitle11: '平均课堂效率值',
+    grade1: '一年级',
+    grade2: '二年级',
+    grade3: '三年级',
+    grade4: '四年级',
+    grade5: '五年级',
+    grade6: '六年级',
+    grade7: '七年级',
+    grade8: '八年级',
+    grade9: '九年级',
+    grade10: '十年级',
+    grade11: '十一年级',
+    grade12: '十二年级',
+    selfpace: '书面问答',
+    blankPageAdd: '新增档案',
+    pptImport: '汇入.pptx',
+    powerclick: 'PowerClick',
+    hteOpen: '开启.hte',
+    Other: '其他',
+    today: '今天',
+    lastweek: '前七天',
     text1: '通识教室',
-    text2: '序号使用至',
+    text2: '授权至',
     text3: '今日总课堂数',
-    text4: '一年级开课数',
-    text5: '二年级开课数',
-    text6: '三年级开课数',
-    text7: '四年级开课数',
-    text8: '五年级开课数',
-    text9: '六年级开课数',
-    text10: '新增檔案',
-    text11: '書面問答',
-    text12: '匯入.pptx',
-    text13: 'PowerClick',
-    text14: '開啟.hte',
-    text15: '其他',
-    text16: '一年级',
-    text17: '二年级',
-    text18: '三年级',
-    text19: '四年级',
-    text20: '五年级',
-    text21: '六年级',
 }

TEAMModelOS/ClientApp/locale/lang/zh-TW/schoolMgmt.js

@@ -11,7 +11,7 @@ export default {
       notInitiated: '未啟動',
       repair: '報修中',
       block2Title1: '教室開機數',
-      block2Title2: '課堂開課數',
+      block2Title2: '課堂數',
       block2Title3: '課堂參與人數',
       block2Title4: '今日課堂數量變化',
       block2Title5: '今日各年級課堂百分比',    
@@ -19,15 +19,18 @@ export default {
       block2SubTitle2: '前7日平均',
       block2SubTitle3: '前30日平均',
       block2SubTitle4: '學期平均',
-      block2SubTitle5: '今日使用時數',
+      block2SubTitle5: '今日使用時數',      
+      block2SubTitle6: '前7日總數',
+      block2SubTitle7: '前30日總數',
+      block2SubTitle8: '學期總數',
       block3Title1: '今日智慧教室啟用類型',
-      block3Title2: '今日各版本教室開課狀態',
-      block3Title3: '各年級開課狀態',
+      block3Title2: '智慧教室版本分布狀態',
+      block3Title3: '各年級課堂總數',
       block3SubTitle1: '今日開課堂數',
       block3SubTitle2: '上週均課堂數',
       block3SubTitle3: '今日開課百分比',
-      block4Title1: '累計教堂時數',
-      block4Title2: '智慧教室版本',
+      block4Title1: '累計課堂時數',
+      block4Title2: '蘇格拉底議課APP授權狀態',
       block4Title3: '課堂作業系統',
       block4SubTitle1: '總計',    
       block4SubTitle2: '累計',
@@ -40,26 +43,28 @@ export default {
       block4SubTitle9: '累計課堂時數',
       block4SubTitle10: '最高單堂效率值',
       block4SubTitle11: '平均課堂效率值',
+      grade1: '一年級',
+      grade2: '二年級',
+      grade3: '三年級',
+      grade4: '四年級',
+      grade5: '五年級',
+      grade6: '六年級',
+      grade7: '七年級',
+      grade8: '八年級',
+      grade9: '九年級',
+      grade10: '十年級',
+      grade11: '十一年級',
+      grade12: '十二年級',
+      selfpace: '書面問答',
+      blankPageAdd: '新增檔案',
+      pptImport: '匯入.pptx',
+      powerclick: 'PowerClick',
+      hteOpen: '開啟.hte',
+      Other: '其他',
+      today: '今天',
+      lastweek: '前七天',
       text1: '通識教室',
-      text2: '序號使用至',
+      text2: '授權至',
       text3: '今日總課堂數',
-      text4: '一年級開課數',
-      text5: '二年級開課數',
-      text6: '三年級開課數',
-      text7: '四年級開課數',
-      text8: '五年級開課數',
-      text9: '六年級開課數',
-      text10: '新增檔案',
-      text11: '書面問答',
-      text12: '匯入.pptx',
-      text13: 'PowerClick',
-      text14: '開啟.hte',
-      text15: '其他',
-      text16: '一年級',
-      text17: '二年級',
-      text18: '三年級',
-      text19: '四年級',
-      text20: '五年級',
-      text21: '六年級',
   }
   

TEAMModelOS/ClientApp/view/schoolmgmtdashboard/Index.less

@@ -51,24 +51,24 @@
           h5{
             color: #A9B2B8;
             font-size: 1.4em;
-            font-weight: 300;
+            font-weight: 500;
           }
           .subtitle{
             display: block;
-            margin-top: 5px;
             padding-right: 20px;
             color: #90A3AC;
           }
           .teacherName{
             color: #90A3AC;
-            max-width: 200px;
+            max-width: 90px;
             display: inline-block;
-            vertical-align: middle;
+            vertical-align: bottom;
           }
           .teachIcon{
             color: #90A3AC;
             display: inline-block;
-            vertical-align: middle;
+            margin-right: 6px;
+            margin-left: 2px;
           }
           .processing{
             color: #1CD0A1
@@ -158,6 +158,7 @@
               height: 100%;
             }
             .right{
+              height: 100%;
               &-title{
                 font-size: 1.45em;
                 color: #DCDCDC;
@@ -167,6 +168,7 @@
                 }
               }
               &-detail{
+                cursor: pointer;
                 &-title{
                   display: block;
                   color: #94998a;
@@ -217,25 +219,7 @@
                     display: block;
                     color: #94998a;
                     padding-left: 5px;
-                    border-left: 2px solid #333;
-                    &-border-red{
-                      border-left-color: #FF6B6A;
-                    }
-                    &-border-green{
-                      border-left-color: #1CD0A1;
-                    }
-                    &-border-pink{
-                      border-left-color: #FF9FF4;
-                    }
-                    &-border-yellow{
-                      border-left-color: #FDC958;
-                    }
-                    &-border-blue{
-                      border-left-color: #48DBFC;
-                    }
-                    &-border-orange{
-                      border-left-color: #FFAD76;
-                    }
+                    border-left: 2px solid #333;                    
                   }
                   .detail-amount{
                     font-size: 1.4em;
@@ -316,22 +300,22 @@
     }
   }
 }
-.border-red{
+.border-letf-color-0{
   border-left-color: #FF6B6A!important;
 }
-.border-green{
-  border-left-color: #1CD0A1!important;
-}
-.border-pink{
+.border-letf-color-1{
   border-left-color: #FF9FF4!important;
 }
-.border-yellow{
-  border-left-color: #FDC958!important;
-}
-.border-blue{
+.border-letf-color-2{
   border-left-color: #48DBFC!important;
 }
-.border-orange{
+.border-letf-color-3{
+  border-left-color: #1CD0A1!important;
+}
+.border-letf-color-4{
+  border-left-color: #FDC958!important;
+}
+.border-letf-color-5{
   border-left-color: #FFAD76!important;
 }
 .block-border{

TEAMModelOS/ClientApp/view/schoolmgmtdashboard/Index.vue

@@ -80,7 +80,7 @@
                       </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;">{{classCount.loginCount}} <small>({{classCount.loginCount/classCount.total | percentFormat(0)}}%)</small></h5>
+                        <h5 style="font-size: 2em;color: #FAFAFA;font-weight: 100;">{{classCount.loginCount}} <small>({{classCount.loginCount/courseACT.today | percentFormat(0)}}%)</small></h5>
                       </Col>
                       <Col :span="4"  style="text-align: center;">
                         <span style="color: #94998a;">{{$t('schoolMgmt.block1Title5')}}</span>
@@ -95,14 +95,20 @@
                   <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>
-                        <span class="ellipsis subtitle">{{ item.system }}&nbsp;&nbsp;|&nbsp;&nbsp;{{ $t('schoolMgmt.text2') }} {{item.serialExp}}, {{ item.groupTotal + $t('unit.text7') }}, {{ item.whiteBoardDriver }}, {{ item.IRSDriver }}</span>
+                        <h5>{{ item.groupNum ? item.groupNum : '———' }}, {{item.groupName != 'UnKnown' ? item.groupName : 'No Name'}}</h5>
+                        <span class="ellipsis subtitle">{{ item.ver ? item.ver : '——————'}}&nbsp;&nbsp;|&nbsp;&nbsp;{{ $t('schoolMgmt.text2') }} {{item.serialExp ? item.serialExp : '0000-00-00'}}, {{ item.groupTotal ? item.groupTotal : 0 + $t('unit.text7') }}</span>
                       </Col>
                       <Col :span="9">
-                        <span class="ellipsis teacherName">{{ item.teacher.name}}</span>
-                        <Tooltip :content="item.teacher.id" placement="left" theme="light">
-                          <Icon class="teachIcon" :size="15" type="ios-information-circle" />
-                        </Tooltip>
+                        <Row>
+                          <Col :span="12">
+                            <img class="teachIcon" width="15" src="@/assets/icon/product_board.svg">                            
+                            <img class="teachIcon" width="15" src="@/assets/icon/product_irs.svg">  
+                            <img class="teachIcon" width="15" src="@/assets/icon/product_ezstation.svg">                          
+                          </Col>
+                          <Col :span="12">
+                            <Icon v-if="item.teacher.name" size="15" type="md-person" class="teachIcon" /><span class="ellipsis teacherName">{{item.teacher.name}}</span>
+                          </Col>
+                        </Row>                        
                         <Row  style="display: block;">
                           <Col :span="12" style="color: #48DBFC;">
                             {{$t('schoolMgmt.hotclass')}}&nbsp;&nbsp;|&nbsp;&nbsp;{{item.hot + $t('unit.text1')}}
@@ -136,20 +142,20 @@
                 </Col>
                 <Col :span="5"  class="info-col-secondary">
                   <div class="info-col-content border-right">
-                    <br/><small>{{ $t('schoolMgmt.block2SubTitle2')}}</small>
-                    <h5>{{hiTeachACT.weekAgoAVG}}</h5>
+                    <br/><small>{{ $t('schoolMgmt.block2SubTitle6')}}</small>
+                    <h5>{{hiTeachACT.weekAgo}}</h5>
                   </div> 
                 </Col>
                 <Col :span="5"  class="info-col-secondary">
                   <div class="info-col-content border-right">
-                    <br/><small>{{ $t('schoolMgmt.block2SubTitle3')}}</small>
-                    <h5>{{hiTeachACT.mounthAgoAVG}}</h5>
+                    <br/><small>{{ $t('schoolMgmt.block2SubTitle7')}}</small>
+                    <h5>{{hiTeachACT.mounthAgo}}</h5>
                   </div> 
                 </Col>
                 <Col :span="5"  class="info-col-secondary">
                   <div class="info-col-content">
-                    <br/><small>{{ $t('schoolMgmt.block2SubTitle4')}}</small>
-                    <h5>{{hiTeachACT.semesterAVG}}</h5>
+                    <br/><small>{{ $t('schoolMgmt.block2SubTitle8')}}</small>
+                    <h5>{{hiTeachACT.semester}}</h5>
                   </div> 
                 </Col>
               </Row>
@@ -171,20 +177,20 @@
                 </Col>
                 <Col :span="5"  class="info-col-secondary">
                   <div class="info-col-content border-right">
-                    <br/><small>{{ $t('schoolMgmt.block2SubTitle2')}}</small>
-                    <h5>{{courseACT.weekAgoAVG}}</h5>
+                    <br/><small>{{ $t('schoolMgmt.block2SubTitle6')}}</small>
+                    <h5>{{courseACT.weekAgo}}</h5>
                   </div> 
                 </Col>
                 <Col :span="5"  class="info-col-secondary">
                   <div class="info-col-content border-right">
-                    <br/><small>{{ $t('schoolMgmt.block2SubTitle3')}}</small>
-                    <h5>{{courseACT.mounthAgoAVG}}</h5>
+                    <br/><small>{{ $t('schoolMgmt.block2SubTitle7')}}</small>
+                    <h5>{{courseACT.mounthAgo}}</h5>
                   </div> 
                 </Col>
                 <Col :span="5"  class="info-col-secondary">
                   <div class="info-col-content">
-                    <br/><small>{{ $t('schoolMgmt.block2SubTitle4')}}</small>
-                    <h5>{{courseACT.semesterAVG}}</h5>
+                    <br/><small>{{ $t('schoolMgmt.block2SubTitle8')}}</small>
+                    <h5>{{courseACT.semester}}</h5>
                   </div> 
                 </Col>
               </Row>
@@ -207,19 +213,19 @@
                 <Col :span="5"  class="info-col-secondary">
                   <div class="info-col-content border-right">
                     <br/><small>{{ $t('schoolMgmt.block2SubTitle2')}}</small>
-                    <h5>{{participants.weekAgoAVG}}</h5>
+                    <h5>{{participants.weekAgoAVG ? participants.weekAgoAVG : 0}}</h5>
                   </div> 
                 </Col>
                 <Col :span="5"  class="info-col-secondary">
                   <div class="info-col-content border-right">
                     <br/><small>{{ $t('schoolMgmt.block2SubTitle3')}}</small>
-                    <h5>{{participants.mounthAgoAVG}}</h5>
+                    <h5>{{participants.mounthAgoAVG ? participants.mounthAgoAVG : 0}}</h5>
                   </div> 
                 </Col>
                 <Col :span="5"  class="info-col-secondary">
                   <div class="info-col-content">
                     <br/><small>{{ $t('schoolMgmt.block2SubTitle4')}}</small>
-                    <h5>{{participants.semesterAVG}}</h5>
+                    <h5>{{participants.semesterAVG ? participants.semesterAVG : 0}}</h5>
                   </div> 
                 </Col>
               </Row>
@@ -236,7 +242,7 @@
                 <h5 style="font-size: 1.25em;color:#E4E9DC;padding: 15px 0 15px 15px;font-weight: 100;">{{$t('schoolMgmt.block2Title4')}}</h5>
               </div>
               <div style="height: 80%;">
-                <ClassLine :id="'classline1'"></ClassLine>
+                <ClassLine :time="immediateData.time" :data="immediateData.data" :id="'classline1'"></ClassLine> 
               </div>
             </div>
             <div style="height: 1.5%"></div>
@@ -254,53 +260,25 @@
                 <Row type="flex" justify="center" align="middle" class="classPercent-row">
                   <Col class="left" :span="12" style="">
                     <div style="height: 100%;">
-                      <RingPie id="ringpie5'"></RingPie>
+                      <RingPie ref="ringpie5" :pieData="gradeClassPer" :id="'ringpie5'"></RingPie>
                     </div>
                   </Col>
                   <Col class="right" :span="12">
-                    <Row>
+                    <Row style="height: 15%;">
                       <Col>
-                        <div class="right-title">{{$t('schoolMgmt.text3')}} : <span>54</span> {{$t('unit.text1')}}</div>
-                      </Col>
-                    </Row>
-                    <Row >
-                      <Col :span="12">
-                        <div class="right-detail">
-                          <span class="right-detail-title border-red">{{$t('schoolMgmt.text4')}}</span>
-                          <h5 class="right-detail-num">3 <small>(5.5%)</small></h5>
-                        </div>
-                      </Col>
-                      <Col :span="12">
-                        <div>
-                          <span class="right-detail-title border-green">{{$t('schoolMgmt.text5')}}</span>
-                          <h5  class="right-detail-num">13 <small>(24.1%)</small></h5>
-                        </div>
-                      </Col>
-                      <Col :span="12">
-                        <div>
-                          <span class="right-detail-title border-pink">{{$t('schoolMgmt.text6')}}</span>
-                          <h5  class="right-detail-num">4 <small>(7.4%)</small></h5>
-                        </div>
-                      </Col>
-                      <Col :span="12">
-                        <div>
-                          <span class="right-detail-title border-yellow">{{$t('schoolMgmt.text7')}}</span>
-                          <h5  class="right-detail-num">12 <small>(22.2%)</small></h5>
-                        </div>
-                      </Col>
-                      <Col :span="12">
-                        <div>
-                          <span class="right-detail-title border-blue">{{$t('schoolMgmt.text8')}}</span>
-                          <h5  class="right-detail-num">13 <small>(24.1%)</small></h5>
-                        </div>
-                      </Col>
-                      <Col :span="12">
-                        <div>
-                          <span class="right-detail-title border-orange">{{$t('schoolMgmt.text9')}}</span>
-                          <h5  class="right-detail-num">9 <small>(16.7%)</small></h5>
-                        </div>
+                        <div class="right-title">{{$t('schoolMgmt.text3')}} : <span>{{gradeClassAccount}}</span> {{$t('unit.text1')}}</div>
                       </Col>
                     </Row>
+                    <div style="height: 85%;width:100%;position: relative;overflow: auto;">
+                      <Row class="scrollstyle" style="position: absolute;right: 0px;left: 0;top: 0;bottom: 0;overflow-x: hidden;overflow-y: auto;">
+                        <Col v-for="(item, key, index) in gradeClassPer" :key="index" :span="12">
+                          <div class="right-detail" @mouseleave="pieDownPlay('course', key)" @mouseenter="pieHeightLight('course', key)">
+                            <span class="right-detail-title" :class="'border-letf-color-' + index">{{ $t('schoolMgmt.grade' + key)}}</span>
+                            <h5 class="right-detail-num">{{item}} <small>({{item/gradeClassAccount | percentFormat(1)}}%)</small></h5>
+                          </div>                        
+                        </Col>
+                      </Row>                      
+                    </div>
                   </Col>
                 </Row>                
               </div>
@@ -317,43 +295,15 @@
               <div class="today-class-content">
                 <h5 class="today-class-content-title">{{$t('schoolMgmt.block3Title1')}}</h5>
                 <Row class="today-class-content-contents">
-                  <Col :span="12" class="chart"><RingPie :pieData="todayClassData" ref="ringpie1" :id="'ringPie1'"></RingPie></Col>
+                  <Col :span="12" class="chart">
+                    <RingPie :pieData="hiteachType" ref="ringpie1" :id="'ringPie1'"></RingPie>
+                  </Col>
                   <Col :span="12" class="detail">
                     <Row class="detail-row">
-                      <Col :span="12" class="detail-col">
-                        <div @mouseleave="pieDownPlay('class','新增档案')" @mouseenter="pieHeightLight('class','新增档案')">
-                          <span class="detail-title detail-title-border-red">{{$t('schoolMgmt.text10')}}</span>
-                          <h5 class="detail-amount">33% <small>(168)</small></h5>
-                        </div>
-                      </Col>
-                      <Col :span="12" class="detail-col">
-                        <div @mouseleave="pieDownPlay('class','书面问答')" @mouseenter="pieHeightLight('class','书面问答')">
-                          <span  class="detail-title detail-title-border-green">{{$t('schoolMgmt.text11')}}</span>
-                          <h5 class="detail-amount" >33% <small>(168)</small></h5>
-                        </div>
-                      </Col>
-                      <Col :span="12" class="detail-col">
-                        <div @mouseleave="pieDownPlay('class','汇入.pptx')" @mouseenter="pieHeightLight('class','汇入.pptx')">
-                          <span  class="detail-title detail-title-border-pink" >{{$t('schoolMgmt.text12')}}</span>
-                          <h5 class="detail-amount" >33% <small>(168)</small></h5>
-                        </div>
-                      </Col>
-                      <Col :span="12" class="detail-col">
-                        <div @mouseleave="pieDownPlay('class','PowerClick')" @mouseenter="pieHeightLight('class','PowerClick')">
-                          <span  class="detail-title detail-title-border-yellow" >{{$t('schoolMgmt.text13')}}</span>
-                          <h5 class="detail-amount" >33% <small>(168)</small></h5>
-                        </div>
-                      </Col>
-                      <Col :span="12" class="detail-col">
-                        <div @mouseleave="pieDownPlay('class','开启.hte')" @mouseenter="pieHeightLight('class','开启.hte')">
-                          <span  class="detail-title detail-title-border-blue" >{{$t('schoolMgmt.text14')}}</span>
-                          <h5 class="detail-amount" >33% <small>(168)</small></h5>
-                        </div>
-                      </Col>
-                      <Col :span="12" class="detail-col">
-                        <div @mouseleave="pieDownPlay('class','其他')" @mouseenter="pieHeightLight('class','其他')">
-                          <span  class="detail-title detail-title-border-orange" >{{$t('schoolMgmt.text15')}}</span>
-                          <h5 class="detail-amount" >33% <small>(168)</small></h5>
+                      <Col v-for="(item, key, index) in hiteachType" :key="index"  :span="12" class="detail-col">
+                        <div @mouseleave="pieDownPlay('class', key)" @mouseenter="pieHeightLight('class', key)">
+                          <span class="detail-title" :class="'border-letf-color-' + index">{{$t('schoolMgmt.' + key)}}</span>
+                          <h5 class="detail-amount">{{item}} <small>({{item/hiteachTypeAccount | percentFormat(1)}}%)</small></h5>
                         </div>
                       </Col>
                     </Row>
@@ -372,45 +322,17 @@
               <div class="today-class-content">
                 <h5 class="today-class-content-title">{{$t('schoolMgmt.block3Title2')}}</h5>
                 <Row class="today-class-content-contents">
-                  <Col :span="12" class="chart"><RingPie :pieData="todayClassVerData" ref="ringpie2" :id="'ringPie2'"></RingPie></Col>
+                  <Col :span="12" class="chart">
+                    <RingPie :pieData="hiteachStatus" ref="ringpie2" :id="'ringPie2'"></RingPie>
+                  </Col>
                   <Col :span="12" class="detail">
                     <Row class="detail-row">
-                      <Col :span="12" class="detail-col">
-                        <div @mouseleave="pieDownPlay('system','HiTeach STD')" @mouseenter="pieHeightLight('system','HiTeach STD')">
-                          <span class="detail-title detail-title-border-red">HiTeach STD</span>
-                          <h5 class="detail-amount">26% <small>(8)</small></h5>
-                        </div>
-                      </Col>
-                      <Col :span="12" class="detail-col">
-                        <div @mouseleave="pieDownPlay('system','HiTeach PRE')" @mouseenter="pieHeightLight('system','HiTeach PRE')">
-                          <span  class="detail-title detail-title-border-green">HiTeach PRE</span>
-                          <h5 class="detail-amount" >25% <small>(168)</small></h5>
+                      <Col  v-for="(item, key, index) in hiteachStatus" :key="index" :span="12" class="detail-col">
+                        <div @mouseleave="pieDownPlay('system',key)" @mouseenter="pieHeightLight('system', key)">
+                          <span class="detail-title" :class="'border-letf-color-' + index">{{ key == 'Other' ?  $t('schoolMgmt.' + key) : key}}</span>
+                          <h5 class="detail-amount">{{item}} <small>({{item/hiteachStatusAccount | percentFormat(1)}}%)</small></h5>
                         </div>
-                      </Col>
-                      <Col :span="12" class="detail-col">
-                        <div @mouseleave="pieDownPlay('system','HiTeach PRO')" @mouseenter="pieHeightLight('system','HiTeach PRO')">
-                          <span  class="detail-title detail-title-border-pink" >HiTeach PRO</span>
-                          <h5 class="detail-amount" >18% <small>(168)</small></h5>
-                        </div>
-                      </Col>
-                      <Col :span="12" class="detail-col">
-                        <div @mouseleave="pieDownPlay('system','HiTeach Mobile')" @mouseenter="pieHeightLight('system','HiTeach Mobile')">
-                          <span  class="detail-title detail-title-border-yellow" >HiTeach Mobile</span>
-                          <h5 class="detail-amount" >10% <small>(168)</small></h5>
-                        </div>
-                      </Col>
-                      <Col :span="12" class="detail-col">
-                        <div @mouseleave="pieDownPlay('system','HiTeach TBL')" @mouseenter="pieHeightLight('system','HiTeach TBL')">
-                          <span  class="detail-title detail-title-border-blue" >HiTeach TBL</span>
-                          <h5 class="detail-amount" >21% <small>(168)</small></h5>
-                        </div>
-                      </Col>
-                      <Col :span="12" class="detail-col">
-                        <div @mouseleave="pieDownPlay('system','其他')" @mouseenter="pieHeightLight('system','其他')">
-                          <span  class="detail-title detail-title-border-orange" >{{$t('schoolMgmt.text15')}}</span>
-                          <h5 class="detail-amount" >0% <small>(0)</small></h5>
-                        </div>
-                      </Col>
+                      </Col>                     
                     </Row>
                   </Col>
                 </Row>
@@ -429,7 +351,7 @@
                   <h5 style="font-size: 1.25em;color:#E4E9DC;font-weight: 100;">{{ $t('schoolMgmt.block3Title3')}}</h5>
                 </div>
                 <div style="height: 87%;border-bottom: 1px solid #94998a;">
-                  <ClassBar :id="'classbar1'"></ClassBar>
+                  <ClassBar :todayData="gradeUseStatus.today" :lastWeekData="gradeUseStatus.lastWeek"  :id="'classbar1'"></ClassBar>
                 </div>
               </div>
             </div>
@@ -444,7 +366,7 @@
               <!-- 边角设计 end-->
               <div class="hours">
                 <span class="hours-title">{{$t('schoolMgmt.block4Title1')}}</span>
-                <h5><span>4,234</span>h<span>43</span>m</h5>
+                <h5><span>{{ cumMin | minToHM('h')}}</span>h<span>{{cumMin | minToHM('m')}}</span>m</h5>
               </div>
             </div>
             <div style="height: 2.17%"></div>
@@ -458,7 +380,9 @@
               <div style="height: 100%;">
                 <h5 style="height: 20%;font-size: 1.25em;color: #E4E9DC;padding: 10px 0 0 10px;font-weight: 100;">{{$t('schoolMgmt.block4Title2')}}</h5>
                 <Row type="flex" justify="center" align="middle" style="height: 80%;">
-                  <Col style="height: 100%;" :span="12"><RingPie :pieData="smartClassVersion" @highLightInfo="classVersionByPie" :defaultActive="true" :id="'ringPie3'"></RingPie></Col>
+                  <Col style="height: 100%;" :span="12">
+                    <RingPie :pieData="classVer" @highLightInfo="classVersionByPie" :defaultActive="true" :id="'ringPie3'"></RingPie>
+                  </Col>
                   <Col :span="12" style="padding-left: 7px;color: #94998a;">
                     <span>{{ classVersion.name }}</span>
                     <h5 style="font-weight: 100;font-size: 2.2em;color: #fafafa;">{{ classVersion.percent +$t('unit.text2')}}</h5>
@@ -478,7 +402,9 @@
               <div style="height: 100%;">
                 <h5 style="height: 20%;font-size: 1.25em;color: #E4E9DC;padding: 10px 0 0 10px;font-weight: 100;">{{$t('schoolMgmt.block4Title3')}}</h5>
                 <Row type="flex" justify="center" align="middle" style="height: 80%;">
-                  <Col style="height: 100%;" :span="12"><RingPie :pieData="operatingSystems" @highLightInfo="homeworkByPie" :defaultActive="true" :id="'ringPie4'"></RingPie></Col>
+                  <Col style="height: 100%;" :span="12">
+                    <RingPie :pieData="operatingSystems" @highLightInfo="homeworkByPie" :defaultActive="true" :id="'ringPie4'"></RingPie>
+                  </Col>
                   <Col :span="12" style="padding-left: 7px;color: #94998a;">
                     <span>{{ homework.name }}</span>
                     <h5 style="font-weight: 100;font-size: 2.2em;color: #fafafa;">{{ homework.percent +$t('unit.text2')}}</h5>
@@ -553,19 +479,9 @@ export default {
   name:'smart-dashboard',
   data () {
     return {
-      scolBeg:{
-        percent: '',
-        today: '',
-        lastWeek: '',
-        todayData: [
-          {value:9, name:'一年级'},
-          {value:11, name:'二年级'},
-          {value:16, name:'三年级'},
-          {value:6, name:'四年级'},
-          {value:13, name:'五年级'},
-          {value:22, name:'六年级'},
-        ]
-      },
+      gradeClassAccount:0,
+      hiteachTypeAccount: 0,
+      hiteachStatusAccount: 0,
       classVersion:{
         percent: '',
         name: '',
@@ -576,34 +492,6 @@ export default {
         name: '',
         val: 0
       },
-      todayClassData:[
-        {value:335, name:'新增档案'},
-        {value:234, name:'汇入.pptx'},
-        {value:1548, name:'开启.hte'},        
-        {value:310, name:'书面问答'},
-        {value:135, name:'PowerClick'},
-        {value:123, name:'其他'},
-      ],
-      todayClassVerData:[
-        {value:335, name:'HiTeach STD'},
-        {value:234, name:'HiTeach PRO'},
-        {value:1548, name:'HiTeach TBL'},        
-        {value:310, name:'HiTeach PRE'},
-        {value:135, name:'HiTeach Mobile'},
-        {value:123, name:'其他'},
-      ],
-      smartClassVersion:[
-        {value:11, name:'HiTeach STD'},
-        {value:3, name:'HiTeach PRO'},
-        {value:16, name:'HiTeach TBL'},        
-        {value:6, name:'HiTeach PRE'},
-        {value:2, name:'HiTeach Mobile'}
-      ],
-      operatingSystems:[
-        {value:1183, name:'Windows 7'},
-        {value:245, name:'Windows XP'},
-        {value:473, name:'Windows 10'},
-      ]
     }
   },
   computed:{
@@ -624,7 +512,43 @@ export default {
     },
     participants(){ //課堂參與人數
       return this.schoolData.participants
-    },    
+    },
+    immediateData(){ // 今日課堂數量變化
+      return this.schoolData.immediateData
+    },
+    gradeClassPer(){ // 今日各年級課堂百分比
+      this.gradeClassAccount = 0;
+      for (let g in this.schoolData.gradeClassPer){
+        this.gradeClassAccount += this.schoolData.gradeClassPer[g]
+      }
+      return this.schoolData.gradeClassPer
+    },
+    hiteachType(){  // 今日智慧教室啟用類型
+      this.hiteachTypeAccount = 0;
+      for (let g in this.schoolData.hiteachType){
+        this.hiteachTypeAccount += this.schoolData.hiteachType[g]
+      }
+      return this.schoolData.hiteachType
+    },
+    hiteachStatus(){ // 今日各版本教室開課狀態
+      this.hiteachStatusAccount = 0;
+      for (let g in this.schoolData.hiteachStatus){
+        this.hiteachStatusAccount += this.schoolData.hiteachStatus[g]
+      }
+      return this.schoolData.hiteachStatus
+    },
+    gradeUseStatus(){ // 各年級開課狀態
+      return this.schoolData.gradeUseStatus
+    },
+    cumMin(){ // 累計課堂時數
+      return this.schoolData.cumMin
+    },
+    classVer(){ // 智慧教室版本
+      return this.schoolData.classVer
+    },
+    operatingSystems(){ // 課堂作業系統
+      return this.schoolData.operatingSystems
+    }
   },
   methods:{
     pieHeightLight: function(type, value) {
@@ -635,6 +559,9 @@ export default {
         case 'system':
           this.$refs.ringpie2.heightlight(value);
           break;
+        case 'course':
+          this.$refs.ringpie5.heightlight(value);
+          break;
       }
     },
     pieDownPlay: function(type, value) {
@@ -645,16 +572,11 @@ export default {
         case 'system':
           this.$refs.ringpie2.downplay(value);
           break;
+        case 'course':
+          this.$refs.ringpie5.downplay(value);
+          break;
       }      
     },
-    scolBegInfoByPie: function(val){
-      this.scolBeg.percent = val.percent
-    },
-    scolBegInfoByBar: function(val){
-      this.scolBeg.today = val.today
-      this.scolBeg.lastWeek = val.lastWeek
-      this.$refs.ringpie5.heightlight(val.id);
-    },
     classVersionByPie: function(val){
       this.classVersion.percent = val.percent
       this.classVersion.name = val.name
@@ -699,8 +621,23 @@ export default {
       })
     },
     percentFormat: function(num, pos){
+      if(!num) return 0
       return (num* 100).toFixed(pos) 
-    }
+    },
+    percentFormat: function(num, pos){
+      if(!num) return 0
+      return (num* 100).toFixed(pos) 
+    },
+    minToHM: function(min, type){      
+      switch (type) {
+        case 'h':
+          return Math.floor(min / 60);
+          break;      
+        case 'm':
+          return min%60;          
+          break;
+      }
+    },
   },
   components:{
     LegendPie,
@@ -711,11 +648,11 @@ export default {
   created(){
     let _this = this;
     this.$api.SchoolMgmt.GetTestIoTData({}).then(res => {
+      console.log(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");