2024秋软件工程现场编程作业

作业所属课程	https://edu.cnblogs.com/campus/fzu/SE2024/
作业要求	https://edu.cnblogs.com/campus/fzu/SE2024/homework/13302
作业的目标	根据要求完成现场编程的作业
团队名称	银河护胃队
团队成员学号-名字	072208130-曹星才（组长） 052205144-张诗悦 102201120-陈康培 102201342-潘宇晴 102202108-王露洁 102202111-刘哲睿 102202128-林子豪 102202142-黄悦佳 102202149-詹镇壕 102202153-来再提·叶鲁别克

一、分工

人员	分工
曹星才	项目规划、博客撰写、github项目release、后端表设计
张诗悦、刘哲睿	记一笔模块设计
来再提、潘宇晴	消费报表模块设计
黄悦佳、詹镇壕	消费一览模块设计
陈康培、林子豪	消费明细模块设计
王露洁	个人模块设计

二、软件运行

1.消费一览

2.记一笔

3.消费明细

4.消费报表

5.个人

功能展示

三、关键代码

1.转换汇率部分关键代码

2.数据可视化

<!-- 显示前几个数据 -->
<view class="table-row" wx:for="{{day.slice(0, displayedCount)}}" wx:key="index">
<view class="table-cell">{{item.day}}</view>
<view class="table-cell">{{item.expense}}</view>
<view class="table-cell">{{item.income}}</view>
<view class="table-cell">{{item.balance}}</view>
<view class="table-cell arrow">></view>
</view>
<!-- 如果有更多数据，显示“展示更多”按钮 -->
<view wx:if="{{day.length > displayedCount}}" class="show-more" bindtap="showMore">
<text>展示更多</text>
</view>
</view>

<!-- 数据可视化图表 -->
<view class="chart-container">
<ec-canvas id="myChart" canvas-id="myChart" bindinit="initChart"></ec-canvas>
</view>
</view>

   showMore: function() {
    const newCount = this.data.displayedCount + 2; // 每次增加两行
    this.setData({
      displayedCount: newCount
    });
  },

  /**
   * 初始化图表
   */
  initChart: function() {
    const chart = echarts.init(this.selectComponent('#myChart').canvas);
    const option = {
      title: {
        text: '本月支出与收入'
      },
      tooltip: {},
      legend: {
        data: ['支出', '收入']
      },
      xAxis: {
        data: this.data.day.map(item => item.day)
      },
      yAxis: {},
      series: [{
        name: '支出',
        type: 'bar',
        data: this.data.day.map(item => item.expense)
      }, {
        name: '收入',
        type: 'bar',
        data: this.data.day.map(item => item.income)
      }]
    };

    chart.setOption(option);
  }

3.数据写入文件

4.订单详细

页面加载和测试数据设置
javascript
// 页面加载时执行的函数
onLoad: function (options) {
  // 设置测试数据到dataList
  this.setData({
    dataList: this.getTestData()
  });
  // 获取当前时间并设置到date
  var DATE = util.formDate(new Date());
  this.setData({
    date: DATE,
  });
},
解释：onLoad函数在页面加载时执行。这里，我们首先调用getTestData函数来获取测试数据，并使用setData方法更新页面的dataList。然后，我们获取当前日期并更新页面的date。

删除记录
javascript
// 删除记录的函数
delete: function(e){
  var _this=this
  wx.showModal({
    title: '提示',
    content: '是否删除这条记录',
    success (res) {
      if (res.confirm) {
        // 如果用户确认删除，调用云函数删除记录
        wx.cloud.callFunction({
          name:"delete",
          data:{
            id: e.currentTarget.id, // 记录的ID
          }
        }).then(res=>{
          _this.shanchusuanxin() // 刷新数据的函数
        })
      } else if (res.cancel) {
        console.log('用户点击取消')
      }
    }
  })
}
解释：delete函数显示一个模态对话框，询问用户是否删除选中的记录。如果用户确认，将调用云函数delete来删除记录，并调用shanchusuanxin函数刷新页面数据。

关键代码段：数据定义
javascript
// 页面的初始数据定义
data: {
  // 各类图标的路径
  img1: 'cloud://cloud1-7gko5ynq797bcfa6.636c-cloud1-7gko5ynq797bcfa6-1305669469/图表库/canying.png',
  img2: 'cloud://cloud1-7gko5ynq797bcfa6.636c-cloud1-7gko5ynq797bcfa6-1305669469/图表库/交通.png',
  img3: 'cloud://cloud1-7gko5ynq797bcfa6.636c-cloud1-7gko5ynq797bcfa6-1305669469/图表库/通讯.png',
  img4: 'cloud://cloud1-7gko5ynq797bcfa6.636c-cloud1-7gko5ynq797bcfa6-1305669469/图表库/购物.png',
  img5: 'cloud://cloud1-7gko5ynq797bcfa6.636c-cloud1-7gko5ynq797bcfa6-1305669469/图表库/其他.png',
  // 分类列表，用于界面显示分类选项
  fl: [
    { text: '餐饮', value: 0 },
    { text: '交通', value: 1 },
    { text: '通讯', value: 2 },
    { text: '购物', value: 3 },
  ],
  // 存储从数据库或其他来源获取的消费记录
  dataList: [],
  // 用于存储用户的openid，可能用于身份验证或数据关联
  openid: '',
  // 存储当前选中的日期
  date: '',
  // 显示当前选中日期的总消费金额
  dayprice: '请选择日期',
  // 其他可能需要的状态变量
  datee: '',
  dateee: ''
}
解释：这里定义了页面的初始状态和数据结构。data对象包含了页面需要的所有初始数据，包括图片资源路径、分类列表、消费记录数组等。

