Merge branch 'develop' of http://106.12.23.251:10080/TEAMMODEL/TEAMModelOS into develop

TEAMModelOS/ClientApp/components/graph/classBar.vue

@@ -58,9 +58,9 @@ export default {
                 axisPointer: {
                   type: 'shadow'
                 },
-                formatter: function(params){
-                  // 故意開啟 但不設定使ToolTip 沒有彈跳的作用 但有Hover 功能
-                }
+                // formatter: function(params){
+                //   // 故意開啟 但不設定使ToolTip 沒有彈跳的作用 但有Hover 功能
+                // }
               },
               grid: {
                 left: '5%',
@@ -112,8 +112,7 @@ export default {
                   name: 'today',
                   type: 'bar',
                   data: todayDataArray,
-                  barWidth: 7, //柱子宽度
-                  barGap: 1, //柱子之间间距
+                  barWidth: 15, //柱子宽度
                   itemStyle: {
                     normal: {  //渐变色
                       color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
@@ -130,8 +129,7 @@ export default {
                   name: 'lastWeek',
                   type: 'bar',
                   data: lastWeekDataArray,
-                  barWidth: 7, //柱子宽度
-                  barGap: 1, //柱子之间间距
+                  barWidth: 15, //柱子宽度
                   itemStyle: {
                     normal: {  //渐变色
                       color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
@@ -153,14 +151,6 @@ export default {
             this.myChart.on('downplay', function (params) {            
               _this.$emit('downplay', yLabel[params.batch[0].dataIndex])
             });
-            //預設顯示第一個
-            this.myChart.dispatchAction({
-                type: 'showTip',
-                seriesIndex: 1,
-                dataIndex: 0,
-            });
-            // 預設先給值
-            this.$emit('highLightInfo', {'id': yLabel[0], 'today': todayDataArray[0], 'lastWeek': lastWeekDataArray[0]});
         }
     }
 }

TEAMModelOS/ClientApp/components/graph/classResourceBar.vue

@@ -0,0 +1,126 @@
+<template>
+    <div :id="id" style="height: 100%;width:100%;"></div>
+</template>
+
+<script>
+export default {
+    data () {
+      return {
+        myChart: '',
+      }
+    },
+    props:{
+      id:{
+        type: String
+      },
+      todayData:{
+        type: Object,
+        default: function(){
+          return {'一年級': 9, '二年級': 11, '三年級': 16, '四年級':6, '五年級':13, '六年級':22}
+        }
+      },
+      callBack: {
+        type: String
+      }
+    },
+    mounted(){
+        this.drawLine();
+    },
+    methods:{
+        drawLine(){
+            let _this = this
+            // 取得Y軸Label
+            let yLabel = Object.keys(this.todayData);
+            let todayDataArray = [];
+
+            // 今日資料
+            yLabel.map(function(key) {
+              todayDataArray.push(_this.todayData[key]);
+            });
+
+            // 基于准备好的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
+              },
+              xAxis: {
+                type: 'value',
+                boundaryGap: false,
+                axisLabel: {
+                    inside: true,
+                    textStyle: {
+                        color:'transparent'
+                    }
+                },
+                splitLine: {
+                    show: true,
+                    lineStyle: {
+                        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)',
+                  },
+                  show: true
+                },
+                axisLine: {
+                  lineStyle: {
+                    color: 'rgba(185, 193, 173, 0.63)',
+                    width: 1,
+                  }
+                },
+                data: yLabel,
+              },
+              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(228, 233, 220, 1)" // 0% 处的颜色
+                      },{
+                        offset: 1,
+                        color: "rgba(228, 233, 220, 0.5)" // 100% 处的颜色
+                      }], false)
+                    }
+                  }
+                },
+              ]
+            })
+        }
+    }
+}
+
+</script>
+
+<style>
+</style>

TEAMModelOS/ClientApp/components/graph/courseBar.vue

@@ -55,7 +55,7 @@ export default {
               },
               grid: {
                 left: '0',
-                right: '0',
+                right: '2%',
                 bottom: '1px',
                 top:'0',
                 containLabel: true

TEAMModelOS/ClientApp/components/graph/finishPercentPie.vue

@@ -78,13 +78,13 @@ export default {
                       "name": '',
                       "itemStyle": {
                         normal: {
-                                                 color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-                        offset: 0,
-                        color: "rgba(228, 233, 220, 0.14)" // 0% 处的颜色
-                      },{
-                        offset: 1,
-                        color: "rgba(228, 233, 220, 0.14)" // 100% 处的颜色
-                      }], false),
+                                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                                offset: 0,
+                                color: "rgba(228, 233, 220, 0.14)" // 0% 处的颜色
+                            },{
+                                offset: 1,
+                                color: "rgba(228, 233, 220, 0.14)" // 100% 处的颜色
+                            }], false),
                             label: {
                                 show: false
                             },
