4.2

common/data.js

@@ -1,276 +1,520 @@
-const subjectDataList = [
-	{
-		categories: [
-			"开学考试",
-			"第一月考",
-			"第二月考",
-			"期中考试",
-			"第三月考",
-			"期末考试"
-		],
-		series: [{
-				"name": "语文成绩",
-				"data": [
-					90,
-					95,
-					92,
-					80,
-					88,
-					99
-				]
-			},
-			{
-				"name": "班级平均",
-				"data": [
-					85,
-					88,
-					84,
-					42,
-					93,
-					89
-				]
-			},
-			{
-				"name": "年纪平均",
-				"data": [
-					88,
-					79,
-					77,
-					74,
-					85,
-					59
-				]
-			}
-		],
-	},
-	
-	{
-		categories: [
-			"开学考试",
-			"第一月考",
-			"第二月考",
-			"期中考试",
-			"第三月考",
-			"期末考试"
-		],
-		series: [{
-				"name": "数学成绩",
-				"data": [
-					90,
-					95,
-					62,
-					100,
-					88,
-					99
-				]
-			},
-			{
-				"name": "班级平均",
-				"data": [
-					85,
-					88,
-					84,
-					92,
-					73,
-					89
-				]
-			},
-			{
-				"name": "年纪平均",
-				"data": [
-					88,
-					99,
-					77,
-					74,
-					85,
-					89
-				]
-			}
-		],
-	},
-	
-	{
-		categories: [
-			"开学考试",
-			"第一月考",
-			"第二月考",
-			"期中考试",
-			"第三月考",
-			"期末考试"
-		],
-		series: [{
-				"name": "英语成绩",
-				"data": [
-					90,
-					75,
-					92,
-					100,
-					88,
-					99
-				]
-			},
-			{
-				"name": "班级平均",
-				"data": [
-					85,
-					48,
-					84,
-					92,
-					93,
-					89
-				]
-			},
-			{
-				"name": "年纪平均",
-				"data": [
-					88,
-					99,
-					77,
-					74,
-					85,
-					86
-				]
-			}
-		],
-	},
-	
-	{
-		categories: [
-			"开学考试",
-			"第一月考",
-			"第二月考",
-			"期中考试",
-			"第三月考",
-			"期末考试"
-		],
-		series: [{
-				"name": "科学成绩",
-				"data": [
-					90,
-					95,
-					92,
-					50,
-					88,
-					99
-				]
-			},
-			{
-				"name": "班级平均",
-				"data": [
-					85,
-					88,
-					84,
-					92,
-					63,
-					89
-				]
-			},
-			{
-				"name": "年纪平均",
-				"data": [
-					78,
-					79,
-					77,
-					74,
-					85,
-					89
-				]
-			}
-		],
-	},
-	
-	{
-		categories: [
-			"开学考试",
-			"第一月考",
-			"第二月考",
-			"期中考试",
-			"第三月考",
-			"期末考试"
-		],
-		series: [{
-				"name": "体育成绩",
-				"data": [
-					90,
-					95,
-					92,
-					70,
-					88,
-					99
-				]
-			},
-			{
-				"name": "班级平均",
-				"data": [
-					85,
-					88,
-					84,
-					92,
-					83,
-					89
-				]
-			},
-			{
-				"name": "年纪平均",
-				"data": [
-					88,
-					79,
-					87,
-					74,
-					55,
-					89
-				]
-			}
-		],
-	},
-	
-	{
-		categories: [
-			"开学考试",
-			"第一月考",
-			"第二月考",
-			"期中考试",
-			"第三月考",
-			"期末考试"
-		],
-		series: [{
-				"name": "思品成绩",
-				"data": [
-					90,
-					95,
-					92,
-					60,
-					88,
-					99
-				]
-			},
-			{
-				"name": "班级平均",
-				"data": [
-					85,
-					88,
-					84,
-					92,
-					93,
-					79
-				]
-			},
-			{
-				"name": "年纪平均",
-				"data": [
-					88,
-					79,
-					77,
-					74,
-					55,
-					89
-				]
-			}
-		],
-	},
-
-]
-
-module.exports = {
-	data: subjectDataList
-}
+const subjectDataList = [
+	{
+		categories: [
+			"开学考试",
+			"第一月考",
+			"第二月考",
+			"期中考试",
+			"第三月考",
+			"期末考试"
+		],
+		series: [{
+				"name": "语文成绩",
+				"data": [
+					90,
+					95,
+					72,
+					89,
+					88,
+					84
+				]
+			},
+			{
+				"name": "班级平均",
+				"data": [
+					85,
+					98,
+					84,
+					72,
+					83,
+					89
+				]
+			},
+			{
+				"name": "年纪平均",
+				"data": [
+					88,
+					79,
+					88,
+					74,
+					81,
+					92
+				]
+			}
+		],
+		categories: [
+			"开学考试",
+			"第一月考",
+			"第二月考",
+			"期中考试",
+			"第三月考",
+			"期末考试"
+		],
+		series: [{
+				"name": "语文成绩",
+				"data": [
+					90,
+					95,
+					92,
+					80,
+					88,
+					99
+				]
+			},
+			{
+				"name": "班级平均",
+				"data": [
+					85,
+					88,
+					84,
+					42,
+					93,
+					89
+				]
+			},
+			{
+				"name": "年纪平均",
+				"data": [
+					88,
+					79,
+					77,
+					74,
+					85,
+					59
+				]
+			}
+		],
+	},
+	{
+		categories: [
+			"开学考试",
+			"第一月考",
+			"第二月考",
+			"期中考试",
+			"第三月考",
+			"期末考试"
+		],
+		series: [{
+				"name": "数学成绩",
+				"data": [
+					90,
+					95,
+					62,
+					100,
+					88,
+					99
+				]
+			},
+			{
+				"name": "班级平均",
+				"data": [
+					85,
+					88,
+					84,
+					92,
+					73,
+					89
+				]
+			},
+			{
+				"name": "年纪平均",
+				"data": [
+					88,
+					99,
+					77,
+					74,
+					85,
+					89
+				]
+			}
+		],
+	},
+	{
+		categories: [
+			"开学考试",
+			"第一月考",
+			"第二月考",
+			"期中考试",
+			"第三月考",
+			"期末考试"
+		],
+		series: [{
+				"name": "英语成绩",
+				"data": [
+					90,
+					75,
+					92,
+					100,
+					88,
+					99
+				]
+			},
+			{
+				"name": "班级平均",
+				"data": [
+					85,
+					48,
+					84,
+					92,
+					93,
+					89
+				]
+			},
+			{
+				"name": "年纪平均",
+				"data": [
+					88,
+					99,
+					77,
+					74,
+					85,
+					86
+				]
+			}
+		],
+	},
+	{
+		categories: [
+			"开学考试",
+			"第一月考",
+			"第二月考",
+			"期中考试",
+			"第三月考",
+			"期末考试"
+		],
+		series: [{
+				"name": "科学成绩",
+				"data": [
+					90,
+					95,
+					92,
+					50,
+					88,
+					99
+				]
+			},
+			{
+				"name": "班级平均",
+				"data": [
+					85,
+					88,
+					84,
+					92,
+					63,
+					89
+				]
+			},
+			{
+				"name": "年纪平均",
+				"data": [
+					78,
+					79,
+					77,
+					74,
+					85,
+					89
+				]
+			}
+		],
+	},
+	{
+		categories: [
+			"开学考试",
+			"第一月考",
+			"第二月考",
+			"期中考试",
+			"第三月考",
+			"期末考试"
+		],
+		series: [{
+				"name": "体育成绩",
+				"data": [
+					90,
+					95,
+					92,
+					70,
+					88,
+					99
+				]
+			},
+			{
+				"name": "班级平均",
+				"data": [
+					85,
+					88,
+					84,
+					92,
+					83,
+					89
+				]
+			},
+			{
+				"name": "年纪平均",
+				"data": [
+					88,
+					79,
+					87,
+					74,
+					55,
+					89
+				]
+			}
+		],
+	},
+	{
+		categories: [
+			"开学考试",
+			"第一月考",
+			"第二月考",
+			"期中考试",
+			"第三月考",
+			"期末考试"
+		],
+		series: [{
+				"name": "思品成绩",
+				"data": [
+					90,
+					95,
+					92,
+					60,
+					88,
+					99
+				]
+			},
+			{
+				"name": "班级平均",
+				"data": [
+					85,
+					88,
+					84,
+					92,
+					93,
+					79
+				]
+			},
+			{
+				"name": "年纪平均",
+				"data": [
+					88,
+					79,
+					77,
+					74,
+					55,
+					89
+				]
+			}
+		],
+	},
+]
+
+const subjectRank = [
+	{
+		name: "语文",
+		categories: [
+			"开学考试",
+			"第一月考",
+			"第二月考",
+			"期中考试",
+			"第三月考",
+			"期末考试"
+		],
+		series: [{
+				"name": "超过年级中",
+				"data": [
+					90,
+					95,
+					82,
+					76,
+					88,
+					99
+				]
+			},
+			{
+				"name": "超过班级中",
+				"data": [
+					95,
+					58,
+					64,
+					92,
+					93,
+					79
+				]
+			}
+		]
+	},
+	{
+		name: "数学",
+		categories: [
+			"开学考试",
+			"第一月考",
+			"第二月考",
+			"期中考试",
+			"第三月考",
+			"期末考试"
+		],
+		series: [{
+				"name": "超过年级中",
+				"data": [
+					90,
+					95,
+					82,
+					76,
+					88,
+					99
+				]
+			},
+			{
+				"name": "超过班级中",
+				"data": [
+					95,
+					58,
+					88,
+					92,
+					93,
+					79
+				]
+			}
+		]
+	},
+	{
+		name: "英语",
+		categories: [
+			"开学考试",
+			"第一月考",
+			"第二月考",
+			"期中考试",
+			"第三月考",
+			"期末考试"
+		],
+		series: [{
+				"name": "超过年级中",
+				"data": [
+					90,
+					74,
+					82,
+					66,
+					77,
+					99
+				]
+			},
+			{
+				"name": "超过班级中",
+				"data": [
+					95,
+					89,
+					64,
+					75,
+					93,
+					92
+				]
+			}
+		]
+	},
+	{
+		name: "思品",
+		categories: [
+			"开学考试",
+			"第一月考",
+			"第二月考",
+			"期中考试",
+			"第三月考",
+			"期末考试"
+		],
+		series: [{
+				"name": "超过年级中",
+				"data": [
+					80,
+					91,
+					82,
+					76,
+					55,
+					99
+				]
+			},
+			{
+				"name": "超过班级中",
+				"data": [
+					95,
+					92,
+					69,
+					92,
+					93,
+					55
+				]
+			}
+		]
+	},
+	{
+		name: "体育",
+		categories: [
+			"开学考试",
+			"第一月考",
+			"第二月考",
+			"期中考试",
+			"第三月考",
+			"期末考试"
+		],
+		series: [{
+				"name": "超过年级中",
+				"data": [
+					90,
+					33,
+					82,
+					45,
+					88,
+					99
+				]
+			},
+			{
+				"name": "超过班级中",
+				"data": [
+					95,
+					99,
+					64,
+					77,
+					93,
+					79
+				]
+			}
+		]
+	},
+	{
+		name: "科学",
+		categories: [
+			"开学考试",
+			"第一月考",
+			"第二月考",
+			"期中考试",
+			"第三月考",
+			"期末考试"
+		],
+		series: [{
+				"name": "超过年级中",
+				"data": [
+					50,
+					95,
+					55,
+					76,
+					66,
+					99
+				]
+			},
+			{
+				"name": "超过班级中",
+				"data": [
+					30,
+					58,
+					64,
+					92,
+					22,
+					79
+				]
+			}
+		]
+	},
+]
+
+module.exports = {
+	subjectData: subjectDataList,
+	rankData: subjectRank,
+}