5.消费报表

getallData作用：获取所有消费数据并进行分类和统计
getallData: function() {
  // 定义静态数据数组，包含消费记录
  const staticData = [
    { rq: '2024-11-01', fl: '0', hf: 100, bz: '餐饮' }, // 餐饮消费
    { rq: '2024-11-02', fl: '1', hf: 50, bz: '交通' },   // 交通消费
    { rq: '2024-11-03', fl: '2', hf: 200, bz: '购物' },   // 购物消费
    // 更多静态数据...
  ];

  // 数据分类和统计
  this.setData({
    List: staticData, // 将静态数据设置到组件的状态中
    // 在此处可以添加其他类别的消费列表和价格的更新逻辑
  });

  this.Paint(); // 调用绘图函数，绘制饼图
},

  
  Paint作用：绘制饼图
  Paint: function() {
  // 初始化窗口宽度为320（默认值）
  var windowWidth = 320;
  try {
    // 获取系统信息以获得窗口宽度
    var res = wx.getSystemInfoSync();
    windowWidth = res.windowWidth; // 更新窗口宽度为系统获取的值
  } catch (e) {
    // 如果获取系统信息失败，输出错误信息
    console.error('getSystemInfoSync failed!');
  }
  
  // 创建新的饼图实例
  new wxCharts({
    animation: true, // 启用动画效果
    canvasId: 'pieCanvas', // 指定画布ID
    type: 'pie', // 图表类型为饼图
    series: [{ // 数据系列
      name: '购物', // 第一部分的名称
      data: this.data.ShoppingPrice, // 购物消费数据
    }, {
      name: '餐饮', // 第二部分的名称
      data: this.data.Cprice, // 餐饮消费数据
    }, {
      name: '交通', // 第三部分的名称
      data: this.data.JTPrice, // 交通消费数据
    }, {
      name: '通讯', // 第四部分的名称
      data: this.data.TXPrice, // 通讯消费数据
    }, {
      name: '其他', // 第五部分的名称
      data: this.data.QTPrice, // 其他消费数据
    }],
    width: windowWidth, // 设置图表宽度为获取的窗口宽度
    height: 300, // 设置图表高度为300
    dataLabel: true, // 显示数据标签
  });
},

6.数据存储

[
    {
        "本月预算": "1000",
        "本月消费": "500.5",
        "今日消费": "23",
        "本月收入": "0",
        "日均消费": "30.2",
        "本月剩余": "499.5",
        "日均可用": "30",
        "距离月末": "15"
    },
    {
        "本月预算": "2000",
        "本月消费": "1203.2",
        "今日消费": "56",
        "本月收入": "2",
        "日均消费": "40",
        "本月剩余": "796.8",
        "日均可用": "40",
        "距离月末": "10"
    }
]

[
    {
        "金额": 30,
        "备注": "无",
        "分类": "交通",
        "日期": "2024.11.02"
    },
    {
        "金额": 20,
        "备注": "吃了好吃的",
        "分类": "饮食",
        "日期": "2024.11.01"
    },
    {
        "金额": 40,
        "备注": "买了个好东西",
        "分类": "购物",
        "日期": "2024.10.25"
    },
    {
        "金额": 25.6,
        "备注": "健康餐",
        "分类": "饮食",
        "日期": "2024.10.24"
    }
]

四、亮点

我们的小程序最大的亮点就是可以进行汇率的计算。那为什么要在记账小程序中添加这样一个功能呢，那是因为如果用户需要在网上买国外的商品，或者其它的需要和不同国家的钱打交道请情况，了解汇率就显得特别重要了。记账里的汇率功能可以帮助用户记住这些汇率，还会帮忙算清楚，用户用外币付了多少，换成自己的钱是多少。这样就不用自己手动去查汇率、去计算了，省了很多麻烦，也减少了出错的可能。

五、事件

1.数据读取方式

对于后端数据读取方式，本来是采用csv对数据进行读取，但是这种读取方式不太容易实现，总是报错，后来改为使用json格式的数据，能顺利的进行本地的数据读取，使我们前后端交互更加顺利，更好的完成了各功能模块。

2.页面风格确定

采用可爱的黄色橘猫风，使界面更加美观

六、编程体验

❤曹星才

