Merge remote-tracking branch 'origin/TPE/develop' into TPE/develop

TEAMModelOS/ClientApp/src/api/index.js

@@ -24,6 +24,8 @@ import studentWeb from './studentWeb'
 import regist from './regist'
 import forgetPW from './forgetPW'
 import classroom from './classroom'
+import serviceDriveAuth from './serviceDriveAuth'
+
 export default {
     accessToken,
     learnActivity,
@@ -48,6 +50,7 @@ export default {
     regist,
     forgetPW,
     classroom,
+    serviceDriveAuth,
     // 获取登录跳转链接
     getLoginLink: function (data) {
         return post('api/login/login', data)

TEAMModelOS/ClientApp/src/api/serviceDriveAuth.js

@@ -0,0 +1,9 @@
+import { fetch, post } from '@/api/http'
+
+
+export default {
+    GetHiteachList: function (data) {        
+        return post('/school/init/get-school-product', {'school_code': data} )
+       
+    }
+}

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

@@ -74,7 +74,13 @@ export default {
   csTips4: 'at least one item needs to be reserved! ',
   csTips5: 'upload succeeded! ',
   csTips6: 'this serial number has been bound to the classroom! ',
-  csTips7: 'Delete succese£¡',
+  csTips7: 'Delete succese��',
   presetClassroomName: 'preset classroom',
-  presetHeadmaster: 'no head teacher specified'
+  presetHeadmaster: 'no head teacher specified',
+  sokapp:'�格拉底议课',
+  remotcls:'远�教室�务',
+  sokdesk:'�格拉底桌�',
+  sokrpt:'�格拉底报告',
+  sokvdo:'�格拉底影片',
+  ezs:'录播系统'
 }

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

@@ -72,6 +72,11 @@ export default {
   csTips6: '此序号已绑定到教室！',
   csTips7: '删除成功！',
   presetClassroomName: '教室',
-  presetHeadmaster: '未指定班主任'
-
+  presetHeadmaster: '未指定班主任',
+  sokapp:'苏格拉底议课',
+  remotcls:'远距教室服务',
+  sokdesk:'苏格拉底桌面',
+  sokrpt:'苏格拉底报告',
+  sokvdo:'苏格拉底影片',
+  ezs:'录播系统'
 }

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

@@ -71,6 +71,11 @@ export default {
   csTips6: '此序號已綁定到教室！',
   csTips7: '刪除成功！',
   presetClassroomName: '教室',
-  presetHeadmaster: '未指定班主任'
-
+  presetHeadmaster: '未指定班主任',
+  sokapp:'蘇格拉底議課',
+  remotcls:'遠距教室服務',
+  sokdesk:'蘇格拉底桌面',
+  sokrpt:'蘇格拉底報告',
+  sokvdo:'蘇格拉底影片',
+  ezs:'錄播系統'
 }

TEAMModelOS/ClientApp/src/mock/serviceDriveAuth.js

@@ -65,7 +65,7 @@ export default {
         id: "hbcn",
         code: "Product",
         serials: {
-          "auth|58": [
+          "auth|338": [
             {
               id: "117074",
               serial: "12DLT43F-EE20-4775-93F5-6BCC",

TEAMModelOS/ClientApp/src/store/module/schoolBaseInfo.js

@@ -3,6 +3,8 @@ import JSONPath from 'jsonpath'
 export default {
     namespaced: true,
     state: {
+        // "sokapp":"蘇格拉底議課APP" "remotcls":"遠距教室服務" "sokdesk":"蘇格拉底桌面" "sokrpt":"蘇格拉底報告" "sokvdo":"蘇格拉底影片" "ezs":"ezStation錄播系統"
+        aprules:["sokapp", "remotcls", "sokdesk", "sokrpt", "sokvdo", "ezs"],
         schoolBaseInfo: {
             period: []
         },
@@ -18,6 +20,7 @@ export default {
         getGrades: state => state.srvAdr,
         getStudent: state => state.students,
         getSchoolInfo: state => state.schoolBaseInfo,
+        getAprules: state=> state.aprules
     },
     mutations: {
         setSchoolInfo(state, data) {

TEAMModelOS/ClientApp/src/store/module/serviceDriveAuth.js

@@ -1,3 +1,4 @@
+import apiTools from "@/api";
 import serviceDriveAuth from "@/mock/serviceDriveAuth";
 //先接入假資料
 
@@ -5,11 +6,25 @@ export default {
   namespaced: true,
   state: {
     //假設一開始未定，等待DB資料進來，從action非同步，然後操作mutation，改變State
+
+    schoolCode: "hbcn", //HBCN 學校代碼 (參考hbcn先寫死)
+
+    //接mockData 使用
     serviceList: undefined,
     hiteachAuthList: undefined,
     spaceStatus: undefined,
     serviceIntroIsOpen: [],
     hiteachListItemIsOpen: [], //存放每個開關
+
+    //接實際api使用，一開始序號為空
+    serial: [],
+    serialInfo: {
+      totalNum: 0,
+      multiAuthNum: 0, //大量授權
+      singleAuthNum: 0, //單一授權
+      couldActiveNum: 0, //可啟用裝置數
+      activeNum: 0, //已啟用裝置數
+    },
   },
   getters: {
     getServiceIntroIsOpen: (state) => {
@@ -25,11 +40,19 @@ export default {
         return {};
       }
     },
+    getHiteachAuthListInfo: (state) => {
+      return state.serialInfo;
+    },
     getHiteachAuthList: (state) => {
-      if (state.hiteachAuthList !== undefined) {
+      /*if (state.hiteachAuthList !== undefined) {
         return state.hiteachAuthList;
       } else {
         return {};
+      }*/
+      if (state.serial !== undefined) {
+        return state.serial;
+      } else {
+        return {};
       }
     },
     getSpaceStatus: (state) => {
@@ -51,7 +74,45 @@ export default {
       state.serviceList = data;
     },
     setHiteachAuthList(state, data) {
-      state.hiteachAuthList = data;
+      //state.hiteachAuthList = data;  //接mock
+      state.serial = data;
+      state.serialInfo.totalNum = data.length;
+
+      //計算大量授權數
+      let multiAuthNum = 0;
+      data.forEach((item) => {
+        if (item.deviceMax > 1) {
+          multiAuthNum += 1;
+        }
+      });
+      state.serialInfo.multiAuthNum = multiAuthNum;
+
+      //計算單一授權數
+      let singleAuthNum = 0;
+      data.forEach((item) => {
+        if (item.deviceMax == 1) {
+          singleAuthNum += 1;
+        }
+      });
+      state.serialInfo.singleAuthNum = singleAuthNum
+
+      //計算可啟用裝置數
+      let couldActiveNum = 0;
+      data.forEach((item) => {
+        if (item.expireStatus != "F") {
+          couldActiveNum += item.deviceMax;
+        }
+      });
+      state.serialInfo.couldActiveNum = couldActiveNum;
+      //計算已啟用裝置數
+      let activeNum = 0;
+      data.forEach((item) => {
+        if (item.expireStatus == "A" || item.expireStatus == "S") {
+          //console.log(item.deviceBound.length)
+          activeNum += item.deviceBound.length;
+        }
+      });
+      state.serialInfo.activeNum = activeNum;
     },
     setSpaceStatus(state, data) {
       state.spaceStatus = data;
@@ -66,11 +127,12 @@ export default {
         let servicedata = serviceDriveAuth.serviceDriveAuthData.serviceList;
         let hiteachAuthdata =
           serviceDriveAuth.serviceDriveAuthData.hiteachClassroomAuth;
-       
+
         let spaceStatusData = serviceDriveAuth.serviceDriveAuthData.spaceStatus;
-        let temp = [],temp2=[];
-       
-        let hiteachlistlength=hiteachAuthdata[0].serials.auth.length
+        let temp = [],
+          temp2 = [];
+
+        let hiteachlistlength = hiteachAuthdata[0].serials.auth.length;
         //根據服務的長度生出開關，只要服務數量變動就必須重置
         for (let i = 0; i < servicedata.length; i++) {
           temp.push({
@@ -78,7 +140,6 @@ export default {
             isOpen: false,
           });
         }
-       
 
         for (let i = 0; i < hiteachlistlength; i++) {
           temp2.push({
@@ -87,15 +148,45 @@ export default {
           });
         }
         context.commit("setServiceIntroIsOpen", temp);
-          context.commit('setHiteachListItemIsOpen',temp2)
-          context.commit("setServiceList", servicedata);
-          context.commit("setHiteachAuthList", hiteachAuthdata);
-          context.commit("setSpaceStatus", spaceStatusData);
-       
-        
+        //context.commit("setHiteachListItemIsOpen", temp2);
+        context.commit("setServiceList", servicedata);
+        //context.commit("setHiteachAuthList", hiteachAuthdata);
+        context.commit("setSpaceStatus", spaceStatusData);
 
         resolve({});
       });
     },
+
+    //
+    getHiteachAuthList(context, schoolCode) {
+      return new Promise((resolve, reject) => {
+        apiTools.serviceDriveAuth.GetHiteachList(schoolCode).then(
+          (res) => {
+            let temp = [];
+            for (let i = 0; i < res.serial.length; i++) {
+              temp.push({
+                index: i,
+                isOpen: false,
+              });
+            }
+            context.commit("setHiteachListItemIsOpen", temp);
+
+            context.commit("setHiteachAuthList", res.serial);
+
+            resolve({
+              code: 1,
+              message: "Get HiteachList successful",
+            });
+          },
+          (err) => {
+            reject({
+              code: 0,
+              data: [],
+              message: "Get HiteachList API error!",
+            });
+          }
+        );
+      });
+    },
   },
 };

TEAMModelOS/ClientApp/src/store/module/user.js

@@ -548,6 +548,11 @@ export default {
             context.commit('setStudentProfile', data)
         },
         async checkSchoolProfile(context) {
+            let school_profile = localStorage.getItem('school_profile')
+            if(school_profile){
+                context.dispatch('setSchoolProfile', JSON.parse(decodeURIComponent(school_profile,"utf-8")))
+            }
+
             let login_schooCode = localStorage.getItem('login_schooCode')
             let id_token = localStorage.getItem('id_token')
 

TEAMModelOS/ClientApp/src/view/schoolmgmt/ClassroomSetting/ClassroomSetting.less

@@ -386,10 +386,60 @@
     }
 }
 .hiteach-collapse{
+    border-bottom: 1px solid #424242;
+    position: relative;
+    cursor: pointer;
     &-main{
+        display: flex;
+        align-items: center;
+        padding: 20px 0 20px 20px;
         &:hover{
             background-image: linear-gradient(90deg, rgba(30,30,30,0) 0%, rgba(110,110,110,.2) 50%, rgba(110,110,110,.4) 100%);
         }
+        .arrowIcon{
+            position: absolute;
+            right: 5px;
+            top: 20px;
+        }
+        .proIcon{
+            width: 60px;
+            height: 60px;
+            margin-right: 30px;
+        }
+        .proCont{
+            font-size: 12px;
+            letter-spacing: 1px;
+            ul li{
+                .title{
+                    display: inline-block;
+                    margin-right: 12px;
+                    font-size: 16px;
+                    font-weight: 500;
+                    color: #bdbdbd;
+                    color:white;
+                }
+                .serialType{
+                    margin-right: 12px;
+                    padding: 2px 5px;
+                    background: #1cc0f3;
+                    border-radius: 3px;
+                    color: white;
+                }
+                .tag{
+                    display: inline-block;
+                    border: 1px solid #8d8d8d;
+                    padding: 3px 10px;
+                    color: #8d8d8d;
+                    margin-top: 5px;
+                    margin-right: 10px;
+                    border-radius: 5px;
+                    &.active{
+                        color: #1cc0f3!important;
+                        border-color: #1cc0f3!important;
+                    }
+                }
+            }
+        }
     }
     .hiteach-collapse-sub{
         &:hover{

TEAMModelOS/ClientApp/src/view/schoolmgmt/ClassroomSetting/ClassroomSetting.vue

@@ -11,7 +11,7 @@
                         {{ '班级列表' }}
                         <Icon type="ios-arrow-down"></Icon>
                     </span>
-                    <DropdownMenu slot="list" v-for="(item,index) in this.$store.state.schoolBaseInfo.schoolBaseInfo.period" :value="item.id" :key="index">
+                    <DropdownMenu slot="list" v-for="(item,index) in periods" :value="item.id" :key="index">
                         <DropdownItem :name="item.id">{{ item.name }}</DropdownItem>
                     </DropdownMenu>
                 </Dropdown>
@@ -176,40 +176,40 @@
                             </p>
                             <div class="class-list-filter">
                                 <div class="class-list-filter-box">
-                                    <Dropdown class="sort-dropdown" trigger="click" placement="bottom-start">
+                                    <Dropdown class="sort-dropdown" trigger="click" placement="bottom-start" @on-click="function(e){ filterHiteachVer = e }" >
                                         <span style="cursor: pointer;color:white;">
                                             {{ '顯示所有版本的Hiteach' }}
                                             <Icon type="ios-arrow-down"></Icon>
                                         </span>
                                         <DropdownMenu slot="list">
-                                            <DropdownItem name="All">{{ '顯示所有版本的Hiteach' }}</DropdownItem>
-                                            <DropdownItem name="Standard">{{ '僅顯示Hiteach Standard版本' }}</DropdownItem>
-                                            <DropdownItem name="Pro">{{ '僅顯示Hiteach Pro版本' }}</DropdownItem>
+                                            <DropdownItem name="ALL">{{ '顯示所有版本的Hiteach' }}</DropdownItem>
+                                            <DropdownItem name="STD">{{ '僅顯示Hiteach Standard版本' }}</DropdownItem>
+                                            <DropdownItem name="PRO">{{ '僅顯示Hiteach Pro版本' }}</DropdownItem>
                                             <DropdownItem name="TBL">{{ '僅顯示Hiteach TBL版本' }}</DropdownItem>
                                         </DropdownMenu>
                                     </Dropdown>
                                     <div class="dark-iview-input" style="padding-right:10px;">
-                                        <Input clearable v-model="serchCode" size="small" suffix="ios-search" @on-change="filterCode"></Input>
+                                        <Input clearable v-model="serchCode" size="small" suffix="ios-search" ></Input>
                                     </div>
                                 </div>
                             </div>
                         </div>
                         <div class="hiteach-code-wrap-list">
                             <vuescroll>
-                                <div class="hiteach-collapse" style="border-bottom: 1px solid #424242;position: relative;cursor: pointer;" v-for="(item, index) in showhiteachData" :key="index">
-                                    <div @click="openHiSub(index)" class="hiteach-collapse-main" style="display: flex;align-items: center;padding: 20px 0 20px 20px;">
+                                <div class="hiteach-collapse" v-for="(item, index) in showhiteachData" :key="index">
+                                    <div @click="openHiSub(index)" class="hiteach-collapse-main">
 
-                                        <Icon v-if="item.deviceMax > 1" :type="item.subOpen ? 'ios-arrow-up' : 'ios-arrow-down'" size="30" color="white" style="position: absolute;right: 5px;top: 20px;"/>
+                                        <Icon class="arrowIcon" v-if="item.deviceMax > 1" :type="item.subOpen ? 'ios-arrow-up' : 'ios-arrow-down'" size="30" color="white" />
 
-                                        <v-icon style="width: 60px;height: 60px;margin-right: 30px;" :iconClass="item.prodName == 'STD' ? 'htc_std' : item.prodName == 'TBL' ? 'htc_tbl' : 'htc_pro'" />
+                                        <v-icon class="proIcon" :iconClass="item.prodName == 'STD' ? 'htc_std' : item.prodName == 'TBL' ? 'htc_tbl' : 'htc_pro'" />
 
-                                        <div style="font-size: 12px;letter-spacing: 1px;">
+                                        <div class="proCont">
                                             <ul>
                                                 <li>
-                                                    <h1 class="title" style="display: inline-block;margin-right: 12px;font-size: 16px;font-weight: 500;color: #bdbdbd;color:white;">
+                                                    <h1 class="title">
                                                         {{ item.prodGroup +' '+item.prodName}}
                                                     </h1>
-                                                    <span style="margin-right: 12px;padding: 2px 5px;background: #1cc0f3;border-radius: 3px;color: white;;">
+                                                    <span class="serialType">
                                                         {{ item.deviceMax == 1 ? $t('單一') : $t('大量')}}
                                                     </span>
                                                     <span style="color: #1cc0f3;font-size:12px">
@@ -218,15 +218,10 @@
                                                     </span>
                                                 </li>
                                                 <li><span style="color: #1cc0f3;">{{ item.serial }}</span></li>
-                                                <li>
-                                                    <Tag type="border" :color="item.aprule.sokapp ? '#1cc0f3' : '#8d8d8d'"> {{ $t('蘇格拉底議課')}}</Tag>
-                                                    <Tag type="border" :color="item.aprule.sokreport ? '#1cc0f3' : '#8d8d8d'"> {{ $t('蘇格拉底報告')}}</Tag>
-                                                    <Tag type="border" :color="item.aprule.sokDestop ? '#1cc0f3' : '#8d8d8d'"> {{ $t('蘇格拉底桌面')}}</Tag>
-                                                    <Tag type="border" :color="item.aprule.sokvdo ? '#1cc0f3' : '#8d8d8d'"> {{ $t('蘇格拉底影片')}}</Tag>
-                                                    <Tag type="border" :color="item.aprule.remoteSys ? '#1cc0f3' : '#8d8d8d'"> {{ $t('遠距教室服務')}}</Tag>
-                                                    <Tag type="border" :color="item.aprule.ezs ? '#1cc0f3' : '#8d8d8d'"> {{ $t('錄播系統')}}</Tag>
+                                                <li style="display: block;">
+                                                    <div v-for="(aprule, index) in aprules" :key="index" class="tag" :class="{active: item.aprule[aprule]}">{{ $t('schoolBaseInfo.'+ aprule)}}</div>
                                                 </li>
-                                                <li><span style="color: #8d8d8d;">序號到期日： </span>{{item.DateDate | timeFmt}}</li>
+                                                <li><span style="color: #8d8d8d;">{{$t('序號到期日')}}： </span>{{item.endDate | timeFmt}}</li>
                                             </ul>
                                         </div>
                                     </div>
@@ -239,13 +234,13 @@
                                                     <ul>
                                                         <!-- 被關聯要變色 #888888;-->
                                                         <li>
-                                                            <h3>{{ dbItem.uuid }}</h3>
+                                                            <h3>{{ dbItem.pcname }}</h3>
                                                         </li>
                                                         <li>
-                                                            <span>{{ dbItem.ip }} | {{ dbItem.deveiceId }} </span>
+                                                            <span>{{ dbItem.ip }} {{ dbItem.uuid ? ' | '+ dbItem.uuid : dbItem.uuid2 ? ' | ' + dbItem.uuid2 : ''}} </span>
                                                         </li>
                                                         <li>
-                                                            <span>{{ dbItem.computer }}</span>
+                                                            <span>{{ dbItem.os }}</span>
                                                         </li>
                                                     </ul>
                                                     <span v-if="false" style="color: #1cc0f3;padding: 0 15px;">
@@ -257,7 +252,7 @@
                                         <template v-else>
                                             <div class="hiteach-collapse-sub gradient" style="display: flex;align-items: center;border-top: 1px solid rgb(66, 66, 66);margin-left: 20px;letter-spacing: 1px;font-size: 12px;padding: 20px;">
                                                 <span style="margin-right: 70px;" ></span>
-                                                <div style="display: flex;justify-content: space-between;align-items: center;width: 100%;">
+                                                <div style="display: flex;justify-content: space-between;align-items: center;width: 100%;color: #8d8d8d">
                                                     {{ '此序號尚未啟用' }}
                                                 </div>
                                             </div>
@@ -336,13 +331,14 @@
                 }
             }
             return {
-                showhiteachData: [],
+                hiteachData: [],
                 tblFlag: false,
                 stdFlag: false,
                 proFlag: false,
                 test1: true,
 // 開發中
                 orderBy: 'id',
+                filterHiteachVer: 'ALL',
                 updateBefore:'',
                 filterPeriod: undefined,
                 editStatus: true,//可切换编辑状态
@@ -501,13 +497,14 @@
         computed: {
             ...mapGetters({
                 periods: 'user/getPeriods', // 學制s
-                classes: 'user/getClasses', // 教室ID
+                aprules: 'schoolBaseInfo/getAprules', // 學制s                
             }),
             filterPeriodName: function(){
+                let data = this.periods
                 let pId = this.filterPeriod
                 let name = ''
                 if(pId !== ''){
-                    let temp = this.$store.state.schoolBaseInfo.schoolBaseInfo.period.filter( item => {
+                    let temp = data.filter( item => {
                         return pId == item.id
                     })
                     if(temp.length >0 ) name = temp[0].name
@@ -526,6 +523,37 @@
                         return this.$t('依學生數排序')    
                     break;
                 }
+            },
+            showhiteachData: function(){
+                let data = this.hiteachData
+                let filterText = this.filterHiteachVer
+                if( Array.isArray(data) && data.length > 0 && filterText != 'ALL'){
+                    data = data.filter( item => {
+                        return item.prodName == filterText
+                    })
+                }
+
+                if(this.serchCode !=''){
+                    data = data.filter((item, index) => {
+                        let verName = item.prodGroup + item.prodName
+                        let pcNames = false;
+
+                        if(Array.isArray(item.deviceBound) && item.deviceBound.length > 0) {
+                            pcNames = item.deviceBound.some( db => {
+                                if(db.pcname) {
+                                    return db.pcname.indexOf(this.serchCode) != -1
+                                } else {
+                                    return false
+                                }
+                                
+                            })
+                        }
+
+                        return item.serial.indexOf(this.serchCode) != -1 || verName.indexOf(this.serchCode) != -1 || pcNames
+                    })
+                }
+
+                return data
             }
         },
         methods: {
@@ -619,7 +647,7 @@
             },
             confirmAdd() {
                 this.hiTeachs.push(this.hiTeachItem)
-                this.filterCode()
+                // this.filterCode()
                 this.hiTeachItem = {
                     code: '',
                     single: undefined,
@@ -699,13 +727,13 @@
                 this.drawSchoolPlan('imgUrl')
                 this.initIcon()
             },
-            filterCode() {
-                if (this.serchCode == '') {
-                    this.hiTeachsShow = [...this.hiTeachs]
-                } else {
-                    this.hiTeachsShow = this.hiTeachs.filter(item => item.code.indexOf(this.serchCode) != -1)
-                }
-            },
+            // filterCode() {
+            //     if (this.serchCode == '') {
+            //         this.hiTeachsShow = [...this.hiTeachs]
+            //     } else {
+            //         this.hiTeachsShow = this.hiTeachs.filter(item => item.code.indexOf(this.serchCode) != -1)
+            //     }
+            // },
             
             drawText(text, x, y) {
                 this.schoolPlan = document.getElementById('school-plan')
@@ -1107,7 +1135,7 @@
                         this.classroomListShow[this.curClassIndex].style = 'smart'
                         this.updated = true
                     }
-                    this.filterCode()
+                    // this.filterCode()
                 }
             },
             initData() {
@@ -1165,17 +1193,14 @@
                         if(item.deviceMax == 1) item.subOpen = true
                         return item        
                     })
-                    console.log(temp, '3333333333333333333333')
                 })
-                console.log(temp, 'temp')
-                this.showhiteachData = temp
-                console.log(this.showhiteachData, 'showhiteachData')
+                this.hiteachData = temp
             },
             getHiteachList: async function() {
                 let data = []
                 await this.$api.classroom.GetHiteachList(this.$store.state.user.schoolCode).then(
                     (res) => {
-                        data = res.data
+                        data = res.serial
                     },
                     (err) => {
                         this.$Message.error('API error!')
@@ -1184,14 +1209,14 @@
                 return data
             },
             openHiSub(index){
-                if(this.showhiteachData.length > 0){
+                if(this.showhiteachData.length > 0 && this.showhiteachData[index].deviceMax > 1){
                     this.showhiteachData[index].subOpen = !this.showhiteachData[index].subOpen
                 }
             }
         },
         mounted() {
             this.filterClassname()
-            this.filterCode()
+            // this.filterCode()
             this.initData()
             this.initHiteachData()
         },
@@ -1224,6 +1249,7 @@
         },
         created() {
             this.editStatus = this.noStatus
+            this.getClassroom()
             this.$store.dispatch('teachers/getTeacherList').then(res => { })
         }
     }

TEAMModelOS/ClientApp/src/view/serviceDriveAuth/Index.vue

@@ -6,13 +6,13 @@
   <div id="serviceDriveAuth">
     <Row>
       <i-col :xs="24" :sm="24" :md="24" :lg="7">
-        <ServiceList :serviceList="serviceList" />
+        <ServiceList :serviceList="serviceList" :windowWidth='windowWidth' :windowHeight='windowHeight'/> 
       </i-col>
        <i-col :xs="24" :sm="24" :md="24" :lg="11">
-        <HiteachAuthList :hiteachAuthList="hiteachAuthList" />
+        <HiteachAuthList :hiteachAuthList="hiteachAuthList" :windowWidth='windowWidth' :windowHeight='windowHeight'/>
       </i-col>
       <i-col :xs="24" :sm="24" :md="24" :lg="6">
-        <SpaceStatus :spaceStatus="spaceStatus" />
+        <SpaceStatus :spaceStatus="spaceStatus" :windowWidth='windowWidth' :windowHeight='windowHeight' />
       </i-col>
     </Row>
   </div>
@@ -38,7 +38,10 @@ export default {
   watch: {},
 
   data() {
-    return {};
+    return {
+      windowWidth: window.innerWidth,
+      windowHeight: window.innerHeight,
+    };
   },
 
   computed: {
@@ -50,20 +53,43 @@ export default {
   },
 
   methods: {
+    getHiteachAuthList(schoolCode){
+      this.$store.dispatch("serviceDriveAuth/getHiteachAuthList",schoolCode).then(
+        (res) => {
+          this.$Message.success("智慧教室授權管理 取得 HiteachList API資料");
+        },
+        (err) => {
+          this.$Message.error("取得資料失敗");
+        }
+      );
+    },
     getDataAsyc() {
       this.$store.dispatch("serviceDriveAuth/getServiceListDataAsyc").then(
         (res) => {
-          this.$Message.success("取得Mock資料");
+          this.$Message.success("服務授權列表、智慧教學空間狀態取得Mock資料");
         },
         (err) => {
           this.$Message.error("取得資料失敗");
         }
       );
     },
+     onResize() {
+      this.windowWidth = window.innerWidth;
+      this.windowHeight = window.innerHeight;
+    },
   },
   mounted() {
+    //console.log(this.$store.state.user.schoolCode)
+    this.getHiteachAuthList(this.$store.state.user.schoolCode);
     this.getDataAsyc();
+     this.$nextTick(() => {
+      window.addEventListener("resize", this.onResize);
+    });
   },
+  beforeDestroy() {
+    window.removeEventListener("resize", this.onResize);
+  },
+
 };
 </script>
 <style lang="less" >

TEAMModelOS/ClientApp/src/view/serviceDriveAuth/SubComponents/HiteachAuthList.less

@@ -1,4 +1,5 @@
 .hiteachAuth-list {
+  
   .ivu-select-dropdown {
     border-radius: 4px !important;
     width: auto;
@@ -49,6 +50,18 @@
     padding: 20px;
     padding-bottom: 10px;
     padding-left: 30px;
+    .device-max {
+      position: relative;
+      top: 0px;
+      left: 0px;
+      margin-right:4px;
+      display: inline-block;
+      font-size: 8px !important;
+      font-weight: bolder;
+      padding: 2px 5px;
+      background-color: #1cc0f3;
+      border-radius: 3px;
+    }
     .nomal-text {
       font-size: 10px;
       color: #8d8d8d;
@@ -58,6 +71,15 @@
       margin-top: -5px;
       font-weight: 500;
     }
+    .info-num-small{
+      font-size: 30px;
+      display: inline-block;
+      font-weight: 500;
+      position: relative;
+      line-height: 25px;
+      left:15px;
+      top: 6px;
+    }
   }
 
   .action-btn {
@@ -79,9 +101,9 @@
    
   }
   .hiteach-list {
-    height: 76.5vh;
-    padding-bottom: 50px;
-    overflow: scroll;
+   
+    padding-bottom: 80px;
+    overflow: auto;
     border-top: 1px solid rgba(98, 97, 101, 0.4);
     .hiteach-item {
       padding: 23px 0px;
@@ -219,6 +241,20 @@
           border-radius: 4px !important;
         }
       }
+      .remove-pc{
+        animation: 2s removeOut;
+      
+        @keyframes removeOut {
+          0%{
+            transform: translate(0px);
+            
+          }
+          100%{
+            transform: translate(130px);
+            opacity: 0;
+          }
+        }
+      }
       .pclist-empty {
         padding: 10px 50px;
         color: #1cc0f3;

TEAMModelOS/ClientApp/src/view/serviceDriveAuth/SubComponents/HiteachAuthList.vue

@@ -1,31 +1,66 @@
 <template>
   <div class="hiteachAuth-list">
+    <!-- 新增知识点弹窗 -->
+    <Modal
+      id="hiteachAuth-modal"
+      v-model="isOpenRemove"
+      :title="'確定解除授權'"
+      ref="pointRef"
+    >
+      <p>當前您所選中的PC【{{ currentConfirmRemovePC }}】，確定解除授權?</p>
+      <p>解除授權後，可在教室中的電腦再次進行綁定授權。</p>
+
+      <div slot="footer">
+        <Button type="text" @click="isOpenRemove = false">取消</Button>
+        <Button type="primary" @click="removeUserPC(currentConfirmRemovePC)"
+          >確定</Button
+        >
+      </div>
+    </Modal>
+    <Loading v-if="isloading == true"></Loading>
     <div class="service-list">
       <div class="service-listTitle">智慧教室授權管理</div>
       <Row>
-        <i-col :xs="24" :sm="24" :md="24" :lg="16">
+        <i-col :xs="24" :sm="24" :md="24" :lg="19">
           <Row>
-            <i-col :xs="24" :sm="24" :md="24" :lg="8">
+            <i-col :xs="24" :sm="24" :md="24" :lg="13">
               <div class="hiteach-info">
                 <p class="nomal-text">Hiteach序號數</p>
-                <p class="info-num">{{hiteachListItemIsOpenVuex.length}}</p>
+                <Row>
+                  <i-col :xs="24" :sm="24" :md="24" :lg="12">
+                    <p class="device-max">大量</p>
+                    &nbsp;<span class="nomal-text">授權</span>
+                    <p class="info-num-small">{{ serialInfo.multiAuthNum }}</p>
+                  </i-col>
+                  <i-col :xs="24" :sm="24" :md="24" :lg="12">
+                    <p class="device-max">單一</p>
+                    &nbsp;<span class="nomal-text">授權</span>
+                    <p class="info-num-small">{{ serialInfo.singleAuthNum }}</p>
+                  </i-col>
+                </Row>
+
+                <!--p class="info-num">{{ serialInfo.totalNum }}</p-->
               </div>
             </i-col>
-            <i-col :xs="24" :sm="24" :md="24" :lg="8">
+            <i-col :xs="24" :sm="24" :md="24" :lg="5">
               <div class="hiteach-info">
-                <p class="nomal-text">可啟用Hiteach序號數</p>
-                <p class="info-num">{{(hiteachListItemIsOpenVuex.length*225/18).toFixed(0)}}</p>
+                <p class="nomal-text">可啟用裝置數</p>
+                <p class="info-num">
+                  {{ serialInfo.couldActiveNum }}
+                </p>
               </div>
             </i-col>
-            <i-col :xs="24" :sm="24" :md="24" :lg="8">
+            <i-col :xs="24" :sm="24" :md="24" :lg="6">
               <div class="hiteach-info">
-                <p class="nomal-text">已啟用Hiteach序號數</p>
-                <p class="info-num">{{(hiteachListItemIsOpenVuex.length*25/8).toFixed(0)}}</p>
+                <p class="nomal-text">已啟用裝置數</p>
+                <p class="info-num">
+                  {{ serialInfo.activeNum }}
+                </p>
               </div>
             </i-col>
           </Row></i-col
         >
-        <i-col :xs="24" :sm="24" :md="24" :lg="8">
+        <i-col :xs="24" :sm="24" :md="24" :lg="5">
           <div class="action-btn" @click="gotoHiteachMgmt()">
             管理Hiteach教室
           </div>
@@ -54,22 +89,19 @@
         </DropdownMenu>
       </Dropdown>
     </div>
-    <div
-      class="hiteach-list"
-      v-for="(item, index) in hiteachAuthList"
-      :key="index"
-    >
+    <div class="hiteach-list" :style="{ height: windowHeight - 250 + 'px' }">
       <div
         class="hiteach-item"
-        v-for="(i, index) in item.serials.auth"
-        :key="index + 'a'"
+        v-for="(i, index) in hiteachAuthList"
+        :key="i.id"
         v-show="filterCondition(i)"
       >
         <div
           class="detail-btn"
           @click="setIntroOpen(index)"
-          v-if="i.endDate != 1 && i.deviceBound.length != 0"
+          v-if="i.endDate != 1 && i.deviceBound.length != 0 && i.deviceMax != 1"
         >
+          <!--只要是單一就直接展開無需開關控件-->
           <Icon
             v-show="hiteachListItemIsOpen[index].isOpen == false"
             type="ios-arrow-down"
@@ -98,87 +130,85 @@
                 i.deviceMax == 1 ? "單一" : "大量"
               }}</span>
             </p>
-            <p class="serial" :class="{ 'overtime-text': i.endDate == 1 }">
+            <p
+              class="serial"
+              :class="{ 'overtime-text': i.expireStatus == 'F' }"
+            >
               {{ i.serial }}
             </p>
+            
             <p class="app-group">
               <span
+                v-for="(item, index) in aprules"
+                :key="index"
                 class="more-app"
-                :class="{ 'bought-app': i.aprule.sokapp == true }"
-                >蘇格拉底議課</span
-              >
-              <span
-                class="more-app"
-                :class="{ 'bought-app': i.aprule.sokrepor == true }"
-                >蘇格拉底報告</span
-              >
-              <span
-                class="more-app"
-                :class="{ 'bought-app': i.aprule.sokDesktop == true }"
-                >蘇格拉底桌面</span
-              >
-              <span
-                class="more-app"
-                :class="{ 'bought-app': i.aprule.sokvdo == true }"
-                >蘇格拉底影片</span
-              >
-              <span
-                class="more-app"
-                :class="{ 'bought-app': i.aprule.remoteSys == true }"
-                >遠距教室服務</span
-              >
-              <span
-                class="more-app"
-                :class="{ 'bought-app': i.aprule.ezs == true }"
-                >錄播系統</span
+                :class="{
+                  'bought-app': i.aprule.hasOwnProperty(item) == true,
+                }"
+                >{{ $t("schoolBaseInfo." + item) }}</span
               >
             </p>
             <Row>
-              <i-col :xs="24" :sm="24" :md="24" :lg="6"
-                ><p class="nomal-text">
-                  序號到期日：<span class="strong-text" v-if="i.endDate != 1">{{
-                    i.endDate == 0 ? "無到期日" : converTime(i.endDate)
-                  }}</span>
-                  <span class="strong-text" v-if="i.endDate == 1">已到期</span>
-                </p></i-col
-              >
-              <i-col :xs="24" :sm="24" :md="24" :lg="18"
-                ><p class="nomal-text " v-if="i.deviceMax != 1" style="margin-left:4%">
-                  序號使用狀況：<span class="strong-text" v-if="i.endDate != 1"
-                    >{{
-                      i.deviceBound.length > i.deviceMax
-                        ? i.deviceMax
-                        : i.deviceBound.length
-                    }}
-                    / {{ i.deviceMax }} ({{
+              <i-col :xs="24" :sm="24" :md="24" :lg="7">
+                <p class="nomal-text">
+                  序號到期日：<span
+                    class="strong-text"
+                    v-if="i.expireStatus == 'A' || i.expireStatus === ''"
+                    >{{ i.endDate == 0 ? "無到期日" : converTime(i.endDate) }}
+                  </span>
+                  <!--span  class="strong-text" v-if="i.expireStatus === ''">(未啟用)</span-->
+                  <span class="strong-text" v-if="i.expireStatus == 'F'"
+                    >已到期</span
+                  >
+                </p>
+              </i-col>
+              <i-col :xs="24" :sm="24" :md="24" :lg="17"
+                ><p class="nomal-text" style="margin-left: 4%">
+                  序號使用狀況：<span class="strong-text"
+                    >{{ i.deviceBound.length }} / {{ i.deviceMax }} ({{
                       (i.deviceBound.length > i.deviceMax
                         ? 100
                         : (i.deviceBound.length / i.deviceMax) * 100
                       ).toFixed(0) + "%"
                     }})</span
                   >
-                  <span class="strong-text" v-if="i.endDate == 1"
-                    >0 / {{ i.deviceMax }} (0%)</span
-                  >
                 </p></i-col
               >
             </Row>
           </i-col>
         </Row>
+        <!--只要是單一就直接展開無需開關控件-->
         <ul
           class="pclist"
-          v-if="i.endDate != 1 && hiteachListItemIsOpen[index].isOpen == true"
+          v-if="
+            (i.endDate != 1 && hiteachListItemIsOpen[index].isOpen == true) ||
+            i.deviceMax == 1
+          "
         >
           <li
+            :id="`PC${pc.uuid != null ? pc.uuid : pc.uuid2}`"
             v-for="(pc, index) in i.deviceBound"
             :key="index + 'pc'"
             v-show="i.deviceMax != 1 ? index < i.deviceMax : index < 1"
             class="pclist-item"
           >
-            <p class="pc-title">UserPC-{{ pc.uuid }}</p>
-            <p class="nomal-text">{{ pc.deviceIp }} | {{ pc.deviceMac }}</p>
-            <p class="nomal-text">{{ pc.computer }}</p>
-            <div class="action-btn"><Icon type="md-close" /> 解除授權</div>
+            <p class="pc-title">
+              {{ pc.pcname == null ? "未命名機台" : pc.pcname }}
+            </p>
+            <p class="nomal-text">
+              {{ pc.ip }} | {{ pc.uuid != null ? pc.uuid : pc.uuid2 }}
+            </p>
+            <p class="nomal-text">
+              {{ pc.os }}&nbsp;{{ pc.cpu }}&nbsp;{{
+                (pc.ram / 1000).toFixed(1)
+              }}G RAM
+            </p>
+            <div
+              class="action-btn"
+              @click="comfirmRemovePC(pc.uuid != null ? pc.uuid : pc.uuid2)"
+            >
+              <Icon type="md-close" /> 解除授權
+            </div>
           </li>
           <!--div v-if="i.deviceBound==0" class='pclist-empty' >尚未綁定任何機台</div-->
         </ul>
@@ -191,14 +221,22 @@
 import "@/icons/svg/hiteach_std.svg";
 import "@/icons/svg/hiteach_pro.svg";
 import "@/icons/svg/hiteach_tbl.svg";
+import Loading from "@/common/Loading.vue";
 import { mapGetters } from "vuex";
 export default {
-  props: ["hiteachAuthList"],
+  props: ["hiteachAuthList", "windowHeight", "windowWidth"],
   name: "HiteachAuthList",
+  components: {
+    Loading,
+  },
   data() {
     return {
+      tempRemovePCs: [], //暫存解綁的UserPC的Mac
       hiteachListItemIsOpen: {},
       filterType: "1",
+      currentConfirmRemovePC: "", //暫存讓使用者確認的UserPC
+      isOpenRemove: false,
+      isloading: false,
     };
   },
   created() {
@@ -206,6 +244,8 @@ export default {
   },
   computed: {
     ...mapGetters({
+      serialInfo: "serviceDriveAuth/getHiteachAuthListInfo",
+      aprules: "schoolBaseInfo/getAprules", //讀取周邊產品列表
       hiteachListItemIsOpenVuex: "serviceDriveAuth/getHiteachListItemIsOpen",
     }),
   },
@@ -213,21 +253,55 @@ export default {
     hiteachAuthList: function (value) {
       //根據服務的長度生出開關，只要服務數量變動就必須重置
       let temp = [];
-      let hiteachlistlength = value[0].serials.auth.length;
-      for (let i = 0; i < hiteachlistlength; i++) {
+
+      for (let i = 0; i < value.length; i++) {
         temp.push({
           index: i,
           isOpen: false,
         });
       }
-      console.log(temp);
+      console.log(value, temp);
       this.hiteachListItemIsOpen = temp;
     },
   },
   methods: {
+    //先讓使用者確定是否解除授權
+    comfirmRemovePC(mac) {
+      this.isOpenRemove = true;
+      this.currentConfirmRemovePC = mac;
+    },
+    removeUserPC(mac) {
+      //假設回傳deviceMac，進行解綁動作
+      this.isOpenRemove = false;
+      if (this.tempRemovePCs.includes(mac) == false) {
+        this.tempRemovePCs.push(mac);
+      }
+      //console.log(this.tempRemovePCs);
+      document.getElementById(`PC${mac}`).classList.add("remove-pc");
+      setTimeout(() => {
+        document.getElementById(`PC${mac}`).style.display = "none";
+
+        this.$Message.success("已成功解除授權!");
+      }, 1800);
+      this.isloading = true;
+      setTimeout(() => {
+        this.getDataAsyc();
+        this.isloading = false;
+      }, 3000);
+    },
     gotoHiteachMgmt() {
       this.$router.push("/home/classroom");
     },
+    getDataAsyc() {
+      this.$store.dispatch("serviceDriveAuth/getServiceListDataAsyc").then(
+        (res) => {
+          this.$Message.success("取得Mock資料");
+        },
+        (err) => {
+          this.$Message.error("取得資料失敗");
+        }
+      );
+    },
     filterCondition(item) {
       switch (this.filterType) {
         case "1":
@@ -240,9 +314,9 @@ export default {
         case "4":
           return item.prodName === "TBL";
         case "5":
-          return item.deviceBound.length != 0 && item.endDate != 1;
+          return item.deviceBound.length != 0;
         case "6":
-          return item.endDate == 1;
+          return item.expireStatus === "F";
 
         default:
           return true;
@@ -271,7 +345,7 @@ export default {
       this.hiteachListItemIsOpen[index].isOpen = !this.hiteachListItemIsOpen[
         index
       ].isOpen;
-      console.log(index, this.hiteachListItemIsOpen);
+      //console.log(index, this.hiteachListItemIsOpen);
     },
   },
 };
@@ -279,4 +353,32 @@ export default {
 
 <style lang='less'>
 @import "./HiteachAuthList.less";
+
+#hiteachAuth-modal {
+  .ivu-modal-header {
+    border-radius: 5px 5px 0px 0px !important;
+  }
+  .ivu-modal-footer {
+    border-radius: 0px 0px 5px 5px !important;
+  }
+
+  .ivu-modal-header,
+  .ivu-modal-body,
+  .ivu-modal-footer {
+    background-color: rgb(88, 88, 88) !important;
+    color: white !important;
+    border: none !important;
+  }
+  .ivu-btn-text {
+    color: white;
+    &:hover {
+      background-color: transparent !important;
+      color: #1cc0f3;
+    }
+  }
+  .ivu-modal-header-inner {
+    color: white !important;
+    font-weight: bolder !important;
+  }
+}
 </style>

TEAMModelOS/ClientApp/src/view/serviceDriveAuth/SubComponents/ServiceList.less

@@ -32,9 +32,9 @@
 
   .serviceList-wrap {
     background-color: #232227;
-    height: 87.5vh;
+    //height: 90vh;
     overflow: auto;
-   
+    padding-bottom:20px;
     .service-item {
       background-color: #2b2a2f;
       border: 1px solid rgba(98, 97, 101, 0.4);

TEAMModelOS/ClientApp/src/view/serviceDriveAuth/SubComponents/ServiceList.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="service-list">
     <div class="service-listTitle listTitle-noMargin">服務授權列表</div>
-    <div class="serviceList-wrap">
+    <div class="serviceList-wrap" :style="{'height':(windowHeight-116)+'px'}">
       <div
         class="service-item"
         v-for="(item, index) in serviceList"
@@ -129,7 +129,7 @@ import router from "../../../router";
 import AclassOneChart from './AclassOneChart'
 import { mapGetters } from "vuex";
 export default {
-  props: ["serviceList"],
+  props: ["serviceList","windowWidth","windowHeight"],
   name: "ServiceList",
   data() {
     return {
@@ -174,7 +174,7 @@ export default {
     setIntroOpen(index) {
       this.serviceIntroIsOpen[index].isOpen = !this.serviceIntroIsOpen[index]
         .isOpen;
-      console.log(index, this.serviceIntroIsOpen);
+      //console.log(index, this.serviceIntroIsOpen);
     },
     today() {
       var today = new Date();

TEAMModelOS/ClientApp/src/view/serviceDriveAuth/SubComponents/SpaceChart.vue

@@ -8,7 +8,7 @@ export default {
   name: "SpaceChart",
   data() {
     return {
-      currentColor:"#fff",
+      currentColor: "#fff",
       e: event,
       index: 0,
       mockdata: {
@@ -20,39 +20,42 @@ export default {
           { value: (573 * 0.1).toFixed(0), name: "其他", days: 66 },
           { value: (573 * 0.25).toFixed(0), name: "學生使用", days: 66 },
           { value: (573 * 0.25).toFixed(0), name: "已分配至教師", days: 166 },
-          { value: 1010 - 573, name: "未使用" , days: 166},
+          { value: 1010 - 573, name: "未使用", days: 166 },
         ],
       },
     };
   },
   mounted() {
     this.drawLine(this.mockdata.pieNumData);
-    
   },
   created() {
     this.$emit("StudentSourceInfo", this.mockdata.pieNumData);
   },
-  watch:{
-    currentColor:function(val){
-
-      //console.log(document.getElementById('color-title'))
-       }
- 
+  watch: {
+    currentColor: function (val) {
+      //console.log(document.getElementById("color-title").style.color);
+    },
   },
   methods: {
     drawLine(pieNumData) {
       //基于准备好的dom，初始化echarts实例
-      let _this=this;
+      let _this = this;
       let myChart = this.$echarts.init(document.getElementById("space-chart")); //绘制图表
       myChart.setOption({
         tooltip: {
           trigger: "item",
+           backgroundColor:'rgba(50,50,50,0.9)',
+          borderColor:'#8D8D8D',
+          borderWidth:1,
           formatter: function (v) {
-           _this._data.currentColor=v.color
+            if(v.color!='#48474c')
+            _this._data.currentColor = v.color;
+
+            else _this._data.currentColor = 'white';
 
             return `
             <div class='chart-toolTip'> 
-             <p :style="{'color':${v.color}" >${v.data.name}空間</p>
+             <p id='color-title'  >${v.data.name}空間</p>
              <p class='title'>${v.data.name}空間數:<span class='value'>${v.value} G</span></p>
              <p class='title'>${v.data.name}空間比率:<span class='value'>${v.percent} %</span></p>
              <p class='title'>剩餘天數:<span class='value'>${v.data.days} days</span> </p> </div> 
@@ -161,9 +164,14 @@ export default {
         seriesIndex: 0,
         dataIndex: 7,
       });
+      myChart.on("mousemove", function (e) {
+        //在滑動時修改提示框樣式時的方法！！！
+       document.getElementById("color-title").style.color=_this._data.currentColor;
+      });
 
       myChart.on("mouseover", function (e) {
         //Highlight the hovering piece
+         document.getElementById("color-title").style.color=_this._data.currentColor;
         myChart.dispatchAction({
           type: "downplay",
           seriesIndex: 0,
@@ -187,12 +195,21 @@ export default {
       });
       myChart.on("mouseout", function (e) {
         this.index = e.dataIndex;
+        document.getElementById("color-title").style.color=_this._data.currentColor;
         myChart.dispatchAction({
           type: "highlight",
           seriesIndex: 0,
           dataIndex: this.index,
         });
       });
+      //自適應
+      setTimeout(function () {
+        window.onresize = function () {
+          
+          myChart.resize();
+          
+        };
+      }, 200);
     },
   },
 };
@@ -204,21 +221,22 @@ export default {
   height: 250px;
   margin-top: -20px;
   margin-bottom: 20px;
-  margin-left:2%;
-  .chart-toolTip{
-    outline:1px solid rgba(255, 255, 255, 0.5);
-    padding:10px;
-    .title{
-     
+  margin-left: 2%;
+  .chart-toolTip {
+    
+    padding: 10px;
+    #color-title{
+      font-weight: bolder;
+    }
+    .title {
       font-size: 10px;
-      color:gray;
+      color: gray;
       font-weight: bolder;
     }
-    .value{
+    .value {
       font-weight: bolder;
-      color:white
+      color: white;
     }
-
   }
 }
 </style>

TEAMModelOS/ClientApp/src/view/serviceDriveAuth/SubComponents/SpaceStatus.less

@@ -1,5 +1,8 @@
 .space-status {
   border-left: 1px solid rgba(98, 97, 101, 0.4);
+  //height: 98.5vh;
+  overflow: auto;
+  //padding-bottom:50px;
   .service-list {
     position: relative;
     .action-btn {

TEAMModelOS/ClientApp/src/view/serviceDriveAuth/SubComponents/SpaceStatus.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="space-status">
+  <div class="space-status" :style="{'height':windowHeight-68+'px'}">
     <div class="service-list">
       <div class="service-listTitle">智慧教學服務空間狀態</div>
       <div class="action-btn" @click="gotoTeacherManagent()">
@@ -97,7 +97,7 @@
 import SpaceChart from "./SpaceChart.vue";
 import "@/icons/svg/tmd.svg";
 export default {
-  props: ["spaceStatus"],
+  props: ["spaceStatus","windowHeight","windowWidth"],
   name: "SpaceStatus",
   components: {
     SpaceChart,