components/top-box/top-box.vue

@@ -70,7 +70,7 @@
 				capsuleMiddle: 0,
 				capsuleWidth: 0,
 				//订阅背景图片
-				backgroundImage: 'https://th.bing.com/th/id/R.fd7b3bf8eceed0825d59e69e3320a4f7?rik=Qg19x9HsNXfKNg&riu=http%3a%2f%2fcdn.paperhi.com%2f1680x1050%2f20130317%2fpattern+digital+fractals+grid+squares+1680x1050+wallpaper_www.paperhi.com_61.jpg&ehk=zpa%2fcYdbzafWxyxwZQE5vSlEHr%2b5ZDEY0SSbWXCP080%3d&risl=&pid=ImgRaw&r=0',
+				backgroundImage: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.Vg_hgwLC0hRD46zTHmCD8wHaHr?pid=ImgDet&rs=1',
 			};
 		},
 		computed: {

gradepkg/general-chart/general-chart.vue

@@ -106,7 +106,7 @@
 				//newValue为变化后的新值
 				handler(newValue) {
 					//拿到对应图表数据
-					let subjectChartData = this.getdata.data.find(x => x.series[0].name.includes(newValue))
+					let subjectChartData = this.getdata.find(x => x.series[0].name.includes(newValue))
 					this.updateSubjectComparison(subjectChartData)
 				},
 				//immediate 属性用来声明此监听器是否在页面初次加载完毕后立即调用
@@ -115,8 +115,8 @@
 		},
 		data() {
 			return {
-				//假数据
-				getdata: getdata,
+				//模拟数据
+				getdata: getdata.subjectData,
 				//科目切换
 				setSubjectPicker: false,
 				//数据展示切换
@@ -142,12 +142,14 @@
 			//设置孩子科目
 			setSubject() {
 				//通过table获取孩子考试科目
-				if (this.subjectList.length == 0) {
+				if (this.subjectList.length === 0) {
 					let res = [this.getSubjectList]
 					this.subjectList = res
-					if (this.subjectCurrent == '')
+					if (this.subjectCurrent === '')
 						this.subjectCurrent = this.getSubjectList[0]
-				}
+				}
+				console.log('111',this.subjectList);
+				console.log('222',this.subjectCurrent);
 			},
 			//设置默认图表模式
 			setScoreType() {
@@ -172,7 +174,8 @@
 				uni.$showMsg('取消选择', 1000)
 				this.setSubjectPicker = false
 				this.switchScoreTypePicker = false
-			},
+			},
+			//提示信息
 			tooltipMsg() {
 				uni.$showMsg('点击图表展示更多信息', 1500)
 			}

gradepkg/rank-chart/rank-chart.vue

@@ -44,27 +44,62 @@
 			<view class="chart-name">
 				<view class="t-icon t-icon-forest"></view>
 				<text class="chart-name-text">单科排行占比走势对比</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.rankChart.semesterSubjectRank" :loadingType="4"
 					tooltipFormat='tooltipPercent' :canvas2d="true" canvasId="canvasId931870" />
 			</view>
 		</view>
+		
+		<!-- 科目选择 -->
+		<u-picker :show="setSubjectPicker" :columns="subjectList" @confirm="pickerConfirm" @cancel="pickerCancel"
+			:closeOnClickOverlay="true" :immediateChange="true">
+		</u-picker>
 	</view>
 </template>
 
 <script>
+	import getdata from '../../common/data.js'
 	import {
-		mapState
+		mapState,
+		mapMutations,
+		mapGetters
 	} from 'vuex'
 
 	export default {
 		computed: {
 			...mapState('m_children', ['childreninfo', 'semester']),
-			...mapState('m_chart', ['gradeData'])
+			...mapState('m_chart', ['gradeData']),
+			...mapGetters('m_chart', ['getSubjectList'])
+		},
+		watch: {
+			subjectCurrent:{
+				handler(newValue){
+					let subjectChartData = this.getdata.find(x=>x.name.includes(newValue))
+					let Data = {categories:[],series:[],}
+					Data.categories = subjectChartData.categories
+					Data.series = subjectChartData.series
+					this.updateSemesterSubjectRank(Data)
+				},
+				immediate: true
+			}
 		},
 		data() {
 			return {
+				//模拟数据
+				getdata: getdata.rankData,
+				//科目切换
+				setSubjectPicker: false,
+				//当前选择科目
+				subjectCurrent: '',
+				//科目列表
+				subjectList: [],
+				//分析模块数据
 				analysisData: 
 				[{
 					title: '学期平均排行超年级:',
@@ -79,7 +114,34 @@
 				
 			};
 		},
+		onLoad() {
+			this.setSubject()
+			this.getData()
+		},
 		methods: {
+			...mapMutations('m_chart', ['updateSemesterSubjectRank']),
+			//设置孩子科目
+			setSubject() {
+				//通过table获取孩子考试科目
+				if (this.subjectList.length === 0) {
+					let res = [this.getSubjectList]
+					this.subjectList = res
+					if (this.subjectCurrent === '')
+						this.subjectCurrent = this.getSubjectList[0]
+				}
+			},
+			//切换科目
+			pickerConfirm(e) {
+				//改变subjectCurrent并由监听器处理数据图表同步改变
+				this.subjectCurrent = e.value[0]
+				uni.$showMsg('切换完成', 1000)
+				this.setSubjectPicker = false
+			},
+			//取消picker
+			pickerCancel() {
+				uni.$showMsg('取消选择', 1000)
+				this.setSubjectPicker = false
+			},
 			//获得分析模块数据
 			getData() {
 				//学期平均排行占比
@@ -99,9 +161,6 @@
 					.rankChart.semesterRank.series[0].data.length)
 			}
 		},
-		onLoad() {
-			this.getData()
-		}
 	}
 </script>
 

information/chart.js

@@ -63,7 +63,6 @@ export default {
 					'科学': 99,
 				}
 			],
-
 			//学期折线图数据
 			semesterLineChart: {
 				//总成绩
@@ -112,50 +111,7 @@ export default {
 					],
 				},
 				//单科与平均对比
-				singleAverageComparison: {
-					categories: [
-						"开学考试",
-						"第一月考",
-						"第二月考",
-						"期中考试",
-						"第三月考",
-						"期末考试"
-					],
-					series: [{
-							"name": "数学成绩",
-							"data": [
-								90,
-								95,
-								92,
-								100,
-								88,
-								99
-							]
-						},
-						{
-							"name": "班级平均",
-							"data": [
-								85,
-								88,
-								84,
-								92,
-								93,
-								89
-							]
-						},
-						{
-							"name": "年纪平均",
-							"data": [
-								88,
-								79,
-								77,
-								74,
-								85,
-								89
-							]
-						}
-					],
-				},
+				singleAverageComparison: '',
 				//单科对比
 				subjectComparison: {
 					categories: [
@@ -322,39 +278,8 @@ export default {
 						}
 					]
 				},
-				semesterSubjectRank: {
-					categories: [
-						"开学考试",
-						"第一月考",
-						"第二月考",
-						"期中考试",
-						"第三月考",
-						"期末考试"
-					],
-					series: [{
-							"name": "超过年级中",
-							"data": [
-								90,
-								95,
-								82,
-								76,
-								88,
-								99
-							]
-						},
-						{
-							"name": "超过班级中",
-							"data": [
-								95,
-								58,
-								64,
-								92,
-								93,
-								79
-							]
-						}
-					]
-				},
+				//单科学期排名
+				semesterSubjectRank: '',
 			},
 			//优势科目分析
 			advantageRoseChart: {
@@ -628,6 +553,9 @@ export default {
 		updateSubjectComparison(state, singleAverageComparison) {
 			state.gradeData.semesterLineChart.singleAverageComparison = singleAverageComparison
 		},
+		updateSemesterSubjectRank(state, semesterSubjectRank){
+			state.gradeData.rankChart.semesterSubjectRank = semesterSubjectRank
+		},
 		
 		//更新今日模块数据
 		updateStudyColumn(state, studyColumn) {

information/children.js

@@ -96,6 +96,20 @@ export default {
 				'周五': '思品',
 			}
 		],
+		//打卡记录
+		records: [{
+			date: 15,
+			month: 4,
+			year: 2022
+		}, {
+			date: 16,
+			month: 4,
+			year: 2022
+		}, {
+			date: 17,
+			month: 4,
+			year: 2022
+		}],
 
 	}),
 	//模块方法(修改数据)

