|
@@ -1,8 +1,7 @@
|
|
<template>
|
|
<template>
|
|
<view class="home-container">
|
|
<view class="home-container">
|
|
- <view class="bg1"></view>
|
|
|
|
<!-- 头部区域 -->
|
|
<!-- 头部区域 -->
|
|
- <top-box></top-box>
|
|
|
|
|
|
+ <top-box v-bind:timeStamp="timeStamp"></top-box>
|
|
<!-- 滚动条 -->
|
|
<!-- 滚动条 -->
|
|
<view class="notice">
|
|
<view class="notice">
|
|
<u-notice-bar :text="notification" mode="closable" bgColor="#6495ED" color="#FFFFFF"></u-notice-bar>
|
|
<u-notice-bar :text="notification" mode="closable" bgColor="#6495ED" color="#FFFFFF"></u-notice-bar>
|
|
@@ -10,79 +9,105 @@
|
|
<!-- 卡片区域 -->
|
|
<!-- 卡片区域 -->
|
|
<view class="card-box">
|
|
<view class="card-box">
|
|
|
|
|
|
|
|
+ <!-- 今日打卡 -->
|
|
|
|
+ <view class="card-item" style="width: 100%;">
|
|
|
|
+ <view class="card-info">
|
|
|
|
+ <view class="t-icon t-icon-xueshengdaka"></view>
|
|
|
|
+ <text class="info-text">今日打卡情况(今日迟到情况)</text>
|
|
|
|
+ </view>
|
|
|
|
+ <!-- 内容 -->
|
|
|
|
+ <view class="calendar_container">
|
|
|
|
+ <zsyCalendar :sundayIndex="6" @change="change" :mode="'close'" />
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+
|
|
<view class="card-item">
|
|
<view class="card-item">
|
|
<view class="card-info">
|
|
<view class="card-info">
|
|
<view class="t-icon t-icon-chengjiguanli"></view>
|
|
<view class="t-icon t-icon-chengjiguanli"></view>
|
|
- <text class="info-text">今日活动</text>
|
|
|
|
|
|
+ <text class="info-text">今日评测</text>
|
|
</view>
|
|
</view>
|
|
<view class="charts-box">
|
|
<view class="charts-box">
|
|
- <qiun-data-charts type="home-arcbar" :chartData="arcbarChartData" :loadingType="4"
|
|
|
|
- :opts="arcbaropts" />
|
|
|
|
|
|
+ <qiun-data-charts type="home-arcbar" :chartData="todayData.evaluationArcbar" :loadingType="4"
|
|
|
|
+ :canvas2d='true' canvasId='canvans931' :opts="evaluationOpts" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
<view class="card-item">
|
|
<view class="card-item">
|
|
<view class="card-info">
|
|
<view class="card-info">
|
|
<view class="t-icon t-icon-xuexiaobaobei"></view>
|
|
<view class="t-icon t-icon-xuexiaobaobei"></view>
|
|
- <text class="info-text">今日自主学习</text>
|
|
|
|
|
|
+ <text class="info-text">今日作业</text>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="charts-box">
|
|
|
|
+ <qiun-data-charts type="home-arcbar" :chartData="todayData.homeworkArcbar" :loadingType="4"
|
|
|
|
+ :canvas2d='true' canvasId='canvans932' :opts="homeworkOpts" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
<!-- 今日课程 -->
|
|
<!-- 今日课程 -->
|
|
<view class="card-item">
|
|
<view class="card-item">
|
|
<view class="card-info">
|
|
<view class="card-info">
|
|
- <view class="t-icon t-icon-chengchangdangan"></view>
|
|
|
|
|
|
+ <view class="t-icon t-icon-jiaowuxunke"></view>
|
|
<text class="info-text">今日课程</text>
|
|
<text class="info-text">今日课程</text>
|
|
</view>
|
|
</view>
|
|
<!-- 内容 -->
|
|
<!-- 内容 -->
|
|
<view style="display: flex; align-items: center;">
|
|
<view style="display: flex; align-items: center;">
|
|
- <view style="color: #3B4144;margin-left: 30rpx;font-size: 30rpx;font-weight: bold;">课程数:</view>
|
|
|
|
|
|
+ <view style="color: #3B4144;margin-left: 30rpx;font-size: 30rpx;font-weight: bold;">个人课程数:</view>
|
|
<view class="card-content">{{classNum}}</view>
|
|
<view class="card-content">{{classNum}}</view>
|
|
</view>
|
|
</view>
|
|
<view class="u-page__item">
|
|
<view class="u-page__item">
|
|
<u-collapse accordion :border="false">
|
|
<u-collapse accordion :border="false">
|
|
<u-collapse-item title="孩子今日课程:">
|
|
<u-collapse-item title="孩子今日课程:">
|
|
<view style="display: flex; flex-wrap: wrap;">
|
|
<view style="display: flex; flex-wrap: wrap;">
|
|
- <text class="u-collapse-content" v-for="(item,index) in classList"
|
|
|
|
- :key="index"> {{item}}||</text>
|
|
|
|
|
|
+ <u-tag v-for="(item,index) in classList"
|
|
|
|
+ :key="index" :text="item" plain shape="circle" size="mini"></u-tag>
|
|
</view>
|
|
</view>
|
|
</u-collapse-item>
|
|
</u-collapse-item>
|
|
<u-collapse-item title="今日授课老师:">
|
|
<u-collapse-item title="今日授课老师:">
|
|
<view style="display: flex; flex-wrap: wrap;">
|
|
<view style="display: flex; flex-wrap: wrap;">
|
|
- <text class="u-collapse-content" v-for="(item,index) in teacherList"
|
|
|
|
- :key="index">{{item}}||</text>
|
|
|
|
|
|
+ <u-tag v-for="(item,index) in teacherList"
|
|
|
|
+ :key="index":text="item" plain shape="circle" size="mini"></u-tag>
|
|
</view>
|
|
</view>
|
|
</u-collapse-item>
|
|
</u-collapse-item>
|
|
</u-collapse>
|
|
</u-collapse>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
|
|
+ <!-- 今日问卷 -->
|
|
<view class="card-item">
|
|
<view class="card-item">
|
|
<view class="card-info">
|
|
<view class="card-info">
|
|
- <view class="t-icon t-icon-jiankangshangbao"></view>
|
|
|
|
- <text class="info-text">睡眠时间</text>
|
|
|
|
|
|
+ <view class="t-icon t-icon-qingjiatiaoke"></view>
|
|
|
|
+ <text class="info-text">今日活动</text>
|
|
</view>
|
|
</view>
|
|
- </view>
|
|
|
|
-
|
|
|
|
- <!-- 今日打卡 -->
|
|
|
|
- <view class="card-item" style="width: 100%;">
|
|
|
|
- <view class="card-info">
|
|
|
|
- <view class="t-icon t-icon-jiaoshidianming"></view>
|
|
|
|
- <text class="info-text">今日打卡情况(今日迟到情况)</text>
|
|
|
|
|
|
+ <!-- 内容 -->
|
|
|
|
+ <view style="display: flex; align-items: center;">
|
|
|
|
+ <view style="color: #3B4144;margin-left: 30rpx;font-size: 30rpx;font-weight: bold;">问卷完成率:</view>
|
|
|
|
+ <view class="card-content">{{questionnaire}}%</view>
|
|
|
|
+ </view>
|
|
|
|
+ <view style="padding: 0rpx 10rpx 10rpx 10rpx;">
|
|
|
|
+ <u-line-progress :showText="false" :percentage="questionnaire" activeColor="#6495ed" height="15">
|
|
|
|
+ </u-line-progress>
|
|
</view>
|
|
</view>
|
|
<!-- 内容 -->
|
|
<!-- 内容 -->
|
|
- <view class="calendar_container">
|
|
|
|
- <zsyCalendar :sundayIndex="6" @change="change" :mode="'close'"/>
|
|
|
|
|
|
+ <view style="display: flex; align-items: center;">
|
|
|
|
+ <view style="color: #3B4144;margin-left: 30rpx;font-size: 30rpx;font-weight: bold;">投票完成率:</view>
|
|
|
|
+ <view class="card-content">{{vote}}%</view>
|
|
</view>
|
|
</view>
|
|
|
|
+ <view style="padding: 0rpx 10rpx 10rpx 10rpx;">
|
|
|
|
+ <u-line-progress :showText="false" :percentage="vote" activeColor="#fd7193" height="15">
|
|
|
|
+ </u-line-progress>
|
|
|
|
+ </view>
|
|
|
|
+
|
|
</view>
|
|
</view>
|
|
-
|
|
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+
|
|
<view class="card-item">
|
|
<view class="card-item">
|
|
<view class="card-info">
|
|
<view class="card-info">
|
|
- <view class="t-icon t-icon-jiankangshangbao"></view>
|
|
|
|
- <text class="info-text">今日睡眠时间</text>
|
|
|
|
|
|
+ <view class="t-icon t-icon-jiaoshidaka"></view>
|
|
|
|
+ <text class="info-text">今日自主学习</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
-
|
|
|
|
|
|
+
|
|
<view class="card-item">
|
|
<view class="card-item">
|
|
<view class="card-info">
|
|
<view class="card-info">
|
|
<view class="t-icon t-icon-jiankangshangbao"></view>
|
|
<view class="t-icon t-icon-jiankangshangbao"></view>
|
|
@@ -96,13 +121,19 @@
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
<script>
|
|
- import {mapState} from 'vuex'
|
|
|
|
|
|
+ import {
|
|
|
|
+ mapState
|
|
|
|
+ } from 'vuex'
|
|
//日历组件
|
|
//日历组件
|
|
import zsyCalendar from '@/components/zsy-calendar/zsy-calendar'
|
|
import zsyCalendar from '@/components/zsy-calendar/zsy-calendar'
|
|
export default {
|
|
export default {
|
|
name: 'Calendar',
|
|
name: 'Calendar',
|
|
|
|
+ computed: {
|
|
|
|
+ ...mapState('m_chart', ['todayData']),
|
|
|
|
+ ...mapState('m_children', ['childreninfo'])
|
|
|
|
+ },
|
|
components: {
|
|
components: {
|
|
- zsyCalendar
|
|
|
|
|
|
+ zsyCalendar
|
|
},
|
|
},
|
|
data() {
|
|
data() {
|
|
return {
|
|
return {
|
|
@@ -113,44 +144,67 @@
|
|
classList: ['数学', '语文', '英语', '体育', '思品'],
|
|
classList: ['数学', '语文', '英语', '体育', '思品'],
|
|
//授课老师
|
|
//授课老师
|
|
teacherList: ['张老师', '李老师', '王老师', '陈老师', '黄老师'],
|
|
teacherList: ['张老师', '李老师', '王老师', '陈老师', '黄老师'],
|
|
- //圆环进度条数据
|
|
|
|
- arcbarChartData: {
|
|
|
|
- "series": [{
|
|
|
|
- "name": "完成率",
|
|
|
|
- "data": 0.83,
|
|
|
|
- "color": "#0052d4"
|
|
|
|
- }]
|
|
|
|
- },
|
|
|
|
- //圆环进度条属性
|
|
|
|
- arcbaropts: {},
|
|
|
|
|
|
|
|
|
|
+ //评测进度条属性
|
|
|
|
+ evaluationOpts: {},
|
|
|
|
+ //作业进度条属性
|
|
|
|
+ homeworkOpts: {},
|
|
|
|
+ //时间戳
|
|
|
|
+ timeStamp: '',
|
|
|
|
+ //问卷完成率
|
|
|
|
+ questionnaire: 50,
|
|
|
|
+ //投票完成率
|
|
|
|
+ vote: 100,
|
|
}
|
|
}
|
|
},
|
|
},
|
|
-
|
|
|
|
- computed: {
|
|
|
|
- ...mapState('m_children', ['childreninfo'])
|
|
|
|
- },
|
|
|
|
onLoad() {
|
|
onLoad() {
|
|
this.setOpts()
|
|
this.setOpts()
|
|
|
|
+ this.getTimeStamp()
|
|
|
|
+ },
|
|
|
|
+ onPullDownRefresh() {
|
|
|
|
+ this.setOpts()
|
|
|
|
+ this.getTimeStamp()
|
|
|
|
+ console.log('refresh')
|
|
|
|
+ setTimeout(function() {
|
|
|
|
+ uni.stopPullDownRefresh()
|
|
|
|
+ }, 1000);
|
|
},
|
|
},
|
|
methods: {
|
|
methods: {
|
|
//设置更新
|
|
//设置更新
|
|
setOpts() {
|
|
setOpts() {
|
|
//圆环图标题和副标题动态变化
|
|
//圆环图标题和副标题动态变化
|
|
- let tmpopts = {
|
|
|
|
|
|
+ let evaluation = {
|
|
|
|
+ title: {
|
|
|
|
+ name: this.todayData.evaluationArcbar.series[0].data * 100 + "%",
|
|
|
|
+ color: this.todayData.evaluationArcbar.series[0].color
|
|
|
|
+ },
|
|
|
|
+ subtitle: {
|
|
|
|
+ name: this.todayData.evaluationArcbar.series[0].name
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ let homework = {
|
|
title: {
|
|
title: {
|
|
- name: this.arcbarChartData.series[0].data * 100 + "%"
|
|
|
|
|
|
+ name: this.todayData.homeworkArcbar.series[0].data * 100 + "%",
|
|
|
|
+ color: this.todayData.homeworkArcbar.series[0].color
|
|
},
|
|
},
|
|
subtitle: {
|
|
subtitle: {
|
|
- name: this.arcbarChartData.series[0].name
|
|
|
|
|
|
+ name: this.todayData.homeworkArcbar.series[0].name
|
|
}
|
|
}
|
|
}
|
|
}
|
|
- this.arcbaropts = tmpopts;
|
|
|
|
|
|
+ this.evaluationOpts = evaluation;
|
|
|
|
+ this.homeworkOpts = homework;
|
|
},
|
|
},
|
|
// 日历选中日期改变事件回调
|
|
// 日历选中日期改变事件回调
|
|
- change(e) {
|
|
|
|
- console.log(e)
|
|
|
|
- }
|
|
|
|
|
|
+ change(e) {
|
|
|
|
+ console.log(e)
|
|
|
|
+ },
|
|
|
|
+ //更新时间戳
|
|
|
|
+ getTimeStamp() {
|
|
|
|
+ var date = new Date(),
|
|
|
|
+ hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours(),
|
|
|
|
+ minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
|
|
|
|
+ this.timeStamp = (hour + ':' + minute).toString();
|
|
|
|
+ }
|
|
|
|
|
|
},
|
|
},
|
|
}
|
|
}
|
|
@@ -196,7 +250,7 @@
|
|
}
|
|
}
|
|
|
|
|
|
.card-content {
|
|
.card-content {
|
|
- font-size: 50rpx;
|
|
|
|
|
|
+ font-size: 35rpx;
|
|
margin: 10rpx 0 10rpx 25rpx;
|
|
margin: 10rpx 0 10rpx 25rpx;
|
|
color: #3B4144;
|
|
color: #3B4144;
|
|
font-weight: bold;
|
|
font-weight: bold;
|
|
@@ -208,7 +262,7 @@
|
|
.charts-box {
|
|
.charts-box {
|
|
width: 100%;
|
|
width: 100%;
|
|
height: 300rpx;
|
|
height: 300rpx;
|
|
- padding: 5rpx 5rpx 10rpx 5rpx;
|
|
|
|
|
|
+ padding-bottom: 10rpx;
|
|
}
|
|
}
|
|
|
|
|
|
.t-icon {
|
|
.t-icon {
|
|
@@ -216,34 +270,11 @@
|
|
height: 40rpx;
|
|
height: 40rpx;
|
|
}
|
|
}
|
|
|
|
|
|
- //折叠面板
|
|
|
|
- .u-page {
|
|
|
|
- padding: 0;
|
|
|
|
-
|
|
|
|
- &__item {
|
|
|
|
-
|
|
|
|
- &__title {
|
|
|
|
- padding: 1px;
|
|
|
|
- font-size: 1px;
|
|
|
|
-
|
|
|
|
- &__slot-title {
|
|
|
|
- color: $u-primary;
|
|
|
|
- font-size: 13px;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .u-collapse-content {
|
|
|
|
- color: $u-tips-color;
|
|
|
|
- font-size: 14px;
|
|
|
|
- }
|
|
|
|
//日历
|
|
//日历
|
|
.calendar_container {
|
|
.calendar_container {
|
|
- background-color: #FFFFFF;
|
|
|
|
- padding: 10rpx;
|
|
|
|
- margin: 10rpx;
|
|
|
|
- box-sizing: border-box;
|
|
|
|
|
|
+ background-color: #FFFFFF;
|
|
|
|
+ padding: 10rpx;
|
|
|
|
+ margin: 10rpx;
|
|
|
|
+ box-sizing: border-box;
|
|
}
|
|
}
|
|
-
|
|
|
|
</style>
|
|
</style>
|