完善首页学习,运动,睡眠图表,设计订阅组件,通过微信方法自适应icon布局等等

components/analysis-module/analysis-module.vue

@@ -1,38 +1,49 @@
 <template>
-
-	<view class="block">
-
+<view>
+	
+	<view class="block" v-if="subscribe">
 		<view class="item-container" @click="navRoseChart">
 			<view class="analysis-name">
 				<view class="t-icon t-icon-xtubiao-"></view>
 				<text class="analysis-text">优劣科目分析</text>
 			</view>
 		</view>
-
-
+	
+	
 		<view class="item-container" @click="navRadarChart">
 			<view class="analysis-name">
 				<view class="t-icon t-icon-xtubiao-3"></view>
 				<text class="analysis-text">考试能力分析</text>
 			</view>
 		</view>
-
-
+	
+	
 		<view class="item-container" @click="navArcbarChart">
 			<view class="analysis-name">
 				<view class="t-icon t-icon-xtubiao-6"></view>
 				<text class="analysis-text">成绩占比分析</text>
 			</view>
 		</view>
-
 	</view>
-
+	<view class="nosub-box" v-if="!subscribe">
+		<view style="display: flex; align-items: center;margin: 30rpx 0 0 15rpx;">
+			<!-- <view class="t-icon t-icon-xtubiao-3" style="width: 50rpx;height: 50rpx;"></view> -->
+			<view class="nosub-text">综合分析模块</view>
+		</view>
+		<view class="nosub-content">点击订阅</view>
+	</view>
+	
+</view>
 
 </template>
 
 <script>
+	import {mapState} from 'vuex'
 	export default {
-		name: "analysis-module ",
+		name: "analysis-box",
+		computed:{
+			...mapState('m_parent',['subscribe'])
+		},
 		data() {
 			return {
 
@@ -96,6 +107,27 @@
 				}
 			}
 		}
-
+	}
+	.nosub-box{
+		display: flex;
+		flex-direction: column;
+		border-radius: 16rpx;
+		background: linear-gradient(to right, #ff8caf 0%, #FFCCCC 100%);
+		box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.05);
+		// background-color: #ff8caf;
+		width: 347rpx;
+		height: 345rpx;
+		.nosub-text{
+			font-size: 40rpx;
+			font-weight: bold;
+			color: #FFFFFF;
+			margin-left: 10rpx;	
+		}
+		.nosub-content{
+			margin: 50rpx 0 0 25rpx;
+			font-size: 60rpx;
+			font-weight: bold;
+			color: #FFFFFF;
+		}
 	}
 </style>

components/back/back.vue

@@ -1,5 +1,5 @@
 <template>
-	<view class="back">
+	<view class="back" :style="'height:'+capsuleHeight+ 'px;top:'+capsuleHighly+'px;'">
 		<view class="t-icon t-icon-fanhui2-copy" @click="backIconHandler"></view>
 	</view>
 </template>
@@ -9,13 +9,26 @@
 		name: "back",
 		data() {
 			return {
-
+				//胶囊高度
+				capsuleHeight: 0,
+				//
+				capsuleHighly: 0,
 			};
 		},
+		created() {
+			this.getCapsuleSite()
+		},
 		methods:{
 			backIconHandler(){
 				//调用自定义事件
 				this.$emit('click')
+			},
+			//获取胶囊位置信息
+			getCapsuleSite(){
+				let res=uni.getMenuButtonBoundingClientRect()
+				console.log(res)
+				this.capsuleHeight = res.height
+				this.capsuleHighly = res.top 
 			}
 		}
 	}
@@ -23,11 +36,14 @@
 
 <style lang="scss">
 	.back {
-		padding: 100rpx 0 30rpx 40rpx;
+		position: relative;
+		padding: 0 0 120rpx 20rpx;
+		display: flex;
+		align-items: center;
 
 		.t-icon {
-			width: 50rpx;
-			height: 50rpx;
+			width: 45rpx;
+			height: 45rpx;
 		}
 	}
 </style>

components/top-box/top-box.vue

@@ -1,8 +1,13 @@
 <template>
 	<view>
 		<!-- 头部信息 -->