pages/grade/grade.vue

@@ -63,7 +63,7 @@
 				<view class="chart-container" @click="navAbility">
 					<view class="chart-name">
 						<view :class="icon.Ability"></view>
-						<text class="chart-name-text">个人能力分析</text>
+						<text class="chart-name-text">考试能力分析</text>
 					</view>
 					<view class="charts-box">
 						<qiun-data-charts type="mini-column" :chartData="gradeData.abilityChart.importantAnalyse"

pages/home/home.vue

@@ -14,9 +14,10 @@
 				<view class="card-info" style="padding-bottom: 30rpx;">
 					<view :class="icon.class"></view>
 					<text class="info-text">今日课程</text>
-					<view style="display: flex; align-items: center;margin: 0 20rpx 0 auto;">
-						<u-icon name="list-dot" @click="navClass"></u-icon>
-						<view class="msg" style="margin-left: 10rpx; font-size: 26rpx;" @click="navClass">课程列表</view>
+					<view style="display: flex; align-items: center;margin: 0 10rpx 0 auto;">
+						<view class="t-icon t-icon-liebiao" style="width: 30rpx; height: 30rpx;"
+							@click="navClass"></view>
+						<view class="msg" style="margin-left: 10rpx; font-size: 14px;color: #3C9CFF;" @click="navClass">课程列表</view>
 					</view>
 
 				</view>

