完善分析模块，布局首页今日模块

App.vue

@@ -15,11 +15,10 @@
 
 <style lang="scss">
 	/* uView */
-	@import '@/uni_modules/uview-ui/index.scss';
+	@import "@/uni_modules/uview-ui/index.scss";
 	/*每个页面公共css */
 	@import '@/uni_modules/uni-scss/index.scss';
 	// /* #ifndef APP-NVUE */
-	// @import '@/static/customicons.css';
 	// 引入图标
 	@import './static/iconfont-weapp-icon.css';
 	.t-icon{

components/bar-mini-chart/bar-mini-chart.vue

@@ -1,108 +0,0 @@
-<template>
-	<view class="chart-container">
-		<view class="chart-name">
-			<view class="t-icon t-icon-xtubiao-12"></view>
-			<text class="chart-name-text">目标成绩</text>
-		</view>
-
-		<view class="charts-box">
-			<qiun-data-charts type="mini-bar" :chartData="chartData" :loadingType="4" background="none" :canvas2d='true'
-				canvasId='canvans999' />
-		</view>
-	</view>
-</template>
-
-<script>
-	export default {
-		name: "bar-mini-chart",
-		props: {},
-		data() {
-			return {
-				chartData: {},
-				queryObj: {}
-			};
-		},
-		methods:{
-			getChartData(){
-				this.chartData = {
-					categories: [
-						"数学",
-						"语文",
-						"英语",
-						"体育",
-						"科学",
-						"思品"
-					],
-					series: [{
-							"name": "目标成绩",
-							"data": [
-								97,
-								90,
-								100,
-								95,
-								97,
-								91
-							]
-						},
-						{
-							"name": "近期成绩",
-							"data": [
-								91,
-								92,
-								94,
-								88,
-								82,
-								89
-							]
-						}
-					],
-				}
-				
-			}
-		},
-		//创建组件生命周期函数
-		created(){
-			this.getChartData()
-		}
-	}
-</script>
-
-<style lang="scss">
-	.chart-container {
-		border-radius: 20rpx;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		flex-direction: column;
-		background-color: #FFFFFF;
-		box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.05);
-		width: 340rpx;
-
-
-		.chart-name {
-			display: flex;
-			align-items: center;
-			justify-content: flex-start;
-			width: 100%;
-			margin: 20rpx 0 20rpx 40rpx;
-
-			.chart-name-text {
-				margin-left: 20rpx;
-				font-size: 30rpx;
-				font-weight: bold;
-				color: #3B4144;
-			}
-		}
-
-		.charts-box {
-			margin: 10rpx 10rpx 0 30rpx;
-			width: 100%;
-			height: 320rpx;
-		}
-	}
-
-	.t-icon {
-		width: 40rpx;
-		height: 40rpx;
-	}
-</style>

components/radar-mini-chart/radar-mini-chart.vue

@@ -1,122 +0,0 @@
-<template>
-	<view class="chart-container">
-		<view class="chart-name">
-			<view class="t-icon t-icon-xtubiao-9"></view>
-			<text class="chart-name-text">学年能力</text>
-		</view>
-		
-		<view class="charts-box">
-		  <qiun-data-charts
-		    type="mini-radar"
-		    :chartData="chartData"
-		    :loadingType="4"
-		    background="none"
-				:canvas2d='true' canvasId='canvans998'
-		  />
-		</view>
-	</view>
-</template>
-
-<script>
-	export default {
-		name:"radar-mini-chart",
-		props:{},
-		data() {
-			return {
-				chartData: {},
-				queryObj: {}
-			};
-		},
-		methods:{
-			getChartData(){
-				this.chartData = {
-					categories: ["语文",
-						"数学",
-						"英语",
-						"科学",
-						"体育",
-						"思品"
-					],
-					series: [{
-							"name": "开学考试",
-							"data": [
-								90,
-								100,
-								77,
-								88,
-								95,
-								85
-							]
-						},
-						{
-							"name": "期中考试",
-							"data": [
-								93,
-								80,
-								99,
-								76,
-								88,
-								100
-							]
-						},
-						{
-							"name": "期末考试",
-							"data": [
-								82,
-								90,
-								65,
-								99,
-								70,
-								92
-							]
-						}
-					],
-				}
-				
-				
-			}
-		},
-		//创建组件生命周期函数
-		created(){
-			this.getChartData()
-		}
-	}
-</script>
-
-<style lang="scss">
-.chart-container {
-		border-radius: 20rpx;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		flex-direction: column;
-		background-color: #FFFFFF;
-		box-shadow: 0 4rpx 8rpx rgba(0,0,0,0.05);
-		width: 340rpx;
-
-	
-		.chart-name {
-			display: flex;
-			align-items: center;
-			justify-content: flex-start;
-			width: 100%;
-			margin: 20rpx 0 20rpx 40rpx;
-			
-			.chart-name-text {
-				margin-left: 20rpx;
-				font-size: 30rpx;
-				font-weight: bold;
-				color: #3B4144;
-			}
-		}
-	.charts-box{
-		margin: -20rpx 0 0 0;
-		width: 100%;
-		height: 350rpx;
-	}
-}
-.t-icon{
-		width: 40rpx;
-		height: 40rpx;
-	}
-</style>

components/zsy-calendar/dateBox.vue

@@ -0,0 +1,100 @@
+<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