-		<view class="home-topinfo"></view>
-		<view style="display: flex;align-items: center; margin-top: -450rpx;
+		<view class="home-topinfo">
+			<!-- 更新时间戳 -->
+			<view class="refresh-time" :style="'top:'+ capsuleBottom + 'px;left:'+ capsuleMiddle + 'px;'  ">
+				<text class="time-text">更新于: {{timeStamp}}</text>
+			</view>
+		</view>
+		<view style="display: flex;margin-top: -450rpx;
     margin-bottom: 120rpx;">
 			<image class="children-avatar" :src="childreninfo.avatar" @click="showChildrenList"></image>
 			<view class="children-name">
@@ -19,10 +24,7 @@
 
 		<u-picker class="picker" :show="select" :closeOnClickOverlay="true" :columns="semesterList" ref="uPicker"
 			@confirm="selectSemester" @cancel="selectCancel"></u-picker>
-		<!-- 更新时间戳 -->
-		<view class="refresh-time">
-			<text class="time-text">更新于:{{timeStamp}}</text>
-		</view>
+		
 		<!-- 切换孩子 -->
 		<view class="list-box" v-show="show">
 			<view class="children-item" v-for="(item,index) in parentdetail.childrenList" :key="index"
@@ -52,12 +54,15 @@
 			}
 		},
 		created() {
-
+			this.getCapsuleSite()
 		},
 		data() {
 			return {
 				show: false,
 				select: false,
+				//下边界坐标
+				capsuleBottom: 0,
+				capsuleMiddle: 0
 			};
 		},
 		computed: {
@@ -89,6 +94,12 @@
 				this.updateChildrenInfo(item)
 				this.show = false
 			},
+			//获取胶囊位置信息
+			getCapsuleSite(){
+				let res=uni.getMenuButtonBoundingClientRect()
+				this.capsuleBottom = res.bottom + 5
+				this.capsuleMiddle = res.left
+			}
 
 		}
 	}
@@ -110,8 +121,8 @@
 	}
 
 	.children-name {
-		margin-left: 20rpx;
-		padding-top: 10rpx;
+		margin-left: 25rpx;
+		padding-top: 5rpx;
 		display: flex;
 		flex-direction: column;
 		justify-content: center;
@@ -138,18 +149,19 @@
 			}
 		}
 	}
-
 	.refresh-time {
+		position: relative;
+	
 		.time-text {
-			position: relative;
-			left: 582rpx;
-			bottom: 210rpx;
+			padding: 10rpx;
 			font-size: 24rpx;
 			color: #FFFFFF;
 			font-weight: bold;
 		}
 	}
 