pages/homework/homework.vue

@@ -64,15 +64,16 @@
 							<view class="t-icon t-icon-shenhe"></view>
 							<view class="item-text">今日已完成</view>
 							<!-- 完成列表展示所有已完成的评测作业和活动信息 -->
-							<view style="display: flex; align-items: center;margin: 0 20rpx 0 auto;">
-								<u-icon name="list-dot" @click="navFinish"></u-icon>
-								<view class="msg" style="margin-left: 10rpx;" @click="navFinish">完成列表</view>
+							<view style="display: flex; align-items: center;margin: 0 10rpx 0 auto;">
+								<view class="t-icon t-icon-liebiao" style="width: 30rpx; height: 30rpx;"
+									@click="navFinish"></view>
+								<view class="msg" @click="navFinish" style="color: #3C9CFF;">完成列表</view>
 							</view>
 						</view>
 						<view style="margin-bottom: 20rpx;">
 							<view class="block-box" v-for="(j,y) in item.detail.finishData" :key="y">
-								<view class="index"></view>
-								<view class="class-block" style="width: 90%;">
+								<view class="index" style="height: 100rpx;"></view>
+								<view class="class-block" style="height: 100rpx;width: 90%;">
 									<view class="block-title">{{j.name}}</view>
 									<view class="block-subtitle">科目:</view>
 									<view class="block-tag-box">
