小明：李老师，我最近在做科研管理平台的开发，想加入一个项目进度的演示功能，您有什么建议吗？

李老师：这是一个很好的想法。科研管理平台的核心之一就是对项目进度进行可视化展示，这样可以让研究人员和管理者更清楚地了解项目的当前状态。

小明：那具体该怎么做呢？有没有什么技术方案可以参考？

李老师：我们可以使用Web技术来构建这个演示系统。比如用Python的Flask框架来搭建后端，前端可以用HTML、CSS和JavaScript来实现交互界面。另外，还可以结合数据库来存储项目信息。

小明：听起来不错。那我可以先设计一个简单的项目结构，然后逐步添加功能吗？

李老师：是的，这是常见的开发方式。你可以先创建一个项目模型，包含名称、负责人、开始时间、结束时间、状态等字段。

小明：那我可以写一个Python类来表示项目吗？比如：

class Project:
    def __init__(self, name, leader, start_date, end_date, status):
        self.name = name
        self.leader = leader
        self.start_date = start_date
        self.end_date = end_date
        self.status = status

    def __str__(self):
        return f"项目名称：{self.name}，负责人：{self.leader}，状态：{self.status}"
    

李老师：非常好。接下来，我们可以考虑如何将这些数据展示出来。比如，使用一个列表来保存多个项目，然后在网页上显示它们。

小明：那我可以写一个Flask应用来处理请求吗？比如，当用户访问“/projects”时，返回所有项目的信息。

李老师：没错。我们可以用Flask来创建一个简单的Web服务，如下所示：

from flask import Flask, render_template
app = Flask(__name__)

projects = [
    {"name": "AI研究", "leader": "张伟", "start_date": "2024-03-01", "end_date": "2024-09-30", "status": "进行中"},
    {"name": "大数据分析", "leader": "王芳", "start_date": "2024-04-15", "end_date": "2024-08-31", "status": "已完成"}
]

@app.route('/projects')
def show_projects():
    return render_template('projects.html', projects=projects)

if __name__ == '__main__':
    app.run(debug=True)
    

小明：明白了。那前端页面该怎么写呢？

李老师：我们可以使用Jinja2模板引擎来生成HTML内容。例如，创建一个名为“projects.html”的文件，内容如下：

    


    
科研项目进度
    

    {% for project in projects %}
        

            项目名称：{{ project.name }}

            负责人：{{ project.leader }}

            开始日期：{{ project.start_date }}

            结束日期：{{ project.end_date }}

            状态：{{ project.status }}
        
    {% endfor %}
    


    

小明：这样就能把项目信息展示出来了。那如果我想进一步展示项目进度的图表呢？比如用条形图或甘特图？

李老师：这需要引入一些前端图表库，比如ECharts或者Chart.js。我们可以使用这些库来绘制项目进度的图表。

小明：那我可以写一个函数来计算每个项目的完成百分比吗？比如根据当前日期和结束日期来判断。

李老师：是的。我们可以写一个辅助函数来计算项目的完成率。例如：

import datetime

def calculate_progress(start_date, end_date):
    today = datetime.date.today()
    start = datetime.datetime.strptime(start_date, "%Y-%m-%d").date()
    end = datetime.datetime.strptime(end_date, "%Y-%m-%d").date()

    if today > end:
        return 100
    elif today < start:
        return 0
    else:
        total_days = (end - start).days
        elapsed_days = (today - start).days
        progress = (elapsed_days / total_days) * 100
        return round(progress, 2)
    

小明：太好了！这样就能动态地显示项目的完成进度了。

李老师：接下来，我们可以把这些数据传递给前端，用图表展示出来。比如，使用ECharts来绘制一个柱状图，显示每个项目的完成率。

小明：那前端该怎么修改呢？

李老师：我们可以引入ECharts库，然后在HTML中添加一个div用于显示图表。然后在脚本中初始化图表并传入数据。

小明：那我可以写这样的代码吗？

小明：这样就可以动态地显示项目进度了。那如果我要从后端获取数据，而不是硬编码的话，应该怎么做？

李老师：我们可以让Flask后端返回JSON格式的数据，前端通过AJAX请求获取这些数据，然后动态渲染图表。

小明：那我可以修改一下后端代码吗？比如添加一个“/api/projects”接口，返回JSON数据。

李老师：是的。我们可以这样写：

@app.route('/api/projects')
def get_projects_data():
    data = []
    for project in projects:
        progress = calculate_progress(project['start_date'], project['end_date'])
        data.append({
            'name': project['name'],
            'progress': progress
        })
    return jsonify(data)
    

小明：好的，那前端可以使用fetch API来获取这些数据，然后更新图表。

李老师：是的。例如，可以在页面加载时调用这个API，然后动态生成图表数据。

小明：这样整个项目进度的演示功能就完成了。是不是还可以添加更多功能，比如按状态筛选项目？

李老师：当然可以。我们可以通过查询参数来实现过滤功能，比如“/projects?status=进行中”，然后根据参数筛选项目。

小明：明白了。看来这个科研管理平台的功能越来越完善了。

李老师：是的，随着功能的不断扩展，这个平台会变得更加实用。希望你能在项目中继续努力，把功能做得更好。

小明：谢谢李老师，我会继续加油的！