+	
+
 	.list-box {
 		margin: -130rpx 40rpx 120rpx 33rpx;
 		display: flex;

gradepkg/arcbar-chart/arcbar-chart.vue

@@ -147,7 +147,6 @@
 
 		.chart-container {
 			margin: 20rpx;
-			padding: 0rpx 10rpx 0rpx 0rpx;
 			border-radius: 15rpx;
 			display: flex;
 			align-items: center;

gradepkg/area-chart/area-chart.vue

@@ -19,8 +19,6 @@
 				<text class="chart-name-text">{{semester}} 单科与平均对比</text>
 
 				<view class="search-box" @click="show = true">
-					<!-- <view class="t-icon t-icon-fangdajing"></view>
-					<view style="font-weight: bold;font-size: 26rpx;color: #3B4144;">科目</view> -->
 					<u-button>{{gradeData.subjectAreaChart.areaComparison.series[0].name}}</u-button>
 				</view>
 			</view>
@@ -45,7 +43,7 @@
 		</view>
 
 		<!-- 选择器 -->
-		<u-picker :show="show" :columns="subject" ref="uPicker" @confirm="selectSubject" @cancel="selectCancel"
+		<u-picker :show="show" :columns="subjectList" ref="uPicker" @confirm="selectSubject" @cancel="selectCancel"
 			:closeOnClickOverlay="true">
 		</u-picker>
 
@@ -55,30 +53,39 @@
 
 <script>
 	import {
-		mapState, mapMutations
+		mapState, mapMutations, mapGetters
 	} from 'vuex'
 
 	export default {
 		computed: {
 			...mapState('m_children', ['childreninfo', 'semester']),
-			...mapState('m_chart', ['gradeData'])
+			...mapState('m_chart', ['gradeData']),
+			...mapGetters('m_chart', ['getSubjectList'])
 		},
 
 		data() {
 			return {
 				show: false,
-				subject: [['语文', '数学', '英语', '体育', '思品', '科学']],
-
+				subjectList: []
 			};
 		},
-		onLoad() {},
+		onLoad() {
+			this.setSubjectList()
+		},
 		methods: {
 			...mapMutations('m_chart', ['updateSubjectAreaComparison']),
+			//设置孩子科目
+			setSubjectList(){
+				if(this.subjectList = []){
+					let temp = [this.getSubjectList]
+					this.subjectList = temp
+				}
+			},
 			//选择科目
 			selectSubject(e) {
 				console.log('selectSubject', e)
 				
-				this.updateSubjectAreaComparison(areaComparison)
+				// this.updateSubjectAreaComparison(areaComparison)
 				// this.getChartData()
 				uni.$showMsg('切换完成')
 				this.show = false
@@ -138,7 +145,6 @@
 
 		.chart-container {
 			margin: 20rpx;
-			padding: 0rpx 10rpx 0rpx 0rpx;
 			border-radius: 15rpx;
 			display: flex;
 			align-items: center;
@@ -172,7 +178,7 @@
 
 			.charts-box {
 				width: 100%;
-				height: 500rpx;
+				height: 550rpx;
 			}
 		}
 	}

gradepkg/column-chart/column-chart.vue

@@ -97,7 +97,6 @@
 		}
 		.chart-container {
 			margin: 20rpx;
-			padding: 0rpx 10rpx 0rpx 0rpx;
 			border-radius: 15rpx;
 			display: flex;
 			align-items: center;
@@ -123,7 +122,7 @@
 			}
 			.charts-box {
 				width: 100%;
-				height: 500rpx;
+				height: 550rpx;
 			}
 		}
 	}

gradepkg/line-chart/line-chart.vue

@@ -111,7 +111,6 @@
 		
 		.chart-container {
 			margin: 20rpx;
-			padding: 0rpx 10rpx 0rpx 0rpx;
 			border-radius: 15rpx;
 			display: flex;
 			align-items: center;

gradepkg/radar-chart/radar-chart.vue

@@ -43,7 +43,7 @@
 			</view>
 			<!-- 图表 -->
 			<view class="charts-box">
-				<qiun-data-charts type="mainradar" :chartData="gradeData.abilityRadarChart.importantAnalyse" :loadingType="4" />
+				<qiun-data-charts type="radar" :chartData="gradeData.abilityRadarChart.importantAnalyse" :loadingType="4" />
 			</view>
 		</view>
 
@@ -54,7 +54,7 @@
 			</view>
 			<!-- 图表 -->
 			<view class="charts-box">
-				<qiun-data-charts type="mainradar" :chartData="gradeData.abilityRadarChart.commonAnalyse" :loadingType="4" />
+				<qiun-data-charts type="radar" :chartData="gradeData.abilityRadarChart.commonAnalyse" :loadingType="4" />
 			</view>
 		</view>
 
@@ -190,7 +190,6 @@
 
 		.chart-container {
 			margin: 20rpx;
-			padding: 0rpx 10rpx 0rpx 0rpx;
 			border-radius: 15rpx;
 			display: flex;
 			align-items: center;

gradepkg/rose-chart/rose-chart.vue

@@ -153,7 +153,6 @@
 
 		.chart-container {
 			margin: 20rpx;
-			padding: 0rpx 10rpx 0rpx 0rpx;
 			border-radius: 15rpx;
 			display: flex;
 			align-items: center;
@@ -180,7 +179,7 @@
 
 			.charts-box {
 				width: 100%;
-				height: 550rpx;
+				height: 600rpx;
 			}
 		}
 

information/chart.js

@@ -675,6 +675,113 @@ export default {
 					"color": "#ff5959"
 				}]
 			},
+			//孩子数据记录
+			//学习休息时长对比
+			studyColumn: {
+				"categories": [
+					"星期一",
+					"星期二",
+					"星期三",
+					"星期四",
+					"星期五",
+					"星期六",
+					"星期天"
+				],
+				"series": [{
+						"name": "自主学习(时)",
+						"data": [
+							2,
+							3,
+							2.5,
+							3,
+							2,
+							1,
+							3
+						]
+					},
+					{
+						"name": "娱乐放松(时)",
+						"data": [
+							1,
+							2,
+							0.5,
+							3,
+							0.5,
+							3.5,
+							2
+						]
+					}
+				]
+			},
+			//锻炼时长
+			exercisePie: {
+				"series": [{
+					"data": [{
+							"name": "周一(分)",
+							"value": 20
+						},
+						{
+							"name": "周二(分)",
+							"value": 30
+						},
+						{
+							"name": "周三(分)",
+							"value": 50
+						},
+						{
+							"name": "周四(分)",
+							"value": 100
+						},
+						{
+							"name": "周五(分)",
+							"value": 40
+						},
+						{
+							"name": "周六(分)",
+							"value": 40
+						},
+						{
+							"name": "周日(分)",
+							"value": 60
+						}
+					]
+				}]
+			},
+			sleepRing: {
+				"series": [{
+					"data": [{
+							"name": "周一(时)",
+							"value": 8
+						},
+						{
+							"name": "周二(时)",
+							"value": 7
+						},
+						{
+							"name": "周三(时)",
+							"value": 8.5
+						},
+						{
+							"name": "周四(时)",
+							"value": 6.5
+						},
+						{
+							"name": "周五(时)",
+							"value": 8
+						},
+						{
+							"name": "周六(时)",
+							"value": 8
+						},
+						{
+							"name": "周日(时)",
+							"value": 9
+						}
+					]
+				}]
+			},
+			
+			
 		},
 
 