@@ -92,16 +93,17 @@
 							<view class="t-icon t-icon-daiban"></view>
 							<view class="item-text">{{item.detail.title}}</view>
 							<!-- 详情列表展示(评测,活动或者作业)信息 -->
-							<view style="display: flex; align-items: center;margin: 0 20rpx 0 auto;">
-								<u-icon name="list-dot" @click="navData"></u-icon>
-								<view class="msg" style="margin-left: 10rpx;" @click="navData">详情列表</view>
+							<view style="display: flex; align-items: center;margin: 0 10rpx 0 auto;">
+								<view class="t-icon t-icon-liebiao" style="width: 30rpx; height: 30rpx;"
+									@click="navData"></view>
+								<view class="msg" @click="navData" style="color: #3C9CFF;">详情列表</view>
 							</view>
 						</view>
 
 						<view style="margin-bottom: 20rpx;">
 							<view class="block-box" v-for="(i,x) in item.detail.data" :key="x">
-								<view class="index"></view>
-								<view class="class-block" style="width: 90%;">
+								<view class="index" style="height: 100rpx;"></view>
+								<view class="class-block" style="height: 100rpx; width: 90%;">
 									<view class="block-title">{{i.name}}</view>
 									<view class="block-tag-box">
 										<view class="block-tag">{{i.subject}}</view>