@@ -131,8 +131,8 @@ export default {
                               "show": true,
                               "formatter": '{b} %',
                               "textStyle": {
-                                  "fontSize": 14,
-                                  "fontWeight": "bold",
+                                  "fontSize": 20,
+                                  "fontWeight": "100",
                                   "color": "#ffffff",
                               },
                               "position": "center"
@@ -140,7 +140,7 @@ export default {
                       },
                       "itemStyle": {
                         normal: {
-                                                  color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                        color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                         offset: 0,
                         color: "rgba(228, 233, 220, 1)" // 0% 处的颜色
                       },{

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

@@ -40,8 +40,8 @@ export default {
     block2Title2: '課堂開課數',
     block2Title3: '課堂參與人數',
     block2Title4: '今日課堂數量變化',
-    block2Title5: '今日課堂效率值排名    (8hr)',    
-    block2SubTitle1: '今日數量',
+    block2Title5: '今日各年級課堂百分比',    
+    block2SubTitle1: '今日數量/ 昨日數量',
     block2SubTitle2: '前7日平均',
     block2SubTitle3: '前30日平均',
     block2SubTitle4: '學期平均',

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

@@ -40,8 +40,8 @@ export default {
     block2Title2: '课堂开课数',
     block2Title3: '课堂参与人数',
     block2Title4: '今日课堂数量变化',
-    block2Title5: '今日课堂效率值排名    (8hr)',    
-    block2SubTitle1: '今日数量',
+    block2Title5: '今日各年级课堂百分比',    
+    block2SubTitle1: '今日数量/ 昨日数量',
     block2SubTitle2: '前7日平均',
     block2SubTitle3: '前30日平均',
     block2SubTitle4: '学期平均',
@@ -106,20 +106,20 @@ export default {
     block4SubTitle7: '未开始活动', 
   },
   index: {
-    login: "登录",
-    register: "注册",
+    login: "登陆",
+    register:"注册",
     chooseRole: "选择身份",
     exit: "退出",
-    authSchool: "授权学校",
+    authSchool:"授权学校",
     currentRole: "当前身份",
-    loginSuc:"登录成功"
+    loginSuc:"登陆成功"
   },
-  //学情分析内容
+  //学情分析
   saindex: {
     index: "首页",
     grade: "成绩分析",
     droppoint: "落点分析",
-    examination: "试题分析",
+    examination:"试题分析",
     knowledge:"知识点掌握",
   },
   sasidebar: {

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

@@ -40,8 +40,8 @@ export default {
     block2Title2: '課堂開課數',
     block2Title3: '課堂參與人數',
     block2Title4: '今日課堂數量變化',
-    block2Title5: '今日課堂效率值排名    (8hr)',    
-    block2SubTitle1: '今日數量',
+    block2Title5: '今日各年級課堂百分比',    
+    block2SubTitle1: '今日數量/ 昨日數量',
     block2SubTitle2: '前7日平均',
     block2SubTitle3: '前30日平均',
     block2SubTitle4: '學期平均',
@@ -77,13 +77,12 @@ export default {
     block1SubTitle3: '今日啟用數',
     block1SubTitle4: '學習歷程',
     block1SubTitle5: '參與學生',
-    block2Title1: '教學科技運用狀態',
+    
     block2SubTitle1: '語文類教室數',
     block2SubTitle2: '數理科教室數',
     block2SubTitle3: '文史類教室數',
     block2SubTitle4: '藝能類教室數',
-    block2SubTitle5: '科技運用時數',
-    block2SubTitle6: '平均課堂運用',    
+    
     block3Title1: '智慧課堂類型',
     block3Title2: '學習歷程類型分佈',
     block3Title3: '資源產出類型',

TEAMModelOS/ClientApp/view/smart-dashboard/IOT/smart-iot-dashboard.less

@@ -158,6 +158,41 @@
             }
           }
         }
+        .classPercent{
+          height: 80%;
+          &-row{
+            height: 100%;
+            .left{
+              height: 100%;
+            }
+            .right{
+              &-title{
+                font-size: 1.45em;
+                color: #DCDCDC;
+                margin-bottom: 5px;
+                span{
+                  color: #ffffff;
+                }
+              }
+              &-detail{
+                &-title{
+                  display: block;
+                  color: #94998a;
+                  padding-left: 5px;
+                  border-left: 2px solid #333;
+                }
+                &-num{
+                  font-size: 1.4em;
+                  font-weight: 100;
+                  padding-left: 5px;
+                  color: #fafafa;
+                }
+              }
+
+            }
+          }
+
+        }
       }
       .block-3{
         margin: 0 10px;
@@ -289,6 +324,24 @@
     }
   }
 }
+.border-red{
+  border-left-color: #FF6B6A!important;
+}
+.border-green{
+  border-left-color: #1CD0A1!important;
+}
+.border-pink{
+  border-left-color: #FF9FF4!important;
+}
+.border-yellow{
+  border-left-color: #FDC958!important;
+}
+.border-blue{
+  border-left-color: #48DBFC!important;
+}
+.border-orange{
+  border-left-color: #FFAD76!important;
+}
 .block-border{
   border: 0.11px solid rgba(148, 153, 138, 0.63);
 }

TEAMModelOS/ClientApp/view/smart-dashboard/IOT/smart-iot-dashboard.vue

@@ -128,7 +128,7 @@
                 <Col :span="9" class="info-col-main">
                   <div class="info-col-content">
                     <span>{{ $t('smartIOTDB.block2Title1')}}</span><br/><small>{{ $t('smartIOTDB.block2SubTitle1')}}</small>
-                    <h5>8</h5>
+                    <h5>8<small>/9</small></h5>
                   </div>            
                 </Col>
                 <Col :span="5"  class="info-col-secondary">
@@ -163,7 +163,7 @@
                 <Col :span="9" class="info-col-main">
                   <div class="info-col-content">
                     <span>{{ $t('smartIOTDB.block2Title2')}}</span><br/><small>{{ $t('smartIOTDB.block2SubTitle1')}}</small>
-                    <h5>54</h5>
+                    <h5>54<small>/65</small></h5>
                   </div>            
                 </Col>
                 <Col :span="5"  class="info-col-secondary">
@@ -198,7 +198,7 @@
                 <Col :span="9" class="info-col-main">
                   <div class="info-col-content">
                     <span>{{ $t('smartIOTDB.block2Title3')}}</span><br/><small>{{ $t('smartIOTDB.block2SubTitle1')}}</small>
-                    <h5>1,892</h5>
+                    <h5>1,892<small>/2,863</small></h5>
                   </div>            
                 </Col>
                 <Col :span="5"  class="info-col-secondary">
@@ -244,18 +244,60 @@
               <div class="image-border image-border-left-bottom" ></div>
               <div class="image-border image-border-lright-bottom" ></div>
               <!-- 边角设计 end-->
-              <div style="height: 20%;padding: 15px 0 15px 15px;border-bottom: 1px solid #94998a;background-color:;">
+              <div style="height: 20%;padding: 15px 0 15px 15px;">
                 <h5 style="font-size: 1.25em;color:#E4E9DC;font-weight: 100;">{{$t('smartIOTDB.block2Title5')}}</h5>
               </div>
-              <!-- border-bottom: solid 1px #fff; -->
-              <div style="background-color: rgba(17, 17, 17, 0.14);;height: 80%;"> 
-                <Row v-for="(item, index) in classRank" :key="index" type="flex" justify="center" align="middle" :style="{color:'#fff',padding: '7px 0 5px 0',marginLeft: '15px',height: '33.3333333333%',borderBottom: index!=2 ? 'solid 1px #94998a' : none}">
-                  <Col :span="16">
-                    <h5 style="font-weight: 100;font-size: 1.25em;">{{item.name}}</h5>
-                    <span style="color: #90A3AC;display: block;padding-right: 20px;">{{ $t('smartIOTDB.block2SubTitle5')}}&nbsp;&nbsp;|&nbsp;&nbsp;{{ item.time }}</span>
+              <div class="classPercent"> 
+                <Row type="flex" justify="center" align="middle" class="classPercent-row">
+                  <Col class="left" :span="12" style="">
+                    <div style="height: 100%;">
+                      <RingPie id="ringpie5'"></RingPie>
+                    </div>
                   </Col>
-                  <Col :span="8">
-                    <h4 style="font-weight: 100;font-size: 1.8em;text-align: right;padding-right: 15px;">{{ item.percent }}%</h4>
+                  <Col class="right" :span="12">
+                    <Row>
+                      <Col>
+                        <div class="right-title">今日總課堂數 : <span>54</span> 堂</div>
+                      </Col>
+                    </Row>
+                    <Row >
+                      <Col :span="12">
+                        <div class="right-detail">
+                          <span class="right-detail-title border-red">一年級開課數</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">二年級開課數</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">三年級開課數</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">四年級開課數</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">五年級開課數</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">六年級開課數</span>
+                          <h5  class="right-detail-num">9 <small>(16.7%)</small></h5>
+                        </div>
+                      </Col>
+                    </Row>
                   </Col>
                 </Row>                
               </div>
@@ -383,27 +425,8 @@
                 <div style="height: 13%;border-bottom: 1px solid #94998a;padding: 15px 0 0 15px;">
                   <h5 style="font-size: 1.25em;color:#E4E9DC;font-weight: 100;">{{ $t('smartIOTDB.block3Title3')}}</h5>
                 </div>
-                <div style="height: 67%;border-bottom: 1px solid #94998a;">
-                  <ClassBar @highLightInfo="scolBegInfoByBar" @downplay="scolBegDownPlayByBar" :id="'classbar1'"></ClassBar>
-                </div>
-                <div style="height: 20%">
-                  <Row type="flex" justify="center" align="middle" style="height: 100%;">
-                    <Col style="height: 100%;" :span="12">
-                      <RingPie 
-                        @extraInfo="scolBegInfoByPie" 
-                        ref="ringpie5" 
-                        :id="'ringpie5'"
-                        :pieData="scolBeg.todayData"
-                        :defaultActive="true"
-                        :singleColor="true"
-                        ></RingPie>
-                    </Col>
-                    <Col :span="12">
-                      <span style="display: block; color: #dcdcdc;">{{$t('smartIOTDB.block3SubTitle1')}}&nbsp;&nbsp;<span style="color:#fafafa;">{{ scolBeg.today }} </span>{{$t('unit1')}}</span>
-                      <span style="display: block; color: #dcdcdc;">{{$t('smartIOTDB.block3SubTitle2')}}&nbsp;&nbsp;<span style="color:#fafafa;">{{ scolBeg.lastWeek }} </span>{{$t('unit1')}}</span>
-                      <span style="display: block; color: #dcdcdc;">{{$t('smartIOTDB.block3SubTitle3')}}&nbsp;&nbsp;<span style="color:#fafafa;">{{ scolBeg.percent }} </span>{{$t('unit2')}}</span>
-                    </Col>
-                  </Row>
+                <div style="height: 87%;border-bottom: 1px solid #94998a;">
+                  <ClassBar :id="'classbar1'"></ClassBar>
                 </div>
               </div>
             </div>
@@ -583,23 +606,6 @@ export default {
           'classMode': 2
         },
       ],
-      classRank:[
-        { 
-          'name': 'GE303, 通识教室3',
-          'time': '04:21:09',
-          'percent': '107.3',
-        },
-        { 
-          'name': 'GE303, 通识教室7',
-          'time': '03:56:29',
-          'percent': '69.4',
-        },
-        { 
-          'name': 'GE303, 通识教室1',
-          'time': '03:44:57',
-          'percent': '67.9',
-        },
-      ],
       scolBeg:{
         percent: '',
         today: '',
@@ -688,9 +694,6 @@ export default {
       this.scolBeg.lastWeek = val.lastWeek
       this.$refs.ringpie5.heightlight(val.id);
     },
-    scolBegDownPlayByBar: function(val){
-      this.$refs.ringpie5.downplay(val);
-    },
     classVersionByPie: function(val){
       this.classVersion.percent = val.percent
       this.classVersion.name = val.name

TEAMModelOS/ClientApp/view/smart-dashboard/class/smart-class-dashboard.less

@@ -51,7 +51,6 @@
       height: 94%;
       margin: 0;
       .block-1{
-        margin: 0 10px;
         height: 100%;
         .total{
           height: 100%;
@@ -141,7 +140,6 @@
         }
       }
       .block-2{
-        margin: 0 10px;
         height: 100%;
         .classroom{
           padding-bottom:7px;
@@ -163,10 +161,6 @@
             background: linear-gradient(to bottom,rgba(147, 166, 150, 0), rgba(147, 166, 150, 0.42));
           }
         }
-      }
-      .block-3{
-        margin: 0 10px;
-        height: 100%;
         .today-class-content{
           height: 100%;
           &-title{
@@ -302,8 +296,70 @@
           }
         }
       }
+      .block-3{
+        height: 100%;
+        .today-class-content{
+          height: 100%;
+          &-title{
+            height: 10%;
+            font-size: 1.25em;
+            color:#E4E9DC;
+            padding: 10px 0 15px 15px;
+            font-weight: 100;
+          }
+          &-contents{
+            height: 90%;
+            .chart{
+              height: 100%;
+            }
+            .detail{
+              .detail-row{
+                height: 100%;
+                padding: 5px 0;
+                .detail-col{
+                  cursor: pointer;
+                  color: #fafafa;
+                  width: 100px;
+                  margin: auto;
+                  padding-bottom: 10px;
+                  .detail-title{
+                    display: block;
+                    color: #94998a;
+                    padding-left: 5px;
+                    border-left: 2px solid #333;
+                    font-size: 1.1em;
+                    &-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;
+                    }
+                  }
+                  .detail-amount{
+                    font-size: 1.3em;
+                    font-weight: 100;
+                    padding-left: 5px;
+                  }
+                }
+              }
+
+            }
+          }
+        }
+      }
       .block-4{
-        margin: 0 10px;
         height: 100%;
         .teachingEvent{
           height: 80%;

TEAMModelOS/ClientApp/view/smart-dashboard/class/smart-class-dashboard.vue

@@ -44,7 +44,7 @@
           <Button class="dashBoardBtn select">{{$t('smartClassDB.pageButton1')}}</Button>
         </div>
         <Row class="box" type="flex" justify="center">
-          <Col  :span="4"  class="block-1">
+          <Col style="padding: 0 7px"  :span="4"  class="block-1">
             <div style="height: 100%;">
               <div class="block-border" style="height: 19%;position: relative;background-color: rgba(217, 217, 217, 0.14);">
                 <!-- 边角设计 start-->
@@ -123,7 +123,7 @@
               </div>  
             </div>
           </Col>
-          <Col  :span="5" class="block-2">
+          <Col  style="padding: 0 7px" :span="6" class="block-2">
             <!-- block-2 -->
             <div class="block-border" style="height: 38%;position: relative;background-color: rgba(217, 217, 217, 0.14);">
               <!-- 边角设计 start-->
@@ -165,32 +165,6 @@
               </div>
             </div>
             <div style="height: 1.5%"></div>
-            <div class="block-border" style="height: 60.5%;position: relative;background-color: rgba(217, 217, 217, 0.14);">
-              <!-- 边角设计 start-->
-              <div class="image-border image-border-left-top" ></div>
-              <div class="image-border image-border-right-top" ></div>
-              <div class="image-border image-border-left-bottom" ></div>
-              <div class="image-border image-border-lright-bottom" ></div>
-              <!-- 边角设计 end-->
-              <div style="height: 10%;">
-                <h5 style="height: 100%;padding: 3.5% 4%;font-size: 1.25em;color: #E4E9DC;border-bottom: solid 1px #94998a;font-weight: 100;">{{$t('smartClassDB.block2Title1')}}</h5>
-              </div>
-              <div style="height: 80%;">
-                <TeachScienceBar :id="'teachsciencebar1'"></TeachScienceBar>
-              </div>
-              <div style="height: 10%;border-top: 1px solid #94998a;padding: 15px 0;">
-                <Row>
-                  <Col :span="12">
-                    <span style="font-size: 12px;padding-left: 15px;color: #A9B2B8">{{$t('smartClassDB.block2SubTitle5')}}: 1676.7 {{$t('unit8')}}</span>
-                  </Col>
-                  <Col :span="12">
-                    <span style="font-size: 12px;padding-left: 15px;color: #A9B2B8">{{$t('smartClassDB.block2SubTitle6')}}: 0.9 {{$t('unit8')}}</span>
-                  </Col>
-                </Row>
-              </div>
-            </div>
-          </Col>
-          <Col  :span="6" class="block-3">
             <div class="block-border" style="height: 25%;position: relative;background-color: rgba(217, 217, 217, 0.14);">
               <!-- 边角设计 start-->
               <div class="image-border image-border-left-top" ></div>
@@ -248,7 +222,7 @@
               </div>
             </div>
             <div style="height: 1.5%"></div>
-            <div class="block-border" style="height: 38%;position: relative;background-color: rgba(217, 217, 217, 0.14);">
+            <div class="block-border" style="height: 34%;position: relative;background-color: rgba(217, 217, 217, 0.14);">
               <!-- 边角设计 start-->
               <div class="image-border image-border-left-top" ></div>
               <div class="image-border image-border-right-top" ></div>
@@ -336,196 +310,220 @@
                 </Row>
               </div>
             </div>
-            <div style="height: 1.5%"></div>
-            <div class="block-border" style="height: 34%;position: relative;background-color: rgba(217, 217, 217, 0.14);">
-              <!-- 边角设计 start-->
-              <div class="image-border image-border-left-top" ></div>
-              <div class="image-border image-border-right-top" ></div>
-              <div class="image-border image-border-left-bottom" ></div>
-              <div class="image-border image-border-lright-bottom" ></div>
-              <!-- 边角设计 end-->
-              <div class="today-class-content">
-                <h5 class="today-class-content-title">{{$t('smartClassDB.block3Title3')}}</h5>
-                <Row type="flex" justify="center" align="middle" class="today-class-content-contents">
-                  <Col :span="13" class="chart"><RingPie :tooltip="true" :pieData="[{value:3719, name:'题目数'}, {value:0, name:'分享课例数'},{value:251, name:'教材数'}, {value:0, name:'校本课纲数'}]" :id="'ringPie2'"></RingPie></Col>
-                  <Col :span="11" class="detail" style="height: inherit;">
-                    <Row>
-                      <Col>
-                        <span style="color: #94998a;">{{$t('smartClassDB.block3SubTitle4')}}</span>
-                        <h5 style="font-size: 2em;color: #fafafa;font-weight: 100;">7,689</h5>
-                      </Col>
-                    </Row>
-                    <Row class="detail-row" >
-                      <Col :span="12" class="detail-col" style="height: 40%;">
-                        <div @mouseleave="pieDownPlay('class','题目数')" @mouseenter="pieHeightLight('class','题目数')">
-                          <span class="detail-title detail-title-border-red">题目数</span>
-                          <h5 class="detail-amount">3,719</h5>
-                          <span style="display: block;margin-left: 5px;color:#e3e3e3">百分比: 48.36%</span>
-                        </div>
-                      </Col>
-                      <Col :span="12" class="detail-col" style="height: 40%;">
-                        <div @mouseleave="pieDownPlay('class','分享课例数')" @mouseenter="pieHeightLight('class','分享课例数')">
-                          <span  class="detail-title detail-title-border-pink" >分享课例数</span>
-                          <h5 class="detail-amount" >0</h5>
-                          <span style="display: block;margin-left: 5px;color:#e3e3e3">百分比: 0%</span>
-                        </div>
-                      </Col>
-                      <Col :span="12" class="detail-col" style="height: 40%;">
-                        <div @mouseleave="pieDownPlay('class','教材数')" @mouseenter="pieHeightLight('class','教材数')">
-                          <span  class="detail-title detail-title-border-blue" >教材数</span>
-                          <h5 class="detail-amount" >251</h5>
-                          <span style="display: block;margin-left: 5px;color:#e3e3e3">百分比: 3.26%</span>
+          </Col>
+          <Col style="padding: 0 7px" :span="12">
+            <Row style="height: 64.5%">
+              <Col :span="8" class="block-3">
+                <div class="block-border" style="height: 47.5%;position: relative;background-color: rgba(217, 217, 217, 0.14);">
+                  <!-- 边角设计 start-->
+                  <div class="image-border image-border-left-top" ></div>
+                  <div class="image-border image-border-right-top" ></div>
+                  <div class="image-border image-border-left-bottom" ></div>
+                  <div class="image-border image-border-lright-bottom" ></div>
+                  <!-- 边角设计 end-->
+                  <div class="today-class-content">
+                    <h5 class="today-class-content-title">{{$t('smartClassDB.block3Title3')}}</h5>
+                    <Row type="flex" justify="center" align="middle" class="today-class-content-contents">
+                      <Col :span="13" class="chart">
+                        <RingPie  style="height: 60%" :tooltip="true" :pieData="[{value:3719, name:'题目数'}, {value:0, name:'分享课例数'},{value:251, name:'教材数'}, {value:0, name:'校本课纲数'}]" :id="'ringPie2'"></RingPie>
+                        <div style="height: 30%;text-align: center;" >
+                          <span style="color: #94998a;">{{$t('smartClassDB.block3SubTitle4')}}</span>
+                          <h5 style="font-size: 2em;color: #fafafa;font-weight: 100;">7,689</h5>
                         </div>
                       </Col>
-                      <Col :span="12" class="detail-col" style="height: 40%;">
-                        <div @mouseleave="pieDownPlay('class','校本课纲数')" @mouseenter="pieHeightLight('class','校本课纲数')">
-                          <span  class="detail-title detail-title-border-yellow" >校本课纲数</span>
-                          <h5 class="detail-amount" >0</h5>
-                          <span style="display: block;margin-left: 5px;color:#e3e3e3">百分比: 0%</span>
-                        </div>
+                      <Col :span="11" class="detail">
+                        <Row class="detail-row" >
+                          <Col  class="detail-col">
+                            <div @mouseleave="pieDownPlay('class','题目数')" @mouseenter="pieHeightLight('class','题目数')">
+                              <span class="detail-title detail-title-border-red">题目数</span>
+                              <h5 class="detail-amount">3,719 <small>(48.36%)</small></small></h5>
+                            </div>
+                          </Col>
+                          <Col  class="detail-col">
+                            <div @mouseleave="pieDownPlay('class','教材数')" @mouseenter="pieHeightLight('class','教材数')">
+                              <span  class="detail-title detail-title-border-blue" >教材数</span>
+                              <h5 class="detail-amount" >251 <small>(3.26%)</small></h5>
+                            </div>
+                          </Col>
+                          <Col  class="detail-col">
+                            <div @mouseleave="pieDownPlay('class','分享课例数')" @mouseenter="pieHeightLight('class','分享课例数')">
+                              <span  class="detail-title detail-title-border-pink" >分享课例数</span>
+                              <h5 class="detail-amount" >3,104 <small>(0%)</small></h5>
+                            </div>
+                          </Col>
+                          <Col  class="detail-col">
+                            <div @mouseleave="pieDownPlay('class','校本课纲数')" @mouseenter="pieHeightLight('class','校本课纲数')">
+                              <span  class="detail-title detail-title-border-yellow" >校本课纲数</span>
+                              <h5 class="detail-amount" >615 <small>(0%)</small></h5>
+                            </div>
+                          </Col>
+                        </Row>
                       </Col>
                     </Row>
-                  </Col>
-                </Row>
-              </div>             
-            </div>
-          </Col>
-          <Col  :span="7" class="block-4">
-            <div class="block-border" style="height: 21%;position: relative;background-color: rgba(217, 217, 217, 0.14);">
-              <!-- 边角设计 start-->
-              <div class="image-border image-border-left-top" ></div>
-              <div class="image-border image-border-right-top" ></div>
-              <div class="image-border image-border-left-bottom" ></div>
-              <div class="image-border image-border-lright-bottom" ></div>
-              <!-- 边角设计 end-->
-              <div style="height: 100%">
-                <div style="height: 20%;">
-                  <h5 style="font-size: 1.25em;color: #E4E9DC;padding: 10px 0 15px 15px;font-weight: 100;">{{$t('smartClassDB.block4Title1')}}</h5>
+                  </div>             
                 </div>
-                <div class="teachingEvent">
-                  <Row type="flex" justify="center" align="middle" class="teachingEvent-row">
-                    <Col class="teachingEvent-row-col" :span="17">
-                      <Row type="flex" justify="space-around" align="middle" class="teachContent">
-                        <Col class="teachContent-box" :span="6">
-                          <span class="teachContent-box-title">{{$t('smartClassDB.block4SubTitle1')}}</span>
-                          <span class="teachContent-box-num">175</span>
-                          <span class="teachContent-box-subnum">{{$t('smartClassDB.block4SubTitle4')}} : 11</span>
-                        </Col>
-                        <Col class="teachContent-box" :span="6">
-                          <span class="teachContent-box-title">{{$t('smartClassDB.block4SubTitle2')}}</span>
-                          <span class="teachContent-box-num">537</span>
-                          <span class="teachContent-box-subnum">{{$t('smartClassDB.block4SubTitle4')}} : 11</span>
-                        </Col>
-                        <Col class="teachContent-box" :span="6">
-                          <span class="teachContent-box-title">{{$t('smartClassDB.block4SubTitle3')}}</span>
-                          <span class="teachContent-box-num">643</span>
-                          <span class="teachContent-box-subnum">{{$t('smartClassDB.block4SubTitle4')}} : 11</span>
-                        </Col>                
-                      </Row>
-                    </Col>
-                    <Col :span="7" style="height:100%">
-                      <RingPie :id="'ringPie4'"></RingPie>
-                    </Col>
-                  </Row>
-                </div>
-              </div>
-            </div>
-            <div style="height: 1.5%"></div>
-            <div class="block-border" style="height: 21%;position: relative;background-color: rgba(217, 217, 217, 0.14);">
-              <!-- 边角设计 start-->
-              <div class="image-border image-border-left-top" ></div>
-              <div class="image-border image-border-right-top" ></div>
-              <div class="image-border image-border-left-bottom" ></div>
-              <div class="image-border image-border-lright-bottom" ></div>
-              <!-- 边角设计 end-->
-              <div style="height: 100%">
-                <div style="height: 20%;">
-                  <h5 style="font-size: 1.25em;color: #E4E9DC;padding: 10px 0 15px 15px;font-weight: 100;">{{$t('smartClassDB.block4Title2')}}</h5>
-                </div>
-                <div class="teachingEvent">
-                  <Row type="flex" justify="center" align="middle" class="teachingEvent-row">
-                    <Col class="teachingEvent-row-col" :span="17">
-                      <Row type="flex" justify="space-around" align="middle" class="teachContent">
-                        <Col class="teachContent-box" :span="6">
-                          <span class="teachContent-box-title">{{$t('smartClassDB.block4SubTitle5')}}</span>
-                          <span class="teachContent-box-num">519</span>
-                          <span class="teachContent-box-subnum">{{$t('smartClassDB.block4SubTitle4')}} : 11</span>
-                        </Col>
-                        <Col class="teachContent-box" :span="6">
-                          <span class="teachContent-box-title">{{$t('smartClassDB.block4SubTitle6')}}</span>
-                          <span class="teachContent-box-num">410</span>
-                          <span class="teachContent-box-subnum">{{$t('smartClassDB.block4SubTitle4')}} : 11</span>
-                        </Col>
-                        <Col class="teachContent-box" :span="6">
-                          <span class="teachContent-box-title">{{$t('smartClassDB.block4SubTitle7')}}</span>
-                          <span class="teachContent-box-num">426</span>
-                          <span class="teachContent-box-subnum">{{$t('smartClassDB.block4SubTitle4')}} : 11</span>
-                        </Col>                
-                      </Row>
-                    </Col>
-                    <Col :span="7" style="height:100%">
-                      <RingPie :id="'ringPie5'"></RingPie>
-                    </Col>
-                  </Row>
+                <div style="height: 1.5%"></div>
+                <div class="block-border" style="height: 51%;position: relative;background-color: rgba(217, 217, 217, 0.14);">
+                  <!-- 边角设计 start-->
+                  <div class="image-border image-border-left-top" ></div>
+                  <div class="image-border image-border-right-top" ></div>
+                  <div class="image-border image-border-left-bottom" ></div>
+                  <div class="image-border image-border-lright-bottom" ></div>
+                  <!-- 边角设计 end-->   
+                  <h5 style="border-bottom: 1px solid #94998a;font-size: 1.25em;color: #E4E9DC;font-weight: 100;height: 15%;padding: 10px;">各年級資源產出分佈</h5>
+                  <div style="height: 85%;">
+                    <ClassResourceBar :id="'classresourcebar1'"></ClassResourceBar>
+                  </div>
                 </div>
-              </div>
-            </div>
-            <div style="height: 1.5%"></div>
-            <div style="height: 21%;">
-              <Row type="flex" justify="space-between" align="middle" style="height: 100%;">
-                <Col  class="block-border" :span="7" style="height: 100%;position: relative;background-color: rgba(217, 217, 217, 0.14);">
+              </Col>
+              <Col style="padding-left: 14px;" :span="16" class="block-4">
+                <div class="block-border" style="height: 31.5%;position: relative;background-color: rgba(217, 217, 217, 0.14);">
                   <!-- 边角设计 start-->
                   <div class="image-border image-border-left-top" ></div>
                   <div class="image-border image-border-right-top" ></div>
                   <div class="image-border image-border-left-bottom" ></div>
                   <div class="image-border image-border-lright-bottom" ></div>
                   <!-- 边角设计 end-->
-                  <h5 style="height: 15%;font-size: 1.25em;color: #E4E9DC;padding-top: 10px;font-weight: 100;text-align: center;">{{$t('smartClassDB.block4Title3')}}</h5>
-                  <div style="height: 85%">
-                    <FinishPercentPie :id="'finishpercentpie1'"></FinishPercentPie>
+                  <div style="height: 100%">
+                    <div style="height: 20%;">
+                      <h5 style="font-size: 1.25em;color: #E4E9DC;padding: 10px 0 15px 15px;font-weight: 100;">{{$t('smartClassDB.block4Title1')}}</h5>
+                    </div>
+                    <div class="teachingEvent">
+                      <Row type="flex" justify="center" align="middle" class="teachingEvent-row">
+                        <Col class="teachingEvent-row-col" :span="17">
+                          <Row type="flex" justify="space-around" align="middle" class="teachContent">
+                            <Col class="teachContent-box" :span="6">
+                              <span class="teachContent-box-title">{{$t('smartClassDB.block4SubTitle1')}}</span>
+                              <span class="teachContent-box-num">175</span>
+                              <span class="teachContent-box-subnum">{{$t('smartClassDB.block4SubTitle4')}} : 11</span>
+                            </Col>
+                            <Col class="teachContent-box" :span="6">
+                              <span class="teachContent-box-title">{{$t('smartClassDB.block4SubTitle2')}}</span>
+                              <span class="teachContent-box-num">537</span>
+                              <span class="teachContent-box-subnum">{{$t('smartClassDB.block4SubTitle4')}} : 11</span>
+                            </Col>
+                            <Col class="teachContent-box" :span="6">
+                              <span class="teachContent-box-title">{{$t('smartClassDB.block4SubTitle3')}}</span>
+                              <span class="teachContent-box-num">643</span>
+                              <span class="teachContent-box-subnum">{{$t('smartClassDB.block4SubTitle4')}} : 11</span>
+                            </Col>                
+                          </Row>
+                        </Col>
+                        <Col :span="7" style="height:100%">
+                          <RingPie :id="'ringPie4'"></RingPie>
+                        </Col>
+                      </Row>
+                    </div>
                   </div>
-                </Col>
-                <Col  class="block-border" :span="7" style="height: 100%;position: relative;background-color: rgba(217, 217, 217, 0.14);">
+                </div>
+                <div style="height: 2.3%"></div>
+                <div class="block-border" style="height: 31.5%;position: relative;background-color: rgba(217, 217, 217, 0.14);">
                   <!-- 边角设计 start-->
                   <div class="image-border image-border-left-top" ></div>
                   <div class="image-border image-border-right-top" ></div>
                   <div class="image-border image-border-left-bottom" ></div>
                   <div class="image-border image-border-lright-bottom" ></div>
                   <!-- 边角设计 end-->
-                  <h5 style="height: 15%;font-size: 1.25em;color: #E4E9DC;padding-top: 10px;font-weight: 100;text-align: center;">{{$t('smartClassDB.block4Title4')}}</h5>
-                  <div style="height: 85%">
-                    <FinishPercentPie :pieData="{total: 537, value: 354}" :id="'finishpercentpie2'"></FinishPercentPie>
+                  <div style="height: 100%">
+                    <div style="height: 20%;">
+                      <h5 style="font-size: 1.25em;color: #E4E9DC;padding: 10px 0 15px 15px;font-weight: 100;">{{$t('smartClassDB.block4Title2')}}</h5>
+                    </div>
+                    <div class="teachingEvent">
+                      <Row type="flex" justify="center" align="middle" class="teachingEvent-row">
+                        <Col class="teachingEvent-row-col" :span="17">
+                          <Row type="flex" justify="space-around" align="middle" class="teachContent">
+                            <Col class="teachContent-box" :span="6">
+                              <span class="teachContent-box-title">{{$t('smartClassDB.block4SubTitle5')}}</span>
+                              <span class="teachContent-box-num">519</span>
+                              <span class="teachContent-box-subnum">{{$t('smartClassDB.block4SubTitle4')}} : 11</span>
+                            </Col>
+                            <Col class="teachContent-box" :span="6">
+                              <span class="teachContent-box-title">{{$t('smartClassDB.block4SubTitle6')}}</span>
+                              <span class="teachContent-box-num">410</span>
+                              <span class="teachContent-box-subnum">{{$t('smartClassDB.block4SubTitle4')}} : 11</span>
+                            </Col>
+                            <Col class="teachContent-box" :span="6">
+                              <span class="teachContent-box-title">{{$t('smartClassDB.block4SubTitle7')}}</span>
+                              <span class="teachContent-box-num">426</span>
+                              <span class="teachContent-box-subnum">{{$t('smartClassDB.block4SubTitle4')}} : 11</span>
+                            </Col>                
+                          </Row>
+                        </Col>
+                        <Col :span="7" style="height:100%">
+                          <RingPie :id="'ringPie5'"></RingPie>
+                        </Col>
+                      </Row>
+                    </div>
                   </div>
-                </Col>
-                <Col  class="block-border" :span="7" style="height: 100%;position: relative;background-color: rgba(217, 217, 217, 0.14);">
+                </div>
+                <div style="height: 2.3%"></div>
+                <div style="height: 32.5%;">
+                  <Row style="height: 100%;">
+                    <Col :span="8" style="height: 100%;padding-right:1.5%;">
+                      <div class="block-border" style="height: 100%;position: relative;background-color: rgba(217, 217, 217, 0.14);">
+                        <!-- 边角设计 start-->
+                        <div class="image-border image-border-left-top" ></div>
+                        <div class="image-border image-border-right-top" ></div>
+                        <div class="image-border image-border-left-bottom" ></div>
+                        <div class="image-border image-border-lright-bottom" ></div>
+                        <!-- 边角设计 end-->
+                        <h5 style="height: 15%;font-size: 1.25em;color: #E4E9DC;padding-top: 10px;font-weight: 100;text-align: center;">{{$t('smartClassDB.block4Title3')}}</h5>
+                        <div style="height: 85%">
+                          <FinishPercentPie :id="'finishpercentpie1'"></FinishPercentPie>
+                        </div>
+                      </div>
+                    </Col>
+                    <Col :span="8" style="height: 100%;padding:0 1%;">
+                      <div class="block-border" style="height: 100%;position: relative;background-color: rgba(217, 217, 217, 0.14);">
+                        <!-- 边角设计 start-->
+                        <div class="image-border image-border-left-top" ></div>
+                        <div class="image-border image-border-right-top" ></div>
+                        <div class="image-border image-border-left-bottom" ></div>
+                        <div class="image-border image-border-lright-bottom" ></div>
+                        <!-- 边角设计 end-->
+                        <h5 style="height: 15%;font-size: 1.25em;color: #E4E9DC;padding-top: 10px;font-weight: 100;text-align: center;">{{$t('smartClassDB.block4Title4')}}</h5>
+                        <div style="height: 85%">
+                          <FinishPercentPie :pieData="{total: 537, value: 354}" :id="'finishpercentpie2'"></FinishPercentPie>
+                        </div>                        
+                      </div>
+                    </Col>
+                    <Col  :span="8" style="height: 100%;padding-left: 1.5%;">
+                      <div class="block-border"  style="height: 100%;position: relative;background-color: rgba(217, 217, 217, 0.14);">
+                        <!-- 边角设计 start-->
+                        <div class="image-border image-border-left-top" ></div>
+                        <div class="image-border image-border-right-top" ></div>
+                        <div class="image-border image-border-left-bottom" ></div>
+                        <div class="image-border image-border-lright-bottom" ></div>
+                        <!-- 边角设计 end-->
+                        <h5 style="height: 15%;font-size: 1.25em;color: #E4E9DC;padding-top: 10px;font-weight: 100;text-align: center;">{{$t('smartClassDB.block4Title5')}}</h5>
+                        <div style="height: 85%">
+                          <FinishPercentPie :pieData="{total: 643, value:379}" :id="'finishpercentpie3'"></FinishPercentPie>
+                        </div>
+                      </div>
+                    </Col>
+                  </Row>
+                </div>
+              </Col>
+            </Row>
+            <div style="height: 1.5%"></div>
+            <Row style="height: 34%;">
+              <Col style="height: 100%;"> 
+                <div class="block-border" style="height: 100%;position: relative;background-color: rgba(217, 217, 217, 0.14);">
                   <!-- 边角设计 start-->
                   <div class="image-border image-border-left-top" ></div>
                   <div class="image-border image-border-right-top" ></div>
                   <div class="image-border image-border-left-bottom" ></div>
                   <div class="image-border image-border-lright-bottom" ></div>
                   <!-- 边角设计 end-->
-                  <h5 style="height: 15%;font-size: 1.25em;color: #E4E9DC;padding-top: 10px;font-weight: 100;text-align: center;">{{$t('smartClassDB.block4Title5')}}</h5>
-                  <div style="height: 85%">
-                    <FinishPercentPie :pieData="{total: 643, value:379}" :id="'finishpercentpie3'"></FinishPercentPie>
+                  <div style="height: 20%">
+                    <h5 style="font-size: 1.25em;color: #E4E9DC;padding: 15px 0 0 15px;font-weight: 100;">{{$t('smartClassDB.block4Title6')}}</h5>                
                   </div>
-                </Col>
-              </Row>
-            </div>
-            <div style="height: 1.5%"></div>
-            <div class="block-border" style="height: 32.5%;position: relative;background-color: rgba(217, 217, 217, 0.14);">
-              <!-- 边角设计 start-->
-              <div class="image-border image-border-left-top" ></div>
-              <div class="image-border image-border-right-top" ></div>
-              <div class="image-border image-border-left-bottom" ></div>
-              <div class="image-border image-border-lright-bottom" ></div>
-              <!-- 边角设计 end-->
-              <div style="height: 20%">
-                <h5 style="font-size: 1.25em;color: #E4E9DC;padding: 15px 0 0 15px;font-weight: 100;">{{$t('smartClassDB.block4Title6')}}</h5>                
-              </div>
-              <div style="height: 80%">
-                <TotalLine :id="'totalLine1'"></TotalLine>
-              </div>
-            </div>            
+                  <div style="height: 80%">
+                    <TotalLine :id="'totalLine1'"></TotalLine>
+                  </div>
+                </div>  
+              </Col>
+            </Row>
           </Col>
         </Row>
       </div>
@@ -540,6 +538,7 @@ import RingPie from '@/components/graph/ringPie'
 import CourseBar from '@/components/graph/courseBar'
 import FinishPercentPie from '@/components/graph/finishPercentPie'
 import TotalLine from '@/components/graph/totalLine'
+import ClassResourceBar from '@/components/graph/classResourceBar'
 
 export default {
   name:'smart-dashboard',
@@ -566,7 +565,8 @@ export default {
     RingPie,
     CourseBar,
     FinishPercentPie,
-    TotalLine
+    TotalLine,
+    ClassResourceBar
   },
   methods:{   
   }