修改数据结构，修改图表详情页

components/line-mini-chart/line-mini-chart.vue

@@ -2,7 +2,7 @@
 	<view class="chart-container">
 		<view class="chart-name">
 			<view class="t-icon t-icon-xtubiao-4"></view>
-			<text class="chart-name-text">对比成绩</text>
+			<text class="chart-name-text">走势对比</text>
 		</view>
 		
 		<view class="charts-box">

components/mainline-mini-chart/mainline-mini-chart.vue

@@ -2,7 +2,7 @@
 	<view class="chart-container">
 		<view class="chart-name">
 			<view class="t-icon t-icon-xtubiao-4"></view>
-			<text class="chart-name-text">总成绩</text>
+			<text class="chart-name-text">学期成绩走势</text>
 		</view>
 		
 		<view class="charts-box">

components/top-box/top-box.vue

@@ -43,7 +43,7 @@
 				
 				select: false,
 				semesterList:[
-					['19学年','20学年','21学年','22学年']
+					['19学年上学期','19学年下学期','20学年上学期','20学年下学期']
 				],
 				
 			};

gradepkg/arcbar-chart/arcbar-chart.vue

@@ -1,5 +1,8 @@
 <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>
@@ -13,7 +16,7 @@
 			<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;" @click="returnList">
+			<view style="display: flex; flex-direction: column; align-items: center;" >
 				<view class="t-icon t-icon-mulu"></view>
 				<view class="icon-text">返回</view>
 			</view>
@@ -28,7 +31,7 @@
 			</view>
 
 			<view class="charts-box">
-		 	<qiun-data-charts type="arcbar" :chartData="chartData" :loadingType="4" :opts.title="this.chartData.series.name" />
+		 	<qiun-data-charts type="arcbar" :chartData="chartData" :loadingType="4" :opts.title="this.chartData.series" />
 			</view>
 		</view>
 		<!-- 数据分析模块 -->
@@ -112,11 +115,14 @@
 	.page-box{
 		height: 600rpx;
 		background: linear-gradient(#419eea, #f1f3f5);
+		.back{
+			padding: 100rpx 0 40rpx 40rpx;
+		}
+		
 		.children-box{
 			display: flex;
 			align-items: center;
 			.children-avatar{
-				margin-top: 150rpx;
 				margin-left: 40rpx;
 				width: 96rpx;
 				height: 96rpx;
@@ -125,7 +131,6 @@
 				box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.2);
 			}
 			.children-msg{
-				margin-top: 150rpx;
 				margin-left: 30rpx;
 				
 				.children-name{

gradepkg/area-chart/area-chart.vue

@@ -1,6 +1,10 @@
 <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">
@@ -8,126 +12,68 @@
 				<view class="children-class">{{childreninfo.class}}</view>
 			</view>
 		</view>
-		
+		<!-- 操作按钮 -->
 		<view class="icon-box">
-			<view class="t-icon t-icon-chengji1"></view>
-			
+			<view class="t-icon t-icon-mianxingdiannao1"></view>
+
 			<view style="display: flex; flex-direction: column; align-items: center;" @click="show = true">
-				<view class="t-icon t-icon-chaquebulou"></view>
+				<view class="t-icon t-icon-mianxingfangdajing"></view>
 				<view class="icon-text">科目</view>
 			</view>
-			
-			<view style="display: flex; flex-direction: column; align-items: center;" @click="returnList">
-				<view class="t-icon t-icon-mulu"></view>
-				<view class="icon-text">返回</view>
+
+			<view style="display: flex; flex-direction: column; align-items: center;">
+				<view class="t-icon t-icon-mianxingjiandao"></view>
+				<view class="icon-text">剪报</view>
 			</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 class="chart-name-btn">
-					<u-picker :show="show" :columns="subject" ref="uPicker" @confirm="selectSubject" @cancel="selectCancel" :closeOnClickOverlay="true">
-					</u-picker>
-				</view>
+				<view class="t-icon t-icon-canyon-nature-svgrepo-com"></view>
+				<text class="chart-name-text">{{semester}}单科成绩对比</text>
 			</view>
 			<!-- 图表 -->
 			<view class="charts-box">
-				<qiun-data-charts type="area" :chartData="chartData" :loadingType="4" background="none" :canvas2d='true' canvasId='canvans999' />
+				<qiun-data-charts type="area" :chartData="areaChartData" :loadingType="4" background="none"
+					:canvas2d='true' canvasId='canvans999' />
 			</view>
 		</view>
+		<!-- 选择器 -->
+		<u-picker :show="show" :columns="subject" ref="uPicker" @confirm="selectSubject" @cancel="selectCancel"
+			:closeOnClickOverlay="true">
+		</u-picker>
+
+
 	</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 {
-
 				show: false,
 				subject: [
 					['语文', '数学', '英语', '体育', '思品', '科学']
 				],
-
-				chartData: {
-					categories: [
-						"测验1",
-						"测验2",
-						"测验3",
-						"测验4",
-						"测验5",
-						"测验6"
-					],
-					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
-							]
-						}
-					],
-				},
 				//查询参数
 				queryObj: {},
 
 			};
 		},