@@ -366,17 +368,17 @@
 				let activityDataTemp = JSON.parse(JSON.stringify(temp))
 				this.updateActivityColumn(activityDataTemp)
 			},
-			navFinish(){
+			navFinish() {
 				uni.navigateTo({
 					url: '/subpkg/homeworkfinish/homeworkfinish'
 				})
 			},
-			navData(){
+			navData() {
 				uni.navigateTo({
 					url: '/subpkg/homeworkdata/homeworkdata'
 				})
 			}
-			
+
 		}
 	}
 </script>
@@ -397,7 +399,7 @@
 			display: flex;
 			justify-content: space-around;
 			margin: 20rpx auto 20rpx auto;
-			height: 250rpx;
+			height: 210rpx;
 			width: 96%;
 			// background: linear-gradient(to right, #ff95007a,#ff8419);
 			border-radius: $card-border-radius;
@@ -423,7 +425,6 @@
 
 			.image {
 				position: relative;
-				top: -30rpx;
 				right: -30rpx;
 				height: 300rpx;
 				width: 300rpx;
@@ -432,6 +433,7 @@
 				z-index: 2;
 			}
 		}
+
 		//头部卡片
 		.box {
 			display: flex;
@@ -494,9 +496,10 @@
 		align-items: center;
 		margin-left: 20rpx;
 	}
+
 	.msg {
 		color: $color-title;
-		margin-left: 30rpx;
+		margin-left: 10rpx;
 		font-size: 28rpx;
 	}
 </style>

subpkg/calendarmsg/calendarmsg.vue

@@ -2,31 +2,56 @@
 	<view>
 		<back :text="'今日打卡'"></back>
 
