|
@@ -0,0 +1,501 @@
|
|
|
+<style lang="less" scoped>
|
|
|
+ @import './smart-dashboard.less';
|
|
|
+</style>
|
|
|
+
|
|
|
+<template>
|
|
|
+ <div id="smart-dashboard">
|
|
|
+ <div class="Header">
|
|
|
+ <Row type="flex" justify="center" align="bottom">
|
|
|
+ <Col :span="4">
|
|
|
+ <h5 class="smart-mark">醍摩豆智慧雲</h5>
|
|
|
+ </Col>
|
|
|
+ <Col :span="7">
|
|
|
+ <span class="smart-markD"><Icon type="md-pin" />學情分數分析服務/學情儀表板</span>
|
|
|
+ </Col>
|
|
|
+ <Col :span="12">
|
|
|
+ <Menu class="menu" mode="horizontal" theme="dark">
|
|
|
+ <MenuItem name="1">
|
|
|
+ <Icon type="ios-paper" />
|
|
|
+ 智慧程式管理
|
|
|
+ </MenuItem>
|
|
|
+ <MenuItem name="2">
|
|
|
+ <Icon type="ios-people" />
|
|
|
+ 教材資源管理
|
|
|
+ </MenuItem>
|
|
|
+ <MenuItem name="3">
|
|
|
+ <Icon type="ios-people" />
|
|
|
+ 學習活動服務
|
|
|
+ </MenuItem>
|
|
|
+ <MenuItem name="4">
|
|
|
+ <Icon type="ios-construct" />
|
|
|
+ 班級智慧服務
|
|
|
+ </MenuItem>
|
|
|
+ </Menu>
|
|
|
+ </Col>
|
|
|
+ <Col :span="1" style="text-align: right;">
|
|
|
+ <Icon style="font-size: 24px; color: #333;" type="md-person" />
|
|
|
+ </Col>
|
|
|
+ </Row>
|
|
|
+ </div>
|
|
|
+ <div class="content">
|
|
|
+ <Row class="box" type="flex" justify="center">
|
|
|
+ <Col :span="8" class="block-1 block-border">
|
|
|
+ <!-- block-1 -->
|
|
|
+ <!-- 邊角設計 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%;background-color: #f3f3f34a;">
|
|
|
+ <div style="height: 60%;width:100%;background-color: red;"></div>
|
|
|
+ <div style="height: 40%;width:100%;position: relative;overflow: auto;">
|
|
|
+ <div class="scrollstyle" style="position: absolute;right: 0px;left: 0;top: 0;bottom: 0;overflow-x: hidden;overflow-y: auto;">
|
|
|
+ <div class="classInfo" v-for="(item, index) in classInfoData" :key="index">
|
|
|
+ <Row type="flex" justify="center" align="bottom" style="border-bottom: solid 1px #fff;padding-bottom: 7px;">
|
|
|
+ <Col :span="16">
|
|
|
+ <h5 style="color: #fefefe;">{{ item.className }}</h5>
|
|
|
+ <span class="ellipsis" style="display: block;margin-top: 5px;padding-right: 20px;color: #6c757d;">{{ item.classProduct }} | {{ item.classDetail }}</span>
|
|
|
+ </Col>
|
|
|
+ <Col :span="8">
|
|
|
+ <span class="ellipsis" style="color: #fefefe;max-width: 200px;display: inline-block;">{{ item.teacherName}}</span> <Icon style="vertical-align: top;color: #fefefe;" :size="15" type="ios-information-circle" />
|
|
|
+ <Row style="display: block;">
|
|
|
+ <Col :span="12" style="color: #007bff;">
|
|
|
+ 教室熱度 | {{item.classHot}}堂
|
|
|
+ </Col>
|
|
|
+ <Col :span="12" style="color: #00fb38;">
|
|
|
+ {{ item.classMode == 0 ? '進行中' : '維護中'}} | {{item.classTime}}
|
|
|
+ </Col>
|
|
|
+ </Row>
|
|
|
+ </Col>
|
|
|
+ </Row>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </Col>
|
|
|
+ <Col :span="5" class="block-2">
|
|
|
+ <!-- block-2 -->
|
|
|
+ <div class="block-border" style="height: 12%;position: relative;">
|
|
|
+ <!-- 邊角設計 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-->
|
|
|
+ <Row type="flex" justify="center" class="info-row">
|
|
|
+ <Col :span="9" class="info-col-main">
|
|
|
+ <div class="info-col-content">
|
|
|
+ <span>教室開機數</span><br/><small>今日數量</small>
|
|
|
+ <h5>8</h5>
|
|
|
+ </div>
|
|
|
+ </Col>
|
|
|
+ <Col :span="5" class="info-col-secondary">
|
|
|
+ <div class="info-col-content border-right">
|
|
|
+ <br/><small>前7日平均</small>
|
|
|
+ <h5>8</h5>
|
|
|
+ </div>
|
|
|
+ </Col>
|
|
|
+ <Col :span="5" class="info-col-secondary">
|
|
|
+ <div class="info-col-content border-right">
|
|
|
+ <br/><small>前30日平均</small>
|
|
|
+ <h5>8</h5>
|
|
|
+ </div>
|
|
|
+ </Col>
|
|
|
+ <Col :span="5" class="info-col-secondary">
|
|
|
+ <div class="info-col-content">
|
|
|
+ <br/><small>學期平均</small>
|
|
|
+ <h5>8</h5>
|
|
|
+ </div>
|
|
|
+ </Col>
|
|
|
+ </Row>
|
|
|
+ </div>
|
|
|
+ <div style="height: 1.5%"></div>
|
|
|
+ <div class="block-border" style="height: 12%;position: relative;">
|
|
|
+ <!-- 邊角設計 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-->
|
|
|
+ <Row type="flex" justify="center" class="info-row">
|
|
|
+ <Col :span="9" class="info-col-main">
|
|
|
+ <div class="info-col-content">
|
|
|
+ <span>課堂開課數</span><br/><small>今日數量</small>
|
|
|
+ <h5>54</h5>
|
|
|
+ </div>
|
|
|
+ </Col>
|
|
|
+ <Col :span="5" class="info-col-secondary">
|
|
|
+ <div class="info-col-content border-right">
|
|
|
+ <br/><small>前7日平均</small>
|
|
|
+ <h5>61.2</h5>
|
|
|
+ </div>
|
|
|
+ </Col>
|
|
|
+ <Col :span="5" class="info-col-secondary">
|
|
|
+ <div class="info-col-content border-right">
|
|
|
+ <br/><small>前30日平均</small>
|
|
|
+ <h5>58.9</h5>
|
|
|
+ </div>
|
|
|
+ </Col>
|
|
|
+ <Col :span="5" class="info-col-secondary">
|
|
|
+ <div class="info-col-content">
|
|
|
+ <br/><small>學期平均</small>
|
|
|
+ <h5>53.1</h5>
|
|
|
+ </div>
|
|
|
+ </Col>
|
|
|
+ </Row>
|
|
|
+ </div>
|
|
|
+ <div style="height: 1.5%"></div>
|
|
|
+ <div class="block-border" style="height: 12%;position: relative;">
|
|
|
+ <!-- 邊角設計 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-->
|
|
|
+ <Row type="flex" justify="center" class="info-row">
|
|
|
+ <Col :span="9" class="info-col-main">
|
|
|
+ <div class="info-col-content">
|
|
|
+ <span>課堂參與人數</span><br/><small>今日數量</small>
|
|
|
+ <h5>1,892</h5>
|
|
|
+ </div>
|
|
|
+ </Col>
|
|
|
+ <Col :span="5" class="info-col-secondary">
|
|
|
+ <div class="info-col-content border-right">
|
|
|
+ <br/><small>前7日平均</small>
|
|
|
+ <h5>2,542</h5>
|
|
|
+ </div>
|
|
|
+ </Col>
|
|
|
+ <Col :span="5" class="info-col-secondary">
|
|
|
+ <div class="info-col-content border-right">
|
|
|
+ <br/><small>前30日平均</small>
|
|
|
+ <h5>2,301</h5>
|
|
|
+ </div>
|
|
|
+ </Col>
|
|
|
+ <Col :span="5" class="info-col-secondary">
|
|
|
+ <div class="info-col-content">
|
|
|
+ <br/><small>學期平均</small>
|
|
|
+ <h5>2,436</h5>
|
|
|
+ </div>
|
|
|
+ </Col>
|
|
|
+ </Row>
|
|
|
+ </div>
|
|
|
+ <div style="height: 1.5%"></div>
|
|
|
+ <div class="block-border" style="height: 29%;position: relative;">
|
|
|
+ <!-- 邊角設計 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="background-color: #343a4040;height:20%;border-bottom: 1px solid #fff;">
|
|
|
+ <h5 style="font-size: 1rem;color:#fff;padding: 15px 0 15px 15px;font-weight: 100;">今日課堂數量變化</h5>
|
|
|
+ </div>
|
|
|
+ <div style="height: 80%;padding: 20px 0;">
|
|
|
+ <ClassLine :id="'line1'"></ClassLine>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="height: 1.5%"></div>
|
|
|
+ <div class="block-border" style="height: 29%;position: relative;">
|
|
|
+ <!-- 邊角設計 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="background-color: #343a4040;height: 20%;padding: 15px 0 15px 15px;border-bottom: 1px solid #fff;">
|
|
|
+ <h5 style="font-size: 1rem;color:#fff;font-weight: 100;">今日課堂效率值排名 (8hr)</h5>
|
|
|
+ </div>
|
|
|
+ <div style="background-color: #343a4073;height: 80%;">
|
|
|
+ <Row type="flex" justify="center" align="middle" style="border-bottom: solid 1px #fff;color:#fff;padding: 7px 0 5px 0;margin-left: 15px;height: 33.3333333333%">
|
|
|
+ <Col :span="16">
|
|
|
+ <h5 style="font-size: 1rem;">GE303, 通識教室3</h5>
|
|
|
+ <span style="color: rgb(108, 117, 125);display: block;padding-right: 20px;">今日使用時數 | 4:23:09</span>
|
|
|
+ </Col>
|
|
|
+ <Col :span="8">
|
|
|
+ <h4 style="font-size: 1.3rem;text-align: right;padding-right: 15px;">107.3%</h4>
|
|
|
+ </Col>
|
|
|
+ </Row>
|
|
|
+ <Row type="flex" justify="center" align="middle" style="border-bottom: solid 1px #fff;color:#fff;padding: 7px 0 5px 0;margin-left: 15px;height: 33.3333333333%">
|
|
|
+ <Col :span="16">
|
|
|
+ <h5 style="font-size: 1rem;">GE303, 通識教室7</h5>
|
|
|
+ <span style="color: rgb(108, 117, 125);display: block;padding-right: 20px;">今日使用時數 | 4:23:09</span>
|
|
|
+ </Col>
|
|
|
+ <Col :span="8">
|
|
|
+ <h4 style="font-size: 1.3rem;text-align: right;padding-right: 15px;">69.4%</h4>
|
|
|
+ </Col>
|
|
|
+ </Row>
|
|
|
+ <Row type="flex" justify="center" align="middle" style="color:#fff;padding: 7px 0 5px 0;margin-left: 15px;height: 33.3333333333%">
|
|
|
+ <Col :span="16">
|
|
|
+ <h5 style="font-size: 1rem;">GE303, 通識教室1</h5>
|
|
|
+ <span style="color: rgb(108, 117, 125);display: block;padding-right: 20px;">今日使用時數 | 4:23:09</span>
|
|
|
+ </Col>
|
|
|
+ <Col :span="8">
|
|
|
+ <h4 style="font-size: 1.3rem;text-align: right;padding-right: 15px;">67.9%</h4>
|
|
|
+ </Col>
|
|
|
+ </Row>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </Col>
|
|
|
+ <Col :span="5" class="block-3">
|
|
|
+ <div class="block-border" style="height: 23.91%;position: relative;">
|
|
|
+ <!-- 邊角設計 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="title">今日智慧教堂啟用類型</h5>
|
|
|
+ <Row class="contents">
|
|
|
+ <Col :span="12" class="chart"><RingPie :id="'ringPie1'"></RingPie></Col>
|
|
|
+ <Col :span="12" class="detail">
|
|
|
+ <Row class="detail-row">
|
|
|
+ <Col :span="12" class="detail-col">
|
|
|
+ <span class="detail-title detail-title-border-red">新增檔案</span>
|
|
|
+ <h5 class="detail-amount">33% <small>(168)</small></h5>
|
|
|
+ </Col>
|
|
|
+ <Col :span="12" class="detail-col">
|
|
|
+ <span class="detail-title detail-title-border-green">書面問答</span>
|
|
|
+ <h5 class="detail-amount" >33% <small>(168)</small></h5>
|
|
|
+ </Col>
|
|
|
+ <Col :span="12" class="detail-col">
|
|
|
+ <span class="detail-title detail-title-border-pink" >匯入.pptx</span>
|
|
|
+ <h5 class="detail-amount" >33% <small>(168)</small></h5>
|
|
|
+ </Col>
|
|
|
+ <Col :span="12" class="detail-col">
|
|
|
+ <span class="detail-title detail-title-border-yellow" >PowerClick</span>
|
|
|
+ <h5 class="detail-amount" >33% <small>(168)</small></h5>
|
|
|
+ </Col>
|
|
|
+ <Col :span="12" class="detail-col">
|
|
|
+ <span class="detail-title detail-title-border-blue" >開啟.hte</span>
|
|
|
+ <h5 class="detail-amount" >33% <small>(168)</small></h5>
|
|
|
+ </Col>
|
|
|
+ <Col :span="12" class="detail-col">
|
|
|
+ <span class="detail-title detail-title-border-orange" >其他</span>
|
|
|
+ <h5 class="detail-amount" >33% <small>(168)</small></h5>
|
|
|
+ </Col>
|
|
|
+ </Row>
|
|
|
+ </Col>
|
|
|
+ </Row>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="height: 2.17%;"></div>
|
|
|
+ <div class="block-border" style="height: 23.91%;position: relative;">
|
|
|
+ <!-- 邊角設計 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%;" class="today-class-content">
|
|
|
+ <h5 class="title">今日各版本教室開課狀態</h5>
|
|
|
+ <Row class="contents">
|
|
|
+ <Col :span="12" class="chart"><RingPie :id="'ringPie2'"></RingPie></Col>
|
|
|
+ <Col :span="12" class="detail">
|
|
|
+ <Row class="detail-row">
|
|
|
+ <Col :span="12" class="detail-col">
|
|
|
+ <span class="detail-title detail-title-border-red">HiTeach STD</span>
|
|
|
+ <h5 class="detail-amount">26% <small>(8)</small></h5>
|
|
|
+ </Col>
|
|
|
+ <Col :span="12" class="detail-col">
|
|
|
+ <span class="detail-title detail-title-border-green">HiTeach PRE</span>
|
|
|
+ <h5 class="detail-amount" >25% <small>(168)</small></h5>
|
|
|
+ </Col>
|
|
|
+ <Col :span="12" class="detail-col">
|
|
|
+ <span class="detail-title detail-title-border-pink" >HiTeach PRO</span>
|
|
|
+ <h5 class="detail-amount" >18% <small>(168)</small></h5>
|
|
|
+ </Col>
|
|
|
+ <Col :span="12" class="detail-col">
|
|
|
+ <span class="detail-title detail-title-border-yellow" >HiTeach Mobile</span>
|
|
|
+ <h5 class="detail-amount" >10% <small>(168)</small></h5>
|
|
|
+ </Col>
|
|
|
+ <Col :span="12" class="detail-col">
|
|
|
+ <span class="detail-title detail-title-border-blue" >HiTeach TBL</span>
|
|
|
+ <h5 class="detail-amount" >21% <small>(168)</small></h5>
|
|
|
+ </Col>
|
|
|
+ <Col :span="12" class="detail-col">
|
|
|
+ <span class="detail-title detail-title-border-orange" >其他</span>
|
|
|
+ <h5 class="detail-amount" >0% <small>(0)</small></h5>
|
|
|
+ </Col>
|
|
|
+ </Row>
|
|
|
+ </Col>
|
|
|
+ </Row>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="height: 2.17%;"></div>
|
|
|
+ <div class="block-border" style="height: 47.84%;position: relative;">
|
|
|
+ <!-- 邊角設計 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>
|
|
|
+ </Col>
|
|
|
+ <Col :span="4" class="block-4">
|
|
|
+ <div class="block-border" style="height: 10.43%;position: relative;">
|
|
|
+ <!-- 邊角設計 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="hours">
|
|
|
+ <span class="hours-title">累積教堂時數</span>
|
|
|
+ <h5><span>4,234</span>h<span>43</span>m</h5>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="height: 2.17%"></div>
|
|
|
+ <div class="block-border" style="height: 23.48%;position: relative;">
|
|
|
+ <!-- 邊角設計 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%;">
|
|
|
+ <h5 style="height: 20%;font-size: 1rem;color: #fff;padding: 10px 0 0 10px;font-weight: 100;">智慧教室版本</h5>
|
|
|
+ <Row type="flex" justify="center" align="middle" style="height: 80%;">
|
|
|
+ <Col style="height: 100%;" :span="12"><RingPie :id="'ringPie3'"></RingPie></Col>
|
|
|
+ <Col :span="12" style="padding-left: 7px;">
|
|
|
+ <span>HiTeach3 STD</span>
|
|
|
+ <h5 style="font-weight: 100;font-size: 2rem;color: #fefefe;">36.3%</h5>
|
|
|
+ <span>累計 4 筆</span>
|
|
|
+ </Col>
|
|
|
+ </Row>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="height: 2.17%"></div>
|
|
|
+ <div class="block-border" style="height: 23.48%;position: relative;">
|
|
|
+ <!-- 邊角設計 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%;">
|
|
|
+ <h5 style="height: 20%;font-size: 1rem;color: #fff;padding: 10px 0 0 10px;font-weight: 100;">課堂作業系統</h5>
|
|
|
+ <Row type="flex" justify="center" align="middle" style="height: 80%;">
|
|
|
+ <Col style="height: 100%;" :span="12"><RingPie :id="'ringPie4'"></RingPie></Col>
|
|
|
+ <Col :span="12" style="padding-left: 7px;">
|
|
|
+ <span>windows 7 (SP3)</span>
|
|
|
+ <h5 style="font-weight: 100;font-size: 2rem;color: #fefefe;">63.6%</h5>
|
|
|
+ <span>累計 1185 次</span>
|
|
|
+ </Col>
|
|
|
+ </Row>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="height: 2.17%"></div>
|
|
|
+ <div class="block-border" style="height: 36.1%;position: relative;">
|
|
|
+ <!-- 邊角設計 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: 33.333333%">
|
|
|
+ <Row type="flex" justify="center" align="middle" style="height: 100%;border-bottom: 1px solid #fff;margin-left: 20px;">
|
|
|
+ <Col :span="6">
|
|
|
+ <img style="display: block;margin: auto;" src="@/assets/image/touxiang.png">
|
|
|
+ </Col>
|
|
|
+ <Col style="height: 100%; padding: 10px;" :span="18">
|
|
|
+ <span style="color: #ccc">最高效率課堂使用者</span>
|
|
|
+ <h5 style="max-width: 180px;font-size: 1rem;color: #fefefe;display: inline-block;" class="ellipsis">會錯意大將軍罪證地縛靈我愛老師方瑞新</h5><Icon style="vertical-align: top;color: #fefefe;" :size="15" type="ios-information-circle" />
|
|
|
+ <span style="color: #ccc;display: block;">最高單醣效率值: 77.8 %</span>
|
|
|
+ <span style="color: #ccc;display: block;">平均課堂效率值: 71.1 %</span>
|
|
|
+ </Col>
|
|
|
+ </Row>
|
|
|
+ </div>
|
|
|
+ <div style="height: 33.333333%">
|
|
|
+ <Row type="flex" justify="center" align="middle" style="height: 100%;border-bottom: 1px solid #fff;margin-left: 20px;">
|
|
|
+ <Col :span="6">
|
|
|
+ <img style="display: block;margin: auto;" src="@/assets/image/touxiang.png">
|
|
|
+ </Col>
|
|
|
+ <Col style="height: 100%; padding: 10px;" :span="18">
|
|
|
+ <span style="color: #ccc">最高效率課堂使用者</span>
|
|
|
+ <h5 style="max-width: 180px;font-size: 1rem;color: #fefefe;display: inline-block;" class="ellipsis">會錯意大將軍罪證地縛靈我愛老師方瑞新</h5><Icon style="vertical-align: top;color: #fefefe;" :size="15" type="ios-information-circle" />
|
|
|
+ <span style="color: #ccc;display: block;">最高單醣效率值: 77.8 %</span>
|
|
|
+ <span style="color: #ccc;display: block;">平均課堂效率值: 71.1 %</span>
|
|
|
+ </Col>
|
|
|
+ </Row>
|
|
|
+ </div>
|
|
|
+ <div style="height: 33.333333%">
|
|
|
+ <Row type="flex" justify="center" align="middle" style="height: 100%;margin-left: 20px;">
|
|
|
+ <Col :span="6">
|
|
|
+ <img style="display: block;margin: auto;" src="@/assets/image/touxiang.png">
|
|
|
+ </Col>
|
|
|
+ <Col style="height: 100%; padding: 10px;" :span="18">
|
|
|
+ <span style="color: #ccc">最高效率課堂使用者</span>
|
|
|
+ <h5 style="max-width: 180px;font-size: 1rem;color: #fefefe;display: inline-block;" class="ellipsis">會錯意大將軍罪證地縛靈我愛老師方瑞新</h5><Icon style="vertical-align: top;color: #fefefe;" :size="15" type="ios-information-circle" />
|
|
|
+ <span style="color: #ccc;display: block;">最高單醣效率值: 77.8 %</span>
|
|
|
+ <span style="color: #ccc;display: block;">平均課堂效率值: 71.1 %</span>
|
|
|
+ </Col>
|
|
|
+ </Row>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </Col>
|
|
|
+ </Row>
|
|
|
+ <Row :gutter="20" type="flex" justify="center" style="padding-top: 10px;height: 100%;margin: 0;">
|
|
|
+ <Col :span="10"><div style="width: 100%;height: 100%;background-color: red;"></div></Col>
|
|
|
+ <Col :span="5"><div style="width: 100%;height: 100%;background-color: red;"></div></Col>
|
|
|
+ <Col :span="4"><div style="width: 100%;height: 100%;background-color: red;"></div></Col>
|
|
|
+ <Col :span="3"><div style="width: 100%;height: 100%;background-color: red;"></div></Col>
|
|
|
+ </Row>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import LegendPie from '@/components/graph/legendPie'
|
|
|
+import RingPie from '@/components/graph/ringPie'
|
|
|
+import ClassLine from '@/components/graph/classline'
|
|
|
+
|
|
|
+
|
|
|
+export default {
|
|
|
+ name:'smart-dashboard',
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ classInfoData:[
|
|
|
+ {
|
|
|
+ 'className': 'GE305, 通識教室5',
|
|
|
+ 'classProduct': 'Hiteach 3 TBL',
|
|
|
+ 'classDetail': '序號使用至2021-09-30, 50人, HBI082, RF05H',
|
|
|
+ 'teacherName': '大明星杜美心',
|
|
|
+ 'classHot': '7',
|
|
|
+ 'classTime': '00:45:03',
|
|
|
+ 'classMode': '0'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ 'className': 'GE305, 通識教室5',
|
|
|
+ 'classProduct': 'Hiteach 3 TBL',
|
|
|
+ 'classDetail': '序號使用至2021-09-30, 50人, HBI082, RF05H',
|
|
|
+ 'teacherName': '大明星杜美心',
|
|
|
+ 'classHot': '7',
|
|
|
+ 'classTime': '--:--:--',
|
|
|
+ 'classMode': '1'
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ components:{
|
|
|
+ LegendPie,
|
|
|
+ RingPie,
|
|
|
+ ClassLine
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ pieHover: function(type, value) {
|
|
|
+ switch (type) {
|
|
|
+ case 'class':
|
|
|
+
|
|
|
+ break;
|
|
|
+ case 'system':
|
|
|
+
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|