@@ -692,6 +799,13 @@ export default {
 	},
 	//模块属性(数据包装)
 	getters: {
-
+		//学科科目
+		getSubjectList(state) {
+			let {
+				考试,
+				...subject
+			} = state.gradeData.tableData[0]
+			return Object.keys(subject)
+		}
 	}
 }

information/parent.js

@@ -7,6 +7,8 @@ export default {
 	state: () => ({
 
 		token: uni.getStorageSync('token') || '',//openid和session_key
+		//用户订阅信息
+		subscribe: true,
 
 		parentinfo: JSON.parse(uni.getStorageSync('parentinfo') || '{}'),
 

pages/grade/grade.vue

@@ -66,7 +66,7 @@
 			</view>
 			<!-- 分析模块 -->
 			<view class="mini-chart-item">
-				<analysis-module></analysis-module>
+				<analysis-box></analysis-box>
 			</view>
 
 
@@ -158,7 +158,7 @@
 			display: flex;
 			align-items: center;
 			flex-wrap: wrap;
-			margin: -100rpx 20rpx 0 20rpx;
+			margin: -50rpx 20rpx 0 20rpx;
 			justify-content: space-between;
 
 			.mini-chart-item {

pages/home/home.vue

@@ -17,7 +17,7 @@
 				</view>
 				<!-- 内容 -->
 				<view class="calendar_container">
-					<zsyCalendar :sundayIndex="6" @change="change" :mode="'close'" />
+					<zsyCalendar :sundayIndex="6" @change="chooseCalendar" :mode="'close'" />
 				</view>
 			</view>
 
@@ -27,7 +27,7 @@
 					<text class="info-text">今日评测</text>
 				</view>
 				<view class="charts-box">
-					<qiun-data-charts type="home-arcbar" :chartData="todayData.evaluationArcbar" :loadingType="4"
+					<qiun-data-charts type="arcbar" :chartData="todayData.evaluationArcbar" :loadingType="4"
 						:canvas2d='true' canvasId='canvans931' :opts="evaluationOpts" />
 				</view>
 			</view>
@@ -38,7 +38,7 @@
 					<text class="info-text">今日作业</text>
 				</view>
 				<view class="charts-box">
-					<qiun-data-charts type="home-arcbar" :chartData="todayData.homeworkArcbar" :loadingType="4"
+					<qiun-data-charts type="arcbar" :chartData="todayData.homeworkArcbar" :loadingType="4"
 						:canvas2d='true' canvasId='canvans932' :opts="homeworkOpts" />
 				</view>
 			</view>
@@ -58,14 +58,14 @@
 					<u-collapse accordion :border="false">
 						<u-collapse-item title="孩子今日课程:">
 							<view style="display: flex; flex-wrap: wrap;">
-								<u-tag v-for="(item,index) in classList"
-									:key="index" :text="item" plain shape="circle" size="mini"></u-tag>
+								<u-tag v-for="(item,index) in classList" :key="index" :text="item" plain shape="circle"
+									size="mini"></u-tag>
 							</view>
 						</u-collapse-item>
 						<u-collapse-item title="今日授课老师:">
 							<view style="display: flex; flex-wrap: wrap;">
-								<u-tag v-for="(item,index) in teacherList"
-									:key="index":text="item" plain shape="circle" size="mini"></u-tag>
+								<u-tag v-for="(item,index) in teacherList" :key="index" :text="item" plain
+									shape="circle" size="mini"></u-tag>
 							</view>
 						</u-collapse-item>
 					</u-collapse>
@@ -83,7 +83,7 @@
 					<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;">
+				<view style="padding: 0rpx 20rpx 10rpx 20rpx;">
 					<u-line-progress :showText="false" :percentage="questionnaire" activeColor="#6495ed" height="15">
 					</u-line-progress>
 				</view>
@@ -92,7 +92,7 @@
 					<view style="color: #3B4144;margin-left: 30rpx;font-size: 30rpx;font-weight: bold;">投票完成率:</view>
 					<view class="card-content">{{vote}}%</view>
 				</view>
-				<view style="padding: 0rpx 10rpx 10rpx 10rpx;">
+				<view style="padding: 0rpx 20rpx 10rpx 20rpx;">
 					<u-line-progress :showText="false" :percentage="vote" activeColor="#fd7193" height="15">
 					</u-line-progress>
 				</view>
@@ -104,14 +104,33 @@
 			<view class="card-item" style="width: 100%;">
 				<view class="card-info">
 					<view class="t-icon t-icon-jiaoshidaka"></view>
-					<text class="info-text">今日自主学习</text>
+					<text class="info-text">孩子学习记录</text>
+				</view>
+				<view style="width: 100%; height: 500rpx; margin-top: -30rpx;">
+					<qiun-data-charts type="column" :chartData="todayData.studyColumn" :loadingType="4" :canvas2d='true'
+						canvasId='canvans912' :opts="{dataLabel:false, extra:{column: {barBorderCircle:true}}}" />
+				</view>
+			</view>
+
+			<view class="card-item">
+				<view class="card-info">
+					<view class="t-icon t-icon-jiankangshangbao"></view>
+					<text class="info-text">运动记录</text>
+				</view>
+				<view style="width: 100%; height: 350rpx; margin-top: -10rpx;">
+					<qiun-data-charts type="pie" :chartData="todayData.exercisePie" :loadingType="4" :canvas2d='true'
+						canvasId='canvans8121' />
 				</view>
 			</view>
 
 			<view class="card-item">
 				<view class="card-info">
 					<view class="t-icon t-icon-jiankangshangbao"></view>
-					<text class="info-text">今日睡眠时间</text>
+					<text class="info-text">睡眠记录</text>
+				</view>
+				<view style="width: 100%; height: 350rpx; margin-top: -10rpx;">
+					<qiun-data-charts type="ring" :chartData="todayData.sleepRing" :loadingType="4"
+						:canvas2d='true' canvasId='canvans9122' :tooltipFormat='yAxisDemo1' />
 				</view>
 			</view>
 
@@ -180,6 +199,11 @@
 					},
 					subtitle: {
 						name: this.todayData.evaluationArcbar.series[0].name
+					},
+					extra: {
+						arcbar: {
+							type: 'circle'
+						}
 					}
 				}
 				let homework = {
@@ -189,13 +213,18 @@
 					},
 					subtitle: {
 						name: this.todayData.homeworkArcbar.series[0].name
+					},
+					extra: {
+						arcbar: {
+							type: 'circle'
+						}
 					}
 				}
 				this.evaluationOpts = evaluation;
 				this.homeworkOpts = homework;
 			},
 			// 日历选中日期改变事件回调
-			change(e) {
+			chooseCalendar(e) {
 				console.log(e)
 			},
 			//更新时间戳
@@ -212,10 +241,12 @@
 
 <style lang="scss">
 	.home-container {
+		width: 100%;
 		height: 100%;
+		overflow-x: hidden; //隐藏多余的页面
 
 		.notice {
-			margin: -100rpx 20rpx 20rpx 20rpx;
+			margin: -50rpx 20rpx 20rpx 20rpx;
 		}
 
 		.card-box {

subpkg/parentInfo/parentInfo.vue

@@ -16,7 +16,7 @@
 			<u-cell-group :border="false">
 				<view class="i-item">
 					<view class="t-icon t-icon-canyon-nature-svgrepo-com"></view>
-					<u-cell class="cell-box" size="large" title="您的绑定手机" :label="parentdetail.phoneNumber" :border="false"></u-cell>
+					<u-cell class="cell-box" size="large" title="我的订阅" :label="parentdetail.phoneNumber" :border="false"></u-cell>
 				</view>
 				<view class="i-item">
 					<view class="t-icon t-icon-empire-state-building-america-svgrepo-com"></view>