-		<view class="card">
-			<view class="calendar_container">
-				<zsyCalendar :sundayIndex="6" @change="dateHandler" />
+		<view class="card-box">
+
+			<view class="card-item">
+				<view class="total">
+					<view class="total-title">本月汇总</view>
+					<view class="total-content">
+						<view class="number-box">
+							<view class="number">15</view>
+							<view class="number-detail">打卡次数</view>
+						</view>
+						<view class="number-box">
+							<view class="number">2</view>
+							<view class="number-detail">迟到次数</view>
+						</view>
+						<view class="number-box">
+							<view class="number">优秀</view>
+							<view class="number-detail">本月出勤质量</view>
+						</view>
+					</view>
+				</view>
 			</view>
-			<view class="state-box">
-				<view class="state">
-					<view class="state-text">{{attendance}}</view>
+
+			<view class="card-item">
+				<view class="calendar_container">
+					<zsyCalendar :sundayIndex="6" @change="dateHandler"/>
 				</view>
-				<view class="msg-box">
-					<view class="flex">
-						<text class="msg-text" style="font-weight: normal;font-size: 28rpx;">打卡时间:</text>
-						<text class="msg-text">{{attendanceTime}}</text>
+				<view class="state-box">
+					<view class="state">
+						<view class="state-text">{{attendance}}</view>
 					</view>
-					<view class="flex">
-						<text class="msg-text" style="font-weight: normal;font-size: 28rpx;">本周出勤质量:</text>
-						<text class="msg-text">{{attendanceQuality}}</text>
+					<view class="msg-box">
+						<view class="flex">
+							<text class="msg-text" style="font-weight: normal;font-size: 28rpx;">打卡时间:</text>
+							<text class="msg-text">{{attendanceTime}}</text>
+						</view>
+						<view class="flex">
+							<text class="msg-text" style="font-weight: normal;font-size: 28rpx;">本周出勤质量:</text>
+							<text class="msg-text">{{attendanceQuality}}</text>
+						</view>
+
 					</view>
-					
 				</view>
 			</view>
 		</view>
+
 	</view>
 </template>
 
 <script>
