3.22

common/style.scss

@@ -5,9 +5,9 @@ $box-background-card: linear-gradient(150deg, #f0f0f0, #ffffff);
 //页面背景
 $page-background-color: #F5F5F5;
 //主题色
-$color-blue: #5b7cff;
-$color-green: #00cca3;
-$color-pink: #ff9db2;
+$color-blue: #0080ff;
+$color-green: #00b894;
+$color-pink: #ff8caf;
 $color-yellow: #f9c752;
 //字体色
 $color-title: #3B4144;

components/analysis-box/analysis-box.vue

@@ -1,176 +0,0 @@
-<template>
-	<view>
-
-		<view class="block">
-			<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="nosub-text">综合分析模块</view>
-			</view>
-			<view class="nosub-content">孩子成绩综合全面分析</view>
-			<button class="nosub-btn" @click="getSubscribe">点击订阅</button>
-		</view> -->
-
-	</view>
-
-</template>
-
-<script>
-	import {
-		mapState ,mapMutations
-	} from 'vuex'
-	export default {
-		name: "analysis-box",
-		computed: {
-			...mapState('m_parent', ['subscribe']),
-		},
-		data() {
-			return {
-
-			};
-		},
-		methods: {
-			...mapMutations('m_parent',['updateSubscribe']),
-			//获取订阅
-			// getSubscribe() {
-			// 	this.updateSubscribe(true)
-			// 	const orderInfo = {
-			// 		order_price: 0.01,
-			// 	}
-				//获取服务供应商
-				// uni.getProvider({
-				// 	service: 'payment',
-				// 	success: function(res) {
-				// 		console.log(res.provider)
-				// 		if (res.provider.indexOf('wxpay')) {
-				// 			//调用客户端支付api
-				// 			uni.requestPayment({
-				// 				provider: res.provider,
-				// 				orderInfo: orderInfo
-				// 			})
-				// 		}
-				// 	}
-				// })
-
-			// },
-			//导航玫瑰图页面
-			navRoseChart(e) {
-				console.log(e);
-				uni.navigateTo({
-					url: "/gradepkg/rose-chart/rose-chart"
-				})
-			},
-			//导航雷达图页面
-			navRadarChart(e) {
-				console.log(e);
-				uni.navigateTo({
-					url: "/gradepkg/radar-chart/radar-chart"
-				})
-			},
-			//导航到进度条页面
-			navArcbarChart(e) {
-				console.log(e);
-				uni.navigateTo({
-					url: "/gradepkg/arcbar-chart/arcbar-chart"
-				})
-			},
-		}
-	}
-</script>
-
-<style lang="scss">
-	.block {
-		display: flex;
-		flex-direction: column;
-		justify-content: space-between;
-		width: 100%;
-		height: 345rpx;
-
-		.item-container {
-			display: flex;
-			align-items: center;
-			border-radius: $card-border-radius;
-			background-color: #FFFFFF;
-			// box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.05);
-			width: 100%;
-			height: 100rpx;
-
-			.analysis-name {
-				display: flex;
-				align-items: center;
-				justify-content: flex-start;
-				width: 100%;
-				margin: 20rpx 0rpx 20rpx 40rpx;
-
-				.analysis-text {
-					margin: 26rpx;
-					font-size: 30rpx;
-					font-weight: bold;
-					color: #3B4144;
-				}
-			}
-		}
-	}
-
-	.nosub-box {
-		display: flex;
-		flex-direction: column;
-		border-radius: $card-border-radius;
-		background: $card-back-base64;
-		background-size: cover; //背景图片自适应
-		// box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.05);
-		width: 347rpx;
-		height: 345rpx;
-
-		.nosub-text {
-			font-size: 35rpx;
-			font-weight: bold;
-			margin-left: 10rpx;
-			background-image: linear-gradient(to right, #ce866e, #e8997d);
-			background-clip: text;//裁剪成文字的前景色
-			color: transparent;//文字颜色变成透明
-		}
-
-		.nosub-content {
-			margin: 25rpx 65rpx 0 25rpx;
-			font-size: 45rpx;
-			font-weight: bold;
-			background-image: linear-gradient(to right, #ce866e, #e8997d);
-			background-clip: text;//裁剪成文字的前景色
-			color: transparent;//文字颜色变成透明
-		}
-		.nosub-btn{
-			margin-top: 30rpx;
-			line-height: 65rpx;
-			height: 65rpx;
-			width: 80%;
-			border-radius: 30rpx;
-			font-size: 30rpx;
-			font-weight: bold;
-			background-image: linear-gradient(to right, #ba7a63, #ffa789);
-		}
-	}
-</style>

components/back/back.vue

@@ -1,6 +1,6 @@
 <template>
 	<view class="back" :style="'height:'+capsuleHeight+ 'px;top:'+capsuleHighly+'px;'">
-		<u-icon name="arrow-left" color="#000000" size="20" @click="backIconHandler"></u-icon>
+		<u-icon name="arrow-left" color="#000000" size="22" @click="backIconHandler"></u-icon>
 		<view class="back-text">
 			{{ text }}
 		</view>
@@ -50,8 +50,8 @@
 		z-index: 99;
 
 		.t-icon {
-			width: 45rpx;
-			height: 45rpx;
+			width: 35rpx;
+			height: 35rpx;
 		}
 		
 		.back-text{

components/todaydata-box/todaydata-box.vue

@@ -19,46 +19,46 @@
 			</view>
 		</view>
 
-		<!-- 时间选择器 -->
-		<u-picker :show="setTimePicker" :columns="pickerList" ref="uPicker" @confirm="pickerConfirm"
-			@cancel="pickerCancel" :closeOnClickOverlay="true" @change="changeHandler" :immediateChange="true"></u-picker>
-
 		<!-- 记录表 -->
 		<view class="module-box" v-if="current == 1">
-			<view class="card-item" style="width: 710rpx;">
-				<view class="card-info">
-					<view class="t-icon t-icon-jiaoshidaka"></view>
-					<text class="info-text">近七天学习记录</text>
+			<view class="chart-item" style="width: 100%;">
+				<view class="chart-info">
+					<view class="t-icon t-icon-shuju1"></view>
+					<text class="chart-info-text">近七天学习记录</text>
 				</view>
-				<view style=" width:100%; 500rpx; margin-top: -30rpx;">
+				<view style=" width:100%; margin-top: -30rpx;">
 					<qiun-data-charts type="column" :chartData="todayData.studyColumn" :loadingType="4"
 						:opts="{dataLabel:false}" tooltipFormat='tooltipHour' :canvas2d="true"
 						canvasId="canvasId9839618" />
 				</view>
 			</view>
 
-			<view class="card-item">
-				<view class="card-info">
-					<view class="t-icon t-icon-jiankangshangbao"></view>
-					<text class="info-text">近七天运动</text>
+			<view class="chart-item">
+				<view class="chart-info">
+					<view class="t-icon t-icon-tiyu"></view>
+					<text class="chart-info-text">近七天运动</text>
 				</view>
-				<view class="charts-box">
+				<view class="chart-view">
 					<qiun-data-charts type="pie" :chartData="todayData.exercisePie" :loadingType="4"
 						tooltipFormat='pieMinute' :canvas2d="true" canvasId="canvasId91234111" />
 				</view>
 			</view>
 
-			<view class="card-item">
-				<view class="card-info">
-					<view class="t-icon t-icon-jiankangshangbao"></view>
-					<text class="info-text">近七天睡眠</text>
+			<view class="chart-item">
+				<view class="chart-info">
+					<view class="t-icon t-icon-yejian"></view>
+					<text class="chart-info-text">近七天睡眠</text>
 				</view>
-				<view class="charts-box">
+				<view class="chart-view">
 					<qiun-data-charts type="ring" :chartData="todayData.sleepRing" :loadingType="4"
 						tooltipFormat='tooltipHour' :canvas2d="true" canvasId="canvasId6312231" />
 				</view>
 			</view>
 		</view>
+		<!-- 时间选择器 -->
+		<u-picker :show="setTimePicker" :columns="pickerList" ref="uPicker" @confirm="pickerConfirm"
+			@cancel="pickerCancel" :closeOnClickOverlay="true" :immediateChange="true">
+		</u-picker>
 	</view>
 
 </template>
@@ -76,7 +76,7 @@
 			return {
 				//模块名
 				list: [{
-					name: '今日记录'
+					name: '家庭记录'
 				}, {
 					name: '历史记录'
 				}],
@@ -97,7 +97,7 @@
 					},
 					{
 						text: '运动锻炼记录',
-						color: 'background-color: #ff9db2;',
+						color: 'background-color: #ff8caf;',
 						icon: 't-icon t-icon-yundong',
 						numData: '记录一下',
 					},
@@ -131,26 +131,18 @@
 				this.cardCurrent = index
 				this.setTimePicker = true
 			},
-			//更改完成事件
-			changeHandler(e) {
+			//确定
+			pickerConfirm(e) {
 				if (e.value[0] === '0小时') {
 					this.moduleData[this.cardCurrent].numData = e.value[1]
 				} else {
 					this.moduleData[this.cardCurrent].numData = e.value[0] + e.value[1]
 				}
-			},
-			pickerConfirm(e) {
-				// this.setTimePicker = false
-				// 闭包的运用
-				
-				let that = this
-				setTimeout(function () {
-					uni.$showMsg('记录完成',1000)
-				  that.setTimePicker = false
-				}, 100)
+				uni.$showMsg('记录完成', 1000)
+				this.setTimePicker = false
 			},
 			pickerCancel() {
-				uni.$showMsg('取消选择',1000)
+				uni.$showMsg('取消选择', 1000)
 				this.setTimePicker = false
 			},
 
@@ -159,8 +151,9 @@
 </script>
 
 <style lang="scss">
-	@import '@/pages/common/mainpage.scss';
-
+	.module-container{
+		margin: -70rpx 20rpx 0 20rpx;
+	}
 	.module-box {
 		display: flex;
 		flex-direction: row;
@@ -210,4 +203,29 @@
 			font-weight: bold;
 		}
 	}
+	.chart-item{
+		margin: 2% 0;
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
+		background-color: #FFF;
+		// box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.05);
+		border-radius: $card-border-radius;
+		width: 48%;
+		height: auto;
+		.chart-info{
+			display: flex;
+			align-items: center;
+			padding: 20rpx;
+			.chart-info-text{
+				font-size: 30rpx;
+				font-weight: bold;
+				color: #3B4144;
+				margin-left: 10rpx;
+			}
+		}
+		.chart-view{
+			height: 300rpx;
+		}
+	}
 </style>

components/top-box/top-box.vue

@@ -4,8 +4,11 @@
 		<view class="home-topinfo">
 			<!-- 更新时间戳 -->
 			<view class="refresh-time" :style="'top:'+ capsuleBottom + 'px;left:'+ capsuleMiddle + 'px;'  ">
+				<!-- 订阅版本 -->
+				<text class="time-text">{{myData.subscribeLevel}}</text>
 				<text class="time-text">更新于: {{timeStamp}}</text>
 			</view>
+			
 		</view>
 		<view style="display: flex;margin-top: -450rpx;
     margin-bottom: 120rpx;">
@@ -22,9 +25,9 @@
 			</view>
 		</view>
 
-		<u-picker class="picker" :show="setSemesterPicker" :closeOnClickOverlay="true" :columns="semesterList" ref="uPicker"
-			@confirm="pickerConfirm" @cancel="pickerCancel" @change="changeHandler" :immediateChange="true"></u-picker>
-		
+		<u-picker class="picker" :show="setSemesterPicker" :closeOnClickOverlay="true" :columns="semesterList"
+			ref="uPicker" @confirm="pickerConfirm" @cancel="pickerCancel" :immediateChange="true"></u-picker>
+
 		<!-- 切换孩子 -->
 		<view class="list-box" v-show="show">
 			<view class="children-item" v-for="(item,index) in parentdetail.childrenList" :key="index"
@@ -63,41 +66,26 @@
 				//下边界坐标
 				capsuleBottom: 0,
 				capsuleMiddle: 0,
-				temp: '',
 			};
 		},
 		computed: {
 			...mapState('m_children', ['childreninfo', 'semester', 'semesterList']),
-			...mapState('m_parent', ['parentdetail'])
+			...mapState('m_parent', ['parentdetail','myData'])
 		},
 		methods: {
 			...mapMutations('m_children', ['updateChildrenInfo', 'updateChildrenSemester']),
-			changeHandler(e){
-				//更新学期存储与显示
-				this.temp = e.value[0]
-			},
 			//学期选择
 			pickerConfirm(e) {
 				//拼接图表数据
-				this.updateChildrenSemester(this.temp)
-				if(this.semester == e.value[0]){
-					let that = this
-					setTimeout(function (){
-						uni.$showMsg('切换完成',1000)
-						that.setSemesterPicker = false
-					},100)
-				}else{
-					this.updateChildrenSemester(e.value[0])
-					this.setSemesterPicker = false
-				}
-				
+				this.updateChildrenSemester(e.value[0])
+				uni.$showMsg('切换完成', 1000)
+				this.setSemesterPicker = false
 			},
 			//取消选择
 			pickerCancel() {
-				uni.$showMsg('取消选择',1000)
+				uni.$showMsg('取消选择', 1000)
 				this.setSemesterPicker = false
 			},
-
 			//头部孩子选择
 			showChildrenList(e) {
 				console.log('chooseChildren' + e)
@@ -109,8 +97,8 @@
 				this.show = false
 			},
 			//获取胶囊位置信息
-			getCapsuleSite(){
-				let res=uni.getMenuButtonBoundingClientRect()
+			getCapsuleSite() {
+				let res = uni.getMenuButtonBoundingClientRect()
 				this.capsuleBottom = res.bottom + 5
 				this.capsuleMiddle = res.left
 			}
@@ -122,7 +110,7 @@
 <style lang="scss">
 	.home-topinfo {
 		height: 600rpx;
-		background: linear-gradient(#0080ff, $page-background-color);
+		background: linear-gradient($color-blue, $page-background-color);
 	}
 
 	.children-avatar {
@@ -157,17 +145,20 @@
 			}
 
 			.select-icon {
-				margin:7rpx 0 0 10rpx;
+				margin: 7rpx 0 0 10rpx;
 				width: 30rpx;
 				height: 30rpx;
 			}
 		}
 	}
+
 	.refresh-time {
 		position: relative;
-	
+		display: flex;
+		flex-direction: column;
+
 		.time-text {
-			padding: 10rpx;
+			padding: 5rpx 10rpx 0 10rpx;
 			font-size: 24rpx;
 			color: #FFFFFF;
 			font-weight: bold;
@@ -208,5 +199,4 @@
 		width: 40rpx;
 		height: 40rpx;
 	}
-
 </style>

components/zsy-calendar/dateBox.vue

@@ -1,100 +0,0 @@
-<template>
-	<!-- 日期显示 -->
-	<view class="date_box">
-		<view
-			v-for="(dateInfo, dateIndex) in dates"
-			:key="dateIndex"
-			class="calendar_date__box"
-		>
-			<view
-				class="calendar_date"
-				:class="{ isSelected: dateInfo.isSelected }"
-				:style="{
-					height: cellHeight + 'rpx',
-					width: cellHeight + 'rpx',
-					color: swiperMode === 'open' ? dateInfo.type === 'cur' ? '#2C2C2C' : '#959595' : '#2C2C2C',
-					backgroundColor: dateInfo.isSelected ? dateActiveColor : ''
-				}"
-				@tap="chooseDate(dateInfo, dateIndex)"
-			>
-				<view class="calendar_date__number">{{ dateInfo.date }}</view>
-				<view class="calendar_date__isToday" v-if="dateInfo.isToday" :style="{ backgroundColor: dateActiveColor }"></view>
-				<view class="calendar_date__cricle"></view>
-			</view>
-		</view>
-	</view>
-</template>
-
-<script>
-	export default {
-		props: {
-			dates: {
-				type: Array,
-				default: []
-			},
-			cellHeight: { // 一列的高度
-				type: Number,
-				default: 75
-			},
-			dateActiveColor: { // 日期选中颜色
-				type: String,
-				default: '#FE6601'
-			},
-			swiperMode: { // 日历显示模式
-				type: String,
-				default: 'open'
-			}
-		},
-		methods: {
-			chooseDate(dateInfo, dateIndex) {
-				this.$emit('chooseDate', dateInfo, dateIndex)
-			}
-		}
-	}
-</script>
-
-<style>
-	/* 日历轮播 */
-	.date_box {
-		display: flex;
-		flex-wrap: wrap;
-		justify-content: space-between;
-	}
-	.date_box .calendar_date__box {
-		width: calc(100% / 7);
-		margin-top: 20rpx;
-	}
-	.calendar_date__box .calendar_date {
-		text-align: center;
-		margin: 0 auto;
-		font-weight: bold;
-		font-size: 28rpx;
-		border-radius: 50%;
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		justify-content: center;
-		position: relative;
-	}
-	.calendar_date__box .calendar_date.isSelected {
-		color: #FFFFFF !important;
-	}
-	.calendar_date .calendar_date__isToday {
-		width: 100%;
-		height: 100%;
-		position: absolute;
-		top: 0;
-		left: 0;
-		border-radius: 50%;
-		z-index: -1;
-		opacity: 0.4;
-	}
-	.calendar_date .calendar_date__cricle {
-		width: 9rpx;
-		height: 9rpx;
-		border-radius: 50%;
-		margin-top: 5rpx;
-		background-color: #FFFFFF;
-	}
-	/* 日历轮播 */
-</style>

components/zsy-calendar/js/utils.js

@@ -1,68 +0,0 @@
-/**
- * 时间格式化
- * @param {String} time
- * @param {String} cFormat
- */
-export function parseTime(time, cFormat) {
-	if (arguments.length === 0) {
-	  return null
-	}
-  if (!time) return ''
-  /* 修复IOS系统上面的时间不兼容*/
-  if (time.toString().indexOf('-') > 0) {
-    time = time.replace(/-/g, '/')
-  }
-  const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}'
-  let date
-  if (typeof time === 'object') {
-    date = time
-  } else {
-    if ((typeof time === 'string') && (/^[0-9]+$/.test(time))) {
-      time = parseInt(time)
-    }
-    if ((typeof time === 'number') && (time.toString().length === 10)) {
-      time = time * 1000
-    }
-    date = new Date(time)
-  }
-  const formatObj = {
-    y: date.getFullYear(),
-    m: date.getMonth() + 1,
-    d: date.getDate(),
-    h: date.getHours(),
-    i: date.getMinutes(),
-    s: date.getSeconds(),
-    a: date.getDay()
-  }
-  const time_str = format.replace(/{([ymdhisa])+}/g, (result, key) => {
-    const value = formatObj[key]
-    // Note: getDay() returns 0 on Sunday
-    if (key === 'a') {
-      return ['日', '一', '二', '三', '四', '五', '六'][value]
-    }
-    return value.toString().padStart(2, '0')
-  })
-  return time_str
-}
-
-/**
- * This is just a simple version of deep copy
- * Has a lot of edge cases bug
- * If you want to use a perfect deep copy, use lodash's _.cloneDeep
- * @param {Object} source
- * @returns {Object}
- */
-export function deepClone(source) {
-	if (!source && typeof source !== 'object') {
-		throw new Error('error arguments', 'deepClone')
-	}
-	const targetObj = Object.prototype.toString.call(source) === "[object Array]" ? [] : {}
-	Object.keys(source).forEach(keys => {
-		if (source[keys] && typeof source[keys] === 'object') {
-			targetObj[keys] = deepClone(source[keys])
-		} else {
-			targetObj[keys] = source[keys]
-		}
-	})
-	return targetObj
-}

components/zsy-calendar/zsy-calendar.vue

@@ -1,624 +0,0 @@
-<template>
-	<!-- 日历滚动插件 -->
-	<view class="zsy_calendar">
-		<!-- 日历顶部信息 -->
-		<view class="calendar_info">
-			<text class="title">每日记录</text>
-			<text class="desc">
-				({{ getAssignDateInfo(false, 0) === getAssignDateInfo(true, 0) ? '' : getAssignDateInfo(false, 0) + '年' }}{{ getAssignDateInfo(false, 1) }}月)
-			</text>
-			<text v-show="showBackToTodayBtn" class="backToToday" :style="{color: dateActiveColor}" @tap="goToDate()">回到今天</text>
-		</view>
-		
-		<!-- 日历周数 -->
-		<view class="calendar_week">
-			<view v-for="(item, index) in week" :key="index" class="calendar_week__item">{{ item }}</view>
-		</view>
-		
-		<!-- 日历轮播 -->
-		<view class="calendar_swiper">
-			<!-- 展开情况下的日历轮播 -->
-			<swiper
-				v-if="swiperMode === 'open'"
-				key="normalSwiper"
-				circular
-				:style="{height: swiperHeight('open')}"
-				:current="current"
-				:duration="duration"
-				:skip-hidden-item-layout="true"
-				@change="e => current = e.detail.current"
-			>
-				<swiper-item v-for="(swiper, swiperIndex) in 3" :key="swiperIndex" class="swiper-item">
-					<DateBox
-						:dates="calendarSwiperDates[swiperIndex]"
-						:cellHeight="cellHeight"
-						:dateActiveColor="dateActiveColor"
-						:swiperMode="swiperMode"
-						@chooseDate="chooseDate"
-					/>
-				</swiper-item>
-			</swiper>
-			
-			<!-- 收缩情况下的日历轮播 -->
-			<swiper
-				v-else
-				key="shrinkSwiper"
-				circular
-				:style="{height: swiperHeight('close')}"
-				:current="shrinkCurrent"
-				:duration="duration"
-				:skip-hidden-item-layout="true"
-				@change="e => shrinkCurrent = e.detail.current"
-			>
-				<swiper-item v-for="(swiper, swiperIndex) in 3" :key="swiperIndex" class="swiper-item">
-					<DateBox
-						:dates="calendarSwiperShrinkDates[swiperIndex]"
-						:cellHeight="cellHeight"
-						:dateActiveColor="dateActiveColor"
-						:swiperMode="swiperMode"
-						@chooseDate="chooseShrinkDate"
-					/>
-				</swiper-item>
-			</swiper>
-		</view>
-	
-		<!-- 日历切换模式 -->
-		<view class="calendar_toggle" @tap="swiperMode = swiperMode === 'open' ? 'close' : 'open'">
-			<view class="icon" :class="{down: swiperMode === 'close'}"></view>
-		</view>
-	</view>
-</template>
-
-<script>
-	import { parseTime, deepClone } from './js/utils.js'
-	import DateBox from './dateBox.vue'
-	export default {
-		name: 'ZsyCalendar',
-		components: {
-			DateBox
-		},
-		props: {
-			duration: { // 轮播图动画时长
-				type: Number,
-				default: 300
-			},
-			cellHeight: { // 一列的高度
-				type: Number,
-				default: 70
-			},
-			dateActiveColor: { // 日期选中颜色
-				type: String,
-				default: '#FE6601'
-			},
-			sundayIndex: { // 星期天所在索引，0表示第一个、6表示最后一个
-				type: Number,
-				default: 6
-			},
-			mode: { // 日历模式
-				type: String,
-				default: 'open'
-			},
-			changeSetDefault: { // 月份切换时是否显示一号还是当前月份选中高亮
-				type: Boolean,
-				default: true
-			}
-		},
-		data() {
-			return {
-				today: parseTime(new Date(), '{y}-{m}-{d}'), // 今天日期
-				selectedDate: null, // 选中日期
-				week: [], // 日历周数
-				current: 1, // 当前日历轮播默认显示索引
-				shrinkCurrent: 1, // 缩放日历轮播默认显示索引
-				calendarSwiperDates: [], // 日历轮播日期信息
-				calendarSwiperShrinkDates: [], // 日历轮播收缩时的日期信息
-				dateActive: -1, // 日期选中索引
-				swiperByClick: false, // 是否通过点击上月份或下月份的日期进行轮播切换
-				shrinkSwiperByClick: false, // 是否通过点击上月份或下月份的日期进行收缩日历的轮播切换
-				swiperMode: this.mode, // 日历轮播显示模式 open：展开 close：收缩
-				dateCache: {}, // 日期缓存
-				emitTimer: null, // 日期改变向父级传递当前选中日期计时器
-				dateClick: false // 是否进行了日期的点击选择
-			}
-		},
-		computed: {
-			/* 获取指定日期信息
-			isCurDate: 是否获取当天的信息还是选中日期的信息
-			index: 0 表示年份 1 表示月份 2 表示日期 */
-			getAssignDateInfo() {
-				return (isCurDate, index) => {
-					return (isCurDate ? this.today : this.selectedDate).split('-')[index] * 1
-				}
-			},
-			// 是否显示回到今天按钮
-			showBackToTodayBtn() {
-				return this.getAssignDateInfo(false, 0) !== this.getAssignDateInfo(true, 0) || this.getAssignDateInfo(false, 1) !== this.getAssignDateInfo(true, 1)
-			},
-			// 返回轮播图高度
-			swiperHeight() {
-				return (swiperMode) => {
-					const normalHeight = (this.calendarSwiperDates[this.current] || []).length / 7 * (this.cellHeight + 20) + 'rpx'
-					const shrinkHeight = this.cellHeight + 20 + 'rpx'
-					return swiperMode === 'open' ? normalHeight : shrinkHeight
-				}
-			}
-		},
-		watch: {
-			// 展开日历轮播切换
-			current(newV, oldV) {
-				if (newV === 0 && oldV === 2) { // 右滑
-					this.swiperChange(1)
-					return
-				}
-				if (newV === 2 && oldV === 0) { // 左滑
-					this.swiperChange(-1)
-					return
-				}
-				if (newV > oldV) { // 右滑
-					this.swiperChange(1)
-				} else { // 左滑
-					this.swiperChange(-1)
-				}
-			},
-			// 收缩日历轮播切换
-			shrinkCurrent(newV, oldV) {
-				if (newV === 0 && oldV === 2) { // 右滑
-					this.shrinkSwiperChange(1)
-					return
-				}
-				if (newV === 2 && oldV === 0) { // 左滑
-					this.shrinkSwiperChange(-1)
-					return
-				}
-				if (newV > oldV) { // 右滑
-					this.shrinkSwiperChange(1)
-				} else { // 左滑
-					this.shrinkSwiperChange(-1)
-				}
-			},
-			// 日历显示方式切换
-			swiperMode(newV) {
-				// 当收缩时初始化收缩轮播图的日期数据
-				if (newV === 'close') {
-					this.initCalendarShrinkSwiperDates()
-				}
-			},
-			selectedDate: {
-				deep: true,
-				handler(newV, oldV) {
-					if (newV && (oldV === null || this.dateClick)) { // 初始化/日历点击选择时直接返回
-						this.emitDate()
-						this.dateClick = false
-					} else { // 其它情况做防抖处理
-						if (this.emitTimer !== null) {
-							clearTimeout(this.emitTimer)
-						}
-						this.emitTimer = setTimeout(() => {
-							this.emitDate()
-						}, this.duration + 200)
-					}
-				}
-			}
-		},
-		created() {
-			this.init() // 初始化数据
-		},
-		methods: {
-			// 初始化数据
-			init() {
-				if (this.selectedDate === null) this.selectedDate = this.today // 默认选中日期为当天
-				this.initWeek() // 初始化要显示的周数
-				this.initCalendarSwiperDates() // 初始化日历轮播日期信息
-				// 解决swiperMode初始化为收缩时没有初始化日历收缩轮播日期信息
-				if (this.swiperMode === 'close') {
-					this.initCalendarShrinkSwiperDates()
-				}
-			},
-			// 初始化周数
-			initWeek() {
-				const normalWeek = ['日', '一', '二', '三', '四', '五', '六'] // 正常周数
-				const sIndex = this.sundayIndex < 0 ? 0 : this.sundayIndex >= normalWeek.length ? normalWeek.length - 1 : this.sundayIndex
-				normalWeek.unshift(...normalWeek.slice(-sIndex))
-				normalWeek.length = 7
-				this.week = normalWeek
-			},
-			// 初始化展开时的日历轮播日期信息
-			initCalendarSwiperDates(cb) {
-				const year = this.getAssignDateInfo(false, 0)
-				const month = this.getAssignDateInfo(false, 1)
-				const cur = this.generateCalendar(year, month)
-				const prev = this.generateCalendar(month === 1 ? year - 1 : year, month === 1 ? 12 : month - 1)
-				const next = this.generateCalendar(month === 12 ? year + 1 : year, month === 12 ? 1 : month + 1)
-				// 根据current来判断相邻的轮播存放哪些日历数据
-				if (this.current === 0) {
-					this.calendarSwiperDates = [cur, next, prev]
-				} else if (this.current === 1) {
-					this.calendarSwiperDates = [prev, cur, next]
-				} else if (this.current === 2) {
-					this.calendarSwiperDates = [next, prev, cur]
-				}
-				this.swiperByClick = false
-				// 初始化日期信息完毕执行回调函数
-				cb && cb()
-			},
-			// 生成展开的日历数据
-			generateCalendar(year, month) {
-				let calendarDate = []
-				// 先获取缓存里面有没有该月的日期数据
-				if (this.dateCache[`${year}-${month}`]) {
-					calendarDate = deepClone(this.dateCache[`${year}-${month}`])
-				} else { // 进行月份日期的计算
-					const monthDates = new Date(year, month, 0).getDate() // 获取此月份总天数
-					const normalWeek = ['一', '二', '三', '四', '五', '六', '日'] // 正常周数
-					const monthFirstDay = normalWeek[new Date(year, month - 1, 0).getDay()] // 获取本月一号为星期几
-					const monthFirstDayIndex = this.week.indexOf(monthFirstDay) // 计算本月一号在日历周数中的索引，索引之前的填充上个月的后几天
-					// 本月一号在日历中不是第一个位置，需要进行填充
-					if (monthFirstDayIndex !== 0) {
-						const prevMonthDates = new Date(year, month - 1, 0).getDate() // 获取上一个月份的总天数
-						// 填充本月一号之前的数据
-						for (let i = 0; i < monthFirstDayIndex; i ++) {
-							const item = {
-								year: month === 1 ? year - 1 : year,
-								month: month === 1 ? 12 : month - 1,
-								date: prevMonthDates - i,
-								type: 'prev'
-							}
-							// 判断填充的日期是否包含今天日期
-							this.theDateIsToday(item)
-							calendarDate.unshift(item)
-						}
-					}
-					// 循环生成当月所有日期
-					for (let i = 1; i <= monthDates; i ++) {
-						const item = {
-							year,
-							month,
-							date: i,
-							isSelected: false,
-							isToday: false,
-							type: 'cur'
-						}
-						// 今天的日期在不在里面
-						this.theDateIsToday(item)
-						calendarDate.push(item)
-					}
-					const residue = calendarDate.length % 7
-					// 判断是否需要填充下个月的前几天
-					if (residue !== 0) {
-						for (let i = 1; i <= 7 - residue; i ++) {
-							const item = {
-								year: month === 12 ? year + 1 : year,
-								month: month === 12 ? 1 : month + 1,
-								date: i,
-								type: 'next'
-							}
-							// 下个月的前几天包含今天
-							this.theDateIsToday(item)
-							calendarDate.push(item)
-						}
-					}
-					this.dateCache[`${year}-${month}`] = deepClone(calendarDate)
-				}
-				// 进行日期的默认选中
-				if (year === this.getAssignDateInfo(false, 0) && month === this.getAssignDateInfo(false, 1)) {
-					for (let i = 0, len = calendarDate.length; i < len; i++) {
-						if (calendarDate[i].type === 'cur' && calendarDate[i].date === this.getAssignDateInfo(false, 2)) {
-							calendarDate[i].isSelected = true
-							this.dateActive = i
-							break
-						}
-					}
-				}
-				return calendarDate
-			},
-			// 判断日期是否为今天
-			theDateIsToday(item) {
-				if (item.year + '-' + item.month + '-' + item.date === this.getAssignDateInfo(true, 0) + '-' + this.getAssignDateInfo(true, 1) + '-' + this.getAssignDateInfo(true, 2)) {
-					item.isToday = true
-				}
-			},
-			// 初始化收缩时的日历轮播日期信息
-			initCalendarShrinkSwiperDates(swiperChangeType) {
-				let line = null
-				/**
-				 * 日历收缩事件/当前滑动不涉及到到上个/下个月的日期数据
-				 * 日历滑动到上一周并且本周不属于第一行并且上一周选中的日期必须是本月份里面的日期
-				 * 日历滑动到下一周且本周不属于最后一行
-				 */
-				const curDateLine = Math.floor(this.dateActive / 7)
-				if (!swiperChangeType ||
-						(swiperChangeType === -1 && curDateLine !== 0 && this.calendarSwiperDates[this.current][(curDateLine - 1) * 7].type === 'cur') ||
-						(swiperChangeType === 1 && curDateLine + 1 !== this.calendarSwiperDates[this.current].length / 7)
-				) {
-					// 计算当前周选中日期处于日历中的哪一行位置
-					const curCalendarSwiperDates = this.calendarSwiperDates[this.current]
-					line = Math.floor(curCalendarSwiperDates.map(item => item.type === 'cur' ? item.date : -1).indexOf(this.getAssignDateInfo(false, 2)) / 7)
-					// 收缩日历滑动事件需要进行日期的选中处理
-					if (swiperChangeType) {
-						// 将当前选中日期清除选中状态
-						this.calendarSwiperDates[this.current][this.dateActive].isSelected = false
-						// 重新计算日期选中高亮并把下一个日期进行选中
-						this.dateActive = line * 7
-						this.calendarSwiperDates[this.current][this.dateActive].isSelected = true
-					}
-				} else { // 收缩日历滑动事件
-					// 将当前选中日期清除选中状态
-					this.calendarSwiperDates[this.current][this.dateActive].isSelected = false
-					// 涉及了上个月/下个月的日期数据，需要重新计算展开日历轮播的日期数据
-					let currentNum = this.current + swiperChangeType
-					currentNum = currentNum > 2 ? 0 : currentNum < 0 ? 2 : currentNum
-					this.current = currentNum
-					// 计算上一周/下一周选中日期处于日历中的哪一行位置
-					const curCalendarSwiperDates = this.calendarSwiperDates[this.current]
-					line = Math.floor(curCalendarSwiperDates.map(item => item.type === 'cur' ? item.date : -1).indexOf(this.getAssignDateInfo(false, 2)) / 7)
-					// 重新计算日期选中高亮并把下一个日期进行选中
-					this.dateActive = line * 7
-					this.calendarSwiperDates[this.current][this.dateActive].isSelected = true
-				}
-				const cur = this.generateShrinkCalendar(0, line)
-				const prev = this.generateShrinkCalendar(-1, line)
-				const next = this.generateShrinkCalendar(1, line)
-				// 根据shrinkCurrent来判断相邻的轮播存放哪些日历数据
-				if (this.shrinkCurrent === 0) {
-					this.calendarSwiperShrinkDates = [cur, next, prev]
-				} else if (this.shrinkCurrent === 1) {
-					this.calendarSwiperShrinkDates = [prev, cur, next]
-				} else if (this.shrinkCurrent === 2) {
-					this.calendarSwiperShrinkDates = [next, prev, cur]
-				}
-			},
-			// 生成收缩的日历数据
-			generateShrinkCalendar(type, line) {
-				// 返回当前这一周的日期数据
-				if (type === 0) {
-					return this.calendarSwiperDates[this.current].slice(line * 7, (line + 1) * 7)
-				}
-				// 返回上一周的日期数据
-				if (type === -1) {
-					// 当前选中的日期是否位于第一行
-					if (line === 0) {
-						/**
-						 * 当前日历的第一行是否包含有上个月的日期
-						 * 如果有包含，则返回上个月的倒数第二行日期
-						 * 如果没有包含，则返回上个月的倒数第一行日期
-						 */
-						// 计算上个月的索引值
-						const prevIndex = this.current === 0 ? 2 : this.current - 1
-						// 获取上个月的日期数据
-						const prevCalendarSwiperDates = this.calendarSwiperDates[prevIndex]
-						// 获取上个月的日历行数
-						const prevCalendarSwiperDatesLine = prevCalendarSwiperDates.length / 7
-						if (this.calendarSwiperDates[this.current][0].type === 'prev') { // 倒数第二行
-							return prevCalendarSwiperDates.slice((prevCalendarSwiperDatesLine - 2) * 7, (prevCalendarSwiperDatesLine - 1) * 7)
-						} else { // 倒数第一行
-							return prevCalendarSwiperDates.slice((prevCalendarSwiperDatesLine - 1) * 7)
-						}
-					} else {
-						return this.calendarSwiperDates[this.current].slice((line - 1) * 7, line * 7)
-					}
-				}
-				// 返回下一周的日期数据
-				if (type === 1) {
-					// 计算当前日历月份总共有多少行
-					const curMonthMaxLine = this.calendarSwiperDates[this.current].length / 7
-					// 当前选中的日期是否位于最后一行
-					if (line === curMonthMaxLine - 1) {
-						/**
-						 * 当前日历的最后一行是否包含有下个月的日期
-						 * 如果有包含，则返回下个月的第二行日期
-						 * 如果没有包含，则返回上个月的第一行日期
-						 */
-						// 计算下个月的索引值
-						const nextIndex = this.current === 2 ? 0 : this.current + 1
-						// 获取下个月的日期数据
-						const nextCalendarSwiperDates = this.calendarSwiperDates[nextIndex]
-						// 获取下个月的日历行数
-						const nextCalendarSwiperDatesLine = nextCalendarSwiperDates.length / 7
-						if (this.calendarSwiperDates[this.current][this.calendarSwiperDates[this.current].length - 1].type === 'next') { // 第二行
-							return nextCalendarSwiperDates.slice(7, 14)
-						} else { // 第一行
-							return nextCalendarSwiperDates.slice(0, 7)
-						}
-					} else {
-						return this.calendarSwiperDates[this.current].slice((line + 1) * 7, (line + 2) * 7)
-					}
-				}
-			},
-			// 展开日历轮播切换
-			swiperChange(type) {
-				// 通过点击上个月/下个月日期进行切换，不需要默认选中下个月的一号，直接选中点击的那个日期
-				if (!this.swiperByClick && this.swiperMode === 'open') {
-					this.getPrevOrNextDate(type)
-				}
-				setTimeout(() => { // 设置定时器是为了防止轮播切换时生成数据造成页面卡顿
-					this.initCalendarSwiperDates(() => {
-						this.swiperMode === 'close' && this.initCalendarShrinkSwiperDates()
-					}) // 初始化日历轮播日期信息
-				}, this.swiperMode === 'open' ? this.duration : 0)
-			},
-			// 收缩日历轮播切换
-			shrinkSwiperChange(type) {
-				// 默认选中下个星期的开始日期
-				this.getPrevOrNextStartDate(type)
-				setTimeout(() => { // 设置定时器是为了防止轮播切换时生成数据造成页面卡顿
-					this.initCalendarShrinkSwiperDates(type) // 初始化日历轮播日期信息
-				}, this.duration)
-			},
-			// 获取上一个月/下一个月的一号日期
-			getPrevOrNextDate(type) {
-				const year = this.getAssignDateInfo(false, 0)
-				let month = this.getAssignDateInfo(false, 1)
-				month = month + type
-				// 判断切换月份时选中当前日期高亮还是一号，若选中当前日期高亮需进行大小判断
-				const curActiveDate = this.getAssignDateInfo(false, 2)
-				const maxDate = new Date(year, month, 0).getDate()
-				const date = this.changeSetDefault ? 1 : curActiveDate > maxDate ? maxDate : curActiveDate
-				this.selectedDate = parseTime(new Date(year, month - 1, date), '{y}-{m}-{d}')
-			},
-			// 获取上个星期/下一星期的开始日期
-			getPrevOrNextStartDate(type) {
-				const date = this.calendarSwiperShrinkDates[this.shrinkCurrent][0]
-				this.selectedDate = parseTime(new Date(date.year, date.month - 1, date.date), '{y}-{m}-{d}')
-			},
-			// 前往某一天 格式 YYYY-MM | YYYY-MM-DD
-			goToDate(date = this.today) {
-				try {
-					if (date.split('-').length < 2 || date.split('-').length > 3) throw '参数有误'
-					if (date.split('-').length === 2) {
-						date += '-01'
-					}
-				} catch (err) {
-					throw Error('请检查参数是否符合规范')
-				}
-				this.selectedDate = date
-				this.initCalendarSwiperDates(() => {
-					this.initCalendarShrinkSwiperDates()
-				})
-			},
-			// 日历轮播展开的情况下选择日期
-			chooseDate(dateInfo, dateIndex) {
-				// 重复点击后续不做处理
-				if (dateInfo.isSelected) return false
-				// 是否点击了上个月份的后几天或者点击了下个月份的前几天
-				if (dateInfo.type !== 'cur') {
-					if (dateInfo.type === 'prev') { // 点击了上个月份的后几天，滑到上个月
-						this.current = this.current === 0 ? 2 : this.current - 1
-					} else { // 点击了下个月份的前几天，滑到下个月
-						this.current = this.current === 2 ? 0 : this.current + 1
-					}
-					// 将选中日期赋值为当前点击的那个日期
-					this.selectedDate = parseTime(new Date(dateInfo.year, dateInfo.month - 1, dateInfo.date), '{y}-{m}-{d}')
-					this.swiperByClick = true
-					return false
-				}
-				// 将当前选中的日期清空并选中最新的日期
-				this.calendarSwiperDates[this.current][this.dateActive].isSelected = false
-				this.dateActive = dateIndex
-				const date = this.calendarSwiperDates[this.current][this.dateActive]
-				date.isSelected = true
-				this.selectedDate = parseTime(new Date(date.year, date.month - 1, date.date), '{y}-{m}-{d}')
-				this.dateClick = true
-			},
-			// 日历轮播收缩的情况下选择日期
-			chooseShrinkDate(dateInfo, dateIndex) {
-				// 重复点击后续不做处理
-				if (dateInfo.isSelected) return false
-				this.dateClick = true
-				// 是否点击了上个月份的后几天或者点击了下个月份的前几天
-				if (dateInfo.type !== 'cur') {
-					if (dateInfo.type === 'prev') { // 点击了上个月份的后几天，切换到上个月
-						this.current = this.current === 0 ? 2 : this.current - 1
-					} else { // 点击了下个月份的前几天，切换到下个月
-						this.current = this.current === 2 ? 0 : this.current + 1
-					}
-					this.dateActive = dateIndex
-					// 将选中日期赋值为当前点击的那个日期
-					this.selectedDate = parseTime(new Date(dateInfo.year, dateInfo.month - 1, dateInfo.date), '{y}-{m}-{d}')
-					return false
-				}
-				// 计算当前选中日期之前有多少个日期
-				const dateActiveLine = Math.floor(this.dateActive / 7) * 7
-				// 将当前选中的日期清空并选中最新的日期
-				this.calendarSwiperDates[this.current][this.dateActive].isSelected = false
-				this.dateActive = dateIndex + dateActiveLine
-				const date = this.calendarSwiperDates[this.current][this.dateActive]
-				date.isSelected = true
-				this.selectedDate = parseTime(new Date(date.year, date.month - 1, date.date), '{y}-{m}-{d}')
-			},
-			// 向父组件传递当前选中数据
-			emitDate() {
-				const { year, month, date } = this.calendarSwiperDates[this.current][this.dateActive]
-				const e = {
-					selectedDate: this.selectedDate,
-					year,
-					month,
-					date
-				}
-				this.$emit('change', e)
-			}
-		}
-	}
-</script>
-
-<style>
-	.zsy_calendar {
-		width: 100%;
-		box-sizing: border-box;
-		background-color: #fff;
-		border-radius: 20rpx;
-	}
-	
-	/* 日历顶部信息 */
-	.calendar_info {
-		display: flex;
-		align-items: center;
-		padding: 0 20rpx;
-	}
-	.calendar_info .title {
-		font-size: 34rpx;
-		font-weight: bold;
-		color: #2C2C2C;
-	}
-	.calendar_info .desc {
-		margin-left: 29rpx;
-		font-size: 28rpx;
-		color: #959595;
-	}
-	.calendar_info .backToToday {
-		margin-left: auto;
-		font-size: 24rpx;
-	}
-	/* 日历顶部信息 */
-	
-	/* 日历周数 */
-	.calendar_week {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		font-size: 26rpx;
-		color: #959595;
-		margin: 20rpx 0rpx;
-	}
-	.calendar_week .calendar_week__item {
-		width: calc(100% / 7);
-		text-align: center;
-	}
-	/* 日历周数 */
-	
-	/* 日历切换模式 */
-	.calendar_toggle {
-		position: relative;
-		padding: 10rpx 0;
-		margin: 10rpx 20rpx 0;
-		display: flex;
-		justify-content: center;
-	}
-	.calendar_toggle .icon {
-		width: 30rpx;
-		height: 30rpx;
-		background-image: url('../../static/zsy-calendar/arrow.png');
-		background-size: contain;
-		background-repeat: no-repeat;
-		margin: 0 auto;
-		transition: all .3s;
-	}
-	.icon.down {
-		transform: rotate(180deg);
-	}
-	.calendar_toggle::before, .calendar_toggle::after {
-		width: calc(50% - 30rpx);
-		border-top: solid 2rpx #EAEAEA;
-		content: '';
-		display: block;
-		position: absolute;
-		top: 50%;
-		transform: translateY(-50%);
-	}
-	.calendar_toggle::before {
-		left: 0;
-	}
-	.calendar_toggle::after {
-		right: 0;
-	}
-	/* 日历切换模式 */
-</style>

gradepkg/radar-chart/radar-chart.vue

@@ -1,174 +1,169 @@
-<template>
-	<view class="page-box">
-		<back></back>
-
-		<view class="children-box">
-			<image class="children-avatar" :src="childreninfo.avatar"></image>
-			<view class="children-msg">
-				<view class="children-name">{{childreninfo.name}}</view>
-				<view class="children-class">{{childreninfo.class}}</view>
-			</view>
-		</view>
-
-		<!-- 数据分析模块 -->
-		<view class="data-box">
-			<view class="data-box-item">
-				<view class="item-text">考试成绩波动对比:</view>
-				<view class="item-number">{{mainExamUndulate>=quizExamUndulate?'小考稳定':'大考稳定'}}</view>
-				<view class="analysis-box">
-					<view v-if="mainExamUndulate>=quizExamUndulate" class="t-icon t-icon-jiangbei-4"></view>
-					<view v-if="mainExamUndulate<quizExamUndulate" class="t-icon t-icon-jiangbei-3"></view>
-					<view v-if="mainExamUndulate>=quizExamUndulate" class="icon-text-item">重要考试时沉住气稳住心态</view>
-					<view v-if="mainExamUndulate<quizExamUndulate" class="icon-text-item">普通考试时也不能掉以轻心</view>
-				</view>
-			</view>
-
-			<view class="data-box-item" style="background-color: #ff5959;">
-				<view class="item-text">考试得分能力对比:</view>
-				<view class="item-number">{{avgMain>=avgquiz?'大考能力强':'小考能力强'}}</view>
-				<view class="analysis-box">
-					<view v-if="avgMain<avgquiz" class="t-icon t-icon-jiangbei-4"></view>
-					<view v-if="avgMain>=avgquiz" class="t-icon t-icon-jiangbei-3"></view>
-					<view v-if="avgMain<avgquiz" class="icon-text-item">重要考试要多证明自己能力</view>
-					<view v-if="avgMain>=avgquiz" class="icon-text-item">普通考试要注重得分与练习</view>
-				</view>
-			</view>
-		</view>
-
-		<!-- 图表列表 -->
-		<view class="chart-container">
-			<view class="chart-name">
-				<view class="t-icon t-icon-xianxingsakesi"></view>
-				<text class="chart-name-text">重要考试对比</text>
-			</view>
-			<!-- 图表 -->
-			<view class="charts-box">
-				<qiun-data-charts type="radar" :chartData="gradeData.abilityRadarChart.importantAnalyse"
-					:loadingType="4" tooltipFormat='tooltipScore' :canvas2d="true" canvasId="canvasId876898"/>
-			</view>
-		</view>
-
-		<view class="chart-container">
-			<view class="chart-name">
-				<view class="t-icon t-icon-xianxingtouzi"></view>
-				<text class="chart-name-text">普通测验记录</text>
-			</view>
-			<!-- 图表 -->
-			<view class="charts-box">
-				<qiun-data-charts type="radar" :chartData="gradeData.abilityRadarChart.commonAnalyse" :loadingType="4"
-					tooltipFormat='tooltipScore' :canvas2d="true" canvasId="canvasId931238"/>
-			</view>
-		</view>
-
-	</view>
-</template>
-
-<script>
-	import {
-		mapState
-	} from 'vuex'
-
-	export default {
-		computed: {
-			...mapState('m_children', ['childreninfo', 'semester']),
-			...mapState('m_chart', ['gradeData'])
-		},
-
-		data() {
-			return {
-				//查询参数
-				queryObj: {},
-				//成绩波动参数(标准差)
-				mainExamUndulate: 0,
-				quizExamUndulate: 0,
-				//大小考每次考试平均成绩
-				avgMain: 0,
-				avgquiz: 0,
-			};
-		},
-		methods: {
-			confirm(e) {
-				console.log('confirm', e)
-				uni.$showMsg('切换完成')
-				this.show = false
-			},
-			//成绩波动数据(标准差)
-			getExamUndulate() {
-				//求和函数封装
-				function arrSum(array) {
-					let cont = 0
-					for (let i = 0; i < array.length; i++) {
-						cont += array[i]
-					}
-					return cont;
-				}
-				const mainArr = []
-				const quizArr = []
-				//统计每次考试总成绩并存为数组
-				for (let item of this.gradeData.abilityRadarChart.importantAnalyse.series) {
-					mainArr.push(arrSum(item.data))
-				}
-				for (let item of this.gradeData.abilityRadarChart.commonAnalyse.series) {
-					quizArr.push(arrSum(item.data))
-				}
-				//大小考试平均成绩
-				this.avgMain = arrSum(mainArr) / mainArr.length
-				this.avgquiz = arrSum(quizArr) / quizArr.length
-				console.log(this.avgMain, this.avgquiz);
-				//标准差函数
-				function standardDeviation(arr) {
-					let length = arr.length;
-					let sum = arrSum(arr);
-					let avg = sum / length;
-					let temp = [];
-					for (let i = 0; i < length; i++) {
-
-						let dev = (arr[i]) - avg; //计算数组元素与平均值的差
-
-						temp[i] = Math.pow(dev, 2); //计算差的平方
-					}
-					let powSum = arrSum(temp); //差的平方和
-					let standardDeviation = parseFloat(Math.sqrt(powSum / length).toFixed(2)); //标准差
-					return standardDeviation
-				}
-				this.mainExamUndulate = standardDeviation(mainArr)
-				this.quizExamUndulate = standardDeviation(quizArr)
-				console.log(this.mainExamUndulate);
-				console.log(this.quizExamUndulate);
-			},
-
-		},
-		onLoad() {
-			this.getExamUndulate()
-		}
-	}
-</script>
-
-<style lang="scss">
-	@import '@/gradepkg/common/chartpage.scss';
-	@import '@/gradepkg/common/databox.scss';
-
-	.page-box {
-		background: linear-gradient(#ff8caf, $page-background-color);
-	}
-
-	//细节配置
-	.data-box .data-box-item .analysis-box .t-icon {
-		width: 180rpx;
-		height: 100rpx;
-	}
-
-	.data-box .data-box-item .item-number {
-		font-size: 60rpx;
-		margin: 10rpx 0 10rpx 25rpx;
-		color: #FFFFFF;
-		font-weight: bold;
-	}
-
-	.data-box .data-box-item .analysis-box .icon-text-item {
-		font-size: 30rpx;
-		font-weight: bold;
-		color: #FFFFFF;
-		margin-left: 10rpx;
-	}
+<template>
+	<view class="page-box">
+		<back></back>
+
+		<view class="children-box">
+			<image class="children-avatar" :src="childreninfo.avatar"></image>
+			<view class="children-msg">
+				<view class="children-name">{{childreninfo.name}}</view>
+				<view class="children-class">{{childreninfo.class}}</view>
+			</view>
+		</view>
+
+		<!-- 数据分析模块 -->
+		<view class="data-box">
+			<view class="data-box-item">
+				<view class="item-text">考试成绩波动对比:</view>
+				<view class="item-number">{{mainExamUndulate>=quizExamUndulate?'小考稳定':'大考稳定'}}</view>
+				<view class="analysis-box">
+					<view v-if="mainExamUndulate>=quizExamUndulate" class="t-icon t-icon-jiangbei-4"></view>
+					<view v-if="mainExamUndulate<quizExamUndulate" class="t-icon t-icon-jiangbei-3"></view>
+					<view v-if="mainExamUndulate>=quizExamUndulate" class="icon-text-item">重要考试时沉住气稳住心态</view>
+					<view v-if="mainExamUndulate<quizExamUndulate" class="icon-text-item">普通考试时也不能掉以轻心</view>
+				</view>
+			</view>
+
+			<view class="data-box-item" style="background-color: #ff5959;">
+				<view class="item-text">考试得分能力对比:</view>
+				<view class="item-number">{{avgMain>=avgquiz?'大考能力强':'小考能力强'}}</view>
+				<view class="analysis-box">
+					<view v-if="avgMain<avgquiz" class="t-icon t-icon-jiangbei-4"></view>
+					<view v-if="avgMain>=avgquiz" class="t-icon t-icon-jiangbei-3"></view>
+					<view v-if="avgMain<avgquiz" class="icon-text-item">重要考试要多证明自己能力</view>
+					<view v-if="avgMain>=avgquiz" class="icon-text-item">普通考试要注重得分与练习</view>
+				</view>
+			</view>
+		</view>
+
+		<!-- 图表列表 -->
+		<view class="chart-container">
+			<view class="chart-name">
+				<view class="t-icon t-icon-sea"></view>
+				<text class="chart-name-text">重要考试对比</text>
+			</view>
+			<!-- 图表 -->
+			<view class="charts-box">
+				<qiun-data-charts type="radar" :chartData="gradeData.abilityChart.importantAnalyse"
+					:loadingType="4" tooltipFormat='tooltipScoreShort' :canvas2d="true" canvasId="canvasId876898"/>
+			</view>
+		</view>
+
+		<view class="chart-container">
+			<view class="chart-name">
+				<view class="t-icon t-icon-spruce"></view>
+				<text class="chart-name-text">普通测验记录</text>
+			</view>
+			<!-- 图表 -->
+			<view class="charts-box">
+				<qiun-data-charts type="radar" :chartData="gradeData.abilityChart.commonAnalyse" :loadingType="4"
+					tooltipFormat='tooltipScoreShort' :canvas2d="true" canvasId="canvasId931238"/>
+			</view>
+		</view>
+
+	</view>
+</template>
+
+<script>
+	import {
+		mapState
+	} from 'vuex'
+
+	export default {
+		computed: {
+			...mapState('m_children', ['childreninfo', 'semester']),
+			...mapState('m_chart', ['gradeData'])
+		},
+
+		data() {
+			return {
+				//查询参数
+				queryObj: {},
+				//成绩波动参数(标准差)
+				mainExamUndulate: 0,
+				quizExamUndulate: 0,
+				//大小考每次考试平均成绩
+				avgMain: 0,
+				avgquiz: 0,
+			};
+		},
+		methods: {
+			//成绩波动数据(标准差)
+			getExamUndulate() {
+				//求和函数封装
+				function arrSum(array) {
+					let cont = 0
+					for (let i = 0; i < array.length; i++) {
+						cont += array[i]
+					}
+					return cont;
+				}
+				const mainArr = []
+				const quizArr = []
+				//统计每次考试总成绩并存为数组
+				for (let item of this.gradeData.abilityChart.importantAnalyse.series) {
+					mainArr.push(arrSum(item.data))
+				}
+				for (let item of this.gradeData.abilityChart.commonAnalyse.series) {
+					quizArr.push(arrSum(item.data))
+				}
+				//大小考试平均成绩
+				this.avgMain = arrSum(mainArr) / mainArr.length
+				this.avgquiz = arrSum(quizArr) / quizArr.length
+				console.log(this.avgMain, this.avgquiz);
+				//标准差函数
+				function standardDeviation(arr) {
+					let length = arr.length;
+					let sum = arrSum(arr);
+					let avg = sum / length;
+					let temp = [];
+					for (let i = 0; i < length; i++) {
+
+						let dev = (arr[i]) - avg; //计算数组元素与平均值的差
+
+						temp[i] = Math.pow(dev, 2); //计算差的平方
+					}
+					let powSum = arrSum(temp); //差的平方和
+					let standardDeviation = parseFloat(Math.sqrt(powSum / length).toFixed(2)); //标准差
+					return standardDeviation
+				}
+				this.mainExamUndulate = standardDeviation(mainArr)
+				this.quizExamUndulate = standardDeviation(quizArr)
+				console.log(this.mainExamUndulate);
+				console.log(this.quizExamUndulate);
+			},
+
+		},
+		onLoad() {
+			this.getExamUndulate()
+		}
+	}
+</script>
+
+<style lang="scss">
+	@import '@/gradepkg/common/chartpage.scss';
+	@import '@/gradepkg/common/databox.scss';
+
+	.page-box {
+		background: linear-gradient($color-green, $page-background-color);
+	}
+
+	//分析卡片配置
+	.data-box .data-box-item .analysis-box .t-icon {
+		width: 180rpx;
+		height: 100rpx;
+	}
+
+	.data-box .data-box-item .item-number {
+		font-size: 60rpx;
+		margin: 10rpx 0 10rpx 25rpx;
+		color: #FFFFFF;
+		font-weight: bold;
+	}
+
+	.data-box .data-box-item .analysis-box .icon-text-item {
+		font-size: 30rpx;
+		font-weight: bold;
+		color: #FFFFFF;
+		margin-left: 10rpx;
+	}
 </style>

gradepkg/arcbar-chart/arcbar-chart.vue

@@ -1,114 +0,0 @@
-<template>
-	<view class="page-box">
-		<back></back>
-
-		<view class="children-box">
-			<image class="children-avatar" :src="childreninfo.avatar"></image>
-			<view class="children-msg">
-				<view class="children-name">{{childreninfo.name}}</view>
-				<view class="children-class">{{childreninfo.class}}</view>
-			</view>
-		</view>
-
-		<!-- 数据分析模块 -->
-		<view class="data-box">
-			<view class="data-box-item"
-				v-bind:style="{background: gradeData.rankArcbarChart.recentAnalyse.series[0].color}">
-				<view class="item-text">{{gradeData.rankArcbarChart.recentAnalyse.series[0].name}}</view>
-				<view class="item-number">{{gradeData.rankArcbarChart.recentAnalyse.series[0].data/0.01}}%</view>
-				<view class="analysis-box">
-					<view v-if="gradeData.rankArcbarChart.recentAnalyse.series[0].data<0.4"
-						class="t-icon t-icon-jiangbei-20"></view>
-					<view
-						v-if="gradeData.rankArcbarChart.recentAnalyse.series[0].data>=0.4 && gradeData.rankArcbarChart.recentAnalyse.series[0].data<0.7"
-						class="t-icon t-icon-jiangbei-19"></view>
-					<view v-if="gradeData.rankArcbarChart.recentAnalyse.series[0].data>=0.7"
-						class="t-icon t-icon-jiangbei-18"></view>
-					<view v-if="gradeData.rankArcbarChart.recentAnalyse.series[0].data<0.4" class="icon-text-item">要加把劲!
-					</view>
-					<view
-						v-if="gradeData.rankArcbarChart.recentAnalyse.series[0].data>=0.4 && gradeData.rankArcbarChart.recentAnalyse.series[0].data<0.7"
-						class="icon-text-item">再接再厉!</view>
-					<view v-if="gradeData.rankArcbarChart.recentAnalyse.series[0].data>=0.7" class="icon-text-item">
-						非常优秀!</view>
-				</view>
-			</view>
-
-			<view class="data-box-item"
-				v-bind:style="{background: gradeData.rankArcbarChart.recentAnalyse.series[1].color}">
-				<view class="item-text">{{gradeData.rankArcbarChart.recentAnalyse.series[1].name}}</view>
-				<view class="item-number">{{gradeData.rankArcbarChart.recentAnalyse.series[1].data/0.01}}%</view>
-				<view class="analysis-box">
-					<view v-if="gradeData.rankArcbarChart.recentAnalyse.series[1].data<0.4"
-						class="t-icon t-icon-jiangbei-20"></view>
-					<view
-						v-if="gradeData.rankArcbarChart.recentAnalyse.series[1].data>=0.4 && gradeData.rankArcbarChart.recentAnalyse.series[1].data<0.7"
-						class="t-icon t-icon-jiangbei-19"></view>
-					<view v-if="gradeData.rankArcbarChart.recentAnalyse.series[1].data>=0.7"
-						class="t-icon t-icon-jiangbei-18"></view>
-					<view v-if="gradeData.rankArcbarChart.recentAnalyse.series[1].data<0.4" class="icon-text-item">还需提升!
-					</view>
-					<view
-						v-if="gradeData.rankArcbarChart.recentAnalyse.series[1].data>=0.4 && gradeData.rankArcbarChart.recentAnalyse.series[1].data<0.7"
-						class="icon-text-item">继续努力!</view>
-					<view v-if="gradeData.rankArcbarChart.recentAnalyse.series[1].data>=0.7" class="icon-text-item">
-						格外出色!</view>
-				</view>
-			</view>
-		</view>
-
-		<!-- 图表列表 -->
-		<!-- 单次分析 -->
-		<view class="chart-container">
-			<view class="chart-name">
-				<view class="t-icon t-icon-xianxingpaiqiu"></view>
-				<text class="chart-name-text">近期排行占比分析</text>
-			</view>
-			<view class="charts-box" style="margin: 20rpx 0 -20rpx 0;">
-				<qiun-data-charts type="arcbar" :chartData="gradeData.rankArcbarChart.recentAnalyse" :loadingType="4"
-					tooltipFormat='tooltipScore' :canvas2d="true" canvasId="canvasId312412"/>
-			</view>
-		</view>
-		<!-- 走势 -->
-		<view class="chart-container">
-			<view class="chart-name">
-				<view class="t-icon t-icon-xianxinglanqiu"></view>
-				<text class="chart-name-text">{{semester}} 排行占比走势对比</text>
-			</view>
-			<view class="charts-box">
-				<qiun-data-charts type="area" :chartData="gradeData.rankArcbarChart.semesterAnalyse" :loadingType="4"
-					:opts="{dataLabel: false}" tooltipFormat='tooltipPercent' :canvas2d="true" canvasId="canvasId931234"/>
-			</view>
-		</view>
-
-	</view>
-</template>
-
-<script>
-	import {
-		mapState
-	} from 'vuex'
-
-	export default {
-		computed: {
-			...mapState('m_children', ['childreninfo', 'semester']),
-			...mapState('m_chart', ['gradeData'])
-		},
-		data() {
-			return {};
-		},
-		methods: {
-
-		},
-		onLoad() {}
-	}
-</script>
-
-<style lang="scss">
-	@import '@/gradepkg/common/chartpage.scss';
-	@import '@/gradepkg/common/databox.scss';
-
-	.page-box {
-		background: linear-gradient(#ffd071, $page-background-color);
-	}
-</style>

gradepkg/common/chartpage.scss

@@ -43,6 +43,7 @@
 			justify-content: center;
 			flex-direction: column;
 			background-color: #FFFFFF;
+			overflow: hidden;
 
 			.chart-name {
 				width: 100%;

gradepkg/area-chart/area-chart.vue

@@ -1,235 +1,179 @@
-<template>
-	<view class="page-box">
-		<!-- 返回按钮 -->
-		<back></back>
-		<!-- 学生信息头部 -->
-		<view class="children-box">
-			<image class="children-avatar" :src="childreninfo.avatar"></image>
-			<view class="children-msg">
-				<view class="children-name">{{childreninfo.name}}</view>
-				<view class="children-class">{{childreninfo.class}}</view>
-			</view>
-		</view>
-
-		<!-- 图表区域 -->
-		<!-- 单科与平均成绩对比 -->
-		<view class="chart-container">
-			<view class="chart-name">
-				<view class="t-icon t-icon-xianxinggangqin"></view>
-				<text class="chart-name-text">{{semester}} 单科与平均对比</text>
-				<!-- 按钮区域 -->
-				<view class="btn-box" @click="setSubjectPicker = true">
-					<text class="btn">{{subjectCurrent}}</text>
-					<u-icon name="arrow-down" color="#3B4144;"></u-icon>
-				</view>
-			</view>
-			<!-- 图表 -->
-			<view class="charts-box">
-				<qiun-data-charts type="area" :chartData="gradeData.subjectAreaChart.areaComparison" :loadingType="4"
-					background="none" tooltipFormat='tooltipScore' :canvas2d="true" canvasId="canvasId99999" />
-			</view>
-		</view>
-
-		<!-- 主科成绩走势 -->
-		<view class="chart-container">
-			<view class="chart-name">
-				<view class="t-icon t-icon-xianxingshoufengqin"></view>
-				<text class="chart-name-text">{{semester}} 主科走势对比</text>
-				<!-- 按钮 -->
-				<view class="btn-box" @click="switchScoreTypePicker = true">
-					<text class="btn">{{scoreTypeCurrent}}</text>
-					<u-icon name="arrow-down" color="#3B4144;"></u-icon>
-				</view>
-			</view>
-			<!-- 图表 -->
-			<view class="charts-box" v-if="scoreTypeCurrent == '主科得分'">
-				<qiun-data-charts type="area" :chartData="gradeData.subjectAreaChart.majorSubjectComparison"
-					:loadingType="4" tooltipFormat='tooltipScore' :canvas2d="true" canvasId="canvasId99998" />
-			</view>
-			<view class="charts-box" v-if="scoreTypeCurrent == '主科得分率'">
-				<qiun-data-charts type="area" :chartData="gradeData.subjectAreaChart.majorSubjectComparison"
-					:loadingType="4" tooltipFormat='tooltipScoreShort' :canvas2d="true" canvasId="canvasId991398" />
-			</view>
-
-		</view>
-
-		<!-- 副科成绩走势 -->
-		<view class="chart-container">
-			<view class="chart-name">
-				<view class="t-icon t-icon-xianxingshoufengqin"></view>
-				<text class="chart-name-text">{{semester}} 副科走势对比</text>
-				<!-- 按钮 -->
-				<view class="btn-box" @click="scoreTypePickerMinor = true">
-					<text class="btn">{{minorTypeCurrent}}</text>
-					<u-icon name="arrow-down" color="#3B4144;"></u-icon>
-				</view>
-			</view>
-			<!-- 图表 -->
-			<view class="charts-box" v-if="minorTypeCurrent == '副科得分'">
-				<qiun-data-charts type="area" :chartData="gradeData.subjectAreaChart.minorSubjectComparison"
-					:loadingType="4" tooltipFormat='tooltipScore' :canvas2d="true" canvasId="canvasId99997" />
-			</view>
-			<view class="charts-box" v-if="minorTypeCurrent == '副科得分率'">
-				<qiun-data-charts type="area" :chartData="gradeData.subjectAreaChart.minorSubjectComparison"
-					:loadingType="4" tooltipFormat='tooltipScoreShort' :canvas2d="true" canvasId="canvasId129997" />
-			</view>
-		</view>
-
-		<!-- 选择器 -->
-		<u-picker :show="setSubjectPicker" :columns="subjectList" @confirm="pickerConfirm" @cancel="pickerCancel"
-			:closeOnClickOverlay="true" @change="changeHandler" :immediateChange="true">
-		</u-picker>
-		<u-picker :show="switchScoreTypePicker" :columns="scoreTypeList" @confirm="scoreTypeConfirm"
-			@cancel="pickerCancel" :closeOnClickOverlay="true" @change="changeHandler" :immediateChange="true">
-		</u-picker>
-		<u-picker :show="scoreTypePickerMinor" :columns="scoreTypeListMinor" @confirm="minorTypeConfirm"
-			@cancel="pickerCancel" :closeOnClickOverlay="true" @change="changeHandler" :immediateChange="true">
-		</u-picker>
-
-
-	</view>
-</template>
-
-<script>
-	import getdata from '../../common/data.js'
-	import {
-		mapState,
-		mapMutations,
-		mapGetters
-	} from 'vuex'
-
-	export default {
-		computed: {
-			...mapState('m_children', ['childreninfo', 'semester']),
-			...mapState('m_chart', ['gradeData']),
-			...mapGetters('m_chart', ['getSubjectList'])
-		},
-		//picker选择科目的变化通过监听器，监听变化并做出对应图表的整体变化
-		watch: {
-			//对象形式监听subjectCurrent的变化
-			subjectCurrent: {
-				//newValue为变化后的新值
-				handler(newValue) {
-					//拿到对应图表数据
-					let subjectChartData = this.getdata.data.find(x => x.series[0].name.includes(newValue))
-					this.updateSubjectAreaComparison(subjectChartData)
-				},
-				//immediate 属性用来声明此监听器是否在页面初次加载完毕后立即调用
-				immediate: true
-			},
-		},
-		data() {
-			return {
-				//假数据
-				getdata: getdata,
-				//科目切换
-				setSubjectPicker: false,
-				//数据展示切换
-				switchScoreTypePicker: false,
-				//副科数据展示切换
-				scoreTypePickerMinor: false,
-				//科目列表
-				subjectList: [],
-				//数据维度列表
-				scoreTypeList: [
-					['主科得分', '主科得分率']
-				],
-				scoreTypeListMinor: [
-					['副科得分', '副科得分率']
-				],
-				//主科图表展示方式
-				scoreTypeCurrent: '',
-				//副科图表展示方式
-				minorTypeCurrent: '',
-				//当前选择科目
-				subjectCurrent: '',
-				//暂存区
-				temp: '',
-			};
-		},
-		onLoad() {
-			this.setSubject()
-			this.setScoreType()
-		},
-		methods: {
-			...mapMutations('m_chart', ['updateSubjectAreaComparison']),
-			//切换事件
-			changeHandler(e) {
-				this.temp = e.value[0]
-			},
-			//设置孩子科目
-			setSubject() {
-				//通过table获取孩子考试科目
-				if (this.subjectList.length == 0) {
-					let res = [this.getSubjectList]
-					this.subjectList = res
-					if (this.subjectCurrent == '')
-						this.subjectCurrent = this.getSubjectList[0]
-				}
-			},
-			//设置默认图表模式
-			setScoreType() {
-				if (this.scoreTypeCurrent == '')
-					this.scoreTypeCurrent = this.scoreTypeList[0][0]
-				if (this.minorTypeCurrent == '')
-					this.minorTypeCurrent = this.scoreTypeListMinor[0][0]
-			},
-			//主科统计图表模式
-			scoreTypeConfirm(e) {
-				console.log(e)
-				this.scoreTypeCurrent = this.temp
-				if (this.scoreTypeCurrent == e.value[0]) {
-					let that = this
-					setTimeout(function() {
-						uni.$showMsg('切换完成', 1000)
-						that.switchScoreTypePicker = false
-					}, 100)
-				}else{
-					this.scoreTypeCurrent = e.value[0]
-					this.switchScoreTypePicker = false
-				}
-
-			},
-			//副科统计图表模式
-			minorTypeConfirm(e) {
-				this.minorTypeCurrent = this.temp
-				if (this.minorTypeCurrent == e.value[0]) {
-					let that = this
-					setTimeout(function() {
-						uni.$showMsg('切换完成', 1000)
-						that.scoreTypePickerMinor = false
-					}, 100)
-				}else{
-					this.minorTypeCurrent = e.value[0]
-					this.scoreTypePickerMinor = false
-				}
-			},
-			//切换科目
-			pickerConfirm(e) {
-				//改变subjectCurrent并由监听器处理数据图表同步改变
-				this.subjectCurrent = this.temp
-				if (this.subjectCurrent == e.value[0]) {
-					let that = this
-					setTimeout(function() {
-						uni.$showMsg('切换完成', 1000)
-						that.setSubjectPicker = false
-					}, 100)
-				}else{
-					this.subjectCurrent = e.value[0]
-					this.setSubjectPicker = false
-				}
-			},
-			//取消picker
-			pickerCancel() {
-				uni.$showMsg('取消选择', 1000)
-				this.setSubjectPicker = false
-				this.switchScoreTypePicker = false
-				this.scoreTypePickerMinor = false
-			},
-		}
-	}
-</script>
-
-<style lang="scss">
-	@import '@/gradepkg/common/chartpage.scss';
+<template>
+	<view class="page-box">
+		<!-- 返回按钮 -->
+		<back></back>
+		<!-- 学生信息头部 -->
+		<view class="children-box">
+			<image class="children-avatar" :src="childreninfo.avatar"></image>
+			<view class="children-msg">
+				<view class="children-name">{{childreninfo.name}}</view>
+				<view class="children-class">{{childreninfo.class}}</view>
+			</view>
+		</view>
+
+		<!-- 图表区域 -->
+		<!-- 总成绩图表 -->
+		<view class="chart-container">
+			<view class="chart-name">
+				<view class="t-icon t-icon-beach"></view>
+				<text class="chart-name-text">{{semester}} 总成绩对比</text>
+			</view>
+			<view class="charts-box">
+				<qiun-data-charts type="area" :chartData="gradeData.semesterLineChart.generalComparison"
+					:loadingType="4" tooltipFormat='tooltipScore' :canvas2d="true" canvasId="canvasId9999" />
+			</view>
+		</view>
+		<!-- 单科与平均成绩对比 -->
+		<view class="chart-container">
+			<view class="chart-name">
+				<view class="t-icon t-icon-bridge"></view>
+				<text class="chart-name-text">{{semester}} 单科与平均对比</text>
+				<!-- 按钮区域 -->
+				<view class="btn-box" @click="setSubjectPicker = true">
+					<text class="btn">{{subjectCurrent}}</text>
+					<u-icon name="arrow-down" color="#3B4144;"></u-icon>
+				</view>
+			</view>
+			<!-- 图表 -->
+			<view class="charts-box">
+				<qiun-data-charts type="area" :chartData="gradeData.semesterLineChart.singleAverageComparison"
+					:loadingType="4" background="none" tooltipFormat='tooltipScore' :canvas2d="true"
+					canvasId="canvasId99999" />
+			</view>
+		</view>
+		<!-- 单科成绩走势 -->
+		<view class="chart-container">
+			<view class="chart-name">
+				<view class="t-icon t-icon-cape"></view>
+				<text class="chart-name-text">{{semester}} 单科走势对比</text>
+				<!-- 按钮 -->
+				<view class="btn-box" @click="switchScoreTypePicker = true">
+					<text class="btn">{{scoreTypeCurrent}}</text>
+					<u-icon name="arrow-down" color="#3B4144;"></u-icon>
+				</view>
+			</view>
+			<!-- 图表 -->
+			<view class="charts-box" v-if="scoreTypeCurrent === '得分'">
+				<qiun-data-charts type="area" :chartData="gradeData.semesterLineChart.subjectComparison"
+					:loadingType="4" tooltipFormat='tooltipScore' :canvas2d="true" canvasId="canvasId99998" />
+			</view>
+			<view class="charts-box" v-if="scoreTypeCurrent === '得分率'">
+				<qiun-data-charts type="area" :chartData="gradeData.semesterLineChart.subjectComparison"
+					:loadingType="4" tooltipFormat='tooltipScoreShort' :canvas2d="true" canvasId="canvasId991398" />
+			</view>
+		</view>
+
+
+		<!-- 选择器 -->
+		<!-- 科目选择 -->
+		<u-picker :show="setSubjectPicker" :columns="subjectList" @confirm="pickerConfirm" @cancel="pickerCancel"
+			:closeOnClickOverlay="true" :immediateChange="true">
+		</u-picker>
+		<!-- 得分展示模式选择 -->
+		<u-picker :show="switchScoreTypePicker" :columns="scoreTypeList" @confirm="scoreTypeConfirm"
+			@cancel="pickerCancel" :closeOnClickOverlay="true" :immediateChange="true">
+		</u-picker>
+
+
+	</view>
+</template>
+
+<script>
+	import getdata from '../../common/data.js'
+	import {
+		mapState,
+		mapMutations,
+		mapGetters
+	} from 'vuex'
+
+	export default {
+		computed: {
+			...mapState('m_children', ['childreninfo', 'semester']),
+			...mapState('m_chart', ['gradeData']),
+			...mapGetters('m_chart', ['getSubjectList'])
+		},
+		//picker选择科目的变化通过监听器，监听变化并做出对应图表的整体变化
+		watch: {
+			//对象形式监听subjectCurrent的变化
+			subjectCurrent: {
+				//newValue为变化后的新值
+				handler(newValue) {
+					//拿到对应图表数据
+					let subjectChartData = this.getdata.data.find(x => x.series[0].name.includes(newValue))
+					this.updateSubjectComparison(subjectChartData)
+				},
+				//immediate 属性用来声明此监听器是否在页面初次加载完毕后立即调用
+				immediate: true
+			},
+		},
+		data() {
+			return {
+				//假数据
+				getdata: getdata,
+				//科目切换
+				setSubjectPicker: false,
+				//数据展示切换
+				switchScoreTypePicker: false,
+				//科目列表
+				subjectList: [],
+				//数据维度列表
+				scoreTypeList: [
+					['得分', '得分率']
+				],
+				//主科图表展示方式
+				scoreTypeCurrent: '',
+				//当前选择科目
+				subjectCurrent: '',
+			};
+		},
+		onLoad() {
+			this.setSubject()
+			this.setScoreType()
+		},
+		methods: {
+			...mapMutations('m_chart', ['updateSubjectComparison']),
+			//设置孩子科目
+			setSubject() {
+				//通过table获取孩子考试科目
+				if (this.subjectList.length == 0) {
+					let res = [this.getSubjectList]
+					this.subjectList = res
+					if (this.subjectCurrent == '')
+						this.subjectCurrent = this.getSubjectList[0]
+				}
+			},
+			//设置默认图表模式
+			setScoreType() {
+				if (this.scoreTypeCurrent == '')
+					this.scoreTypeCurrent = this.scoreTypeList[0][0]
+			},
+			//图表模式
+			scoreTypeConfirm(e) {
+				this.scoreTypeCurrent = e.value[0]
+				uni.$showMsg('切换完成', 1000)
+				this.switchScoreTypePicker = false
+			},
+			//切换科目
+			pickerConfirm(e) {
+				//改变subjectCurrent并由监听器处理数据图表同步改变
+				this.subjectCurrent = e.value[0]
+				uni.$showMsg('切换完成', 1000)
+				this.setSubjectPicker = false
+			},
+			//取消picker
+			pickerCancel() {
+				uni.$showMsg('取消选择', 1000)
+				this.setSubjectPicker = false
+				this.switchScoreTypePicker = false
+			},
+		}
+	}
+</script>
+
+<style lang="scss">
+	@import '@/gradepkg/common/chartpage.scss';
+
+	.page-box {
+		background: linear-gradient($color-blue, $page-background-color);
+	}
 </style>

gradepkg/line-chart/line-chart.vue

@@ -1,80 +0,0 @@
-<template>
-	<view class="page-box">
-		<!-- 返回按钮 -->
-		<back></back>
-		<!-- 学生信息头部 -->
-		<view class="children-box">
-			<image class="children-avatar" :src="childreninfo.avatar"></image>
-			<view class="children-msg">
-				<view class="children-name">{{childreninfo.name}}</view>
-				<view class="children-class">{{childreninfo.class}}</view>
-			</view>
-		</view>
-		<!-- 图表区域 -->
-		<!-- 总成绩图表 -->
-		<view class="chart-container">
-			<view class="chart-name">
-				<view class="t-icon t-icon-xianxingjiazigu"></view>
-				<text class="chart-name-text">{{semester}} 总成绩对比</text>
-			</view>
-			<view class="charts-box">
-				<qiun-data-charts type="line" :chartData="gradeData.semesterLineChart.lineComparison" :loadingType="4"
-					tooltipFormat='tooltipScore' :canvas2d="true" canvasId="canvasId9999"/>
-			</view>
-		</view>
-		<!-- 主科总成绩图表 -->
-		<view class="chart-container">
-			<view class="chart-name">
-				<view class="t-icon t-icon-xianxinghuaxue"></view>
-				<text class="chart-name-text">{{semester}} 主科总成绩对比</text>
-			</view>
-			<view class="charts-box">
-				<qiun-data-charts type="line" :chartData="gradeData.semesterLineChart.majorComparison" :loadingType="4"
-					tooltipFormat='tooltipScore' :canvas2d="true" canvasId="canvasId9998"/>
-			</view>
-		</view>
-		<!-- 副科总成绩图表 -->
-		<view class="chart-container">
-			<view class="chart-name">
-				<view class="t-icon t-icon-xianxingpaobu"></view>
-				<text class="chart-name-text">{{semester}} 副科总成绩对比</text>
-			</view>
-			<view class="charts-box">
-				<qiun-data-charts type="line" :chartData="gradeData.semesterLineChart.minorComparison" :loadingType="4"
-					tooltipFormat='tooltipScore' :canvas2d="true" canvasId="canvasId9997"/>
-			</view>
-		</view>
-
-	</view>
-</template>
-
-<script>
-	import {
-		mapState
-	} from 'vuex'
-
-	export default {
-		computed: {
-			...mapState('m_children', ['childreninfo', 'semester']),
-			...mapState('m_chart', ['gradeData'])
-		},
-
-		data() {
-			return {
-				//查询参数
-				queryObj: {},
-
-			}
-		},
-		methods: {},
-		onLoad() {}
-	}
-</script>
-
-<style lang="scss">
-	@import '@/gradepkg/common/chartpage.scss';
-
-	.page-box {
-		background: linear-gradient(#a5c6ff, $page-background-color);
-	}
-</style>

gradepkg/column-chart/column-chart.vue

@@ -1,66 +1,69 @@
-<template>
-	<view class="page-box">
-		<back></back>
-
-		<view class="children-box">
-			<image class="children-avatar" :src="childreninfo.avatar"></image>
-			<view class="children-msg">
-				<view class="children-name">{{childreninfo.name}}</view>
-				<view class="children-class">{{childreninfo.class}}</view>
-			</view>
-		</view>
-		<!-- 图表列表 -->
-		<!-- 近期成绩对比自身 -->
-		<view class="chart-container">
-			<view class="chart-name">
-				<view class="t-icon t-icon-xianxinghuaban"></view>
-				<text class="chart-name-text">近期成绩对比</text>
-			</view>
-			<view class="charts-box">
-				<qiun-data-charts type="column" :chartData="gradeData.recentColumnChart.columnComparison"
-					:loadingType="4" tooltipFormat='tooltipScore' :canvas2d="true" canvasId="canvasId19998"/>
-			</view>
-		</view>
-		<!-- 近期成绩对比平均 -->
-		<view class="chart-container">
-			<view class="chart-name">
-				<view class="t-icon t-icon-xianxingpingpangqiu"></view>
-				<text class="chart-name-text">近期学科能力</text>
-			</view>
-			<view class="charts-box">
-				<qiun-data-charts type="radar" :chartData="gradeData.recentColumnChart.radarSubjectComparison"
-					:loadingType="4" tooltipFormat='tooltipScore' :canvas2d="true" canvasId="canvasId29998"/>
-			</view>
-		</view>
-
-	</view>
-</template>
-
-<script>
-	import {
-		mapState
-	} from 'vuex'
-
-	export default {
-		computed: {
-			...mapState('m_children', ['childreninfo', 'semester']),
-			...mapState('m_chart', ['gradeData'])
-		},
-
-		data() {
-			return {};
-		},
-		methods: {
-
-		},
-		onLoad() {}
-	}
-</script>
-
-<style lang="scss">
-	@import '@/gradepkg/common/chartpage.scss';
-
-	.page-box {
-		background: linear-gradient(#ffd071, $page-background-color);
-	}
+<template>
+	<view class="page-box">
+		<back></back>
+
+		<view class="children-box">
+			<image class="children-avatar" :src="childreninfo.avatar"></image>
+			<view class="children-msg">
+				<view class="children-name">{{childreninfo.name}}</view>
+				<view class="children-class">{{childreninfo.class}}</view>
+			</view>
+		</view>
+
+		<!-- 图表列表 -->
+		<!-- 总成绩排行走势 -->
+		<view class="chart-container">
+			<view class="chart-name">
+				<view class="t-icon t-icon-fields"></view>
+				<text class="chart-name-text">{{semester}} 排行占比走势对比</text>
+			</view>
+			<view class="charts-box">
+				<qiun-data-charts type="area" :chartData="gradeData.rankChart.semesterRank" :loadingType="4"
+					:opts="{dataLabel: false}" tooltipFormat='tooltipPercent' :canvas2d="true" canvasId="canvasId931234"/>
+			</view>
+		</view>
+		<!-- 单科排行走势 -->
+		<view class="chart-container">
+			<view class="chart-name">
+				<view class="t-icon t-icon-forest"></view>
+				<text class="chart-name-text">单科排行占比走势对比</text>
+			</view>
+			<view class="charts-box">
+				<qiun-data-charts type="area" :chartData="gradeData.rankChart.semesterSubjectRank" :loadingType="4"
+					:opts="{dataLabel: false}" tooltipFormat='tooltipPercent' :canvas2d="true" canvasId="canvasId931870"/>
+			</view>
+		</view>
+		
+		
+
+	</view>
+</template>
+
+<script>
+	import {
+		mapState
+	} from 'vuex'
+
+	export default {
+		computed: {
+			...mapState('m_children', ['childreninfo', 'semester']),
+			...mapState('m_chart', ['gradeData'])
+		},
+		data() {
+			return {};
+		},
+		methods: {
+
+		},
+		onLoad() {}
+	}
+</script>
+
+<style lang="scss">
+	@import '@/gradepkg/common/chartpage.scss';
+	@import '@/gradepkg/common/databox.scss';
+
+	.page-box {
+		background: linear-gradient($color-pink, $page-background-color);
+	}
 </style>

gradepkg/single-chart/single-chart.vue

@@ -0,0 +1,118 @@
+<template>
+	<view class="page-box">
+		<back></back>
+
+		<view class="children-box">
+			<image class="children-avatar" :src="childreninfo.avatar"></image>
+			<view class="children-msg">
+				<view class="children-name">{{childreninfo.name}}</view>
+				<view class="children-class">{{childreninfo.class}}</view>
+			</view>
+		</view>
+		
+		<!-- 数据分析模块 -->
+		<view class="data-box">
+			<view class="data-box-item"
+				v-bind:style="{background: gradeData.recentTestChart.recentRank.series[0].color}">
+				<view class="item-text">本次考试超过年级中:</view>
+				<view class="item-number">{{gradeData.recentTestChart.recentRank.series[0].data/0.01}}% 同学</view>
+				<view class="analysis-box">
+					<view v-if="gradeData.recentTestChart.recentRank.series[0].data<0.4"
+						class="t-icon t-icon-jiangbei-20"></view>
+					<view
+						v-if="gradeData.recentTestChart.recentRank.series[0].data>=0.4 && gradeData.recentTestChart.recentRank.series[0].data<0.7"
+						class="t-icon t-icon-jiangbei-19"></view>
+					<view v-if="gradeData.recentTestChart.recentRank.series[0].data>=0.7"
+						class="t-icon t-icon-jiangbei-18"></view>
+					<view v-if="gradeData.recentTestChart.recentRank.series[0].data<0.4" class="icon-text-item">要加把劲!
+					</view>
+					<view
+						v-if="gradeData.recentTestChart.recentRank.series[0].data>=0.4 && gradeData.recentTestChart.recentRank.series[0].data<0.7"
+						class="icon-text-item">再接再厉!</view>
+					<view v-if="gradeData.recentTestChart.recentRank.series[0].data>=0.7" class="icon-text-item">
+						非常优秀!</view>
+				</view>
+			</view>
+		
+			<view class="data-box-item"
+				v-bind:style="{background: gradeData.recentTestChart.recentRank.series[1].color}">
+				<view class="item-text">本次考试超过班级中:</view>
+				<view class="item-number">{{gradeData.recentTestChart.recentRank.series[1].data/0.01}}% 同学</view>
+				<view class="analysis-box">
+					<view v-if="gradeData.recentTestChart.recentRank.series[1].data<0.4"
+						class="t-icon t-icon-jiangbei-20"></view>
+					<view
+						v-if="gradeData.recentTestChart.recentRank.series[1].data>=0.4 && gradeData.recentTestChart.recentRank.series[1].data<0.7"
+						class="t-icon t-icon-jiangbei-19"></view>
+					<view v-if="gradeData.recentTestChart.recentRank.series[1].data>=0.7"
+						class="t-icon t-icon-jiangbei-18"></view>
+					<view v-if="gradeData.recentTestChart.recentRank.series[1].data<0.4" class="icon-text-item">还需提升!
+					</view>
+					<view
+						v-if="gradeData.recentTestChart.recentRank.series[1].data>=0.4 && gradeData.recentTestChart.recentRank.series[1].data<0.7"
+						class="icon-text-item">继续努力!</view>
+					<view v-if="gradeData.recentTestChart.recentRank.series[1].data>=0.7" class="icon-text-item">
+						格外出色!</view>
+				</view>
+			</view>
+		</view>
+		
+		
+		<!-- 图表列表 -->
+		<!-- 近期成绩对比自身 -->
+		<view class="chart-container">
+			<view class="chart-name">
+				<view class="t-icon t-icon-castle"></view>
+				<text class="chart-name-text">近期成绩对比</text>
+			</view>
+			<view class="charts-box">
+				<qiun-data-charts type="column" :chartData="gradeData.recentTestChart.recentComparison"
+					:loadingType="4" tooltipFormat='tooltipScore' :canvas2d="true" canvasId="canvasId19998"/>
+			</view>
+		</view>
+		<!-- 单次排行分析 -->
+		<view class="chart-container">
+			<view class="chart-name">
+				<view class="t-icon t-icon-waterfall"></view>
+				<text class="chart-name-text">近期排行占比分析</text>
+			</view>
+			<view class="charts-box" style="margin: 20rpx 0 -20rpx 0;">
+				<qiun-data-charts type="arcbar" :chartData="gradeData.recentTestChart.recentRank" :loadingType="4"
+					tooltipFormat='tooltipScore' :canvas2d="true" canvasId="canvasId312412"/>
+			</view>
+		</view>
+
+		
+
+	</view>
+</template>
+
+<script>
+	import {
+		mapState
+	} from 'vuex'
+
+	export default {
+		computed: {
+			...mapState('m_children', ['childreninfo', 'semester']),
+			...mapState('m_chart', ['gradeData'])
+		},
+
+		data() {
+			return {};
+		},
+		methods: {
+
+		},
+		onLoad() {}
+	}
+</script>
+
+<style lang="scss">
+	@import '@/gradepkg/common/chartpage.scss';
+	@import '@/gradepkg/common/databox.scss';
+
+	.page-box {
+		background: linear-gradient($color-yellow, $page-background-color);
+	}
+</style>

gradepkg/rose-chart/rose-chart.vue

@@ -1,121 +1,121 @@
-<template>
-	<view class="page-box">
-		<back></back>
-
-		<view class="children-box">
-			<image class="children-avatar" :src="childreninfo.avatar"></image>
-			<view class="children-msg">
-				<view class="children-name">{{childreninfo.name}}</view>
-				<view class="children-class">{{childreninfo.class}}</view>
-			</view>
-		</view>
-
-		<!-- 数据分析模块 -->
-		<view class="data-box">
-			<view class="data-box-item">
-				<view class="item-text">本学期优势科目为:</view>
-				<view class="item-number-mid">{{bestSubject.name}}</view>
-				<view class="item-number-mini">得分率为:  {{bestSubject.value}}%</view>
-				<view class="analysis-box">
-					<view v-if="bestSubject.value>=80" class="t-icon t-icon-jiangbei-9"></view>
-					<view v-if="bestSubject.value<80 && bestSubject.value>=50" class="t-icon t-icon-jiangbei-10"></view>
-					<view v-if="bestSubject.value<50" class="t-icon t-icon-jiangbei-11"></view>
-					<view v-if="bestSubject.value<50" class="icon-text-item">要加把劲!</view>
-					<view v-if="bestSubject.value<80 && bestSubject.value>=50" class="icon-text-item">再接再厉!</view>
-					<view v-if="bestSubject.value>=80" class="icon-text-item">非常优秀!</view>
-				</view>
-			</view>
-
-			<view class="data-box-item" style="background-color: #ff5959;">
-				<view class="item-text">本学期劣势科目为:</view>
-				<view class="item-number-mid">{{worstSubject.name}}</view>
-				<view class="item-number-mini">得分率为:  {{worstSubject.value}}%</view>
-				<view class="analysis-box">
-					<view v-if="worstSubject.value>=80" class="t-icon t-icon-jiangbei-9"></view>
-					<view v-if="worstSubject.value<80 && bestSubject.value>=50" class="t-icon t-icon-jiangbei-10">
-					</view>
-					<view v-if="worstSubject.value<50" class="t-icon t-icon-jiangbei-11"></view>
-					<view v-if="worstSubject.value<50" class="icon-text-item">还需提升!</view>
-					<view v-if="worstSubject.value<80 && bestSubject.value>=50" class="icon-text-item">继续努力!</view>
-					<view v-if="worstSubject.value>=80" class="icon-text-item">格外出色!</view>
-				</view>
-			</view>
-		</view>
-
-		<!-- 图表列表 -->
-		<!-- 学期平均 -->
-		<view class="chart-container">
-			<view class="chart-name">
-				<view class="t-icon t-icon-xianxingyouyong"></view>
-				<text class="chart-name-text">{{semester}} 科目得分率平均值分析</text>
-			</view>
-			<view class="charts-box">
-				<qiun-data-charts type="rose" :chartData="gradeData.advantageRoseChart.semesterAnalyse" :loadingType="4"
-					:tapLegend="true" tooltipFormat='tooltipScoreShort'/>
-			</view>
-		</view>
-		<!-- 单次考试 -->
-		<view class="chart-container">
-			<view class="chart-name">
-				<view class="t-icon t-icon-xianxingmeishuhuahua"></view>
-				<text class="chart-name-text">最近考试科目得分率分析</text>
-			</view>
-			<view class="charts-box">
-				<qiun-data-charts type="rose" :chartData="gradeData.advantageRoseChart.recentAnalyse" :loadingType="4"
-					:tapLegend="true" tooltipFormat='tooltipScoreShort'/>
-			</view>
-		</view>
-
-
-	</view>
-</template>
-
-<script>
-	import {
-		mapState
-	} from 'vuex'
-
-	export default {
-		computed: {
-			...mapState('m_children', ['childreninfo', 'semester']),
-			...mapState('m_chart', ['gradeData'])
-		},
-
-		data() {
-			return {
-				//最好科目
-				bestSubject: {},
-				//劣势科目
-				worstSubject: {},
-			};
-		},
-		onLoad() {
-			this.getGradeDetail()
-		},
-		methods: {
-			//通过map方法返回成绩的数组
-			getGradeDetail() {
-				//获取成绩最好科目
-				this.bestSubject = this.gradeData.advantageRoseChart.semesterAnalyse.series[0].data.reduce((pre, cur) =>
-					pre.value > cur.value ? pre :
-					cur)
-				//劣势科目
-				this.worstSubject = this.gradeData.advantageRoseChart.semesterAnalyse.series[0].data.reduce((pre, cur) =>
-					pre.value < cur.value ? pre :
-					cur)
-				console.log(this.bestSubject)
-				console.log(this.worstSubject)
-			}
-		}
-
-	}
-</script>
-
-<style lang="scss">
-	@import '@/gradepkg/common/chartpage.scss';
-	@import '@/gradepkg/common/databox.scss';
-
-	.page-box {
-		background: linear-gradient(#a5c6ff, $page-background-color);
-	}
+<template>
+	<view class="page-box">
+		<back></back>
+
+		<view class="children-box">
+			<image class="children-avatar" :src="childreninfo.avatar"></image>
+			<view class="children-msg">
+				<view class="children-name">{{childreninfo.name}}</view>
+				<view class="children-class">{{childreninfo.class}}</view>
+			</view>
+		</view>
+
+		<!-- 数据分析模块 -->
+		<view class="data-box">
+			<view class="data-box-item">
+				<view class="item-text">本学期优势科目为:</view>
+				<view class="item-number-mid">{{bestSubject.name}}</view>
+				<view class="item-number-mini">得分率为:  {{bestSubject.value}}%</view>
+				<view class="analysis-box">
+					<view v-if="bestSubject.value>=80" class="t-icon t-icon-jiangbei-9"></view>
+					<view v-if="bestSubject.value<80 && bestSubject.value>=50" class="t-icon t-icon-jiangbei-10"></view>
+					<view v-if="bestSubject.value<50" class="t-icon t-icon-jiangbei-11"></view>
+					<view v-if="bestSubject.value<50" class="icon-text-item">要加把劲!</view>
+					<view v-if="bestSubject.value<80 && bestSubject.value>=50" class="icon-text-item">再接再厉!</view>
+					<view v-if="bestSubject.value>=80" class="icon-text-item">非常优秀!</view>
+				</view>
+			</view>
+
+			<view class="data-box-item" style="background-color: #ff5959;">
+				<view class="item-text">本学期劣势科目为:</view>
+				<view class="item-number-mid">{{worstSubject.name}}</view>
+				<view class="item-number-mini">得分率为:  {{worstSubject.value}}%</view>
+				<view class="analysis-box">
+					<view v-if="worstSubject.value>=80" class="t-icon t-icon-jiangbei-9"></view>
+					<view v-if="worstSubject.value<80 && bestSubject.value>=50" class="t-icon t-icon-jiangbei-10">
+					</view>
+					<view v-if="worstSubject.value<50" class="t-icon t-icon-jiangbei-11"></view>
+					<view v-if="worstSubject.value<50" class="icon-text-item">还需提升!</view>
+					<view v-if="worstSubject.value<80 && bestSubject.value>=50" class="icon-text-item">继续努力!</view>
+					<view v-if="worstSubject.value>=80" class="icon-text-item">格外出色!</view>
+				</view>
+			</view>
+		</view>
+
+		<!-- 图表列表 -->
+		<!-- 学期平均 -->
+		<view class="chart-container">
+			<view class="chart-name">
+				<view class="t-icon t-icon-iceberg"></view>
+				<text class="chart-name-text">{{semester}} 科目得分率平均值分析</text>
+			</view>
+			<view class="charts-box">
+				<qiun-data-charts type="rose" :chartData="gradeData.advantageRoseChart.semesterAdvantage" :loadingType="4"
+					:tapLegend="true" tooltipFormat='tooltipScoreShort'/>
+			</view>
+		</view>
+		<!-- 单次考试 -->
+		<view class="chart-container">
+			<view class="chart-name">
+				<view class="t-icon t-icon-mountains"></view>
+				<text class="chart-name-text">最近考试科目得分率分析</text>
+			</view>
+			<view class="charts-box">
+				<qiun-data-charts type="rose" :chartData="gradeData.advantageRoseChart.recentAdvantage" :loadingType="4"
+					:tapLegend="true" tooltipFormat='tooltipScoreShort'/>
+			</view>
+		</view>
+
+
+	</view>
+</template>
+
+<script>
+	import {
+		mapState
+	} from 'vuex'
+
+	export default {
+		computed: {
+			...mapState('m_children', ['childreninfo', 'semester']),
+			...mapState('m_chart', ['gradeData'])
+		},
+
+		data() {
+			return {
+				//最好科目
+				bestSubject: {},
+				//劣势科目
+				worstSubject: {},
+			};
+		},
+		onLoad() {
+			this.getGradeDetail()
+		},
+		methods: {
+			//通过map方法返回成绩的数组
+			getGradeDetail() {
+				//获取成绩最好科目
+				this.bestSubject = this.gradeData.advantageRoseChart.semesterAdvantage.series[0].data.reduce((pre, cur) =>
+					pre.value > cur.value ? pre :
+					cur)
+				//劣势科目
+				this.worstSubject = this.gradeData.advantageRoseChart.semesterAdvantage.series[0].data.reduce((pre, cur) =>
+					pre.value < cur.value ? pre :
+					cur)
+				console.log(this.bestSubject)
+				console.log(this.worstSubject)
+			}
+		}
+
+	}
+</script>
+
+<style lang="scss">
+	@import '@/gradepkg/common/chartpage.scss';
+	@import '@/gradepkg/common/databox.scss';
+
+	.page-box {
+		background: linear-gradient(#a5c6ff, $page-background-color);
+	}
 </style>

information/chart.js

@@ -7,28 +7,6 @@ export default {
 	state: () => ({
 		//成绩图表数据
 		gradeData: {
-			//总成绩曲线图数据
-			mainLineChart: {
-				categories: [
-					"开学考试",
-					"第一月考",
-					"第二月考",
-					"期中考试",
-					"第三月考",
-					"期末考试"
-				],
-				series: [{
-					"name": "总分",
-					"data": [
-						556,
-						577,
-						540,
-						588,
-						563,
-						594
-					]
-				}],
-			},
 			//表格数据
 			tableData: [{
 					'考试': '开学',
@@ -85,40 +63,11 @@ export default {
 					'科学': 99,
 				}
 			],
-			columns: [{
-					'title': '考试',
-					'key': '考试',
-					'width': 220,
-				},
-				{
-					'title': '语文',
-					'key': '语文',
-				},
-				{
-					'title': '数学',
-					'key': '数学',
-				},
-				{
-					'title': '英语',
-					'key': '英语',
-				},
-				{
-					'title': '体育',
-					'key': '体育',
-				},
-				{
-					'title': '思品',
-					'key': '思品',
-				},
-				{
-					'title': '科学',
-					'key': '科学',
-				}
-			],
+			
 			//学期折线图数据
 			semesterLineChart: {
 				//总成绩
-				lineComparison: {
+				generalComparison: {
 					categories: [
 						"开学考试",
 						"第一月考",
@@ -162,101 +111,8 @@ export default {
 						}
 					],
 				},
-				//主科
-				majorComparison: {
-					categories: [
-						"开学考试",
-						"第一月考",
-						"第二月考",
-						"期中考试",
-						"第三月考",
-						"期末考试"
-					],
-					series: [{
-							"name": "语数外总分",
-							"data": [
-								266,
-								277,
-								258,
-								288,
-								294,
-								273
-							]
-						},
-						{
-							"name": "班级平均分",
-							"data": [
-								255,
-								257,
-								260,
-								264,
-								250,
-								249
-							]
-						},
-						{
-							"name": "年级平均分",
-							"data": [
-								245,
-								260,
-								252,
-								247,
-								255,
-								270
-							]
-						}
-					],
-				},
-				//副科
-				minorComparison: {
-					categories: [
-						"开学考试",
-						"第一月考",
-						"第二月考",
-						"期中考试",
-						"第三月考",
-						"期末考试"
-					],
-					series: [{
-							"name": "科学体育思品总分",
-							"data": [
-								280,
-								290,
-								280,
-								299,
-								276,
-								288
-							]
-						},
-						{
-							"name": "班级平均分",
-							"data": [
-								260,
-								277,
-								255,
-								222,
-								238,
-								259
-							]
-						},
-						{
-							"name": "年级平均分",
-							"data": [
-								233,
-								246,
-								268,
-								242,
-								256,
-								270
-							]
-						}
-					],
-				},
-			},
-			//单科曲线图数据
-			subjectAreaChart: {
-				//单科对比
-				areaComparison: {
+				//单科与平均对比
+				singleAverageComparison: {
 					categories: [
 						"开学考试",
 						"第一月考",
@@ -300,8 +156,8 @@ export default {
 						}
 					],
 				},
-				//主科学科对比
-				majorSubjectComparison: {
+				//单科对比
+				subjectComparison: {
 					categories: [
 						"开学考试",
 						"第一月考",
@@ -342,19 +198,8 @@ export default {
 								95,
 								89
 							]
-						}
-					],
-				},
-				minorSubjectComparison: {
-					categories: [
-						"开学考试",
-						"第一月考",
-						"第二月考",
-						"期中考试",
-						"第三月考",
-						"期末考试"
-					],
-					series: [{
+						},
+						{
 							"name": "科学",
 							"data": [
 								91,
@@ -388,12 +233,12 @@ export default {
 							]
 						}
 					],
-				}
+				},
 			},
-			//近期考试数据
-			recentColumnChart: {
+			//近期单次考试数据
+			recentTestChart: {
 				//近两次对比
-				columnComparison: {
+				recentComparison: {
 					categories: [
 						"数学",
 						"语文",
@@ -426,56 +271,95 @@ export default {
 						}
 					],
 				},
-				//雷达对比
-				radarSubjectComparison: {
+				//近期排名占比分析
+				recentRank: {
+					series: [{
+							"name": "超过年级中",
+							"data": 0.8,
+							"color": "#0052d4"
+						},
+						{
+							"name": "超过班级中",
+							"data": 0.90,
+							"color": "#ff5959"
+						}
+					],
+				},
+			},
+			//排名占比分析
+			rankChart: {
+				//学期排名占比分析
+				semesterRank: {
 					categories: [
-						"数学",
-						"语文",
-						"英语",
-						"体育",
-						"科学",
-						"思品"
+						"开学考试",
+						"第一月考",
+						"第二月考",
+						"期中考试",
+						"第三月考",
+						"期末考试"
 					],
 					series: [{
-							"name": "最近成绩",
+							"name": "超过年级中",
 							"data": [
-								91,
+								90,
+								95,
 								92,
-								94,
-								82,
-								82,
-								89
+								100,
+								88,
+								99
 							]
 						},
 						{
-							"name": "班平均",
+							"name": "超过班级中",
+							"data": [
+								95,
+								98,
+								84,
+								92,
+								93,
+								79
+							]
+						}
+					]
+				},
+				semesterSubjectRank: {
+					categories: [
+						"开学考试",
+						"第一月考",
+						"第二月考",
+						"期中考试",
+						"第三月考",
+						"期末考试"
+					],
+					series: [{
+							"name": "超过年级中",
 							"data": [
+								90,
+								95,
 								82,
-								83,
-								77,
-								83,
-								91,
-								81
+								76,
+								88,
+								99
 							]
 						},
 						{
-							"name": "年级平均",
+							"name": "超过班级中",
 							"data": [
-								77,
-								78,
-								73,
-								80,
-								86,
-								85
+								95,
+								58,
+								64,
+								92,
+								93,
+								79
 							]
 						}
-					],
+					]
 				},
 			},
 			//优势科目分析
 			advantageRoseChart: {
-				//近期分析
-				recentAnalyse: {
+				//近期优势科目分析
+				recentAdvantage: {
 					series: [{
 						"data": [{
 								"name": "数学",
@@ -505,7 +389,7 @@ export default {
 					}]
 				},
 				//学期综合分析
-				semesterAnalyse: {
+				semesterAdvantage: {
 					series: [{
 						"data": [{
 								"name": "数学",
@@ -536,7 +420,7 @@ export default {
 				},
 			},
 			//能力雷达图分析
-			abilityRadarChart: {
+			abilityChart: {
 				//重要考试分析
 				importantAnalyse: {
 					categories: [
@@ -628,74 +512,32 @@ export default {
 					],
 				},
 			},
-			//排名占比分析
-			rankArcbarChart: {
-				//近期排名占比分析
-				recentAnalyse: {
-					series: [{
-							"name": "超过年级中",
-							"data": 0.8,
-							"color": "#0052d4"
-						},
-						{
-							"name": "超过班级中",
-							"data": 0.90,
-							"color": "#ff5959"
-						}
-					],
-				},
-				//学期排名占比分析
-				semesterAnalyse: {
-					categories: [
-						"开学考试",
-						"第一月考",
-						"第二月考",
-						"期中考试",
-						"第三月考",
-						"期末考试"
-					],
-					series: [{
-							"name": "超过年级中",
-							"data": [
-								90,
-								95,
-								92,
-								100,
-								88,
-								99
-							]
-						},
-						{
-							"name": "超过班级中",
-							"data": [
-								95,
-								98,
-								84,
-								92,
-								93,
-								79
-							]
-						}
-					]
-				},
-			}
+			
 		},
 		//今日页面图表数据
 		todayData: {
 			//评测进度条数据
 			evaluationArcbar: {
 				"series": [{
-					"name": "完成率",
+					"name": "评测完成",
 					"data": 0.84,
-					"color": "#0052d4"
+					"color": "#0080ff"
 				}]
 			},
 			//作业进度条数据
 			homeworkArcbar: {
 				"series": [{
-					"name": "完成率",
-					"data": 1,
-					"color": "#ff5959"
+					"name": "作业完成",
+					"data": 0.7,
+					"color": "#ff8caf"
+				}]
+			},
+			//活动进度条数据
+			activityArcbar: {
+				"series": [{
+					"name": "活动完成",
+					"data": 0.95,
+					"color": "#f9c752"
 				}]
 			},
 			//孩子数据记录
@@ -811,12 +653,9 @@ export default {
 	//模块方法(修改数据)
 	mutations: {
 		// 更新图表数据
-		updateSubjectAreaComparison(state, areaComparison) {
-			state.gradeData.subjectAreaChart.areaComparison = areaComparison
+		updateSubjectComparison(state, singleAverageComparison) {
+			state.gradeData.semesterLineChart.singleAverageComparison = singleAverageComparison
 		},
-		updateLineChartData(state, lineChartData) {
-			state.lineChartData = lineChartData
-		}
 
 	},
 	//模块属性(数据包装)

information/parent.js

@@ -7,13 +7,12 @@ export default {
 	state: () => ({
 
 		token: uni.getStorageSync('token') || '',//openid和session_key
-		//用户订阅信息
-		subscribe: false,
 
 		parentinfo: JSON.parse(uni.getStorageSync('parentinfo') || '{}'),
 
 		parentdetail: JSON.parse(uni.getStorageSync('parentdetail') || '{}'),
 		myData: {
+			subscribeLevel: '专业版',
 			msgList: [{
 					icon: 't-icon t-icon-shuju',
 					title: '成绩通知',

package-lock.json

@@ -1,27 +1,16 @@
 {
-    "name": "zsy-calendar 仿钉钉打卡统计日历 支持周与月的滑动切换",
-    "version": "1.0.4",
-    "lockfileVersion": 2,
-    "requires": true,
-    "packages": {
-        "": {
-            "name": "zsy-calendar 仿钉钉打卡统计日历 支持周与月的滑动切换",
-            "version": "1.0.4",
-            "dependencies": {
-                "@escook/request-miniprogram": "^0.2.1"
-            }
-        },
-        "node_modules/@escook/request-miniprogram": {
-            "version": "0.2.1",
-            "resolved": "https://registry.npmjs.org/@escook/request-miniprogram/-/request-miniprogram-0.2.1.tgz",
-            "integrity": "sha512-ueWV5YsaEm/ycQZuEjMiA88GFMhfBQSjy9GrP9omy4xAQajkGTbYIlnhzsDfWzRPmRC1fKmAiKMrCVcgS+SHcQ=="
-        }
-    },
-    "dependencies": {
-        "@escook/request-miniprogram": {
-            "version": "0.2.1",
-            "resolved": "https://registry.npmjs.org/@escook/request-miniprogram/-/request-miniprogram-0.2.1.tgz",
-            "integrity": "sha512-ueWV5YsaEm/ycQZuEjMiA88GFMhfBQSjy9GrP9omy4xAQajkGTbYIlnhzsDfWzRPmRC1fKmAiKMrCVcgS+SHcQ=="
-        }
-    }
+	"packages": {
+		"node_modules/@escook/request-miniprogram": {
+			"version": "0.2.1",
+			"resolved": "https://registry.npmjs.org/@escook/request-miniprogram/-/request-miniprogram-0.2.1.tgz",
+			"integrity": "sha512-ueWV5YsaEm/ycQZuEjMiA88GFMhfBQSjy9GrP9omy4xAQajkGTbYIlnhzsDfWzRPmRC1fKmAiKMrCVcgS+SHcQ=="
+		}
+	},
+	"dependencies": {
+		"@escook/request-miniprogram": {
+			"version": "0.2.1",
+			"resolved": "https://registry.npmjs.org/@escook/request-miniprogram/-/request-miniprogram-0.2.1.tgz",
+			"integrity": "sha512-ueWV5YsaEm/ycQZuEjMiA88GFMhfBQSjy9GrP9omy4xAQajkGTbYIlnhzsDfWzRPmRC1fKmAiKMrCVcgS+SHcQ=="
+		}
+	}
 }

package.json

@@ -1,17 +1,4 @@
 {
-    "id": "zsy-calendar",
-    "name": "zsy-calendar 仿钉钉打卡统计日历 支持周与月的滑动切换",
-    "version": "1.0.4",
-    "description": "仿钉钉打卡统计日历、支持周与月的滑动切换",
-    "keywords": [
-        "兼容多端、源码注释清晰方便二次开发"
-    ],
-    "dcloudext": {
-        "category": [
-            "前端组件",
-            "通用组件"
-        ]
-    },
     "dependencies": {
         "@escook/request-miniprogram": "^0.2.1"
     }

pages.json

@@ -23,7 +23,7 @@
 			}
 
 		}, {
-			"path": "pages/subscribe/subscribe",
+			"path": "pages/interactive/interactive",
 			"style": {
 				"enablePullDownRefresh": true,
 				"navigationStyle": "custom"
@@ -36,6 +36,14 @@
 				"navigationStyle": "custom",
 				"disableScroll": true
 			}
+		}, {
+			"path": "pages/homework/homework",
+			"style": {
+				"enablePullDownRefresh": false,
+				"navigationStyle": "custom",
+				"disableScroll": true
+			}
+
 		}
 	],
 	//分包配置
@@ -93,7 +101,7 @@
 	}, {
 		"root": "gradepkg",
 		"pages": [{
-			"path": "rose-chart/rose-chart",
+			"path": "subject-chart/subject-chart",
 			"style": {
 				"navigationBarTitleText": "",
 				"enablePullDownRefresh": false,
@@ -101,7 +109,7 @@
 				"navigationStyle": "custom"
 			}
 		}, {
-			"path": "radar-chart/radar-chart",
+			"path": "ability-chart/ability-chart",
 			"style": {
 				"navigationBarTitleText": "",
 				"enablePullDownRefresh": false,
@@ -110,7 +118,7 @@
 			}
 
 		}, {
-			"path": "line-chart/line-chart",
+			"path": "general-chart/general-chart",
 			"style": {
 				"navigationBarTitleText": "",
 				"enablePullDownRefresh": false,
@@ -119,16 +127,7 @@
 			}
 
 		}, {
-			"path": "area-chart/area-chart",
-			"style": {
-				"navigationBarTitleText": "",
-				"enablePullDownRefresh": false,
-				// "navigationBarBackgroundColor":"#ff6187"
-				"navigationStyle": "custom"
-			}
-
-		}, {
-			"path": "column-chart/column-chart",
+			"path": "single-chart/single-chart",
 			"style": {
 				"navigationBarTitleText": "",
 				"enablePullDownRefresh": false,
@@ -137,7 +136,7 @@
 			}
 
 		}, {
-			"path": "arcbar-chart/arcbar-chart",
+			"path": "rank-chart/rank-chart",
 			"style": {
 				"navigationBarTitleText": "",
 				"enablePullDownRefresh": false,
@@ -152,27 +151,23 @@
 			"network": "all",
 			"packages": ["__APP__"]
 		},
-		"gradepkg/rose-chart/rose-chart": {
+		"gradepkg/subject-chart/subject-chart": {
 			"network": "all",
 			"packages": ["subpkg"]
 		},
-		"gradepkg/radar-chart/radar-chart": {
+		"gradepkg/ability-chart/ability-chart": {
 			"network": "all",
 			"packages": ["subpkg"]
 		},
-		"gradepkg/line-chart/line-chart": {
+		"gradepkg/general-chart/general-chart": {
 			"network": "all",
 			"packages": ["subpkg"]
 		},
-		"gradepkg/column-chart/column-chart": {
+		"gradepkg/single-chart/single-chart": {
 			"network": "all",
 			"packages": ["subpkg"]
 		},
-		"gradepkg/area-chart/area-chart": {
-			"network": "all",
-			"packages": ["subpkg"]
-		},
-		"gradepkg/arcbar-chart/arcbar-chart": {
+		"gradepkg/rank-chart/rank-chart": {
 			"network": "all",
 			"packages": ["subpkg"]
 		}
@@ -207,10 +202,16 @@
 				"text": "成绩"
 			},
 			{
-				"pagePath": "pages/subscribe/subscribe",
+				"pagePath": "pages/homework/homework",
+				"iconPath": "static/tab-icons/homework.png",
+				"selectedIconPath": "static/tab-icons/homework.png",
+				"text": "作业"
+			},
+			{
+				"pagePath": "pages/interactive/interactive",
 				"iconPath": "static/tab-icons/approval.png",
 				"selectedIconPath": "static/tab-icons/approval.png",
-				"text": "订阅"
+				"text": "家校"
 			},
 			{
 				"pagePath": "pages/my/my",

pages/common/mainpage.scss

@@ -19,7 +19,7 @@
 				display: flex;
 				flex-direction: column;
 				justify-content: space-between;
-				background-color: #FFFFFF;
+				background-color: #FFF;
 				// box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.05);
 				border-radius: $card-border-radius;
 				width: 48%;

pages/grade/grade.vue

@@ -5,84 +5,87 @@
 
 		<!-- 缩略图区域 -->
 		<view class="mini-chart-list">
-
+			<!-- 成绩走势 -->
 			<view class="mini-chart-item" style="width: 100%;">
-				<view class="chart-container">
+				<view class="chart-container" @click="navGeneral">
 					<view class="chart-name">
-						<view class="t-icon t-icon-xtubiao-4"></view>
+						<view :class="icon.general"></view>
 						<text class="chart-name-text">成绩走势</text>
 					</view>
-
 					<view class="charts-box">
-						<qiun-data-charts class="chart" :canvas2d='true' canvasId='canvans5' type="mainline"
-							:chartData="gradeData.mainLineChart" :loadingType="4" tooltipFormat='tooltipScore' />
+						<qiun-data-charts class="chart" :canvas2d='true' canvasId='canvans1' type="mainline"
+							:chartData="gradeData.semesterLineChart.generalComparison" :loadingType="4"
+							tooltipFormat='tooltipScore' />
 					</view>
 				</view>
 			</view>
-
+			<!-- 单次考试 -->
 			<view class="mini-chart-item">
-				<view class="chart-container" @click="navLineChart">
+				<view class="chart-container" @click="navSingle">
 					<view class="chart-name">
-						<view class="t-icon t-icon-xtubiao-4"></view>
-						<text class="chart-name-text">学期走势</text>
+						<view :class="icon.RecentTest"></view>
+						<text class="chart-name-text">单次考试分析</text>
 					</view>
-
 					<view class="charts-box">
-						<qiun-data-charts type="mini-line" :chartData="gradeData.semesterLineChart.lineComparison"
-							:loadingType="4" background="none" :tapLegend="false" :canvas2d='true'
-							canvasId='canvans3' />
+						<qiun-data-charts type="mini-column" :chartData="gradeData.recentTestChart.recentComparison"
+							:loadingType="4" :tapLegend="false" :canvas2d='true' canvasId='canvans2' />
 					</view>
 				</view>
 			</view>
-
+			<!-- 成绩占比 -->
 			<view class="mini-chart-item">
-				<view class="chart-container" @click="navAreaChart">
+				<view class="chart-container" @click="navRank">
 					<view class="chart-name">
-						<view class="t-icon t-icon-xtubiao-4"></view>
-						<text class="chart-name-text">单科走势</text>
+						<view :class="icon.Rank"></view>
+						<text class="chart-name-text">排行占比分析</text>
 					</view>
-
 					<view class="charts-box">
-						<qiun-data-charts type="mini-area" :chartData="gradeData.subjectAreaChart.areaComparison"
-							:loadingType="4" background="none" :tapLegend="false" :canvas2d='true'
-							canvasId='canvans1' />
+						<qiun-data-charts type="mini-area" :chartData="gradeData.rankChart.semesterRank"
+							:loadingType="4" :tapLegend="false" :canvas2d='true' canvasId='canvans3' />
 					</view>
 				</view>
 			</view>
-
+			<!-- 优劣科目分析 -->
 			<view class="mini-chart-item">
-				<view class="chart-container" @click="navColumnChart">
+				<view class="chart-container" @click="navSubject">
 					<view class="chart-name">
-						<view class="t-icon t-icon-xtubiao-2"></view>
-						<text class="chart-name-text">最近成绩</text>
+						<view :class="icon.Advantage"></view>
+						<text class="chart-name-text">优劣科目分析</text>
 					</view>
-
 					<view class="charts-box">
-						<qiun-data-charts type="mini-column" :chartData="gradeData.recentColumnChart.columnComparison"
-							:loadingType="4" background="none" :tapLegend="false" :canvas2d='true'
-							canvasId='canvans2' />
+						<qiun-data-charts type="mini-rose" :chartData="gradeData.advantageRoseChart.recentAdvantage"
+							:loadingType="4" :tapLegend="false" :canvas2d='true' canvasId='canvans4' />
 					</view>
 				</view>
 			</view>
-			<!-- 分析模块 -->
+			<!-- 考试能力分析 -->
 			<view class="mini-chart-item">
-				<analysis-box></analysis-box>
+				<view class="chart-container" @click="navAbility">
+					<view class="chart-name">
+						<view :class="icon.Ability"></view>
+						<text class="chart-name-text">考试能力分析</text>
+					</view>
+					<view class="charts-box">
+						<qiun-data-charts type="mini-column" :chartData="gradeData.abilityChart.importantAnalyse"
+							:loadingType="4" :tapLegend="false" :canvas2d='true' canvasId='canvans5' />
+					</view>
+				</view>
 			</view>
 
 			<!-- 成绩表单 -->
-			<view class="mini-chart-item" style="width: 100%; height: 650rpx;">
+			<view class="mini-chart-item" style="width: 100%; height: auto;">
 				<view class="chart-container" style="height: 100%">
 					<view class="chart-name">
-						<view class="t-icon t-icon-xtubiao-5"></view>
-						<text class="chart-name-text">成绩概览</text>
+						<view :class="icon.table"></view>
+						<text class="chart-name-text">成绩表单</text>
 					</view>
-					<z-table class="table" :tableData="gradeData.tableData" :columns="gradeData.columns" showBottomSum="true">
+					<z-table class="table" :tableData="gradeData.tableData" :columns="columns"
+						showBottomSum="true">
 					</z-table>
 				</view>
 			</view>
-
+			
 		</view>
-
 	</view>
 </template>
 
@@ -98,8 +101,49 @@
 		},
 		data() {
 			return {
+				//图标
+				icon:{
+					general: 't-icon t-icon-pingjia',
+					RecentTest: 't-icon t-icon-zhishi',
+					Rank: 't-icon t-icon-fengxianpinggu',
+					Advantage: 't-icon t-icon-gaishuai',
+					Ability: 't-icon t-icon-tongji',
+					table: 't-icon t-icon-baike'
+				},
 				//时间戳
 				timeStamp: '',
+				//成绩表
+				columns: [{
+						'title': '考试',
+						'key': '考试',
+						'width': 220,
+					},
+					{
+						'title': '语文',
+						'key': '语文',
+					},
+					{
+						'title': '数学',
+						'key': '数学',
+					},
+					{
+						'title': '英语',
+						'key': '英语',
+					},
+					{
+						'title': '体育',
+						'key': '体育',
+					},
+					{
+						'title': '思品',
+						'key': '思品',
+					},
+					{
+						'title': '科学',
+						'key': '科学',
+					}
+				],
+					
 			}
 		},
 		onLoad() {
@@ -114,29 +158,39 @@
 			}, 1000);
 		},
 		methods: {
-			//导航柱状图页面
-			navColumnChart(e) {
-				console.log(e);
+			//导航成绩走势
+			navGeneral(e) {
+				uni.navigateTo({
+					url: "/gradepkg/general-chart/general-chart"
+				})
+			},
+			//导航单次考试
+			navSingle(e) {
 				uni.navigateTo({
-					url: "/gradepkg/column-chart/column-chart"
+					url: "/gradepkg/single-chart/single-chart"
 				})
 			},
-			//导航面积折线图页面
-			navAreaChart(e) {
-				console.log(e);
+			//导航排行占比
+			navRank(e) {
 				uni.navigateTo({
-					url: "/gradepkg/area-chart/area-chart"
+					url: "/gradepkg/rank-chart/rank-chart"
 				})
 			},
-			//导航折线图页面
-			navLineChart(e) {
-				console.log(e);
+			//导航优劣科目
+			navSubject(e) {
 				uni.navigateTo({
-					url: "/gradepkg/line-chart/line-chart"
+					url: "/gradepkg/subject-chart/subject-chart"
 				})
 			},
+			//导航考试能力
+			navAbility(e) {
+				uni.navigateTo({
+					url: "/gradepkg/ability-chart/ability-chart"
+				})
+			},
+
 		},
-		
+
 	}
 </script>
 
@@ -147,7 +201,7 @@
 		overflow-x: hidden; //隐藏多余的页面
 
 		.home-topinfo {
-			background: linear-gradient(#ff8caf, $page-background-color);
+			background: linear-gradient($color-pink, $page-background-color);
 		}
 
 		//缩略图列表

pages/home/home.vue

@@ -12,41 +12,16 @@
 			<!-- 今日打卡 -->
 			<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="chooseCalendar" :mode="'close'" />
-				</view>
-			</view>
-
-			<view class="card-item">
-				<view class="card-info">
-					<view class="t-icon t-icon-chengjiguanli"></view>
-					<text class="info-text">今日评测</text>
-				</view>
-				<view class="charts-box">
-					<qiun-data-charts type="arcbar" :chartData="todayData.evaluationArcbar" :loadingType="4"
-						:canvas2d='true' canvasId='canvans9313111' :opts="evaluationOpts" />
-				</view>
-			</view>
-
-			<view class="card-item">
-				<view class="card-info">
-					<view class="t-icon t-icon-xuexiaobaobei"></view>
-					<text class="info-text">今日作业</text>
-				</view>
-				<view class="charts-box">
-					<qiun-data-charts type="arcbar" :chartData="todayData.homeworkArcbar" :loadingType="4"
-						:canvas2d='true' canvasId='canvans9327676' :opts="homeworkOpts" />
+					<view :class="icon.record"></view>
+					<text class="info-text">今日出勤</text>
 				</view>
+				<view></view>
 			</view>
 
 			<!-- 今日课程 -->
-			<view class="card-item">
+			<view class="card-item" style="width: 100%;">
 				<view class="card-info">
-					<view class="t-icon t-icon-jiaowuxunke"></view>
+					<view :class="icon.class"></view>
 					<text class="info-text">今日课程</text>
 				</view>
 				<!-- 内容 -->
@@ -71,40 +46,49 @@
 					</u-collapse>
 				</view>
 			</view>
-
-			<!-- 今日问卷 -->
+			<!-- 正在参与课程 -->
 			<view class="card-item">
 				<view class="card-info">
-					<view class="t-icon t-icon-qingjiatiaoke"></view>
-					<text class="info-text">今日活动</text>
+					<view :class="icon.classNow"></view>
+					<text class="info-text">正在参与课程</text>
 				</view>
-				<!-- 内容 -->
-				<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 class="card-item" @click="navHomework">
+				<view class="card-info">
+					<view :class="icon.evaluation"></view>
+					<text class="info-text">今日评测</text>
+				</view>
+				<view class="charts-box">
+					<qiun-data-charts type="arcbar" :chartData="todayData.evaluationArcbar" :loadingType="4"
+						:canvas2d='true' canvasId='canvans9313111' :opts="evaluationOpts" />
 				</view>
-				<view style="padding: 0rpx 20rpx 10rpx 20rpx;">
-					<u-line-progress :showText="false" :percentage="questionnaire" activeColor="#5b7cff" height="15">
-					</u-line-progress>
+			</view>
+			<!-- 作业 -->
+			<view class="card-item" @click="navHomework">
+				<view class="card-info">
+					<view :class="icon.homework"></view>
+					<text class="info-text">今日作业</text>
 				</view>
-				<!-- 内容 -->
-				<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 class="charts-box">
+					<qiun-data-charts type="arcbar" :chartData="todayData.homeworkArcbar" :loadingType="4"
+						:canvas2d='true' canvasId='canvans9327676' :opts="homeworkOpts" />
+				</view>
+			</view>
+			<!-- 问卷 -->
+			<view class="card-item" @click="navHomework">
+				<view class="card-info">
+					<view :class="icon.activity"></view>
+					<text class="info-text">今日活动</text>
 				</view>
-				<view style="padding: 0rpx 20rpx 10rpx 20rpx;">
-					<u-line-progress :showText="false" :percentage="vote" activeColor="#ff9db2" height="15">
-					</u-line-progress>
+				<view class="charts-box">
+					<qiun-data-charts type="arcbar" :chartData="todayData.activityArcbar" :loadingType="4"
+						:canvas2d='true' canvasId='canvans9313176' :opts="activityOpts" />
 				</view>
 			</view>
-			<!-- 今日记录模块 -->
-			<todaydata-box></todaydata-box>
 
 
-			
-
 		</view>
-
 	</view>
 </template>
 
@@ -112,17 +96,13 @@
 	import {
 		mapState
 	} from 'vuex'
-	//日历组件
-	import zsyCalendar from '@/components/zsy-calendar/zsy-calendar'
 	export default {
-		name: 'Calendar',
 		computed: {
 			...mapState('m_chart', ['todayData']),
 			...mapState('m_children', ['childreninfo']),
 			...mapState('m_parent', ['myData'])
 		},
 		components: {
-			zsyCalendar
 		},
 		data() {
 			return {
@@ -134,17 +114,24 @@
 				classList: ['数学', '语文', '英语', '体育', '思品'],
 				//授课老师
 				teacherList: ['张老师', '李老师', '王老师', '陈老师', '黄老师'],
-				//问卷完成率
-				questionnaire: 56,
-				//投票完成率
-				vote: 100,
 
 				//评测进度条属性
 				evaluationOpts: {},
 				//作业进度条属性
 				homeworkOpts: {},
+				//活动进度条属性
+				activityOpts: {},
 				//时间戳
 				timeStamp: '',
+				//图标
+				icon: {
+					record : 't-icon t-icon-dakaqiandao',
+					class: 't-icon t-icon-banji',
+					classNow: 't-icon t-icon-shijian',
+					evaluation: 't-icon t-icon-ceping',
+					homework: 't-icon t-icon-bianji1',
+					activity: 't-icon t-icon-huodong'
+				}
 				
 			}
 		},
@@ -154,7 +141,6 @@
 			this.getNoticeMsg()
 		},
 		onPullDownRefresh() {
-			this.setOpts()
 			this.$getTimeStamp()
 			console.log('refresh')
 			setTimeout(function() {
@@ -166,7 +152,12 @@
 			getNoticeMsg(){
 				this.noticeMsg = `您有 ${this.myData.msgList.length} 个通知,请点击查看`
 			},
-			//设置更新
+			navHomework(){
+				uni.switchTab({
+					url: '/pages/homework/homework'
+				})
+			},
+			//设置圆环图描述更新
 			setOpts() {
 				//圆环图标题和副标题动态变化
 				let evaluation = {
@@ -197,25 +188,30 @@
 						}
 					}
 				}
+				let activity = {
+					title: {
+						name: this.todayData.activityArcbar.series[0].data * 100 + "%",
+						color: this.todayData.activityArcbar.series[0].color
+					},
+					subtitle: {
+						name: this.todayData.activityArcbar.series[0].name
+					},
+					extra: {
+						arcbar: {
+							type: 'circle'
+						}
+					}
+				}
 				this.evaluationOpts = evaluation;
 				this.homeworkOpts = homework;
-			},
-			// 日历选中日期改变事件回调
-			chooseCalendar(e) {
-				console.log(e)
+				this.activityOpts = activity;
 			},
 
+
 		},
 	}
 </script>
 
 <style lang="scss">
 	@import '@/pages/common/mainpage.scss';
-	//日历
-	.calendar_container {
-		background-color: #FFF;
-		padding: 10rpx;
-		margin: 10rpx;
-		box-sizing: border-box;
-	}
 </style>

pages/homework/homework.vue

@@ -0,0 +1,137 @@
+<template>
+	<view class="homework-container">
+		<!-- 头部区域 -->
+		<top-box :timeStamp="timeStamp"></top-box>
+		<text class="card-title">孩子今日任务</text>
+		<view class="card-box">
+
+			<view class="box-list">
+				<view class="box-card" v-for="(item,index) in card" :key="index" :style="item.color">
+					<view>
+						<view class="card-name">{{item.title}}</view>
+					</view>
+					<view class="radio">
+						<view class=""></view>
+					</view>
+				</view>
+			</view>
+			<view class="box-detail">
+
+			</view>
+		</view>
+
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				//时间戳
+				timeStamp: '',
+				//卡片内容
+				card: [{
+					title: '评测',
+					color: 'background-color: #0080ff;',
+					icon: ''
+				}, {
+					title: '作业',
+					color: 'background-color: #ff8caf;'
+				}, {
+					title: '活动',
+					color: 'background-color: #f9c752;'
+				}]
+			};
+		},
+		onLoad() {
+			this.$getTimeStamp()
+		},
+		//刷新页面
+		onPullDownRefresh() {
+			this.$getTimeStamp()
+			console.log('refresh');
+			setTimeout(function() {
+				uni.stopPullDownRefresh();
+			}, 1000);
+		},
+	}
+</script>
+
+<style lang="scss">
+	.homework-container {
+		display: flex;
+		flex-direction: column;
+
+		.home-topinfo {
+			background: linear-gradient($color-green, $page-background-color) !important;
+		}
+
+		.card-title {
+			font-size: 45rpx;
+			font-weight: bold;
+			color: #FFF;
+			padding: 0 0 30rpx 50rpx;
+			margin-top: -90rpx;
+		}
+
+		.card-box {
+			position: relative;
+			box-shadow: 0 6rpx 10rpx rgba(0, 0, 0, 0.1);
+			background-color: #FFF;
+			border-radius: 50rpx;
+			width: 100%;
+			height: 100vh;
+
+			.box-list {
+				margin: 40rpx auto;
+				width: 96%;
+				height: auto;
+				display: flex;
+				flex-direction: row;
+				justify-content: space-between;
+				background-color: #000000;
+
+				.box-card {
+					width: 30%;
+					height: 300rpx;
+					display: flex;
+					flex-direction: column;
+					align-items: center;
+					border-radius: $card-border-radius;
+
+					.card-name {
+						color: #FFF;
+						margin: 15rpx 0 15rpx 0;
+						font-size: 35rpx;
+						font-weight: bold;
+					}
+
+					.radio {
+						width: 140rpx;
+						height: 140rpx;
+						border-radius: 100%;
+						background: #FFF;
+					}
+				}
+			}
+		}
+	}
+
+	.box-detail {
+		position: relative;
+		background-color: #666;
+		border-radius: $card-border-radius;
+		margin: 40rpx auto;
+		width: 96%;
+		height: 500rpx;
+	}
+
+	.box-detail::before {
+		content: " ";
+		position: absolute;
+		right: 13%;
+		top: -35rpx;
+		border-bottom: 50px solid #666;
+		border-right-color: #666;
+	}
+</style>

pages/init/init.vue

@@ -4,8 +4,12 @@
 	</view>
 </template>
 
-<script>
-	export default {
+<script>
+	import {mapState,mapMutations} from 'vuex'
+	export default {
+		computed: {
+			...mapState('m_children', ['semesterList'])
+		},
 		data() {
 			return {
 				
@@ -19,10 +23,14 @@
 					url:'/subpkg/login/login'
 				})
 			} else{
+				this.updateChildrenSemester(this.semesterList[0][0])
 				uni.switchTab({
 					url:'/pages/home/home'
 				})
 			}
+		},
+		methods:{
+			...mapMutations('m_children', ['updateChildrenSemester']),
 		}
 	}
 </script>

pages/subscribe/subscribe.vue

@@ -1,91 +1,91 @@
-<template>
-	<view class="container">
-		<!-- 头部区域 -->
-		<top-box v-bind:timeStamp="timeStamp"></top-box>
-		<!-- 列表区域 -->
-		<view class="card-box">
-			<view class="card-item" v-for="(item,index) in subArr" :style="{backgroundImage:`url(${item.image})`}"></view>
-		</view>
-
-	</view>
-</template>
-
-<script>
-	import {
-		mapState
-	} from 'vuex'
-	export default {
-		computed: {
-			...mapState('m_parent', ['parentinfo'])
-		},
-		data() {
-			return {
-				//时间戳
-				timeStamp: '',
-				subArr:[
-					{
-						image:'https://psycho-1300960840.cos.ap-chengdu.myqcloud.com/fu/TMD/banner_1.jpg',
-						title:'学情分析报告',
-						summary:'提供本学期孩子的全面考试成绩分析报告'
-					},
-					{
-						image:'https://psycho-1300960840.cos.ap-chengdu.myqcloud.com/fu/TMD/banner_2.jpg',
-						title:'大考诊断分析报告',
-						summary:'提供本学期孩子大考分析报告'
-					},
-					{
-						image:'https://psycho-1300960840.cos.ap-chengdu.myqcloud.com/fu/TMD/banner_3.jpg',
-						title:'德育分析报告',
-						summary:'提供本学期孩子德育发展全方位分析'
-					}
-				]
-			}
-		},
-		onLoad() {
-			this.$getTimeStamp()
-		},
-		//刷新页面
-		onPullDownRefresh() {
-			this.$getTimeStamp()
-			console.log('refresh');
-			setTimeout(function() {
-				uni.stopPullDownRefresh();
-			}, 1000);
-		},
-		methods: {
-	
-		},
-	}
-</script>
-
-<style lang="scss">
-	.container {
-		width: 100%;
-		height: 100%;
-		overflow-x: hidden; //隐藏多余的页面
-
-		.home-topinfo {
-			background: linear-gradient(#ffd200, $page-background-color);
-		}
-
-		.card-box {
-			display: flex;
-			flex-direction: row;
-			flex-wrap: wrap;
-			margin: -50rpx 20rpx 0 20rpx;
-			justify-content: space-between;
-
-			.card-item {
-				margin: 10rpx 0;
-				display: flex;
-				flex-direction: column;
-				justify-content: space-between;
-				background-size: cover;
-				box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.05);
-				border-radius: $card-border-radius;
-				width: 100%;
-				height: 300rpx;
-			}
-		}
-	}
+<template>
+	<view class="container">
+		<!-- 头部区域 -->
+		<top-box :timeStamp="timeStamp"></top-box>
+		<todaydata-box></todaydata-box>
+		<!-- 列表区域 -->
+		<view class="card-box">
+			<view class="card-item" v-for="(item,index) in subArr" :style="{backgroundImage:`url(${item.image})`}"></view>
+		</view>
+
+	</view>
+</template>
+
+<script>
+	import {
+		mapState
+	} from 'vuex'
+	export default {
+		computed: {
+			...mapState('m_parent', ['parentinfo'])
+		},
+		data() {
+			return {
+				//时间戳
+				timeStamp: '',
+				subArr:[
+					{
+						image:'https://psycho-1300960840.cos.ap-chengdu.myqcloud.com/fu/TMD/banner_1.jpg',
+						title:'学情分析报告',
+						summary:'提供本学期孩子的全面考试成绩分析报告'
+					},
+					{
+						image:'https://psycho-1300960840.cos.ap-chengdu.myqcloud.com/fu/TMD/banner_2.jpg',
+						title:'大考诊断分析报告',
+						summary:'提供本学期孩子大考分析报告'
+					},
+					{
+						image:'https://psycho-1300960840.cos.ap-chengdu.myqcloud.com/fu/TMD/banner_3.jpg',
+						title:'德育分析报告',
+						summary:'提供本学期孩子德育发展全方位分析'
+					}
+				]
+			}
+		},
+		onLoad() {
+			this.$getTimeStamp()
+		},
+		//刷新页面
+		onPullDownRefresh() {
+			this.$getTimeStamp()
+			console.log('refresh');
+			setTimeout(function() {
+				uni.stopPullDownRefresh();
+			}, 1000);
+		},
+		methods: {
+	
+		},
+	}
+</script>
+
+<style lang="scss">
+	@import '@/pages/common/mainpage.scss';
+	.home-topinfo {
+		background: linear-gradient($color-yellow, $page-background-color) !important;
+	}
+	.container {
+		width: 100%;
+		height: 100%;
+		overflow-x: hidden; //隐藏多余的页面
+		.card-box {
+			display: flex;
+			flex-direction: row;
+			flex-wrap: wrap;
+			margin: 20rpx;
+			justify-content: space-between;
+
+			.card-item {
+				margin: 10rpx 0;
+				display: flex;
+				flex-direction: column;
+				justify-content: space-between;
+				background-size: cover;
+				box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.06);
+				border-radius: $card-border-radius;
+				width: 100%;
+				height: 300rpx;
+			}
+		}
+	}
 </style>

pages/my/my.vue

@@ -120,7 +120,7 @@
 				}).catch(err => err)
 				if (succ && succ.confirm) {
 					this.updateChildrenInfo()
-					this.updateChildrenSemester(this.semesterList[0][0])
+					this.updateChildrenSemester()
 					this.updateParentDetail()
 					this.updateParentInfo()
 					this.updateToken()

subpkg/childrenInfo/childrenInfo.vue

@@ -15,15 +15,15 @@
 		<view class="card-box">
 			<u-cell-group :border="false">
 				<view class="i-item">
-					<view class="t-icon t-icon-canyon-nature-svgrepo-com"></view>
+					<view class="t-icon t-icon-tuandui1"></view>
 					<u-cell class="cell-box" size="large" title="班级" :label="childreninfo.class" :border="false"></u-cell>
 				</view>
 				<view class="i-item">
-					<view class="t-icon t-icon-galata-tower-istanbul-svgrepo-com"></view>
+					<view class="t-icon t-icon-qinzi"></view>
 					<u-cell class="cell-box" size="large" title="年龄" label="描述信息" :border="false"></u-cell>
 				</view>
 				<view class="i-item">
-					<view class="t-icon t-icon-desert-nature-svgrepo-com"></view>
+					<view class="t-icon t-icon-faxian"></view>
 					<u-cell class="cell-box" size="large" title="个人信息" label="描述信息" :border="false"></u-cell>
 				</view>
 			</u-cell-group>

subpkg/parentInfo/parentInfo.vue

@@ -15,16 +15,16 @@
 		<view class="card-box">
 			<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"
+					<view class="t-icon t-icon-huiyuan"></view>
+					<u-cell class="cell-box" size="large" title="我的订阅" :label="myData.subscribeLevel"
 						:border="false"></u-cell>
 				</view>
 				<view class="i-item">
-					<view class="t-icon t-icon-hassan-mosque-morocco-svgrepo-com"></view>
+					<view class="t-icon t-icon-keji"></view>
 					<u-cell class="cell-box" size="large" title="订阅信息" label="描述信息" :border="false"></u-cell>
 				</view>
 				<view class="i-item">
-					<view class="t-icon t-icon-leaning-tower-of-pisa-europe-svgrepo-com"></view>
+					<view class="t-icon t-icon-qingjiashenqing"></view>
 					<u-cell class="cell-box" size="large" title="订阅时间" label="2022.2.15-2025.2.15" :border="false">
 					</u-cell>
 				</view>
@@ -51,7 +51,7 @@
 	} from 'vuex'
 	export default {
 		computed: {
-			...mapState('m_parent', ['parentinfo', 'parentdetail'])
+			...mapState('m_parent', ['parentinfo', 'parentdetail','myData'])
 		},
 		data() {
 			return {

uni.scss

@@ -1,7 +1,7 @@
 @import '@/uni_modules/uni-scss/variables.scss';
 //uView配置
 @import '@/uni_modules/uview-ui/theme.scss';
-//会员卡背景
+//图片背景
 @import '@/common/base64.scss';
 //自定义全局css
 @import  '@/common/style.scss';

uni_modules/qiun-data-charts/js_sdk/u-charts/config-ucharts.js

@@ -67,7 +67,7 @@ const formatDateTime = (timeStamp, returnType) => {
 const cfu = {
 	//demotype为自定义图表类型，一般不需要自定义图表类型，只需要改根节点上对应的类型即可
 	"type": ["pie", "ring", "rose", "arcbar", "line", "column", "area", "radar", "mainline", "mini-line",
-		"mini-area", "mini-column"
+		"mini-area", "mini-column", "mini-rose",
 	],
 	"range": [],
 	//增加自定义图表类型，如果需要categories，请在这里加入您的图表类型，例如最后的"demotype"
@@ -122,6 +122,7 @@ const cfu = {
 		"padding": [
 			0, 10, 15, 5
 		],
+		"dataLabel": false,
 		"fontSize": 12,
 		"xAxis": X,
 		"yAxis": Y,
@@ -132,11 +133,6 @@ const cfu = {
 				"width": 2
 			},
 			"tooltip": tooltip,
-			"markLine": {
-				"type": "dash",
-				"dashLength": 8,
-				"data": []
-			}
 		}
 	},
 	"column": {
@@ -148,6 +144,7 @@ const cfu = {
 		"padding": [
 			0, 10, 15, 5
 		],
+		"dataLabel": false,
 		"fontSize": 12,
 		"xAxis": X,
 		"yAxis": Y,
@@ -161,11 +158,6 @@ const cfu = {
 				"barBorderCircle": true,
 			},
 			"tooltip": tooltip,
-			"markLine": {
-				"type": "dash",
-				"dashLength": 8,
-				"data": []
-			}
 		}
 	},
 	"area": {
@@ -177,6 +169,7 @@ const cfu = {
 		"padding": [
 			0, 10, 15, 5
 		],
+		"dataLabel": false,
 		"fontSize": 12,
 		"xAxis": X,
 		"yAxis": Y,
@@ -190,11 +183,6 @@ const cfu = {
 				"gradient": true
 			},
 			"tooltip": tooltip,
-			"markLine": {
-				"type": "dash",
-				"dashLength": 8,
-				"data": []
-			}
 		}
 	},
 	"rose": {
@@ -350,26 +338,25 @@ const cfu = {
 		"animation": true,
 		"timing": "easeOut",
 		"duration": 500,
-		"color": [
-			"#6495ed"
-		],
+		"color": color,
 		"padding": [
-			5,
-			-15,
 			0,
-			-15
+			-50,
+			0,
+			-50
 		],
 		"dataLabel": false,
-		"dataPointShapeType": "hollow",
+		"dataPointShape": false,
 		"tapLegend": false,
 		"xAxis": {
 			"disabled": true,
 			"axisLine": false,
 			"disableGrid": true,
+			"boundaryGap": "center",
 		},
 		"yAxis": {
 			"disabled": true,
-			"disableGrid": true,
+			"disableGrid": true
 		},
 		"legend": {
 			"show": false,
@@ -377,37 +364,28 @@ const cfu = {
 		"extra": {
 			"area": {
 				"type": "curve",
-				"opacity": 1,
+				"opacity": 0.7,
 				"addLine": true,
-				"width": 4,
+				"width": 3,
 				"gradient": true
 			},
 			"tooltip": {
-				"showBox": true,
-				"showArrow": true,
-				"showCategory": false,
-				"borderRadius": 6,
-				"bgOpacity": 0.5,
+				"showBox": false,
 				"splitLine": false,
 			},
-			"markLine": {
-				"type": "solid",
-				"dashLength": 4,
-				"data": []
-			}
 		}
 	},
-	"mini-line": {
-		"type": "line",
+	"mini-column": {
+		"type": "column",
 		"animation": true,
 		"timing": "easeOut",
 		"duration": 500,
 		"color": color,
 		"padding": [
-			10,
 			0,
+			12,
 			0,
-			0
+			12
 		],
 		"dataLabel": false,
 		"dataPointShape": false,
@@ -425,19 +403,37 @@ const cfu = {
 			"show": false,
 		},
 		"extra": {
-			"line": {
-				"type": "curve",
-				"width": 2
+			"column": {
+				"type": "group",
+				"width": 10,
+				"seriesGap": 2,
+				"categoryGap": 3,
+				"barBorderCircle": false,
+				"barBorderRadius": [
+					10,
+					10,
+					10,
+					10
+				],
+				"linearType": "opacity",
+				"linearOpacity": 0.7,
+				"customColor": [
+					"#0052d4",
+					"#FFFFFF",
+					"#ff5959",
+					"#FFFFFF"
+				],
+				"colorStop": 0.5,
+				"meterBorder": 1,
+				"meterFillColor": "#FFFFFF",
+				"activeBgColor": "#FFFFFF",
+				"activeBgOpacity": 0.08,
+				"meterBorde": 1
 			},
 			"tooltip": {
 				"showBox": false,
 				"splitLine": false,
 			},
-			"markLine": {
-				"type": "solid",
-				"dashLength": 4,
-				"data": []
-			}
 		}
 	},
 	"mini-area": {
@@ -470,7 +466,7 @@ const cfu = {
 		"extra": {
 			"area": {
 				"type": "curve",
-				"opacity": 1,
+				"opacity": 0.7,
 				"addLine": true,
 				"width": 2,
 				"gradient": true
@@ -479,78 +475,39 @@ const cfu = {
 				"showBox": false,
 				"splitLine": false,
 			},
-			"markLine": {
-				"type": "solid",
-				"dashLength": 4,
-				"data": []
-			}
-		}
+		},
 	},
-	"mini-column": {
-		"type": "column",
+	"mini-rose": {
+		"type": "rose",
 		"animation": true,
 		"timing": "easeOut",
 		"duration": 500,
 		"color": color,
 		"padding": [
-			0,
-			12,
-			0,
-			12
+			-10,
+			5,
+			5,
+			5
 		],
 		"dataLabel": false,
 		"dataPointShape": false,
-		"tapLegend": false,
-		"xAxis": {
-			"disabled": true,
-			"axisLine": false,
-			"disableGrid": true,
-		},
-		"yAxis": {
-			"disabled": true,
-			"disableGrid": true,
-		},
+		"dataPointShapeType": "hollow",
 		"legend": {
 			"show": false,
 		},
 		"extra": {
-			"column": {
-				"type": "group",
-				"width": 10,
-				"seriesGap": 2,
-				"categoryGap": 3,
-				"barBorderCircle": false,
-				"barBorderRadius": [
-					10,
-					10,
-					10,
-					10
-				],
-				"linearType": "opacity",
-				"linearOpacity": 0.7,
-				"customColor": [
-					"#0052d4",
-					"#FFFFFF",
-					"#ff5959",
-					"#FFFFFF"
-				],
-				"colorStop": 0.5,
-				"meterBorder": 1,
-				"meterFillColor": "#FFFFFF",
-				"activeBgColor": "#FFFFFF",
-				"activeBgOpacity": 0.08,
-				"meterBorde": 1
+			"rose": {
+				"type": "radius",
+				"activeRadius": 0,
+				"border": true,
+				"borderWidth": 2,
+				"borderColor": "#FFFFFF",
 			},
 			"tooltip": {
 				"showBox": false,
 				"splitLine": false,
 			},
-			"markLine": {
-				"type": "solid",
-				"dashLength": 4,
-				"data": []
-			}
-		}
+		},
 	},
 
 }