-		onLoad(){
+		onLoad() {
 			// this.getChartData()
 		},
 		methods: {
-			
-			//获取图表数据
-			// async getChartData(){
-			//  this.queryObj = {
-			//	query: 'tableData',
-			//	tmdid: this.childreninfo.tmdid,
-			//	semester: this.semester
-			//}
-			// 	//发起请求
-			// 	const {data:res} = await uni.$http.post('https://',this.queryObj)
-			//  
-			// 	//判断请求获取结果
-			// 	if(res.meta.status !== 200) return uni.$showMsg()
-			// 	//为数据赋值:通过展开运算符的形式进行，新旧数据的拼接
-			// 	this.chartData = {categories:[...res.test],series[...res.object,...res.class,...res.grade]}
-			// },
-			
 			//选择科目
 			selectSubject(e) {
 				console.log('selectSubject', e)
@@ -136,30 +82,35 @@
 				uni.$showMsg('切换完成')
 				this.show = false
 			},
-			selectCancel(){
+			selectCancel() {
 				uni.$showMsg('取消选择')
 				this.show = false
 			},
 			//返回成绩页面
-			returnList(){
+			returnList() {
 				uni.switchTab({
 					url: '/pages/grade/grade'
 				})
 			},
-			
+
 		}
 	}
 </script>
 
 <style lang="scss">
-	.page-box{
+	.page-box {
 		height: 600rpx;
 		background: linear-gradient(#ff6187, #f1f3f5);
-		.children-box{
+
+		.back {
+			padding: 100rpx 0 40rpx 40rpx;
+		}
+
+		.children-box {
 			display: flex;
 			align-items: center;
-			.children-avatar{
-				margin-top: 150rpx;
+
+			.children-avatar {
 				margin-left: 40rpx;
 				width: 96rpx;
 				height: 96rpx;
@@ -167,17 +118,18 @@
 				border: 4rpx solid #FFFFFF;
 				box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.2);
 			}
-			.children-msg{
-				margin-top: 150rpx;
+
+			.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;
@@ -185,19 +137,22 @@
 				}
 			}
 		}
-		.icon-box{
+
+		.icon-box {
 			display: flex;
 			justify-content: space-between;
 			margin: 0 80rpx 20rpx 80rpx;
 			padding-top: 60rpx;
-			.icon-text{
+
+			.icon-text {
 				font-weight: bold;
 				font-size: 26rpx;
 				color: #3B4144;
 			}
 		}
+
 		.chart-container {
-			margin: 0 20rpx;
+			margin: 10rpx 20rpx;
 			padding: 0rpx 10rpx 0rpx 0rpx;
 			border-radius: 15rpx;
 			display: flex;
@@ -205,8 +160,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 +169,7 @@
 				align-items: center;
 				margin-left: 40rpx;
 				margin-top: 20rpx;
-		
+
 				.chart-name-text {
 					font-size: 30rpx;
 					font-weight: bold;
@@ -222,6 +177,7 @@
 					margin-left: 10rpx;
 				}
 			}
+
 			.charts-box {
 				width: 100%;
 				height: 500rpx;

gradepkg/bar-chart/bar-chart.vue

@@ -1,5 +1,8 @@
 <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>
@@ -17,7 +20,7 @@
 				<view class="icon-text">目标</view>
 			</view>
 
-			<view style="display: flex; flex-direction: column; align-items: center;" @click="returnList">
+			<view style="display: flex; flex-direction: column; align-items: center;" >
 				<view class="t-icon t-icon-mulu"></view>
 				<view class="icon-text">返回</view>
 			</view>
@@ -118,11 +121,14 @@
 		height: 600rpx;
 		background: linear-gradient(#5fb7ff, #f1f3f5);
 
+		.back{
+			padding: 100rpx 0 40rpx 40rpx;
+		}
+		
 		.children-box{
 			display: flex;
 			align-items: center;
 			.children-avatar{
-				margin-top: 150rpx;
 				margin-left: 40rpx;
 				width: 96rpx;
 				height: 96rpx;
@@ -131,7 +137,6 @@
 				box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.2);
 			}
 			.children-msg{
-				margin-top: 150rpx;
 				margin-left: 30rpx;
 				
 				.children-name{

gradepkg/column-chart/column-chart.vue

@@ -1,5 +1,8 @@
 <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>
@@ -13,7 +16,7 @@
 			<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;" @click="returnList">
+			<view style="display: flex; flex-direction: column; align-items: center;">
 				<view class="t-icon t-icon-mulu"></view>
 				<view class="icon-text">返回</view>
 			</view>
@@ -103,11 +106,14 @@
 	.page-box{
 		height: 600rpx;
 		background: linear-gradient(#f9cd98, #f1f3f5);
+		.back{
+			padding: 100rpx 0 40rpx 40rpx;
+		}
+		
 		.children-box{
 			display: flex;
 			align-items: center;
 			.children-avatar{
-				margin-top: 150rpx;
 				margin-left: 40rpx;
 				width: 96rpx;
 				height: 96rpx;
@@ -116,7 +122,6 @@
 				box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.2);
 			}
 			.children-msg{
-				margin-top: 150rpx;
 				margin-left: 30rpx;
 				
 				.children-name{

gradepkg/line-chart/line-chart.vue

@@ -1,5 +1,8 @@
 <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>
@@ -13,7 +16,7 @@
 			<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;" @click="returnList">
+			<view style="display: flex; flex-direction: column; align-items: center;">
 				<view class="t-icon t-icon-mulu"></view>
 				<view class="icon-text">返回</view>
 			</view>
@@ -23,7 +26,7 @@
 		<view class="chart-container">
 			<view class="chart-name">
 				<view class="t-icon t-icon-buoumao-haibaoshuangse"></view>
-				<text class="chart-name-text">总成绩对比</text>
+				<text class="chart-name-text">{{semester}}总成绩对比</text>
 			</view>
 			<view class="charts-box">
 				<qiun-data-charts type="line" :chartData="chartData" :loadingType="4"/>
@@ -111,11 +114,14 @@
 		height: 600rpx;
 		background: linear-gradient(#5fb7ff, #f1f3f5);
 		
+		.back{
+			padding: 100rpx 0 40rpx 40rpx;
+		}
+		
 		.children-box{
 			display: flex;
 			align-items: center;
 			.children-avatar{
-				margin-top: 150rpx;
 				margin-left: 40rpx;
 				width: 96rpx;
 				height: 96rpx;
@@ -124,7 +130,6 @@
 				box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.2);
 			}
 			.children-msg{
-				margin-top: 150rpx;
 				margin-left: 30rpx;
 				
 				.children-name{

gradepkg/mainradar-chart/mainradar-chart.vue

@@ -1,5 +1,8 @@
 <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>
@@ -13,7 +16,7 @@
 			<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;" @click="returnList">
+			<view style="display: flex; flex-direction: column; align-items: center;">
 				<view class="t-icon t-icon-mulu"></view>
 				<view class="icon-text">返回</view>
 			</view>
@@ -114,11 +117,14 @@
 	.page-box{
 		height: 600rpx;
 		background: linear-gradient(#ff6187, #f1f3f5);
+		.back{
+			padding: 100rpx 0 40rpx 40rpx;
+		}
+		
 		.children-box{
 			display: flex;
 			align-items: center;
 			.children-avatar{
-				margin-top: 150rpx;
 				margin-left: 40rpx;
 				width: 96rpx;
 				height: 96rpx;
@@ -127,7 +133,6 @@
 				box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.2);
 			}
 			.children-msg{
-				margin-top: 150rpx;
 				margin-left: 30rpx;
 				
 				.children-name{

gradepkg/radar-chart/radar-chart.vue

@@ -1,5 +1,8 @@
 <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>
@@ -13,7 +16,7 @@
 			<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;" @click="returnList">
+			<view style="display: flex; flex-direction: column; align-items: center;">
 				<view class="t-icon t-icon-mulu"></view>
 				<view class="icon-text">返回</view>
 			</view>
@@ -131,11 +134,14 @@
 	.page-box{
 		height: 600rpx;
 		background: linear-gradient(#c1cbf7, #f1f3f5);
+		.back{
+			padding: 100rpx 0 40rpx 40rpx;
+		}
+		
 		.children-box{
 			display: flex;
 			align-items: center;
 			.children-avatar{
-				margin-top: 150rpx;
 				margin-left: 40rpx;
 				width: 96rpx;
 				height: 96rpx;
@@ -144,7 +150,6 @@
 				box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.2);
 			}
 			.children-msg{
-				margin-top: 150rpx;
 				margin-left: 30rpx;
 				
 				.children-name{

gradepkg/rose-chart/rose-chart.vue

@@ -1,5 +1,8 @@
 <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>
@@ -13,7 +16,7 @@
 			<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;" @click="returnList">
+			<view style="display: flex; flex-direction: column; align-items: center;">
 				<view class="t-icon t-icon-mulu"></view>
 				<view class="icon-text">返回</view>
 			</view>
@@ -121,11 +124,14 @@
 	.page-box{
 		height: 600rpx;
 		background: linear-gradient(#f97f41, #f1f3f5);
+		.back{
+			padding: 100rpx 0 40rpx 40rpx;
+		}
+		
 		.children-box{
 			display: flex;
 			align-items: center;
 			.children-avatar{
-				margin-top: 150rpx;
 				margin-left: 40rpx;
 				width: 96rpx;
 				height: 96rpx;
@@ -134,7 +140,6 @@
 				box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.2);
 			}
 			.children-msg{
-				margin-top: 150rpx;
 				margin-left: 30rpx;
 				
 				.children-name{

information/chart.js

@@ -0,0 +1,67 @@
+//导出全局表信息存储模块
+export default {
+	//开启命名空间
+	namespaced: true,
+
+	//模块数据
+	state: () => ({
+		//区域图数据(单科成绩走势对比)
+		areaChartData: {
+			categories: [
+				"测验1",
+				"测验2",
+				"测验3",
+				"测验4",
+				"测验5",
+				"测验6"
+			],
+			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
+					]
+				}
+			],
+		}
+		
+
+	}),
+	//模块方法(修改数据)
+	mutations: {
+		updateAreaChartData(state,areaChartData){
+			state.areaChartData = areaChartData
+		}
+
+	},
+	//模块属性(数据包装)
+	getters: {
+
+	}
+}

information/children.js

@@ -10,7 +10,7 @@ export default{
 		
 		childreninfo: JSON.parse(uni.getStorageSync('childreninfo') || '{}'),
 		
-		semester: uni.getStorageSync('semester') || '请选择学年'
+		semester: uni.getStorageSync('semester') || '请选择学期'
 		
 	}),
 	//模块方法(修改数据)

information/store.js

@@ -4,6 +4,7 @@ import Vuex from 'vuex'
 //1.导入应用模块
 import moduleparent from './parent.js'
 import modulechildren from './children.js'
+import modulechart from './chart.js'
 
 //2.将Vuex安装为Vue的插件
 Vue.use(Vuex)
@@ -13,7 +14,8 @@ const store = new Vuex.Store({
 	//挂载应用模块
 	modules:{
 		'm_parent': moduleparent,
-		'm_children': modulechildren
+		'm_children': modulechildren,
+		'm_chart': modulechart
 	},
 })