+	import getdata from '../../common/data.js'
 	import zsyCalendar from '@/subpkg/zsy-calendar/zsy-calendar.vue'
 	export default {
 		name: 'Calendar',
@@ -35,6 +60,7 @@
 		},
 		data() {
 			return {
+				//当日打卡信息
 				attendance: '',
 				attendanceTime: '',
 				attendanceQuality: ''
@@ -55,62 +81,108 @@
 </script>
 
 <style lang="scss">
-	.card {
-		margin: 14rpx 20rpx;
+	.card-box {
 		display: flex;
-		flex-direction: column;
-		align-items: center;
-		background-color: #FFF;
-		border-radius: $card-border-radius;
+		flex-flow: column wrap;
+		margin: 0 20rpx 0 20rpx;
+		justify-content: space-between;
 
-		//日历组件
-		.calendar_container {
-			height: 100%;
+		.card-item {
+			margin: 2% 0;
 			width: 100%;
+			height: auto;
+			display: flex;
+			flex-direction: column;
+			justify-content: space-around;
 			background-color: #FFF;
-			margin: 0 20rpx;
-			box-sizing: border-box;
 			border-radius: $card-border-radius;
+
+			//日历组件
+			.calendar_container {
+				height: 100%;
+				width: 100%;
+				background-color: #FFF;
+				margin: 0 auto;
+				box-sizing: border-box;
+				border-radius: $card-border-radius;
+			}
 		}
+	}
 
-		.state-box {
+	.total {
+		height: 250rpx;
+		width: 100%;
+		
+		.total-title {
+			font-size: 32rpx;
+			font-weight: bold;
+			color: #2C2C2C;
+			margin: 30rpx 30rpx 0rpx 30rpx;
+		}
+		.total-content{
 			display: flex;
 			align-items: center;
-			height: 200rpx;
-			width: 100%;
-
-			.state {
+			justify-content: space-around;
+			height: 175rpx;
+			.number-box{
 				display: flex;
+				flex-direction: column;
 				align-items: center;
-				justify-content: center;
-				margin: 20rpx;
-				border-radius: 100%;
-				height: 130rpx;
-				width: 130rpx;
-				background-color: #3C9CFF;
-
-				.state-text {
-					font-size: 28rpx;
+				.number{
+					font-size: 46rpx;
 					font-weight: bold;
-					color: #FFF;
+					color: #2C2C2C;
 				}
-			}
-			.msg-box{
-				display: flex;
-				flex-direction: column;
-				justify-content: space-around;
-				height: 150rpx;
-				width: auto;
-				.msg-text{
-					color: $color-title;
-					font-weight: bold;
-					font-size: 36rpx;
-					margin-left: 20rpx;
+				.number-detail{
+					margin-top: 10rpx;
+					font-size: 28rpx;
+					color: #afafaf;
 				}
 			}
+			
+		}
+	}
+
+	.state-box {
+		display: flex;
+		align-items: center;
+		height: 200rpx;
+		width: 100%;
+
+		.state {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			margin: 20rpx;
+			border-radius: 100%;
+			height: 130rpx;
+			width: 130rpx;
+			background-color: #3C9CFF;
+
+			.state-text {
+				font-size: 28rpx;
+				font-weight: bold;
+				color: #FFF;
+			}
+		}
+
+		.msg-box {
+			display: flex;
+			flex-direction: column;
+			justify-content: space-around;
+			height: 150rpx;
+			width: auto;
+
+			.msg-text {
+				color: #2C2C2C;
+				font-weight: bold;
+				font-size: 36rpx;
+				margin-left: 20rpx;
+			}
 		}
 	}
-	.flex{
+
+	.flex {
 		display: flex;
 		align-items: center;
 	}

subpkg/zsy-calendar/dateBox.vue

@@ -2,30 +2,29 @@
 	<!-- 日期显示 -->
 	<view class="date_box">
 		<view v-for="(dateInfo, dateIndex) in dates" :key="dateIndex" class="calendar_date__box">
-			<view class="history" :style="{height: cellHeight + 'rpx', width: cellHeight + 'rpx'}">
-
-
-				<view class="calendar_date" :class="{ isSelected: dateInfo.isSelected }" :style="{
+			<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 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>
 	</view>
 </template>
 
 <script>
+	import {
+		mapState,
+	} from 'vuex'
 	export default {
+		computed: {
+			...mapState('m_children', ['records']),
+		},
 		props: {
 			dates: {
 				type: Array, //日期列表
@@ -53,7 +52,47 @@
 			chooseDate(dateInfo, dateIndex) {
 				this.$emit('chooseDate', dateInfo, dateIndex)
 				console.log('dateInfo', dateInfo);
+			},
+			//判断传入数据与内容是否相同，相同则设置已打卡属性为true
+			setHasClockDate() {
+				//没有返回值，直接修改原数组
+
+				// this.dates.forEach(item => {
+				// 	for (let i  in this.records) {
+				// 		console.log(item.year === this.records[i].year && item.month === this.records[i].month && item.date === this.records[i].date,'33333')
+				// 		if (item.year === this.records[i].year && item.month === this.records[i].month && item.date === this.records[i].date) 
+				// 		{
+				// 			console.log(item)
+				// 			item.key = 1
+				// 		} else {
+				// 			item.key = 0
+				// 		}
+				// 	}
+				// })
+				
+				// for(let i in this.dates){
+				// 	let years=this.dates[i].year
+				// 	let month=this.dates[i].month
+				// 	let date=this.dates[i].date
+				// 	for(let y in this.records){
+				// 		this.records[y].year === years && this.records[y].month === month && this.records[y].date ===date ? this.dates[i].key=true:this.dates[i].key=false
+				// 	}
+				// }
+					for(let i in this.records){
+						let a =this.records[i].year
+						let b=this.records[i].month
+						let c=this.records[i].date
+						for(let y in this.dates){
+							console.log(this.dates[y].year == a,this.dates[y].month == b,this.dates[y].date == c,'3333')
+							this.dates[y].year == a && this.dates[y].month == b && this.dates[y].date == c ? this.dates[y].key=true:this.dates[y].key=false
+						}
+					}
+
+				console.log('dates', this.dates);
 			}
+		},
+		created() {
+			this.setHasClockDate()
 		}
 	}
 </script>
@@ -65,12 +104,7 @@
 		flex-wrap: wrap;
 		justify-content: space-between;
 	}
-	
-	.date_box .history{
-		margin: 0 auto;
-		border-radius: 50%;
-		background-color: #ffb783;
-	}
+
 
 	.date_box .calendar_date__box {
 		width: calc(100% / 7);