@@ -0,0 +1,68 @@
+/**
+ * 时间格式化
+ * @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

@@ -0,0 +1,624 @@
+<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/arcbar-chart/arcbar-chart.vue

@@ -11,54 +11,53 @@
 				<view class="children-class">{{childreninfo.class}}</view>
 			</view>
 		</view>
-		
-		<view class="icon-box">
-			<view class="t-icon t-icon-xuexirenwu"></view>
-			<view class="t-icon t-icon-ceshi"></view>
-			
-			<view style="display: flex; flex-direction: column; align-items: center;" >
-				<view class="t-icon t-icon-mulu"></view>
-				<view class="icon-text">返回</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="listChartData" :loadingType="4" :opts="{dataLabel: false}"
+					:canvas2d='true' canvasId='canvans899' />
 			</view>
-			
 		</view>
-
-
+		<!-- 单次分析 -->
 		<view class="chart-container">
 			<view class="chart-name">
-				<view class="t-icon t-icon-dajumao"></view>
-				<text class="chart-name-text">排行分析</text>
+				<view class="t-icon t-icon-xianxingpaiqiu"></view>
+				<text class="chart-name-text">近期排行占比分析</text>
 			</view>
-
 			<view class="charts-box">
-		 	<qiun-data-charts type="arcbar" :chartData="chartData" :loadingType="4" :opts.title="this.chartData.series" />
+		 	<qiun-data-charts type="arcbar" :chartData="arcbarChartData" :loadingType="4"/>
 			</view>
 		</view>
 		<!-- 数据分析模块 -->
 		<view class="data-box">
-			<view class="data-box-item" v-bind:style="{background: chartData.series[0].color}">
-				<view class="item-text">{{chartData.series[0].name}}</view>
-				<view class="item-number">{{chartData.series[0].data/0.01}}%</view>
-				<view style="display: flex;align-items: center;">
-					<view v-if="chartData.series[0].data<0.4" class="t-icon t-icon-jiangbei-20"></view>
-					<view v-if="chartData.series[0].data>=0.4 && chartData.series[0].data<0.7" class="t-icon t-icon-jiangbei-19"></view>
-					<view v-if="chartData.series[0].data>=0.7" class="t-icon t-icon-jiangbei-18"></view>
-					<view v-if="chartData.series[0].data<0.4" class="icon-text-item">要加把劲!</view>
-					<view v-if="chartData.series[0].data>=0.4 && chartData.series[0].data<0.7" class="icon-text-item">再接再厉!</view>
-					<view v-if="chartData.series[0].data>=0.7" class="icon-text-item">非常优秀!</view>
+			<view class="data-box-item" v-bind:style="{background: arcbarChartData.series[0].color}">
+				<view class="item-text">{{arcbarChartData.series[0].name}}</view>
+				<view class="item-number">{{arcbarChartData.series[0].data/0.01}}%</view>
+				<view style="display: flex;align-items: center;padding-bottom: 15rpx;padding: 5rpx 15rpx;">
+					<view v-if="arcbarChartData.series[0].data<0.4" class="t-icon t-icon-jiangbei-20"></view>
+					<view v-if="arcbarChartData.series[0].data>=0.4 && arcbarChartData.series[0].data<0.7" class="t-icon t-icon-jiangbei-19"></view>
+					<view v-if="arcbarChartData.series[0].data>=0.7" class="t-icon t-icon-jiangbei-18"></view>
+					<view v-if="arcbarChartData.series[0].data<0.4" class="icon-text-item">要加把劲!</view>
+					<view v-if="arcbarChartData.series[0].data>=0.4 && arcbarChartData.series[0].data<0.7" class="icon-text-item">再接再厉!</view>
+					<view v-if="arcbarChartData.series[0].data>=0.7" class="icon-text-item">非常优秀!</view>
 				</view>
 			</view>
 			
-			<view class="data-box-item" v-bind:style="{background: chartData.series[1].color}">
-				<view class="item-text">{{chartData.series[1].name}}</view>
-				<view class="item-number">{{chartData.series[1].data/0.01}}%</view>
-				<view style="display: flex;align-items: center;">
-					<view v-if="chartData.series[1].data<0.4" class="t-icon t-icon-jiangbei-20"></view>
-					<view v-if="chartData.series[1].data>=0.4 && chartData.series[1].data<0.7" class="t-icon t-icon-jiangbei-19"></view>
-					<view v-if="chartData.series[1].data>=0.7" class="t-icon t-icon-jiangbei-18"></view>
-					<view v-if="chartData.series[1].data<0.4" class="icon-text-item">要加把劲!</view>
-					<view v-if="chartData.series[1].data>=0.4 && chartData.series[1].data<0.7" class="icon-text-item">再接再厉!</view>
-					<view v-if="chartData.series[1].data>=0.7" class="icon-text-item">非常优秀!</view>
+			<view class="data-box-item" v-bind:style="{background: arcbarChartData.series[1].color}">
+				<view class="item-text">{{arcbarChartData.series[1].name}}</view>
+				<view class="item-number">{{arcbarChartData.series[1].data/0.01}}%</view>
+				<view style="display: flex;align-items: center;padding-bottom: 15rpx;padding: 5rpx 15rpx;">
+					<view v-if="arcbarChartData.series[1].data<0.4" class="t-icon t-icon-jiangbei-20"></view>
+					<view v-if="arcbarChartData.series[1].data>=0.4 && arcbarChartData.series[1].data<0.7" class="t-icon t-icon-jiangbei-19"></view>
+					<view v-if="arcbarChartData.series[1].data>=0.7" class="t-icon t-icon-jiangbei-18"></view>
+					<view v-if="arcbarChartData.series[1].data<0.4" class="icon-text-item">要加把劲!</view>
+					<view v-if="arcbarChartData.series[1].data>=0.4 && arcbarChartData.series[1].data<0.7" class="icon-text-item">再接再厉!</view>
+					<view v-if="arcbarChartData.series[1].data>=0.7" class="icon-text-item">非常优秀!</view>
 				</view>
 			</view>
 			
@@ -75,19 +74,52 @@
 		},
 		data() {
 			return {
-				chartData: {
+				arcbarChartData: {
 					series: [{
-							"name": "超过年级中:",
+							"name": "超过年级中",
 							"data": 0.6,
 							"color": "#0052d4"
 						},
 						{
-							"name": "超过班级中:",
+							"name": "超过班级中",
 							"data": 0.92,
 							"color": "#ff5959"
 						}
 					],
 				},
+				listChartData: {
+					categories: [
+						"测验1",
+						"测验2",
+						"测验3",
+						"测验4",
+						"测验5",
+						"测验6"
+					],
+					series: [{
+							"name": "超过年级中百分之",
+							"data": [
+								90,
+								95,
+								92,
+								100,
+								88,
+								99
+							]
+						},
+						{
+							"name": "超过班级中百分之",
+							"data": [
+								95,
+								98,
+								84,
+								92,
+								93,
+								79
+							]
+						}
+					]
+				},
 				//查询参数
 				queryObj: {},
 				
@@ -114,7 +146,7 @@
 <style lang="scss">
 	.page-box {
 		height: 600rpx;
-		background: linear-gradient(#ff6187, #f1f3f5);
+		background: linear-gradient(#ffd071, #f1f3f5);
 	
 		.back {
 			padding: 100rpx 0 30rpx 40rpx;
@@ -152,19 +184,8 @@
 				}
 			}
 		}
-		.icon-box{
-			display: flex;
-			justify-content: space-between;
-			margin: 0 80rpx 20rpx 80rpx;
-			padding-top: 60rpx;
-			.icon-text{
-				font-weight: bold;
-				font-size: 26rpx;
-				color: #3B4144;
-			}
-		}
 		.chart-container {
-			margin: 0 20rpx;
+			margin: 40rpx 20rpx 0 20rpx;
 			padding: 0rpx 10rpx 0rpx 0rpx;
 			border-radius: 15rpx;
 			display: flex;
@@ -207,6 +228,7 @@
 				background-color: #FFFFFF;
 				border-radius: 15rpx;
 				width: 340rpx;
+				height: 290rpx;
 				box-shadow: 0 4rpx 8rpx rgba(0,0,0,0.1);
 				.item-text{
 					font-size: 30rpx;
@@ -215,14 +237,12 @@
 					margin: 30rpx 0 0 30rpx;
 				}
 				.t-icon{
-					margin-bottom: 30rpx;
-					margin-left: 20rpx;
 					width: 100rpx;
 					height: 100rpx;
 				}
 				.item-number{
-					font-size: 80rpx;
-					margin-left: 30rpx;
+					font-size: 60rpx;
+					margin: 20rpx 0 10rpx 30rpx;
 					color: #FFFFFF;
 					font-weight: bold;
 				}

gradepkg/area-chart/area-chart.vue

@@ -17,7 +17,7 @@
 		<!-- 单科与平均成绩对比 -->
 		<view class="chart-container">
 			<view class="chart-name">
-				<view class="t-icon t-icon-xianxingguojixiangqi"></view>
+				<view class="t-icon t-icon-xianxinggangqin"></view>
 				<text class="chart-name-text">{{semester}} 单科与平均对比</text>
 				
 				<view class="search-box" @click="show = true">
@@ -35,7 +35,7 @@
 		<!-- 单科成绩对比 -->
 		<view class="chart-container">
 			<view class="chart-name">
-				<view class="t-icon t-icon-xianxingzhongguoxiangqi"></view>
+				<view class="t-icon t-icon-xianxingshoufengqin"></view>
 				<text class="chart-name-text">{{semester}} 单科走势对比</text>
 			</view>
 			<!-- 图表 -->

gradepkg/bar-chart/bar-chart.vue

@@ -1,205 +0,0 @@
-<template>
-	<view class="page-box">
-		<view class="back">
-			<view class="t-icon t-icon-fanhui2-copy" @click="returnList"></view>
-		</view>
-		
-		<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="icon-box">
-			<view class="t-icon t-icon-xuexirenwu"></view>
-
-			<view style="display: flex; flex-direction: column; align-items: center;" @click="changeTarget">
-				<view class="t-icon t-icon-ceshi"></view>
-				<view class="icon-text">目标</view>
-			</view>
-
-			<view style="display: flex; flex-direction: column; align-items: center;" >
-				<view class="t-icon t-icon-mulu"></view>
-				<view class="icon-text">返回</view>
-			</view>
-
-		</view>
-
-		<view class="chart-container">
-			<view class="chart-name">
-				<view class="t-icon t-icon-buoumao-haibaoshuangse"></view>
-				<text class="chart-name-text">成绩目标</text>
-			</view>
-			<view class="charts-box">
-				<qiun-data-charts type="bar" :chartData="chartData" :loadingType="4" />
-			</view>
-		</view>
-
-		
-
-
-
-
-	</view>
-</template>
-
-<script>
-	import {mapState} from 'vuex'
-	
-	export default {
-		computed:{
-			...mapState('m_children',['childreninfo','semester'])
-		},
-		
-		data() {
-			return {
-				target: false,
-
-				chartData: {
-					categories: [
-						"数学",
-						"语文",
-						"英语",
-						"体育",
-						"科学",
-						"思品"
-					],
-					series: [{
-							"name": "目标成绩",
-							"data": [
-								97,
-								90,
-								100,
-								95,
-								97,
-								91
-							]
-						},
-						{
-							"name": "近期成绩",
-							"data": [
-								91,
-								92,
-								94,
-								88,
-								82,
-								89
-							]
-						}
-					],
-				},
-				//查询参数
-				queryObj: {},
-
-			};
-		},
-		methods: {
-			changeTarget() {
-				this.target = !this.target
-			},
-			//返回成绩页面
-			returnList() {
-				uni.switchTab({
-					url: '/pages/grade/grade'
-				})
-			},
-			//获取表格数据
-			// async getChartData(){
-				
-			// },
-		},
-		onLoad(){
-			// this.getChartData()
-		}
-	}
-</script>
-
-<style lang="scss">
-	.page-box {
-		height: 600rpx;
-		background: linear-gradient(#ff6187, #f1f3f5);
-	
-		.back {
-			padding: 100rpx 0 30rpx 40rpx;
-			.t-icon{
-				width:50rpx;
-				height:50rpx;
-			}
-		}
-		
-		.children-box{
-			display: flex;
-			align-items: center;
-			.children-avatar{
-				margin-left: 40rpx;
-				width: 96rpx;
-				height: 96rpx;
-				border-radius: 50rpx;
-				border: 4rpx solid #FFFFFF;
-				box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.2);
-			}
-			.children-msg{
-				margin-left: 30rpx;
-				
-				.children-name{
-					color: #3B4144;
-					font-size: 32rpx;
-					font-weight: bold;
-					margin-bottom: 10rpx;
-				}
-				.children-class{
-					color: #696969;
-					font-size: 32rpx;
-					font-weight: bold;
-					margin-top: 10rpx;
-				}
-			}
-		}
-		.icon-box{
-			display: flex;
-			justify-content: space-between;
-			margin: 0 80rpx 20rpx 80rpx;
-			padding-top: 60rpx;
-			.icon-text{
-				font-weight: bold;
-				font-size: 26rpx;
-				color: #3B4144;
-			}
-		}
-
-		.chart-container {
-			margin: 0 20rpx;
-			padding: 0rpx 10rpx 0rpx 0rpx;
-			border-radius: 15rpx;
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			flex-direction: column;
-			background-color: #FFFFFF;
-			box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
-
-			.chart-name {
-				width: 100%;
-				display: flex;
-				justify-content: flex-start;
-				align-items: center;
-				margin-left: 40rpx;
-				margin-top: 20rpx;
-
-				.chart-name-text {
-					font-size: 30rpx;
-					font-weight: bold;
-					color: #3B4144;
-					margin-left: 10rpx;
-				}
-			}
-
-			.charts-box {
-				width: 100%;
-				height: 600rpx;
-			}
-		}
-	}
-</style>

gradepkg/mainradar-chart/mainradar-chart.vue

@@ -1,200 +0,0 @@
-<template>
-	<view class="page-box">
-		<view class="back">
-			<view class="t-icon t-icon-fanhui2-copy" @click="returnList"></view>
-		</view>
-		
-		<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="icon-box">
-			<view class="t-icon t-icon-xuexirenwu"></view>
-			<view class="t-icon t-icon-ceshi"></view>
-			
-			<view style="display: flex; flex-direction: column; align-items: center;">
-				<view class="t-icon t-icon-mulu"></view>
-				<view class="icon-text">返回</view>
-			</view>
-			
-		</view>
-
-
-		<view class="chart-container">
-			<view class="chart-name">
-				<view class="t-icon t-icon-buoumao-zhongdianse"></view>
-				<text class="chart-name-text">成绩雷达</text>
-			</view>
-			<!-- 图表 -->
-			<view class="charts-box">
-				<qiun-data-charts type="mainradar" :chartData="chartData" :loadingType="4" />
-			</view>
-		</view>
-	</view>
-</template>
-
-<script>
-	import {mapState} from 'vuex'
-	
-	export default {
-		computed:{
-			...mapState('m_children',['childreninfo','semester'])
-		},
-		
-		data() {
-			return {
-				chartData: {
-					categories: ["语文",
-						"数学",
-						"英语",
-						"科学",
-						"体育",
-						"思品"
-					],
-					series: [{
-							"name": "开学考试",
-							"data": [
-								90,
-								100,
-								77,
-								88,
-								95,
-								85
-							]
-						},
-						{
-							"name": "期中考试",
-							"data": [
-								93,
-								80,
-								99,
-								76,
-								88,
-								100
-							]
-						},
-						{
-							"name": "期末考试",
-							"data": [
-								82,
-								90,
-								65,
-								99,
-								70,
-								92
-							]
-						}
-					],
-				},
-				//查询参数
-				queryObj: {},
-
-			};
-		},
-		methods:{
-			//返回成绩页面
-			returnList(){
-				uni.switchTab({
-					url: '/pages/grade/grade'
-				})
-			},
-			//获取表格数据
-			// async getChartData(){
-				
-			// },
-		},
-		onLoad(){
-			// this.getChartData()
-		}
-	}
-</script>
-
-<style lang="scss">
-	.page-box {
-		height: 600rpx;
-		background: linear-gradient(#ff6187, #f1f3f5);
-	
-		.back {
-			padding: 100rpx 0 30rpx 40rpx;
-			.t-icon{
-				width:50rpx;
-				height:50rpx;
-			}
-		}
-		
-		.children-box{
-			display: flex;
-			align-items: center;
-			.children-avatar{
-				margin-left: 40rpx;
-				width: 96rpx;
-				height: 96rpx;
-				border-radius: 50rpx;
-				border: 4rpx solid #FFFFFF;
-				box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.2);
-			}
-			.children-msg{
-				margin-left: 30rpx;
-				
-				.children-name{
-					color: #3B4144;
-					font-size: 32rpx;
-					font-weight: bold;
-					margin-bottom: 10rpx;
-				}
-				.children-class{
-					color: #696969;
-					font-size: 32rpx;
-					font-weight: bold;
-					margin-top: 10rpx;
-				}
-			}
-		}
-		.icon-box{
-			display: flex;
-			justify-content: space-between;
-			margin: 0 80rpx 20rpx 80rpx;
-			padding-top: 60rpx;
-			.icon-text{
-				font-weight: bold;
-				font-size: 26rpx;
-				color: #3B4144;
-			}
-		}
-		.chart-container {
-			margin: 0 20rpx;
-			padding: 0rpx 10rpx 0rpx 0rpx;
-			border-radius: 15rpx;
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			flex-direction: column;
-			background-color: #FFFFFF;
-			box-shadow: 0 4rpx 8rpx rgba(0,0,0,0.1);
-		
-			.chart-name {
-				width: 100%;
-				display: flex;
-				justify-content: flex-start;
-				align-items: center;
-				margin-left: 40rpx;
-				margin-top: 20rpx;
-		
-				.chart-name-text {
-					font-size: 30rpx;
-					font-weight: bold;
-					color: #3B4144;
-					margin-left: 10rpx;
-				}
-			}
-			.charts-box {
-				width: 100%;
-				height: 600rpx;
-			}
-		}
-	}
-</style>

gradepkg/radar-chart/radar-chart.vue

@@ -3,7 +3,7 @@
 		<view class="back">
 			<view class="t-icon t-icon-fanhui2-copy" @click="returnList"></view>
 		</view>
-		
+
 		<view class="children-box">
 			<image class="children-avatar" :src="childreninfo.avatar"></image>
 			<view class="children-msg">
@@ -11,99 +11,168 @@
 				<view class="children-class">{{childreninfo.class}}</view>
 			</view>
 		</view>
-		
-		<view class="icon-box">
-			<view class="t-icon t-icon-xuexirenwu"></view>
-			<view class="t-icon t-icon-ceshi"></view>
-			
-			<view style="display: flex; flex-direction: column; align-items: center;">
-				<view class="t-icon t-icon-mulu"></view>
-				<view class="icon-text">返回</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="mainradar" :chartData="mainChartData" :loadingType="4" />
 			</view>
-			
 		</view>
 
-
 		<view class="chart-container">
 			<view class="chart-name">
-				<view class="t-icon t-icon-heimao"></view>
-				<text class="chart-name-text">单科能力</text>
-				<!-- 选择器 -->
-				<!-- <view class="chart-name-btn">
-				<u-picker :show="show" :columns="subject" ref="uPicker" @confirm="confirm" @change="changeHandler"></u-picker>
-				<u-button class="btn" @click="show = true" size="small" shape="circle">科目</u-button>
-			</view> -->
+				<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="chartData" :loadingType="4" />
+				<qiun-data-charts type="mainradar" :chartData="quizChartData" :loadingType="4" />
+			</view>
+		</view>
+
+		<!-- 数据分析模块 -->
+		<view class="data-box">
+			<view class="data-box-item">
+				<view class="item-text">{{childreninfo.name}}考试发挥能力:</view>
+				<view class="item-number">{{mainExamUndulate>=quizExamUndulate?'小考稳定':'大考稳定'}}</view>
+				<view style="display: flex;align-items: center;padding-bottom: 15rpx;padding: 5rpx 15rpx;">
+					<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-item2">
+				<view class="item-text">{{childreninfo.name}}考试得分能力:</view>
+				<view class="item-number">{{avgMain>=avgquiz?'大考能力强':'小考能力强'}}</view>
+				<view style="display: flex;align-items: center;padding-bottom: 15rpx;padding: 5rpx 15rpx;">
+					<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>
 </template>
 
 <script>
-	import {mapState} from 'vuex'
-	
+	import {
+		mapState
+	} from 'vuex'
+
 	export default {
-		computed:{
-			...mapState('m_children',['childreninfo','semester'])
+		computed: {
+			...mapState('m_children', ['childreninfo', 'semester'])
 		},
-		
+
 		data() {
 			return {
-				show: false,
-				subject: [
-					['语文', '数学', '英语', '体育', '思品', '科学']
-				],
 
-				chartData: {
+				mainChartData: {
 					categories: [
-						"数学",
 						"语文",
+						"数学",
 						"英语",
-						"体育",
 						"科学",
+						"体育",
 						"思品"
 					],
 					series: [{
-							"name": "孩子",
+							"name": "开学考试",
+							"data": [
+								90,
+								100,
+								77,
+								88,
+								95,
+								83
+							]
+						},
+						{
+							"name": "期中考试",
 							"data": [
-								91,
-								92,
 								94,
-								82,
-								82,
-								89
+								89,
+								97,
+								81,
+								95,
+								82
 							]
 						},
 						{
-							"name": "班平均",
+							"name": "期末考试",
 							"data": [
 								82,
-								83,
+								90,
+								65,
+								96,
+								70,
+								92
+							]
+						}
+					],
+				},
+				quizChartData: {
+					categories: [
+						"语文",
+						"数学",
+						"英语",
+						"科学",
+						"体育",
+						"思品"
+					],
+					series: [{
+							"name": "4月月考",
+							"data": [
+								90,
+								100,
 								77,
-								83,
-								91,
-								81
+								78,
+								75,
+								95
 							]
 						},
 						{
-							"name": "年级平均",
+							"name": "6月月考",
 							"data": [
-								77,
-								78,
-								73,
+								89,
+								94,
+								75,
+								99,
 								80,
-								86,
-								82
+								92
+							]
+						},
+						{
+							"name": "8月月考",
+							"data": [
+								79,
+								84,
+								94,
+								73,
+								99,
+								87
 							]
 						}
 					],
 				},
 				//查询参数
 				queryObj: {},
+				//成绩波动参数(标准差)
+				mainExamUndulate: 0,
+				quizExamUndulate: 0,
+				//大小考每次考试平均成绩
+				avgMain: 0,
+				avgquiz: 0,
 
 			};
 		},
@@ -114,18 +183,59 @@
 				this.show = false
 			},
 			//返回成绩页面
-			returnList(){
+			returnList() {
 				uni.switchTab({
 					url: '/pages/grade/grade'
 				})
 			},
-			//获取表格数据
-			// async getChartData(){
-				
-			// },
+			//成绩波动数据(标准差)
+			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.mainChartData.series) {
+					mainArr.push(arrSum(item.data))
+				}
+				for (let item of this.quizChartData.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.getChartData()
+		onLoad() {
+			this.getExamUndulate()
 		}
 	}
 </script>
@@ -134,19 +244,21 @@
 	.page-box {
 		height: 600rpx;
 		background: linear-gradient(#ff6187, #f1f3f5);
-	
+
 		.back {
 			padding: 100rpx 0 30rpx 40rpx;
-			.t-icon{
-				width:50rpx;
-				height:50rpx;
+
+			.t-icon {
+				width: 50rpx;
+				height: 50rpx;
 			}
 		}
-		
-		.children-box{
+
+		.children-box {
 			display: flex;
 			align-items: center;
-			.children-avatar{
+
+			.children-avatar {
 				margin-left: 40rpx;
 				width: 96rpx;
 				height: 96rpx;
@@ -154,16 +266,18 @@
 				border: 4rpx solid #FFFFFF;
 				box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.2);
 			}
-			.children-msg{
+
+			.children-msg {
 				margin-left: 30rpx;
-				
-				.children-name{
+
+				.children-name {
 					color: #3B4144;
 					font-size: 32rpx;
 					font-weight: bold;
 					margin-bottom: 10rpx;
 				}
-				.children-class{
+
+				.children-class {
 					color: #696969;
 					font-size: 32rpx;
 					font-weight: bold;
@@ -171,19 +285,9 @@
 				}
 			}
 		}
-		.icon-box{
-			display: flex;
-			justify-content: space-between;
-			margin: 0 80rpx 20rpx 80rpx;
-			padding-top: 60rpx;
-			.icon-text{
-				font-weight: bold;
-				font-size: 26rpx;
-				color: #3B4144;
-			}
-		}
+
 		.chart-container {
-			margin: 0 20rpx;
+			margin: 40rpx 20rpx 0 20rpx;
 			padding: 0rpx 10rpx 0rpx 0rpx;
 			border-radius: 15rpx;
 			display: flex;
@@ -191,8 +295,8 @@
 			justify-content: center;
 			flex-direction: column;
 			background-color: #FFFFFF;
-			box-shadow: 0 4rpx 8rpx rgba(0,0,0,0.1);
-		
+			box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
+
 			.chart-name {
 				width: 100%;
 				display: flex;
@@ -200,7 +304,7 @@
 				align-items: center;
 				margin-left: 40rpx;
 				margin-top: 20rpx;
-		
+
 				.chart-name-text {
 					font-size: 30rpx;
 					font-weight: bold;
@@ -208,10 +312,85 @@
 					margin-left: 10rpx;
 				}
 			}
+
 			.charts-box {
 				width: 100%;
-				height: 550rpx;
+				height: 600rpx;
+			}
+		}
+
+		.data-box {
+			display: flex;
+			flex-direction: row;
+			align-items: center;
+			flex-wrap: wrap;
+			justify-content: space-between;
+			margin: 20rpx;
+
+			.data-box-item2 {
+				display: flex;
+				flex-direction: column;
+				background-color: #ff5959;
+				border-radius: 15rpx;
+				width: 340rpx;
+				height: 290rpx;
+				box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
+
+				.item-text {
+					font-size: 30rpx;
+					font-weight: bold;
+					color: #FFFFFF;
+					margin: 30rpx 0 0 30rpx;
+				}
+				
+				.t-icon {
+					width: 180rpx;
+					height: 100rpx;
+				}
+				
+				.item-number {
+					font-size: 60rpx;
+					margin: 10rpx 0 10rpx 25rpx;
+					color: #FFFFFF;
+					font-weight: bold;
+				}
+			}
+
+			.data-box-item {
+				display: flex;
+				flex-direction: column;
+				background-color: #0052d4;
+				border-radius: 15rpx;
+				width: 340rpx;
+				height: 290rpx;
+				box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
+
+				.item-text {
+					font-size: 30rpx;
+					font-weight: bold;
+					color: #FFFFFF;
+					margin: 30rpx 0 0 30rpx;
+				}
+
+				.t-icon {
+					width: 180rpx;
+					height: 100rpx;
+				}
+
+				.item-number {
+					font-size: 60rpx;
+					margin: 10rpx 0 10rpx 25rpx;
+					color: #FFFFFF;
+					font-weight: bold;
+				}
 			}
 		}
 	}
+
+	.icon-text-item {
+		font-size: 30rpx;
+		font-weight: bold;
+		color: #FFFFFF;
+		margin-left: 10rpx;
+	}
 </style>

gradepkg/rose-chart/rose-chart.vue

@@ -3,7 +3,7 @@
 		<view class="back">
 			<view class="t-icon t-icon-fanhui2-copy" @click="returnList"></view>
 		</view>
-		
+
 		<view class="children-box">
 			<image class="children-avatar" :src="childreninfo.avatar"></image>
 			<view class="children-msg">
@@ -33,43 +33,58 @@
 				<qiun-data-charts type="rose" :chartData="meanChartData" :loadingType="4" :tapLegend="true" />
 			</view>
 		</view>
-		
+
 		<!-- 数据分析模块 -->
 		<view class="data-box">
-			<view class="data-box-item" style="{background: #0052d4;}">
-				<view class="item-text">您的孩子优势科目为:{{bestSubject.name}}</view>
-				<view class="item-number">{{chartData.series[0].data/0.01}}%</view>
-				<view style="display: flex;align-items: center;">
-					<view class="t-icon t-icon-jiangbei-6"></view>
-					<view class="icon-text-item">继续加油!</view>
+			<view class="data-box-item">
+				<view class="item-text">{{childreninfo.name}}优势科:{{bestSubject.name}}</view>
+				<view class="item-number">{{bestSubject.value}}分</view>
+				<view style="display: flex;align-items: center;padding-bottom: 15rpx;padding: 5rpx 15rpx;">
+					<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: #ff5959}">
-				<view class="item-text">{{chartData.series[1].name}}</view>
-				<view class="item-number">{{chartData.series[1].data/0.01}}%</view>
-				<view style="display: flex;align-items: center;">
-					<view class="t-icon t-icon-jiangbei-6"></view>
-					<view class="icon-text-item">继续加油!</view>
+			
+			<view class="data-box-item2">
+				<view class="item-text">{{childreninfo.name}}劣势科:{{worstSubject.name}}</view>
+				<view class="item-number">{{worstSubject.value}}分</view>
+				<view style="display: flex;align-items: center;padding-bottom: 15rpx;padding: 5rpx 15rpx;">
+					<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>
-		
 	</view>
 </template>
 
 <script>
-	import {mapState} from 'vuex'
-	
+	import {
+		mapState
+	} from 'vuex'
+
 	export default {
-		computed:{
-			...mapState('m_children',['childreninfo','semester']),
+		computed: {
+			...mapState('m_children', ['childreninfo', 'semester']),
 			...mapState('m_chart', ['areaChartData'])
 		},
-		
+
 		data() {
 			return {
 				//最好科目
 				bestSubject: {},
+				//劣势科目
+				worstSubject: {},
+				
 				roseChartData: {
 					series: [{
 						"data": [{
@@ -86,7 +101,7 @@
 							},
 							{
 								"name": "科学",
-								"value": 77
+								"value": 79
 							},
 							{
 								"name": "体育",
@@ -100,8 +115,7 @@
 					}]
 				},
 				meanChartData: {
-					series: [
-						{
+					series: [{
 						"data": [{
 								"name": "数学",
 								"value": 97
@@ -129,29 +143,34 @@
 						]
 					}]
 				},
-				
-				
+
+
 			};
 		},
-		onLoad(){
+		onLoad() {
 			// this.getChartData()
 			this.getGradeDetail()
 		},
-		methods:{
+		methods: {
 			//返回成绩页面
-			returnList(){
+			returnList() {
 				uni.switchTab({
 					url: '/pages/grade/grade'
 				})
 			},
 			//通过map方法返回成绩的数组
-			getGradeDetail(){
+			getGradeDetail() {
 				//获取成绩最好科目
-				this.bestSubject = this.meanChartData.series[0].data.reduce((pre,cur)=>pre.value>cur.value?pre:cur)
-				console.log(this.bestSubject);
+				this.bestSubject = this.meanChartData.series[0].data.reduce((pre, cur) => pre.value > cur.value ? pre :
+					cur)
+				//劣势科目
+				this.worstSubject = this.meanChartData.series[0].data.reduce((pre, cur) => pre.value < cur.value ? pre :
+					cur)
+				console.log(this.bestSubject)
+				console.log(this.worstSubject)
 			}
 		}
-		
+
 	}
 </script>
 
@@ -159,19 +178,21 @@
 	.page-box {
 		height: 600rpx;
 		background: linear-gradient(#a5c6ff, #f1f3f5);
-	
+
 		.back {
 			padding: 100rpx 0 30rpx 40rpx;
-			.t-icon{
-				width:50rpx;
-				height:50rpx;
+
+			.t-icon {
+				width: 50rpx;
+				height: 50rpx;
 			}
 		}
-		
-		.children-box{
+
+		.children-box {
 			display: flex;
 			align-items: center;
-			.children-avatar{
+
+			.children-avatar {
 				margin-left: 40rpx;
 				width: 96rpx;
 				height: 96rpx;
@@ -179,16 +200,18 @@
 				border: 4rpx solid #FFFFFF;
 				box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.2);
 			}
-			.children-msg{
+
+			.children-msg {
 				margin-left: 30rpx;
-				
-				.children-name{
+
+				.children-name {
 					color: #3B4144;
 					font-size: 32rpx;
 					font-weight: bold;
 					margin-bottom: 10rpx;
 				}
-				.children-class{
+
+				.children-class {
 					color: #696969;
 					font-size: 32rpx;
 					font-weight: bold;
@@ -196,6 +219,7 @@
 				}
 			}
 		}
+
 		.chart-container {
 			margin: 40rpx 20rpx 0 20rpx;
 			padding: 0rpx 10rpx 0rpx 0rpx;
@@ -205,8 +229,8 @@
 			justify-content: center;
 			flex-direction: column;
 			background-color: #FFFFFF;
-			box-shadow: 0 4rpx 8rpx rgba(0,0,0,0.1);
-		
+			box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
+
 			.chart-name {
 				width: 100%;
 				display: flex;
@@ -214,7 +238,7 @@
 				align-items: center;
 				margin-left: 40rpx;
 				margin-top: 20rpx;
-		
+
 				.chart-name-text {
 					font-size: 30rpx;
 					font-weight: bold;
@@ -222,47 +246,82 @@
 					margin-left: 10rpx;
 				}
 			}
+
 			.charts-box {
 				width: 100%;
 				height: 550rpx;
 			}
 		}
-		.data-box{
+
+		.data-box {
 			display: flex;
 			flex-direction: row;
 			align-items: center;
 			flex-wrap: wrap;
 			justify-content: space-between;
 			margin: 20rpx;
-			.data-box-item{
+
+			.data-box-item2 {
 				display: flex;
 				flex-direction: column;
-				background-color: #FFFFFF;
+				background-color: #ff5959;
 				border-radius: 15rpx;
 				width: 340rpx;
-				box-shadow: 0 4rpx 8rpx rgba(0,0,0,0.1);
-				.item-text{
+				height: 290rpx;
+				box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
+
+				.item-text {
 					font-size: 30rpx;
 					font-weight: bold;
 					color: #FFFFFF;
 					margin: 30rpx 0 0 30rpx;
 				}
-				.t-icon{
-					margin-bottom: 30rpx;
-					margin-left: 20rpx;
+
+				.t-icon {
 					width: 100rpx;
 					height: 100rpx;
 				}
-				.item-number{
-					font-size: 80rpx;
-					margin-left: 30rpx;
+
+				.item-number {
+					font-size: 60rpx;
+					margin: 20rpx 0 10rpx 30rpx;
+					color: #FFFFFF;
+					font-weight: bold;
+				}
+			}
+
+			.data-box-item {
+				display: flex;
+				flex-direction: column;
+				background-color: #0052d4;
+				border-radius: 15rpx;
+				width: 340rpx;
+				height: 290rpx;
+				box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
+
+				.item-text {
+					font-size: 30rpx;
+					font-weight: bold;
+					color: #FFFFFF;
+					margin: 30rpx 0 0 30rpx;
+				}
+
+				.t-icon {
+					width: 100rpx;
+					height: 100rpx;
+				}
+
+				.item-number {
+					font-size: 60rpx;
+					margin: 20rpx 0 10rpx 30rpx;
 					color: #FFFFFF;
 					font-weight: bold;
 				}
 			}
 		}
 	}
-	.icon-text-item{
+
+	.icon-text-item {
 		font-size: 30rpx;
 		font-weight: bold;
 		color: #FFFFFF;

main.js

@@ -6,9 +6,8 @@ import App from './App'
 import {$http} from '@escook/request-miniprogram'
 //5.导入store的自定义模块
 import store from '@/information/store.js'
-//导入uView组件库
-import uView from '@/uni_modules/uview-ui'
-
+//导入uView组件库
+import uView from '@/uni_modules/uview-ui'
 Vue.use(uView)
 //挂载到uni.$http上方便调用
 uni.$http = $http

package.json

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

pages.json

@@ -121,24 +121,6 @@
 				"navigationStyle": "custom"
 			}
 
-		}, {
-			"path": "bar-chart/bar-chart",
-			"style": {
-				"navigationBarTitleText": "",
-				"enablePullDownRefresh": false,
-				// "navigationBarBackgroundColor":"#5fb7ff"
-				"navigationStyle": "custom"
-			}
-
-		}, {
-			"path": "mainradar-chart/mainradar-chart",
-			"style": {
-				"navigationBarTitleText": "",
-				"enablePullDownRefresh": false,
-				//"navigationBarBackgroundColor":"#ff6187"
-				"navigationStyle": "custom"
-			}
-
 		}]
 	}],
 	"preloadRule": {
@@ -154,10 +136,6 @@
 			"network": "all",
 			"packages": ["subpkg"]
 		},
-		"gradepkg/mainradar-chart/mainradar-chart": {
-			"network": "all",
-			"packages": ["subpkg"]
-		},
 		"gradepkg/line-chart/line-chart": {
 			"network": "all",
 			"packages": ["subpkg"]
@@ -166,10 +144,6 @@
 			"network": "all",
 			"packages": ["subpkg"]
 		},
-		"gradepkg/bar-chart/bar-chart": {
-			"network": "all",
-			"packages": ["subpkg"]
-		},
 		"gradepkg/area-chart/area-chart": {
 			"network": "all",
 			"packages": ["subpkg"]

pages/grade/grade.vue

@@ -28,7 +28,7 @@
 					<view class="item-container">
 						<view class="chart-name">
 							<view class="t-icon t-icon-xtubiao-"></view>
-							<text class="chart-name-text">科目分析</text>
+							<text class="chart-name-text">优劣科目分析</text>
 						</view>
 					</view>
 				</view>
@@ -37,7 +37,7 @@
 					<view class="item-container">
 						<view class="chart-name">
 							<view class="t-icon t-icon-xtubiao-3"></view>
-							<text class="chart-name-text">能力分析</text>
+							<text class="chart-name-text">考试能力分析</text>
 						</view>
 					</view>
 				</view>
@@ -46,20 +46,18 @@
 					<view class="item-container">
 						<view class="chart-name">
 							<view class="t-icon t-icon-xtubiao-6"></view>
-							<text class="chart-name-text">成绩分析</text>
+							<text class="chart-name-text">成绩占比分析</text>
 						</view>
 					</view>
 				</view>
 			</view>
-
-
-			<view class="mini-chart-item" @click="navMainRadarChart">
+			<!-- <view class="mini-chart-item" @click="navMainRadarChart">
 				<radar-mini-chart></radar-mini-chart>
 			</view>
 
 			<view class="mini-chart-item" @click="navBarChart">
 				<bar-mini-chart></bar-mini-chart>
-			</view>
+			</view> -->
 		</view>
 		<!-- 成绩表单 -->
 		<view class="table-card">
@@ -222,19 +220,6 @@
 					url: "/gradepkg/arcbar-chart/arcbar-chart"
 				})
 			},
-			//导航到条状图页
-			navBarChart() {
-				uni.navigateTo({
-					url: "/gradepkg/bar-chart/bar-chart"
-				})
-			},
-			//导航到学年雷达图页
-			navMainRadarChart(e) {
-				console.log(e);
-				uni.navigateTo({
-					url: "/gradepkg/mainradar-chart/mainradar-chart"
-				})
-			}
 
 		},
 		onLoad() {
@@ -271,7 +256,7 @@
 					margin: -10rpx 0;
 
 					.item-container {
-						border-radius: 20rpx;
+						border-radius: 16rpx;
 						background-color: #FFFFFF;
 						box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.05);
 						width: 340rpx;
@@ -301,7 +286,7 @@
 			}
 		}
 		.table-card{
-			margin: 40rpx 22rpx;
+			margin: 20rpx 22rpx;
 			border-radius: 16rpx;
 			display: flex;
 			align-items: center;

pages/home/home.vue

@@ -7,81 +7,151 @@
 		<view class="notice">
 			<u-notice-bar :text="notification" mode="closable" bgColor="#6495ED" color="#FFFFFF"></u-notice-bar>
 		</view>
-		<!-- 孩子全方位展示 -->
-		<view class="title">德</view>
-		<view class="card">
-			<view style="display: flex; justify-content: flex-start; width: 100%;">
-				<view class="t-icon t-icon-a-aixinxihuan"></view>
-				<view class="card-title">今日表现</view>
+		<!-- 卡片区域 -->
+		<view class="card-box">
+
+			<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="home-arcbar" :chartData="arcbarChartData" :loadingType="4"
+						:opts="arcbaropts" />
+				</view>
 			</view>
-		</view>
-		
-		<view class="title">智</view>
-		<view class="card">
-			
-			<view style="display: flex; justify-content: flex-start; width: 100%;">
-				<view class="t-icon t-icon-a-dengpaodengzhuyichuangzao"></view>
-				<view class="card-title">今日表现</view>
+
+			<view class="card-item">
+				<view class="card-info">
+					<view class="t-icon t-icon-xuexiaobaobei"></view>
+					<text class="info-text">今日自主学习</text>
+				</view>
 			</view>
-			
-			<view class="card-content">
-				<view>课程清单</view>
-				<view>任务清单</view>
-				<view>任务完成率</view>
+
+			<!-- 今日课程 -->
+			<view class="card-item">
+				<view class="card-info">
+					<view class="t-icon t-icon-chengchangdangan"></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">{{classNum}}</view>
+				</view>
+				<view class="u-page__item">
+					<u-collapse accordion :border="false">
+						<u-collapse-item title="孩子今日课程:">
+							<view style="display: flex; flex-wrap: wrap;">
+								<text class="u-collapse-content" v-for="(item,index) in classList"
+									:key="index">&nbsp;{{item}}||</text>
+							</view>
+						</u-collapse-item>
+						<u-collapse-item title="今日授课老师:">
+							<view style="display: flex; flex-wrap: wrap;">
+								<text class="u-collapse-content" v-for="(item,index) in teacherList"
+									:key="index">{{item}}||</text>
+							</view>
+						</u-collapse-item>
+					</u-collapse>
+				</view>
 			</view>
 
-		</view>
-		
-		<view class="title">体</view>
-		<view class="card">
-			<view style="display: flex; justify-content: flex-start; width: 100%;">
-				<view class="t-icon t-icon-a-jiangbeiyingjiashenglizhechengjiu"></view>
-				<view class="card-title">今日表现</view>
+			<view class="card-item">
+				<view class="card-info">
+					<view class="t-icon t-icon-jiankangshangbao"></view>
+					<text class="info-text">睡眠时间</text>
+				</view>
 			</view>
-		</view>
-		
-		<view class="title">美</view>
-		<view class="card">
-			<view style="display: flex; justify-content: flex-start; width: 100%;">
-				<view class="t-icon t-icon-a-sebansetiaosekayanse"></view>
-				<view class="card-title">今日表现</view>
+			
+			<!-- 今日打卡 -->
+			<view class="card-item" style="width: 100%;">
+				<view class="card-info">
+					<view class="t-icon t-icon-jiaoshidianming"></view>
+					<text class="info-text">今日打卡情况(今日迟到情况)</text>
+				</view>
+				<!-- 内容 -->
+				<view class="calendar_container">
+				    <zsyCalendar :sundayIndex="6" @change="change" :mode="'close'"/>
+				</view>
 			</view>
-		</view>
-		
-		<view class="title">劳</view>
-		<view class="card">
-			<view style="display: flex; justify-content: flex-start; width: 100%;">
-				<view class="t-icon t-icon-a-guangpanguangdie"></view>
-				<view class="card-title">今日表现</view>
+			
+			<view class="card-item">
+				<view class="card-info">
+					<view class="t-icon t-icon-jiankangshangbao"></view>
+					<text class="info-text">今日睡眠时间</text>
+				</view>
 			</view>
+			
+			<view class="card-item">
+				<view class="card-info">
+					<view class="t-icon t-icon-jiankangshangbao"></view>
+					<text class="info-text">今日睡眠时间</text>
+				</view>
+			</view>
+
 		</view>
-		
+
 	</view>
 </template>
 
 <script>
 	import {mapState} from 'vuex'
-	
+	//日历组件
+	import zsyCalendar from '@/components/zsy-calendar/zsy-calendar'
 	export default {
+		name: 'Calendar',
+		components: {
+		    zsyCalendar
+		},
 		data() {
 			return {
 				notification: '这里是滚动条的内容，显示重要通知等等消息',
-					
+				//今日课堂数
+				classNum: 5,
+				//今日课程
+				classList: ['数学', '语文', '英语', '体育', '思品'],
+				//授课老师
+				teacherList: ['张老师', '李老师', '王老师', '陈老师', '黄老师'],
+				//圆环进度条数据
+				arcbarChartData: {
+					"series": [{
+						"name": "完成率",
+						"data": 0.83,
+						"color": "#0052d4"
+					}]
+				},
+				//圆环进度条属性
+				arcbaropts: {},
+
 			}
 		},
-		
-		computed:{
-			...mapState('m_children',['childreninfo'])
-		},
 
-	
-		onShow() {
-			
+		computed: {
+			...mapState('m_children', ['childreninfo'])
+		},
+		onLoad() {
+			this.setOpts()
 		},
-		
 		methods: {
-			
-			
+			//设置更新
+			setOpts() {
+				//圆环图标题和副标题动态变化
+				let tmpopts = {
+					title: {
+						name: this.arcbarChartData.series[0].data * 100 + "%"
+					},
+					subtitle: {
+						name: this.arcbarChartData.series[0].name
+					}
+				}
+				this.arcbaropts = tmpopts;
+			},
+			// 日历选中日期改变事件回调
+			 change(e) {
+			     console.log(e)
+			 }
+
 		},
 	}
 </script>
@@ -89,42 +159,91 @@
 <style lang="scss">
 	.home-container {
 		height: 100%;
-		.notice{
+
+		.notice {
 			margin: -80rpx 20rpx 20rpx 20rpx;
 		}
-		.title{
-			margin: 20rpx;
-			padding: 8rpx 16rpx;
-			font-size: 32rpx;
-			font-weight: bold;
-			color: #FFFFFF;
-			background: -webkit-linear-gradient(right,#f1f3f5,#6495ed);
-			box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.05);
-		}
-		.card{
-			margin: 20rpx;
-			padding: 20rpx;
-			border-radius: 15rpx;
-			background-color: #FFFFFF;
-			box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.05);
+
+		.card-box {
 			display: flex;
-			flex-direction: column;
-			align-items: center;
-			
-			.card-title{
-				margin-left: 20rpx;
-				font-size: 26rpx;
-				font-weight: bold;
-				
-			}
-			.card-content{
+			flex-direction: row;
+			flex-wrap: wrap;
+			margin: 0 20rpx 0 20rpx;
+			justify-content: space-between;
+
+			.card-item {
+				margin: 12rpx 0;
 				display: flex;
 				flex-direction: column;
+				justify-content: space-between;
+				background-color: #FFFFFF;
+				box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.05);
+				border-radius: 16rpx;
+				width: 340rpx;
+				height: auto;
+
+				.card-info {
+					display: flex;
+					align-items: center;
+					padding: 15rpx;
+
+					.info-text {
+						font-size: 30rpx;
+						font-weight: bold;
+						color: #3B4144;
+						margin-left: 10rpx;
+					}
+				}
+
+				.card-content {
+					font-size: 50rpx;
+					margin: 10rpx 0 10rpx 25rpx;
+					color: #3B4144;
+					font-weight: bold;
+				}
 			}
 		}
 	}
-	.t-icon{
-		width:  40rpx;
+
+	.charts-box {
+		width: 100%;
+		height: 300rpx;
+		padding: 5rpx 5rpx 10rpx 5rpx;
+	}
+
+	.t-icon {
+		width: 40rpx;
 		height: 40rpx;
 	}
+
+	//折叠面板
+	.u-page {
+		padding: 0;
+
+		&__item {
+
+			&__title {
+				padding: 1px;
+				font-size: 1px;
+
+				&__slot-title {
+					color: $u-primary;
+					font-size: 13px;
+				}
+			}
+		}
+	}
+
+	.u-collapse-content {
+		color: $u-tips-color;
+		font-size: 14px;
+	}
+	//日历
+	.calendar_container {
+	    background-color: #FFFFFF;
+	    padding: 10rpx;
+			margin: 10rpx;
+	    box-sizing: border-box;
+	}
+
 </style>

pages/subscribe/subscribe.vue

@@ -6,7 +6,6 @@
 				<u-steps-item v-for="(item,index) in testList" :key="index" :title="item.title" :desc="item.desc"></u-steps-item>
 			</view>
 		</u-steps> -->
-
 	</view>
 </template>
 

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

@@ -51,14 +51,18 @@ const formatDateTime = (timeStamp, returnType) => {
 
 const cfu = {
 	//demotype为自定义图表类型，一般不需要自定义图表类型，只需要改根节点上对应的类型即可
-	"type": ["pie", "ring", "rose", "word", "funnel", "map", "arcbar", "line", "column", "bar", "area", "radar","gauge", "candle", "mix", "tline", "tarea", "scatter", "bubble", "demotype", "mainline", "mainradar",
-"mini-line", "mini-area", "mini-column", "mini-rose", "mini-bar", "mini-radar"
+	"type": ["pie", "ring", "rose", "word", "funnel", "map", "arcbar", "line", "column", "bar", "area", "radar",
+		"gauge", "candle", "mix", "tline", "tarea", "scatter", "bubble", "demotype", "mainline", "mainradar",
+		"mini-line", "mini-area", "mini-column", "mini-rose", "home-arcbar"
 	],
-	"range": ["饼状图", "圆环图", "玫瑰图", "词云图", "漏斗图", "地图", "圆弧进度条", "折线图", "柱状图", "条状图", "区域图", "雷达图", "仪表盘", "K线图","混合图", "时间轴折线", "时间轴区域", "散点图", "气泡图", "自定义类型", "首页趋势图", "首页雷达图", "折线缩略图", "区域缩略图", "柱状缩略图", "玫瑰缩略图", "条状图缩略图", "雷达缩略图"
+	"range": ["饼状图", "圆环图", "玫瑰图", "词云图", "漏斗图", "地图", "圆弧进度条", "折线图", "柱状图", "条状图", "区域图", "雷达图", "仪表盘", "K线图",
+		"混合图", "时间轴折线", "时间轴区域", "散点图", "气泡图", "自定义类型", "首页趋势图", "首页雷达图", "折线缩略图", "区域缩略图", "柱状缩略图", "玫瑰缩略图",
+		"条状图缩略图", "雷达缩略图", "首页进度圆环"
 	],
 	//增加自定义图表类型，如果需要categories，请在这里加入您的图表类型，例如最后的"demotype"
 	//自定义类型时需要注意"tline","tarea","scatter","bubble"等时间轴（矢量x轴）类图表，没有categories，不需要加入categories
-	"categories": ["line", "column", "bar", "area", "radar", "gauge", "candle", "mix", "demotype", "mainline", "mainradar", "mini-line", "mini-area", "mini-column", "mini-bar", "mini-radar"
+	"categories": ["line", "column", "bar", "area", "radar", "gauge", "candle", "mix", "demotype", "mainline",
+		"mainradar", "mini-line", "mini-area", "mini-column", "home-arcbar"
 	],
 	//instance为实例变量承载属性，不要删除
 	"instance": {},
@@ -134,9 +138,9 @@ const cfu = {
 		],
 		"padding": [
 			-20,
-			  0,
-			  0,
-			  0
+			0,
+			0,
+			0
 		],
 		"rotate": false,
 		"errorReload": true,
@@ -153,7 +157,7 @@ const cfu = {
 			"show": true,
 			"position": "bottom",
 			"float": "center",
-			
+
 		},
 		"extra": {
 			"rose": {
@@ -627,7 +631,7 @@ const cfu = {
 			"#c1cbf7",
 			"#3CA272",
 			"#5fb7ff"
-			
+
 		],
 		"padding": [
 			1,
@@ -1362,8 +1366,8 @@ const cfu = {
 			}
 		}
 	},
-	"mini-bar": {
-		"type": "bar",
+	"home-arcbar": {
+		"type": "arcbar",
 		"canvasId": "",
 		"canvas2d": false,
 		"background": "none",
@@ -1371,14 +1375,7 @@ const cfu = {
 		"timing": "easeOut",
 		"duration": 1000,
 		"color": [
-			"#0052d4",
-			"#ff5959"
-		],
-		"padding": [
-			0,
-			15,
-			-10,
-			5
+			"#0052d4"
 		],
 		"rotate": false,
 		"errorReload": true,
@@ -1391,131 +1388,35 @@ const cfu = {
 		"dataPointShape": false,
 		"dataPointShapeType": "solid",
 		"tapLegend": true,
-		"xAxis": {
-			"disabled": true,
-			"axisLine": false,
-			"axisLineColor": "#CCCCCC",
-			"calibration": false,
-			"fontColor": "#666666",
-			"fontSize": 13,
-			"rotateLabel": false,
-			"itemCount": 5,
-			"boundaryGap": "justify",
-			"disableGrid": true,
-			"gridColor": "#CCCCCC",
-			"gridType": "solid",
-			"dashLength": 4,
-			"gridEval": 1,
-			"scrollShow": false,
-			"scrollAlign": "left",
-			"scrollColor": "#A6A6A6",
-			"scrollBackgroundColor": "#EFEBEF",
-			"min": 0,
-			"format": ""
-		},
-		"yAxis": {
-			"disabled": true,
-			"disableGrid": true,
-			"splitNumber": 5,
-			"gridType": "solid",
-			"dashLength": 8,
-			"gridColor": "#CCCCCC",
-			"padding": 10,
-			"showTitle": false,
-			"data": []
+		"title": {
+			"name": "百分比",
+			"fontSize": 20,
+			"color": "#0052d4",
+			"offsetX": 0,
+			"offsetY": 0
 		},
-		"legend": {
-			"show": false,
+		"subtitle": {
+			"name": "默认标题",
+			"fontSize": 15,
+			"color": "#666666",
+			"offsetX": 0,
+			"offsetY": 0
 		},
 		"extra": {
-			"bar": {
-				"type": "group",
-				"width": 10,
-				"seriesGap": 2,
-				"categoryGap": 3,
-				"barBorderCircle": false,
-				"barBorderRadius": [
-					10,
-					10,
-					10,
-					10
-				],
-				"linearType": "opacity",
-				"linearOpacity": 0.7,
-				"colorStop": 0,
-				"activeBgColor": "#FFFFFF",
-				"activeBgOpacity": 0,
-				"meterBorde": 1,
-				"meterFillColor": "#FFFFFF"
-			},
-			"tooltip": {
-				"showBox": false,
-				"showArrow": false,
-				"showCategory": false,
-				
-			},
-			"markLine": {
-				"type": "solid",
-				"dashLength": 4,
-				"data": []
+			"arcbar": {
+				"type": "circle",
+				"width": 12,
+				"backgroundColor": "#E9E9E9",
+				"startAngle": 0.75,
+				"endAngle": 0.25,
+				"gap": 2,
+				"centerX": 0,
+				"centerY": 0,
+				"linearType": "none"
 			}
 		}
-	},
-	"mini-radar":{
-	    "type": "radar",
-	    "canvasId": "",
-	    "canvas2d": false,
-	    "background": "none",
-	    "animation": true,
-	    "timing": "easeOut",
-	    "duration": 1000,
-	    "color": [
-	        "#0052d4",
-	        "#ff5959",
-	        "#f9b248"
-	    ],
-	    "padding": [
-	        -40,
-	        -35,
-	        -35,
-	        -35
-	    ],
-	    "rotate": false,
-	    "errorReload": true,
-	    "fontSize": 13,
-	    "fontColor": "#666666",
-	    "enableScroll": false,
-	    "touchMoveLimit": 60,
-	    "enableMarkLine": false,
-	    "dataLabel": false,
-	    "dataPointShape": false,
-	    "dataPointShapeType": "solid",
-	    "tapLegend": true,
-	    "legend": {
-	        "show": false,
-	        
-	    },
-	    "extra": {
-	        "radar": {
-	            "gridType": "radar",
-	            "gridColor": "#FFFFFF",
-	            "gridCount": 3,
-	            "labelColor": "#FFFFFF",
-	            "opacity": 0.4,
-	            "border": true,
-	            "borderWidth": 2,
-	            "max": 1
-	        },
-	        "tooltip": {
-	            "showBox": false,
-	            "showArrow": false,
-	            "showCategory": false,
-	            "borderWidth": 0,
-	            
-	        }
-	    }
-	},
-	
+	}
+
 }
 
 export default cfu;

uni_modules/uview-ui/components/u-collapse-item/u-collapse-item.vue

@@ -217,7 +217,8 @@
 			&__text {
 				padding: 12px 15px;
 				color: $u-content-color;
-				font-size: 14px;
+				font-weight: 600;
+				font-size: 13px;
 				line-height: 18px;
 			}
 		}