zhihuixiaoyuan2-ui/mine/pages/files/history.vue

<template>
	<view class="container">
		<!-- 多折线图 -->
		<view class="tit">成长趋势</view>
		<view class="aside_inner">
			<view class="moreline_cavcans">
				<qiun-data-charts type="mix" :ontouch="true" :opts="opts" :chartData="chartData"></qiun-data-charts>
			</view>
		</view>
		<view class="tit mb16">历史详情</view>
		<view class="table">
			<zb-table
			  :show-header="true"
			  :columns="column2"
			  :stripe="true"
			  :fit="false"
			  @rowClick="rowClick"
			  @toggleRowSelection="toggleRowSelection"
			  @toggleAllSelection="toggleAllSelection"  
			  :data="hislist"></zb-table>
		</view>
	</view>
</template>
 
<script>
	import qiunDataCharts from "@/mine/components/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue"
	import zbTable from "@/mine/components/zb-table/zb-tables.vue"
	import {column2} from '@/mine/components/zb-table/all.js'
	import {getoldechFn,getliveListFn} from "@/api/mine/files.js"
	export default {
		components:{
			zbTable,qiunDataCharts
		},
		data() {
			return {
				column2,
				studentId:'',
				hislist:[],
				chartData: {},
				categories: ["2016", "2017", "2018", "2019", ],
				opts: {
					color: ["#FFB132", "#419CFF",],
					padding: [-10, 10, 30, 15],
					dataLabel: false, //是否显示数据文案  true表示显示，false表示不显示
					dataPointShape: false, //是否显示数据点数据图表
					dataPointShapeType: 'solid', //图形标识点显示类型 solid实心 hollow空心
					enableScroll: true,
					legend: {
						fontColor: '#363636',
						fontSize: 12,
						position: "top",
						margin: 16,
						padding: 5,
						float: "center"
					},
					xAxis: {
						disabled: false, //不绘制x轴
						axisLine: false, //坐标轴线
						axisLineColor: "#fff", //坐标轴线颜色
						calibration: false, //刻度线
						disableGrid: true, //不绘制网格线 
						fontColor: "#474e5b", //刻度值字体颜色
						fontSize: 14,
						itemCount: 5,
					},
					yAxis: {
						gridType: "dash", //横向网格样式  solid实线
						axisLine: false, //坐标轴线是否显示
						axisLineColor: '#fff', //坐标轴颜色
						gridColor: 'rgba(86,94,107,0.4)', //网格颜色
						dashLength: 3, //网格dash宽度
						showTitle: true,
						splitNumber: 4,
						data: [{   //这里y轴分组   left是下标为0的第一组y数据在最左侧
								position: "left",
								axisLine: false, //坐标轴轴线是否显示
								axisLineColor: '#fff', //坐标轴轴线颜色
								fontColor: "#474e5b",
								fontSize: 14,
								disabled: false, //是否绘画y轴  true不 默认为false
								min: 0, //y轴最小值
								// max: 260, //y轴最大值   最大值来除以y轴显示的数量=每份的数量
								// unit:'焦',//y轴刻度后面的单位
								tofix: 2,
								title: 'CM',
								titleOffsetY: -6,
								titleOffsetX: -6,
							},
							{//这里y轴分组   right是下标为1的第二组y数据在最右侧
								position: "right",
								axisLine: false, //坐标轴轴线是否显示
								axisLineColor: '#fff', //坐标轴轴线颜色
								fontColor: "#474e5b",
								fontSize: 14,
								disabled: false, //是否绘画y轴  true不 默认为false
								min: 0, //y轴最小值
								// max: 150, //y轴最大值   最大值来除以y轴显示的数量=每份的数量
								// unit:'焦',//y轴刻度后面的单位
								tofix: 2,
								title: 'KG',
								titleOffsetY: -6,
								titleOffsetX: 10,
							},
						]
					},
 
					extra: {
						tooltip: {
							showArrow: true, //是否显示小三角
							// showCategory:true,
							gridColor: 'rgba(86,94,107,0.4)',
							borderRadius: 6,
							bgColor: "#546dfb",
							gridType: 'dash', //分割线
							dashLength: 3,
							bgOpacity: 0.8,
							labelBgColor: 'red',
							fontColor: 'rgba(255, 255, 255, 0.8)'
						},
						line: {
							type: "straight",
							width: 2,
							activeType: "hollow"
						},
						mix: {
							line: {
								width: 3,
							}
						}
					}
				}
			};
		},
		onLoad(e) {
			this.studentId=e.id;
			this.getoldechFn()
			this.getoldlistFn()
		},
		methods: {
			getoldechFn(){
				var params={
					studentId:this.studentId
				}
				getoldechFn(params).then(res=>{
					var x=res.data.X;
					var newArr=[]
					x.forEach((ite)=>{
						var narr=ite.split('-')
						ite=narr[1]+'/'+narr[2],
						newArr.push(ite)
					})
					let nobj = {
						categories: newArr,
						series: [
							{
								name: "身高",
								legendShape: 'circle',
								type: "line",
								data: res.data.Y1
							},
							{
								name: "体重",
								type: "line",
								index: 1,//这个是重点  0代表第一组y轴坐标数据，1代表第二组y轴坐标数据
								legendShape: 'circle',
								data: res.data.Y2
							},
						],
					};
					this.chartData = JSON.parse(JSON.stringify(nobj));
					// if(res.code==200){
					// 	this.hislist=res.data
					// }else{
					// 	this.$toast(res.msg)
					// }
				})
			},
			getoldlistFn(){
				var params={
					studentId:this.studentId
				}
				getliveListFn(params).then(res=>{
					if(res.code==200){
						this.hislist=res.rows
					}else{
						this.$toast(res.msg)
					}
				})
			},
			getServerData() {
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {
						categories: this.categories,
						series: [
							{
								name: "身高",
								legendShape: 'circle',
								type: "line",
								data: [120, 150, 153, 185,]
							},
							{
								name: "体重",
								type: "line",
								index: 1,//这个是重点  0代表第一组y轴坐标数据，1代表第二组y轴坐标数据
								legendShape: 'circle',
								data: [40, 45, 50, 46,]
							},
						],
					};
					this.chartData = JSON.parse(JSON.stringify(res));
				}, 500);
			},
		},
		created() {
			// this.getServerData();
		}
	}
</script>
 
<style lang="scss" scoped>
.zb-table /deep/ .zb-table-fixed{background: #F1F5FF !important;}
.zb-table /deep/ .item-th{text-align: center !important;padding: 0 4rpx;background: #F1F5FF;text-align: center;border-bottom: none;}
.zb-table /deep/ .item-td{text-align: center !important;padding: 0 4rpx;}
.container{min-height: 100vh;background-color: #ffffff;}
.tit{font-size: 32rpx;font-weight: bold;color: #161616;position: relative;display: flex;align-items: center;padding: 16rpx 60rpx;
	&::before{width: 8rpx;height: 36rpx;background: #1f57e6;border-radius: 4rpx;content: '';position: absolute;left: 36rpx;top: 50%;margin-top: -18rpx;}
	}
.table{padding: 0 48rpx;}
	.aside_inner {
		width: 100%;
 
		.moreline_title {
			text-align: center;
			color: #e6ebf1;
			font-size: 32rpx;
			padding-top: 50rpx;
			font-weight: 500;
		}
 
		.moreline_cavcans {
			width: 700rpx;
			margin: 10rpx;
			height: 440rpx;
		}
	}
</style>