|
@@ -1,899 +0,0 @@
|
|
|
-<style lang="less" scoped>
|
|
|
- @import './Index.less';
|
|
|
-</style>
|
|
|
-
|
|
|
-<template>
|
|
|
- <div id="smart-dashboard" class="backdrop-dark">
|
|
|
- <div v-if="!isExistShortCode" class="Header">
|
|
|
- <Row type="flex" justify="center" align="middle">
|
|
|
- <Col :span="3" style="font-size: 14px;">
|
|
|
- <h1 style="color: #d0b772;font-size: 1.3em;">{{classData.schoolName}}</h1>
|
|
|
- </Col>
|
|
|
- <Col :span="8">
|
|
|
- <Icon size="20" type="md-pin" style="vertical-align: middle;color: #94998a" /><span class="smart-markD">{{ $t('menu.breadcrumbs')}}</span>
|
|
|
- </Col>
|
|
|
- <Col :span="11">
|
|
|
- <Menu class="menu" mode="horizontal" theme="dark">
|
|
|
- <MenuItem name="1">
|
|
|
- <Icon type="ios-paper" />
|
|
|
- {{ $t('menu.menu1')}}
|
|
|
- </MenuItem>
|
|
|
- <MenuItem name="2">
|
|
|
- <Icon type="ios-people" />
|
|
|
- {{ $t('menu.menu2')}}
|
|
|
- </MenuItem>
|
|
|
- <MenuItem name="3">
|
|
|
- <Icon type="ios-people" />
|
|
|
- {{ $t('menu.menu3')}}
|
|
|
- </MenuItem>
|
|
|
- <MenuItem name="4">
|
|
|
- <Icon type="ios-construct" />
|
|
|
- {{ $t('menu.menu4')}}
|
|
|
- </MenuItem>
|
|
|
- </Menu>
|
|
|
- </Col>
|
|
|
- <Col :span="2" style="text-align: center;">
|
|
|
- <img style="width: 35px;margin-top: 4px;" src="@/assets/image/touxiang.png">
|
|
|
- </Col>
|
|
|
- </Row>
|
|
|
- </div>
|
|
|
- <div class="content">
|
|
|
- <div style="padding-top: 5px;height: 5%;text-align: center;position: relative;">
|
|
|
- <div style="width: 310px;position: absolute;bottom: -4px;left: 10px;color: #fafafa;text-align: left;">
|
|
|
- {{ $t('classMgmt.restText1') }}
|
|
|
- <Dropdown trigger="click" @on-click="setRestTime">
|
|
|
- <a href="javascript:void(0)">
|
|
|
- {{ countDownBySec/60 }} {{ $t('classMgmt.Min') }}
|
|
|
- <Icon type="ios-arrow-down"></Icon>
|
|
|
- </a>
|
|
|
- <DropdownMenu slot="list">
|
|
|
- <DropdownItem name="5" >5 {{ $t('classMgmt.Min') }}</DropdownItem>
|
|
|
- <DropdownItem name="10">10 {{ $t('classMgmt.Min') }}</DropdownItem>
|
|
|
- <DropdownItem name="30">30 {{ $t('classMgmt.Min') }}</DropdownItem>
|
|
|
- </DropdownMenu>
|
|
|
- </Dropdown>
|
|
|
- {{ $t('classMgmt.restText2') }}
|
|
|
- <span style="font-size: 15px;"> ({{ reciprocalTimebySec | secToMS }})</span>
|
|
|
- </div>
|
|
|
- <div v-if="!isExistShortCode" style="text-align: center;">
|
|
|
- <Button class="dashBoardBtn select">{{ $t('classMgmt.pageButton1') }}</Button>
|
|
|
- <Button to="/smartschooldashboard" class="dashBoardBtn">{{ $t('classMgmt.pageButton2') }}</Button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <Row class="box" type="flex" justify="space-around">
|
|
|
- <Col :span="9" 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%;">
|
|
|
- <div style="height: 15%;width:100%;">
|
|
|
- <div style="height: 100%;">
|
|
|
- <div style="height: 100%;padding: 5% 5%;border-bottom: 1px solid #94998a;font-size:14px;">
|
|
|
- <Row type="flex" justify="center" align="bottom">
|
|
|
- <Col :span="5" style="text-align: center;">
|
|
|
- <span style="color: #94998a;">{{$t('classMgmt.block1Title1')}}</span>
|
|
|
- <h5 style="font-size: 2em;color: #FAFAFA;font-weight: 100;">{{classCount.activeCount}} <small>({{classCount.activeCount/classCount.total | percentFormat(0)}}%)</small></h5>
|
|
|
- </Col>
|
|
|
- <Col :span="5" style="text-align: center;">
|
|
|
- <span style="color: #94998a;">{{$t('classMgmt.block1Title2')}}</span>
|
|
|
- <h5 style="font-size: 2em;color: #FAFAFA;font-weight: 100;">{{classCount.failCount}} <small>({{classCount.failCount/classCount.total | percentFormat(0)}}%)</small></h5>
|
|
|
- </Col>
|
|
|
- <Col :span="5" style="text-align: center;">
|
|
|
- <span style="color: #94998a;">{{$t('classMgmt.block1Title3')}}</span>
|
|
|
- <h5 style="font-size: 2em;color: #FAFAFA;font-weight: 100;">{{classCount.updateCount}} <small>({{classCount.updateCount/classCount.total | percentFormat(0)}}%)</small></h5>
|
|
|
- </Col>
|
|
|
- <Col :span="5" style="text-align: center;">
|
|
|
- <span style="color: #94998a;">{{$t('classMgmt.block1Title4')}}</span>
|
|
|
- <h5 style="font-size: 2em;color: #FAFAFA;font-weight: 100;">{{classCount.loginCount}} <small>({{classCount.loginCount/courseACT.today | percentFormat(0)}}%)</small></h5>
|
|
|
- </Col>
|
|
|
- <Col :span="4" style="text-align: center;">
|
|
|
- <span style="color: #94998a;">{{$t('classMgmt.block1Title5')}}</span>
|
|
|
- <h5 style="font-size: 2em;color: #FAFAFA;font-weight: 100;">{{classCount.total}}</h5>
|
|
|
- </Col>
|
|
|
- </Row>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div style="height: 85%;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 classInfo" :key="index">
|
|
|
- <Row type="flex" justify="center" align="bottom" style="border-bottom: solid 1px #94998a;padding-bottom: 7px;">
|
|
|
- <Col :span="14">
|
|
|
- <h5 class="ellipsis" style="padding-right: 20px;">
|
|
|
- <Icon v-if="!item.classNum || item.className=='UnKnown' || !item.ver" style="color: #ffe24e;" type="md-warning" />
|
|
|
- {{item.className != 'UnKnown' ? item.className : 'No Name'}}
|
|
|
- </h5>
|
|
|
- <span class="ellipsis subtitle">
|
|
|
- <b v-if="item.SN" style="font-size: 13px;color: #1CD0A1;">Hi</b>
|
|
|
- {{ item.classNum ? item.classNum : $t('classMgmt.text5') }},
|
|
|
- {{ item.ver ? item.ver : 'ver.0.0.0'}} |
|
|
|
- <template v-if="!item.serialExp">
|
|
|
- <div class="maskIcon infinity"></div>
|
|
|
- <div style="display: inline-block">{{$t('classMgmt.text4')}}</div>
|
|
|
- </template>
|
|
|
- <template v-else>
|
|
|
- <div class="maskIcon clockOutline"></div>
|
|
|
- <div style="display: inline-block">{{item.serialExp}}</div>
|
|
|
- </template>,
|
|
|
- {{ item.classTotal ? item.classTotal : 0 }}{{ $t('unit.text7')}}
|
|
|
- </span>
|
|
|
- </Col>
|
|
|
- <Col :span="9">
|
|
|
- <Row type="flex" justify="center" align="middle">
|
|
|
- <Col :span="12">
|
|
|
- <div v-if="!item.hardware.board.isEnable" class="maskIcon boardIcon" v-bind:class="{disabled: !item.hardware.board.isEnable}"></div>
|
|
|
- <Tooltip v-else :transfer="true" placement="top-start">
|
|
|
- <div class="maskIcon boardIcon"></div>
|
|
|
- <div slot="content">
|
|
|
- <p>{{$t('classMgmt.className')+ ': ' +item.hardware.board.classNo}}</p>
|
|
|
- <p>{{$t('classMgmt.deviceName')+ ': ' +item.hardware.board.deviceName}}</p>
|
|
|
- <p>{{$t('classMgmt.ip')+ ': ' +item.hardware.board.IP}}</p>
|
|
|
- <p>{{$t('classMgmt.SN')+ ': ' +item.hardware.board.serialNo}}</p>
|
|
|
- </div>
|
|
|
- </Tooltip>
|
|
|
- <div class="maskIcon irsIcon" v-bind:class="{disabled: !item.hardware.irs.isEnable}"></div>
|
|
|
- <div class="maskIcon ezstationIcon" v-bind:class="{disabled: !item.hardware.ezstation.isEnable}"></div>
|
|
|
- <div class="maskIcon sokratesIcon" v-bind:class="{disabled: !item.hardware.sokrates.isEnable}" ></div>
|
|
|
- </Col>
|
|
|
- <Col :span="12" style="padding-left: 5px;">
|
|
|
- <Icon v-if="item.teacher.name" size="15" type="md-person" class="teachIcon" /><span class="ellipsis teacherName">{{item.teacher.name}}</span>
|
|
|
- </Col>
|
|
|
- </Row>
|
|
|
- <Row style="display: block;">
|
|
|
- <Col :span="12" style="color: #48DBFC;">
|
|
|
- {{$t('classMgmt.hotclass')}} | {{item.hot}} {{$t('unit.text1')}}
|
|
|
- </Col>
|
|
|
- <Col :span="12" :class="classModeClass(item.mode)">
|
|
|
- <Tooltip :transfer="true" placement="top-start">
|
|
|
- <div v-if="item.mode == 0" class="maskIcon teach disabled"></div>
|
|
|
- <div v-else-if="item.mode == 1" class="maskIcon teach "></div>
|
|
|
- <div v-else-if="item.mode == 2" class="maskIcon lightMalfunction"></div>
|
|
|
- <div slot="content">
|
|
|
- {{ classModeStr(item.mode) }}
|
|
|
- </div>
|
|
|
- <div style="display: inline-block"> | {{item.usetime}}</div>
|
|
|
- </Tooltip>
|
|
|
- </Col>
|
|
|
- </Row>
|
|
|
- </Col>
|
|
|
- <Col :span="1">
|
|
|
- <Tooltip max-width="350" :transfer="true" placement="top-start">
|
|
|
- <Icon style="margin-bottom: 50%" size="20" type="ios-information-circle-outline" class="teachIcon" />
|
|
|
- <div slot="content">
|
|
|
- <p v-if="item.localIp">{{$t('classMgmt.ip')+ ': ' +item.localIp}}</p>
|
|
|
- <p>{{$t('classMgmt.SN')+ ': ' +item.SN}}</p>
|
|
|
- <p v-if="item.osVer">{{$t('classMgmt.OS')+ ': ' +item.osVer}}</p>
|
|
|
- <p>{{$t('classMgmt.productVer')+ ': ' +item.ver}}</p>
|
|
|
- <p>{{$t('classMgmt.EXP')+ ': '}}{{!item.serialExp ? $t('classMgmt.text4') : $t('classMgmt.text2') +' '+item.serialExp}}</p>
|
|
|
- <p>{{$t('classMgmt.pcName')+ ': ' +item.pcName}}</p>
|
|
|
- </div>
|
|
|
- </Tooltip>
|
|
|
- </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>{{ $t('classMgmt.block2Title1')}}</span><br/><small>{{ $t('classMgmt.block2SubTitle1')}}</small>
|
|
|
- <h5>{{hiTeachACT.today}}<small>/{{hiTeachACT.yesterday}}</small></h5>
|
|
|
- </div>
|
|
|
- </Col>
|
|
|
- <Col :span="5" class="info-col-secondary">
|
|
|
- <div class="info-col-content border-right">
|
|
|
- <br/><small>{{ $t('classMgmt.block2SubTitle6')}}</small>
|
|
|
- <h5>{{hiTeachACT.weekAgo}}</h5>
|
|
|
- </div>
|
|
|
- </Col>
|
|
|
- <Col :span="5" class="info-col-secondary">
|
|
|
- <div class="info-col-content border-right">
|
|
|
- <br/><small>{{ $t('classMgmt.block2SubTitle7')}}</small>
|
|
|
- <h5>{{hiTeachACT.monthAgo}}</h5>
|
|
|
- </div>
|
|
|
- </Col>
|
|
|
- <Col :span="5" class="info-col-secondary">
|
|
|
- <div class="info-col-content">
|
|
|
- <br/><small>{{ $t('classMgmt.block2SubTitle8')}}</small>
|
|
|
- <h5>{{hiTeachACT.semester}}</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>{{ $t('classMgmt.block2Title2')}}</span><br/><small>{{ $t('classMgmt.block2SubTitle1')}}</small>
|
|
|
- <h5>{{courseACT.today}}<small>/{{courseACT.yesterday}}</small></h5>
|
|
|
- </div>
|
|
|
- </Col>
|
|
|
- <Col :span="5" class="info-col-secondary">
|
|
|
- <div class="info-col-content border-right">
|
|
|
- <br/><small>{{ $t('classMgmt.block2SubTitle6')}}</small>
|
|
|
- <h5>{{courseACT.weekAgo}}</h5>
|
|
|
- </div>
|
|
|
- </Col>
|
|
|
- <Col :span="5" class="info-col-secondary">
|
|
|
- <div class="info-col-content border-right">
|
|
|
- <br/><small>{{ $t('classMgmt.block2SubTitle7')}}</small>
|
|
|
- <h5>{{courseACT.monthAgo}}</h5>
|
|
|
- </div>
|
|
|
- </Col>
|
|
|
- <Col :span="5" class="info-col-secondary">
|
|
|
- <div class="info-col-content">
|
|
|
- <br/><small>{{ $t('classMgmt.block2SubTitle8')}}</small>
|
|
|
- <h5>{{courseACT.semester}}</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>{{ $t('classMgmt.block2Title3')}}</span><br/><small>{{ $t('classMgmt.block2SubTitle1')}}</small>
|
|
|
- <h5>{{gradeClassAccount}}<small>/{{participants.yesterday}}</small></h5>
|
|
|
- </div>
|
|
|
- </Col>
|
|
|
- <Col :span="5" class="info-col-secondary">
|
|
|
- <div class="info-col-content border-right">
|
|
|
- <br/><small>{{ $t('classMgmt.block2SubTitle2')}}</small>
|
|
|
- <h5>{{participants.weekAgoAVG ? participants.weekAgoAVG : 0}}</h5>
|
|
|
- </div>
|
|
|
- </Col>
|
|
|
- <Col :span="5" class="info-col-secondary">
|
|
|
- <div class="info-col-content border-right">
|
|
|
- <br/><small>{{ $t('classMgmt.block2SubTitle3')}}</small>
|
|
|
- <h5>{{participants.monthAgoAVG ? participants.monthAgoAVG : 0}}</h5>
|
|
|
- </div>
|
|
|
- </Col>
|
|
|
- <Col :span="5" class="info-col-secondary">
|
|
|
- <div class="info-col-content">
|
|
|
- <br/><small>{{ $t('classMgmt.block2SubTitle4')}}</small>
|
|
|
- <h5>{{participants.semesterAVG ? participants.semesterAVG : 0}}</h5>
|
|
|
- </div>
|
|
|
- </Col>
|
|
|
- </Row>
|
|
|
- </div>
|
|
|
- <div style="height: 1.5%"></div>
|
|
|
- <div class="block-border" style="height: 29%;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 15px 15px;font-weight: 100;">{{$t('classMgmt.block2Title4')}}</h5>
|
|
|
- </div>
|
|
|
- <div style="height: 80%;">
|
|
|
- <ClassLine :data="immediateData" :id="'classline1'"></ClassLine>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div style="height: 1.5%"></div>
|
|
|
- <div class="block-border" style="height: 29%;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%;padding: 15px 0 15px 15px;">
|
|
|
- <h5 style="font-size: 1.25em;color:#E4E9DC;font-weight: 100;">{{$t('classMgmt.block2Title5')}}</h5>
|
|
|
- </div>
|
|
|
- <div class="classPercent">
|
|
|
- <Row type="flex" justify="center" align="middle" class="classPercent-row">
|
|
|
- <Col class="left" :span="12" style="">
|
|
|
- <div style="height: 100%;">
|
|
|
- <RingPie ref="ringpie5" :pieData="gradeClassPer" :id="'ringpie5'"></RingPie>
|
|
|
- </div>
|
|
|
- </Col>
|
|
|
- <Col class="right" :span="12">
|
|
|
- <Row style="height: 15%;">
|
|
|
- <Col>
|
|
|
- <div class="right-title">{{$t('classMgmt.block2Title3')}} : <span>{{gradeClassAccount}}</span></div>
|
|
|
- </Col>
|
|
|
- </Row>
|
|
|
- <div style="height: 85%;width:100%;position: relative;overflow: auto;">
|
|
|
- <Row class="scrollstyle" style="position: absolute;right: 0px;left: 0;top: 0;bottom: 0;overflow-x: hidden;overflow-y: auto;">
|
|
|
- <Col v-for="(item, key, index) in gradeClassPer" :key="index" :span="24">
|
|
|
- <div class="right-detail" @mouseleave="pieDownPlay('course', key)" @mouseenter="pieHeightLight('course', key)">
|
|
|
- <span class="right-detail-title" :class="'border-letf-color-' + index">{{ $t('classMgmt.' + key)}}</span>
|
|
|
- <h5 class="right-detail-num">{{item}} <small>({{item/gradeClassAccount | percentFormat(1)}}%)</small></h5>
|
|
|
- </div>
|
|
|
- </Col>
|
|
|
- </Row>
|
|
|
- </div>
|
|
|
- </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="today-class-content-title">{{$t('classMgmt.block3.title1')}}</h5>
|
|
|
- <Row class="today-class-content-contents">
|
|
|
- <Col :span="12" class="chart">
|
|
|
- <RingPie :pieData="hiteachActMode" ref="ringpie1" :id="'ringPie1'"></RingPie>
|
|
|
- </Col>
|
|
|
- <Col :span="12" class="detail">
|
|
|
- <Row class="detail-row">
|
|
|
- <Col v-for="(item, key, index) in hiteachActMode" :key="index" :span="12" class="detail-col">
|
|
|
- <div @mouseleave="pieDownPlay('class', key)" @mouseenter="pieHeightLight('class', key)">
|
|
|
- <span class="detail-title" :class="'border-letf-color-' + index">{{$t('classMgmt.' + key)}}</span>
|
|
|
- <h5 class="detail-amount">{{item}} <small>({{item/hiteachActModeAccount | percentFormat(1)}}%)</small></h5>
|
|
|
- </div>
|
|
|
- </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 class="today-class-content">
|
|
|
- <h5 class="today-class-content-title">{{$t('classMgmt.block3.title2')}}</h5>
|
|
|
- <Row class="today-class-content-contents">
|
|
|
- <Col :span="12" class="chart">
|
|
|
- <RingPie :pieData="hiteachStatus" ref="ringpie2" :id="'ringPie2'"></RingPie>
|
|
|
- </Col>
|
|
|
- <Col :span="12" class="detail">
|
|
|
- <Row class="detail-row">
|
|
|
- <Col v-for="(item, key, index) in hiteachStatus" :key="index" :span="12" class="detail-col">
|
|
|
- <div @mouseleave="pieDownPlay('system',key)" @mouseenter="pieHeightLight('system', key)">
|
|
|
- <span class="detail-title" :class="'border-letf-color-' + index">
|
|
|
- {{ (key == 'unKnown') || (key == 'unauthorization') ? $t('classMgmt.' + key) : key}}
|
|
|
- </span>
|
|
|
- <h5 class="detail-amount">{{item}} <small>({{item/hiteachStatusAccount | percentFormat(1)}}%)</small></h5>
|
|
|
- </div>
|
|
|
- </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 class="classCum">
|
|
|
- <div class="classCum-title-Box">
|
|
|
- <h5 class="titleName">{{ $t('classMgmt.block3.title3')}}</h5>
|
|
|
- <!-- <div class="leangedDiv">
|
|
|
- <span class="circle default" :class="{seleted: authInfoType == 'hiteach'}"></span>
|
|
|
- <h5 style="vertical-align: middle;display:inline-block;color: #ffffff;margin-right: 15px;cursor: pointer;" @click="authInfoType = 'hiteach'">Hiteach</h5>
|
|
|
- <span class="circle default" :class="{seleted: authInfoType == 'service'}"></span>
|
|
|
- <h5 style="vertical-align: middle;display:inline-block;color: #ffffff;cursor: pointer;" @click="authInfoType = 'service'">服務</h5>
|
|
|
- </div> -->
|
|
|
- </div>
|
|
|
- <div class="classCum-chat scrollstyle">
|
|
|
- <div class="title">
|
|
|
- {{ authInfo.serial ? $t('classMgmt.block3.subTitle1') : ''}}
|
|
|
- </div>
|
|
|
- <div class="detailBox">
|
|
|
- <div class="b" v-for="(item, key ) in authInfo.serial" :key = key>
|
|
|
- <p>{{ $t('classMgmt.block3.text1') }}: {{item.SN}}</p>
|
|
|
- <p>{{ $t('classMgmt.block3.text2') }}: {{item.serialType == 0 ? $t('classMgmt.block3.text3') : $t('classMgmt.block3.text4') }}</p>
|
|
|
- <p>{{ $t('classMgmt.block3.text5') }}: {{item.serialExp == null ? $t('classMgmt.block3.text6') : item.serialExp}}</p>
|
|
|
- <p>{{ $t('classMgmt.block3.text7') }}: {{item.classTotal}}</p>
|
|
|
- <p>{{ $t('classMgmt.block3.text8') }}: HiTeach {{item.system}}</p>
|
|
|
- <div>
|
|
|
- <span>{{ $t('classMgmt.block3.text9') }}: </span>
|
|
|
- <div class="maskIcon sokratesIcon" v-bind:class="{disabled: !item.hardware.sokrates.isEnable}" ></div>
|
|
|
- <div class="maskIcon ezstationIcon" v-bind:class="{disabled: !item.hardware.ezstation.isEnable}"></div>
|
|
|
- </div>
|
|
|
- <hr/>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="title">
|
|
|
- {{ authInfo.service ? $t('classMgmt.block3.subTitle2') : ''}}
|
|
|
- </div>
|
|
|
- <div class="detailBox">
|
|
|
- <div class="b" v-for="(item, key ) in authInfo.service" :key = key>
|
|
|
- <p>{{ $t('classMgmt.block3.text10') }}: {{$t('classMgmt.' + item.system)}}</p>
|
|
|
- <p>{{ $t('classMgmt.block3.text11') }}: {{item.startDate}}</p>
|
|
|
- <p>{{ $t('classMgmt.block3.text12') }}: {{item.endDate}}</p>
|
|
|
- <hr/>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </Col>
|
|
|
- <Col :span="4" class="block-4">
|
|
|
- <div class="block-border" style="height: 10.43%;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="hours">
|
|
|
- <span class="hours-title">{{$t('classMgmt.block4Title1')}}</span>
|
|
|
- <h5><span>{{ cumMin | minToHM('h')}}</span>h<span>{{cumMin | minToHM('m')}}</span>m</h5>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!-- <div style="height: 2.17%"></div> -->
|
|
|
- <!-- <div class="block-border" style="height: 23.48%;position: relative;background-color: rgba(217, 217, 217, 0.14);">
|
|
|
- <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>
|
|
|
- <div style="height: 100%;">
|
|
|
- <h5 style="height: 20%;font-size: 1.25em;color: #E4E9DC;padding: 10px 0 0 10px;font-weight: 100;">{{$t('classMgmt.block4Title2')}}</h5>
|
|
|
- <Row type="flex" justify="center" align="middle" style="height: 80%;">
|
|
|
- <Col style="height: 100%;" :span="12">
|
|
|
- <RingPie :pieData="sokratesStates" @highLightInfo="classVersionByPie" :defaultActive="true" :id="'ringPie3'"></RingPie>
|
|
|
- </Col>
|
|
|
- <Col :span="12" style="padding-left: 7px;color: #94998a;">
|
|
|
- <span>{{ classVersion.name }}</span>
|
|
|
- <h5 style="font-weight: 100;font-size: 2.2em;color: #fafafa;">{{ classVersion.percent +$t('unit.text2')}}</h5>
|
|
|
- <span>{{$t('classMgmt.block4SubTitle1') + ' ' + classVersion.val + ' ' +$t('unit.text3')}}</span>
|
|
|
- </Col>
|
|
|
- </Row>
|
|
|
- </div>
|
|
|
- </div> -->
|
|
|
- <div style="height: 2.17%"></div>
|
|
|
- <div class="block-border" style="height: 23.48%;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%;">
|
|
|
- <h5 style="height: 20%;font-size: 1.25em;color: #E4E9DC;padding: 10px 0 0 10px;font-weight: 100;">{{$t('classMgmt.block4Title3')}}</h5>
|
|
|
- <Row type="flex" justify="center" align="middle" style="height: 80%;">
|
|
|
- <Col style="height: 100%;" :span="12">
|
|
|
- <RingPie :pieData="operatingSystems" @highLightInfo="homeworkByPie" :defaultActive="true" :id="'ringPie4'"></RingPie>
|
|
|
- </Col>
|
|
|
- <Col :span="12" style="padding-left: 7px;color: #94998a;">
|
|
|
- <span>{{ homework.name }}</span>
|
|
|
- <h5 style="font-weight: 100;font-size: 2.2em;color: #fafafa;">{{ homework.percent +$t('unit.text2')}}</h5>
|
|
|
- <span>{{$t('classMgmt.block4SubTitle1') + ' ' + homework.val + ' ' +$t('unit.text9')}}</span>
|
|
|
- </Col>
|
|
|
- </Row>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div style="height: 2.17%"></div>
|
|
|
- <div class="block-border" style="height: 61.6%;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="rank">
|
|
|
- <h5 style="height: 10%;font-size: 1.25em;color: #E4E9DC;padding: 10px 0 0 10px;font-weight: 100;">{{$t('classMgmt.block4SubTitle3')}}</h5>
|
|
|
- <div style="height: 90%;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="rank-block" v-for="(item, index) in mostClassUser" :key="index">
|
|
|
- <Row type="flex" justify="center" align="middle" class="rank-block-row">
|
|
|
- <Col class="sticker" :span="6">
|
|
|
- <img v-if="item.avatar" :src="item.avatar">
|
|
|
- <img v-else src="@/assets/image/touxiang.png">
|
|
|
- </Col>
|
|
|
- <Col class="conect" :span="18">
|
|
|
- <!-- <span class="conect-title">{{$t('classMgmt.block4SubTitle3')}}</span> -->
|
|
|
- <Tooltip :transfer="true" placement="top-start">
|
|
|
- <h5 class="conect-name ellipsis">{{item.name}}</h5>
|
|
|
- <div slot="content">
|
|
|
- <p>{{item.id}}</p>
|
|
|
- </div>
|
|
|
- </Tooltip>
|
|
|
- <span class="conect-val">{{$t('classMgmt.block4SubTitle6')}}: <span class="number">{{item.today}}</span> {{$t('unit.text1')}}</span>
|
|
|
- <span class="conect-val">{{$t('classMgmt.block4SubTitle7')}}: <span class="number">{{item.cumClass}}</span> {{$t('unit.text1')}}</span>
|
|
|
- </Col>
|
|
|
- </Row>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </Col>
|
|
|
- </Row>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
-import RingPie from '@/components/smartclassdashboard/RingPie.vue'
|
|
|
-import LegendPie from '@/components/smartclassdashboard/LegendPie.vue'
|
|
|
-import ClassLine from '@/components/smartclassdashboard/ClassLine.vue'
|
|
|
-import ClassBar from '@/components/smartclassdashboard/ClassBar.vue'
|
|
|
-import FloorPlan from '@/components/smartclassdashboard/FloorPlan.vue'
|
|
|
-import { mapState } from 'vuex'
|
|
|
-
|
|
|
-export default {
|
|
|
- name: 'smart-dashboard',
|
|
|
- data() {
|
|
|
- return {
|
|
|
- isExistShortCode: !!this.$route.params.schoolshortcode,
|
|
|
- gradeClassAccount: 0,
|
|
|
- hiteachTypeAccount: 0,
|
|
|
- hiteachActModeAccount: 0,
|
|
|
- hiteachStatusAccount: 0,
|
|
|
- classVersion: {
|
|
|
- percent: '',
|
|
|
- name: '',
|
|
|
- val: 0
|
|
|
- },
|
|
|
- homework: {
|
|
|
- percent: '',
|
|
|
- name: '',
|
|
|
- val: 0
|
|
|
- },
|
|
|
- resetTimebySec: 300, // 預設至少要經過此時間才可重新問API
|
|
|
- countDownBySec: 300, // 可被設定的重置時間
|
|
|
- reciprocalTimebySec: 0,
|
|
|
- authInfoType: 'hiteach'
|
|
|
- }
|
|
|
- },
|
|
|
- computed: {
|
|
|
- ...mapState({
|
|
|
- classData: state => state.classMgmt.data
|
|
|
- }),
|
|
|
- classCount() { // 班级總數
|
|
|
- let mode1Data = this.classData.classInfo.filter(function(item, key) {
|
|
|
- return item.mode == 1
|
|
|
- })
|
|
|
- let mode2Data = this.classData.classInfo.filter(function(item, key) {
|
|
|
- return item.mode == 2
|
|
|
- })
|
|
|
- let hotData = 0;
|
|
|
- this.classData.classInfo.forEach(function(item, key) {
|
|
|
- hotData += item.hot
|
|
|
- })
|
|
|
- this.classData.classCount.activeCount = mode1Data.length
|
|
|
- this.classData.classCount.failCount = mode2Data.length
|
|
|
- this.classData.classCount.loginCount = hotData
|
|
|
- return this.classData.classCount
|
|
|
- },
|
|
|
- classInfo() { // 開啟班级資訊
|
|
|
- this.classData.classInfo.forEach(function(item, key) {
|
|
|
- item['id'] = key + 1
|
|
|
- })
|
|
|
-
|
|
|
- this.classData.classInfo.sort(function(a,b) {
|
|
|
- let aName = a.className ? a.className : 'null'
|
|
|
- let bName = b.className ? b.className : 'null'
|
|
|
-
|
|
|
- return bName.localeCompare(aName); });
|
|
|
-
|
|
|
- this.classData.classInfo.sort(function(a, b) {
|
|
|
- let aNum
|
|
|
- let bNum
|
|
|
- if (!a.classNum || a.className == 'UnKnown' || !a.ver) {
|
|
|
- aNum = 2
|
|
|
- } else if (a.mode == 1) {
|
|
|
- aNum = 0
|
|
|
- } else {
|
|
|
- aNum = 1
|
|
|
- }
|
|
|
- if (!b.classNum || b.className == 'UnKnown' || !b.ver) {
|
|
|
- bNum = 2
|
|
|
- } else if (b.mode == 1) {
|
|
|
- bNum = 0
|
|
|
- } else {
|
|
|
- bNum = 1
|
|
|
- }
|
|
|
- return aNum > bNum ? 1 : -1
|
|
|
- })
|
|
|
- return this.classData.classInfo
|
|
|
- },
|
|
|
- hiTeachACT() { // 班级開機數
|
|
|
- let todayACTData = this.classData.classInfo.filter(function(item, key) {
|
|
|
- return item.todayACT == true
|
|
|
- })
|
|
|
- this.classData.hiTeachACT.today = todayACTData.length
|
|
|
- return this.classData.hiTeachACT
|
|
|
- },
|
|
|
- courseACT() { // 課堂數
|
|
|
- let hotData = 0;
|
|
|
- this.classData.classInfo.forEach(function(item, key) {
|
|
|
- hotData += item.hot
|
|
|
- })
|
|
|
- this.classData.courseACT.today = hotData
|
|
|
- return this.classData.courseACT
|
|
|
- },
|
|
|
- participants() { // 課堂參與人數
|
|
|
- return this.classData.participants
|
|
|
- },
|
|
|
- immediateData() { // 今日課堂數量變化
|
|
|
- return this.classData.immediateData
|
|
|
- },
|
|
|
- gradeClassPer() { // 今日各年級課堂百分比
|
|
|
- this.gradeClassAccount = 0
|
|
|
-
|
|
|
- let stdClient = this.classData.stdClient
|
|
|
- for (let g in stdClient) {
|
|
|
- this.gradeClassAccount += stdClient[g]
|
|
|
- }
|
|
|
-
|
|
|
- return stdClient
|
|
|
- },
|
|
|
- hiteachType() { // 今日智慧班级啟用類型
|
|
|
- this.hiteachTypeAccount = 0
|
|
|
- for (let g in this.classData.hiteachType) {
|
|
|
- this.hiteachTypeAccount += this.classData.hiteachType[g]
|
|
|
- }
|
|
|
- return this.classData.hiteachType
|
|
|
- },
|
|
|
- hiteachActMode() {
|
|
|
- this.hiteachActModeAccount = 0
|
|
|
- for (let g in this.classData.hiteachActMode) {
|
|
|
- this.hiteachActModeAccount += this.classData.hiteachActMode[g]
|
|
|
- }
|
|
|
- return this.classData.hiteachActMode
|
|
|
- },
|
|
|
- hiteachStatus() { // 今日各版本班级開課狀態
|
|
|
- this.hiteachStatusAccount = 0
|
|
|
- for (let g in this.classData.hiteachStatus) {
|
|
|
- this.hiteachStatusAccount += this.classData.hiteachStatus[g]
|
|
|
- }
|
|
|
- return this.classData.hiteachStatus
|
|
|
- },
|
|
|
- gradeUseStatus() { // 各年級開課狀態
|
|
|
- return this.classData.gradeUseStatus
|
|
|
- },
|
|
|
- cumMin() { // 累計課堂時數
|
|
|
- return this.classData.cumMin
|
|
|
- },
|
|
|
- sokratesStates() { // 蘇格拉底議課APP授權狀態
|
|
|
- return this.classData.sokratesStates
|
|
|
- },
|
|
|
- operatingSystems() { // 課堂作業系統
|
|
|
- return this.classData.operatingSystems
|
|
|
- },
|
|
|
- mostClassUser() { // 最多課堂使用者
|
|
|
- this.classData.mostClassUser.sort(function(a, b) {
|
|
|
- return a.cumClass > b.cumClass ? -1 : 1
|
|
|
- })
|
|
|
- return this.classData.mostClassUser
|
|
|
- },
|
|
|
- mostMinUser() {
|
|
|
- return this.classData.mostMinUser
|
|
|
- },
|
|
|
- mostEffUser() {
|
|
|
- return this.classData.mostEffUser
|
|
|
- },
|
|
|
- authInfo(){
|
|
|
- return this.classData.authInfo
|
|
|
- }
|
|
|
- },
|
|
|
- methods: {
|
|
|
- pieHeightLight: function(type, value) {
|
|
|
- switch (type) {
|
|
|
- case 'class':
|
|
|
- this.$refs.ringpie1.heightlight(value)
|
|
|
- break
|
|
|
- case 'system':
|
|
|
- this.$refs.ringpie2.heightlight(value)
|
|
|
- break
|
|
|
- case 'course':
|
|
|
- this.$refs.ringpie5.heightlight(value)
|
|
|
- break
|
|
|
- }
|
|
|
- },
|
|
|
- pieDownPlay: function(type, value) {
|
|
|
- switch (type) {
|
|
|
- case 'class':
|
|
|
- this.$refs.ringpie1.downplay(value)
|
|
|
- break
|
|
|
- case 'system':
|
|
|
- this.$refs.ringpie2.downplay(value)
|
|
|
- break
|
|
|
- case 'course':
|
|
|
- this.$refs.ringpie5.downplay(value)
|
|
|
- break
|
|
|
- }
|
|
|
- },
|
|
|
- classVersionByPie: function(val) {
|
|
|
- this.classVersion.percent = val.percent
|
|
|
- this.classVersion.name = val.name
|
|
|
- this.classVersion.val = val.value
|
|
|
- },
|
|
|
- homeworkByPie: function(val) {
|
|
|
- this.homework.percent = val.percent
|
|
|
- this.homework.name = val.name
|
|
|
- this.homework.val = val.value
|
|
|
- },
|
|
|
- classModeStr: function(val) {
|
|
|
- switch (val) {
|
|
|
- case 0:
|
|
|
- return this.$t('classMgmt.notInitiated')
|
|
|
- break
|
|
|
- case 1:
|
|
|
- return this.$t('classMgmt.runing')
|
|
|
- break
|
|
|
- case 2:
|
|
|
- return this.$t('classMgmt.repair')
|
|
|
- break
|
|
|
- }
|
|
|
- },
|
|
|
- classModeClass: function(val) {
|
|
|
- switch (val) {
|
|
|
- case 0:
|
|
|
- return 'unopen'
|
|
|
- break
|
|
|
- case 1:
|
|
|
- return 'processing'
|
|
|
- break
|
|
|
- case 2:
|
|
|
- return 'maintain'
|
|
|
- break
|
|
|
- }
|
|
|
- },
|
|
|
- buildDefaultFloorplan() {
|
|
|
- this.$nextTick(() => {
|
|
|
- var c = document.getElementById('floorplan')
|
|
|
- var ctx = c.getContext('2d')
|
|
|
- var img = document.getElementById('planImg')
|
|
|
- var pin = document.getElementById('pin')
|
|
|
- var greenpin = document.getElementById('greenpin')
|
|
|
- var redpin = document.getElementById('redpin')
|
|
|
- c.width = img.width
|
|
|
- c.height = img.height
|
|
|
- var pinW = 35
|
|
|
- var pinH = 35
|
|
|
- ctx.clearRect(0, 0, img.width, img.height)
|
|
|
- ctx.drawImage(img, 0, 0)
|
|
|
- ctx.drawImage(redpin, (c.width * 0.595), (c.height * 0.67), pinW, pinH)
|
|
|
- ctx.drawImage(greenpin, (c.width * 0.45), (c.height * 0.23), pinW, pinH)
|
|
|
- ctx.drawImage(greenpin, (c.width * 0.455), (c.height * 0.79), pinW, pinH)
|
|
|
- ctx.drawImage(greenpin, (c.width * 0.595), (c.height * 0.79), pinW, pinH)
|
|
|
- ctx.drawImage(greenpin, (c.width * 0.245), (c.height * 0.79), pinW, pinH)
|
|
|
- ctx.drawImage(pin, (c.width * 0.52), (c.height * 0.23), pinW, pinH)
|
|
|
- ctx.drawImage(pin, (c.width * 0.59), (c.height * 0.23), pinW, pinH)
|
|
|
- ctx.drawImage(pin, (c.width * 0.595), (c.height * 0.73), pinW, pinH)
|
|
|
- ctx.drawImage(pin, (c.width * 0.525), (c.height * 0.73), pinW, pinH)
|
|
|
- ctx.drawImage(pin, (c.width * 0.525), (c.height * 0.79), pinW, pinH)
|
|
|
- ctx.drawImage(pin, (c.width * 0.455), (c.height * 0.73), pinW, pinH)
|
|
|
- })
|
|
|
- },
|
|
|
- getDataAndSetCookie(schoolCode) {
|
|
|
- return new Promise((resolve, reject) => {
|
|
|
- this.$api.ClassMgmt.GetTestIoTData({ schoolshortcode: schoolCode}).then(res => {
|
|
|
- let ClassMgmtData = {
|
|
|
- timestempbySec: Math.floor((new Date().getTime() / 1000)),
|
|
|
- schoolCode: schoolCode,
|
|
|
- data: res.result.data
|
|
|
- }
|
|
|
- localStorage.setItem('ClassMgmtData', JSON.stringify(ClassMgmtData))
|
|
|
- resolve(ClassMgmtData)
|
|
|
- })
|
|
|
- })
|
|
|
- },
|
|
|
- reciprocal () { //倒數計時器
|
|
|
- this.reciprocalTimebySec -=1;
|
|
|
- if(this.reciprocalTimebySec <= 0){
|
|
|
- this.setClassMgmtData()
|
|
|
- this.reciprocalTimebySec = this.countDownBySec;
|
|
|
- this.reciprocal()
|
|
|
- } else{
|
|
|
- //每秒執行一次,showTime()
|
|
|
- setTimeout(this.reciprocal,1000);
|
|
|
- }
|
|
|
- },
|
|
|
- setRestTime (val) {
|
|
|
- this.countDownBySec = val * 60
|
|
|
- },
|
|
|
- setClassMgmtData() {
|
|
|
- let resetDataFlag = false
|
|
|
- let schoolCode = this.isExistShortCode ? this.$route.params.schoolshortcode : 'habook'
|
|
|
- let classMgmtData = localStorage.getItem('ClassMgmtData')
|
|
|
- if(classMgmtData){ // ClassMgmtData是否存在
|
|
|
- classMgmtData = JSON.parse(classMgmtData)
|
|
|
- if(classMgmtData.schoolCode === schoolCode) { // schoolCode 是否相等
|
|
|
- let TimebyNow = Math.floor((new Date().getTime() / 1000)) // 現在Timestamp(秒)
|
|
|
- let overTimebySec = TimebyNow - classMgmtData.timestempbySec
|
|
|
- if(overTimebySec >= this.resetTimebySec){ // 是否超過設定的時間
|
|
|
- resetDataFlag = true
|
|
|
- } else { // 沒超過給予原資料
|
|
|
- this.$store.state.classMgmt.data = classMgmtData.data
|
|
|
- }
|
|
|
- } else {
|
|
|
- resetDataFlag = true
|
|
|
- }
|
|
|
- } else {
|
|
|
- resetDataFlag = true
|
|
|
- }
|
|
|
- // 重新賦值
|
|
|
- if(resetDataFlag){
|
|
|
- this.getDataAndSetCookie(schoolCode).then(res=>{
|
|
|
- this.$store.state.classMgmt.data = res.data
|
|
|
- console.log(res.data)
|
|
|
- })
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- filters: {
|
|
|
- commaFormat: function(value) { // 加上千分位符號
|
|
|
- return value.toString().replace(/^(-?\d+?)((?:\d{3})+)(?=\.\d+$|$)/, function(all, pre, groupOf3Digital) {
|
|
|
- return pre + groupOf3Digital.replace(/\d{3}/g, ',$&')
|
|
|
- })
|
|
|
- },
|
|
|
- percentFormat: function(num, pos) {
|
|
|
- if (!num || !isFinite(num)) return 0
|
|
|
- return (num * 100).toFixed(pos)
|
|
|
- },
|
|
|
- minToHM: function(min, type) {
|
|
|
- switch (type) {
|
|
|
- case 'h':
|
|
|
- return Math.floor(min / 60)
|
|
|
- break
|
|
|
- case 'm':
|
|
|
- return min % 60
|
|
|
- break
|
|
|
- }
|
|
|
- },
|
|
|
- secToMS: function(val){
|
|
|
- let m = Math.floor(val / 60)
|
|
|
- let s = val % 60
|
|
|
- if(m < 10) m = '0'+m
|
|
|
- if(s < 10) s = '0'+s
|
|
|
- return m + ':' + s
|
|
|
- }
|
|
|
- },
|
|
|
- components: {
|
|
|
- LegendPie,
|
|
|
- RingPie,
|
|
|
- ClassBar,
|
|
|
- ClassLine,
|
|
|
- FloorPlan
|
|
|
- },
|
|
|
- created() {
|
|
|
- // 倒數計時
|
|
|
- this.reciprocal()
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- }
|
|
|
-}
|
|
|
-</script>
|