能不能多来点这种形式的实践呀，我真的是太喜欢了，两眼一蒙低头就是干，代码报错不会改我直接抱头鼠窜，deadline越近我的心越乱。在这几小时的现场编程中，我深刻的感受到了面对bug不会改、功能不能实现、deadline越来越近的那种紧张刺激，让我提前体验了以后工作突然来了个生死线然后我兴奋的赶着任务的那种刺激感，收获到了怎么快速调试代码以及方案的转换，收获颇多，希望保留这项传统，让学弟学妹们提前步入职场😊。

🧡张诗悦

现场编程往往伴随着时间压力，这可能会让参与者感到紧张。但同时，这种紧张感也可能转化为一种兴奋和动力，推动他们更加专注和高效地完成任务，简直是一场奇妙的体验，非常非常喜欢，谁说现场编程不好的，现场编程可太棒了，希望下一届继续。

💛陈康培

本次团队编程体验非常积极。我们通过敏捷方法和定期会议保持了高效的沟通与协作。尽管遇到了技术挑战，但团队成员间的明确分工和共同努力确保了项目的成功完成。这次经历加深了我们对团队合作重要性的认识，并激励我们在未来项目中继续提升协作效率。

💙潘宇晴

这次现场编程是一个很有意义的经历，我们合理分工，各司其职，每个团队成员都不可或缺，每个人都发挥自己的长处。在现场编程的后期我们的时间很紧张，也让我们意识到，要想提高团队效率，需要在项目管理和时间管理上下功夫。通过这次现场编程我明白了，一个优秀的团队不仅需要具备扎实的专业技能，还要有良好的沟通、协作和解决问题的能力。

💚王露洁

我觉得现场编程真的挺有挑战性的，它不光要看我们的编码水平怎么样，还得看我们能不能和团队的伙伴们配合得好。虽然我们小组最后交出来的作品不是那么完美，但我还是很开心的，因为我很喜欢跟伙伴们一起齐心协力朝同一个目标努力的感觉。通过一次次地合作，大家的默契感在慢慢提升，也越来越信任彼此，所以我们之后一定可以交出一份令人满意的作品！

💜刘哲睿

这次现场编程，我不仅技术获成长，团队合作能力也得以提升。项目里，我懂得了在现场环境中与成员更有效沟通，明白了不同角色沟通协作的重要性。我学会发挥自身长处，也看到团队在项目和时间管理方面的不足，这都是我们未来要改进之处。

❣林子豪

这次现场编程,让我 接触到不同成员的编程思路与技巧，拓宽自己解决问题的方法库，比如有的成员擅长用简洁的算法优化代码逻辑，能从中学习借鉴。可以快速适应不同的编程环境与工具配置，提高应对各种技术场景的能力，毕竟现场可能会有一些临时搭建或特定要求的环境。

💕黄悦佳

团队编程课让我深刻体会到合作的力量，沟通是合作关键，在共同合作解决问题中收获个人的成长。同时面对时间的压力，沉着冷静是解决问题的有效方式，不能操之过急。

💞詹镇壕

这次现场编程不仅让我在技术上有所成长，更重要的是提升了我的团队合作能力。项目中，我学会了如何更有效地与团队成员沟通，尤其是在现场协作的环境中。我意识到了在团队中扮演不同角色时，沟通和协作的重要性。我学会了如何在团队中发挥自己的长处，同时也意识到了我们团队在项目管理和时间管理上的不足，这些都是我们未来需要改进的地方。

💘来再提·叶鲁别克

这次编程课的经历是一个宝贵的学习机会。在紧张的现场氛围中，我们不仅锻炼了快速沟通和任务分配的能力，也意识到了团队协作中存在的挑战。尽管最终成果并不完美，但正是这些不完美让我们认识到了改进的方向，也让我更加重视团队合作的力量。

七、贡献评分

按各模块的完成度、完成难度、响应积极性、完成事件进行评分（0-100）

💗大家都很优秀

人员	评分	备注
张诗悦	98.3	“记一笔设计”，背景图片查找
刘哲睿	98.1	“记一笔”设计
来再提	98	消费报表设计
潘宇晴	98.4	消费报表设计、原型查找
黄悦佳	99	消费一览设计、代码整合
詹镇壕	98.9	消费一览设计
陈康培	97.5	消费明细设计
林子豪	97.1	消费明细设计
王露洁	100	个人页面设计、博客亮点编写

八、PSP

PSP2.1	Personal Software Process Stages	预估耗时（分钟）	实际耗时（分钟）
Planning	计划	15	10
· Estimate	· 估计这个任务需要多少时间	180	200
Development	开发	180	190
· Analysis	· 需求分析 (包括学习新技术)	10	15
· Design Review	· 设计复审 (和同事审核设计文档)	15	15
· Design	· 具体设计	20	25
· Code Review	· 代码复审	10	20
· Test	· 测试（自我测试，修改代码，提交修改）	20	10
Reporting	报告	60	70
· Postmortem & Process Improvement Plan	· 事后总结, 并提出过程改进计划	30	30
合计		540	585

九、github记录

仓库地址：healthyFZU/On-site_programming

commit记录：