日志6月28日-学期报告界面

日志6月28日-分析报告

前言，学期分析报告是本项目的重点展示区间，通过对学生行为数据的分析，我们能预测学生成绩并预测学习排名，我们将会对学生一学期的行为数据进行统计分析和展示，并预测学期排名，根据学生的行为和预测成绩提出委婉适当的建议。
界面功能需求

1. 展示学生的学期总支出情况，食堂支出情况，并查看学生食堂消费水平处于年级什么水平。
2. 展示学生一学期前往图书馆的次数，图书借阅次数，以及两项指标相对于年级平均水平的位置。
3. 展示学生前两学期的成绩排名，并预测当前学期成绩排名，排名数据来源于算法小组的预测。
4. 根据学生的行为数据，成绩排名，给出委婉的建议，当学生成绩排名位于年级前15%我们将建议其继续保持良好习惯，当学生成绩排名位于年级后15%，我们根据其图书借阅数据，和食堂数据进行分析，并提醒其在哪方面进行加强，并培养良好的学习习惯。当排名位于中间时，为促进学生用户的学习进步，我们会给出对应的建议。

1.界面实现

对于学期报告，我们将采用滑动界面布局在一个界面展示长篇幅学期报告。
大体思路是利用一个boxs容器，里面装有不同类型的box-wrapper 来展示不同方面的学期报告。对boxs增添滑动和触底事件响应。来进行box-wrapper的加载。
每一个box-wrapper包裹背景图片模块，内容信息模块和保存图片模块
下面为主要的wxss代码
boxs容器，将其position设置为absolute。

.boxs {
  width: 100%;
  height: 100%;
  position: absolute;
}

其中一个box-wrapper的wxss代码
要注意图片地址要使用http格式而不是本地模式。能有效节省小程序占用空间，提高空间利用率，同时避免了小程序里的一些bug（在某些组件或者容器里不能使用本地图片，必须使用http格式图片。推荐使用http.sm.sm
的图片网络地址链接生成网站。）

.box1-wrapper{
  
  background-image: url(https://i.loli.net/2020/06/29/5yjpkZOdzDP7QEM.jpg);
  padding-top: 174rpx;
  padding-bottom: 550rpx;
  background-repeat: no-repeat;
  background-size: 100% 80%;

}

关于保存图片模块的wxss代码

.tips {
  margin-top: 50rpx;
  text-align: center;
}

.tips .saveBtn {
  background: #FF6666;
  border-radius: 30rpx;
  padding: 12rpx 60rpx; 
  color: white;
  font-size: 28rpx;
}

.tips .info{
  opacity: 0.8;
  font-size: x-small;
  margin-top: 25rpx;
}

学期报告的主界面布局wxml代码，只展示了其中一个box-wrapper布局。

<view class="boxs" catchtouchmove="noneEnoughPeople"> 
 <view bindtouchstart="handletouchtart" bindtouchmove="handletouchmove" bindtouchend="handletouchend"> 
    <view class="box1-wrapper">   
     </view> 
         <view class="box2">亲爱的同学，过去的这一学期，相信你一定过得愉快而又充实</view>
         <view class='box2'>这一学期，你的总支出为：</view>
         <view class='box3'>￥{{Totalcost}}</view>
         <view class='box2'>良好的生活习惯会更有助于你的学习，我们提倡少吃外卖</view>
         <view class='box2'>而这一学期，你在食堂的消费共</view>
         <view class='box3'>￥{{cafeprice}}</view>
         <view class='box2'>超过</view>
         <view class='box3'>{{cafepercente}}</view>
         <view class='box2'>的同学</view>
         
     <view class="tips">
	       <text class="saveBtn" bindtap="saveShareImg">保存图片</text>
	       <view class="info">保存到相册可在朋友圈分享海报</view>
      </view>

界面的逻辑代码和数据
该界面的巧妙设计就在于滑动界面的设计，也就是当往下滑动时，通过事件响应和位置计算，来判断界面是向上还是向下滑动，从而显示顺滑的长篇幅界面展示效果。
逻辑代码：

  noneEnoughPeople() {
    //禁止页面滑动的方法，可以不做任何操作，但是必须要写
  },
  //滑动开始的操作，记录滑动开始的位置，用于判断是向上滑动还是向下滑动
  handletouchtart: function(event) {
    // 赋值
    this.data.lastY = event.touches[0].pageY
  },
  //滑动中，判断是向上还是向下
  handletouchmove(event) {
    let currentY = event.touches[0].pageY;
    let ty = currentY - this.data.lastY;
    if (ty < 0) {
      this.setData({
        text: '向上'
      })
    } else {
      this.setData({
        text: '向下'
      })
    }
    this.data.lastY = currentY
  },
  //滑动结束，通过判断是向上还是向下来计算页面滚动的位置
  handletouchend(event) {
    console.log(this.data.text, this.data.page)
    if (this.data.text == '向上') {
      if (this.data.page == 1) {
        wx.pageScrollTo({
          scrollTop: wx.getSystemInfoSync().windowHeight,
          duration: 500
        })
        this.setData({
          page: 2
        })
      } else if (this.data.page == 2) {
        wx.pageScrollTo({
          scrollTop: wx.getSystemInfoSync().windowHeight * 2,
          duration: 500
        })
        this.setData({
          page: 3
        })
      } else if (this.data.page == 3) {
        wx.pageScrollTo({
          scrollTop: wx.getSystemInfoSync().windowHeight * 3,
          duration: 500
        })
        this.setData({
          page:4
        })
      }
    } else {
     if (this.data.page == 2) {
        wx.pageScrollTo({
          scrollTop: 0,
          duration: 500
        })
        this.setData({
          page: 1
        })
      } else if (this.data.page == 3) {
        wx.pageScrollTo({
          scrollTop: wx.getSystemInfoSync().windowHeight,
          duration: 500
        })
        this.setData({
          page: 2
        })
      } else if (this.data.page == 4) {
        wx.pageScrollTo({
          scrollTop: wx.getSystemInfoSync().windowHeight * 2,
          duration: 500
        })
        this.setData({
          page: 3
        })
      }
    }
  },

数据

  data: {
   
    //消费数据，数据库获取
    Totalcost: "10000",//总支出,数据库获取
    cafeprice:"100",//食堂花费，数据库获取
    cafeovflow: "超过",//取值为 超过或者低于，从数据库获取。
    cafepercente:"64.3",//取值为百分比，数据库获取
      

    //图书馆数据，数据库接口获取
    counttimeLib:"10",//去图书馆次数
    OverflowLib1:"超过",//次数
    percentLib1:"90",//超过百分比，次数
    countbookLib:"100",//借书次数
    OverflowLib2:"超过",//借书数量
    percentLib2:"90",//超过百分比，借书数量
    //成绩数据，数据库接口获取
    firstyearRank:"100",//第一学期排名
    secondyearRank:"90",//第二学期排名
    currentRank:"90",//预测的期末排名

  },

通过onshow功能接入组员提供的数据接口，在前端界面中加载数据。

2.实现效果

2.工作总结

基本完成预定目标，但存在两个瑕疵

1.数据分析不够饱满， 是因为我们小组获取到学生行为数据不够丰富，后续可以寻找更加丰富饱满的数据并进行严谨的数据分析。
2，界面设计还不够美观，在后续如果有条件应该请比较专业或者有艺术细胞的界面设计人员，目前是自己将界面设计和前端代码全包了，任务量有点大，所以导致呈现效果不够美观。