Streamlit工程進度甘特圖

發表於 2024-07-07 分類於專案成果閱讀次數：

前言

工程進行期間會有很多不同的任務，每個任務會有自己所需要花費的金額、起始日期、持續天數，藉由這些任務的組合可以統整出工程的預定進度情況，將不同任務繪製在同一個時間軸上可以清楚的了解到現階段有那些任務應該要被完成以及未來還有哪些任務需要完成，對於任務單純的工程很有大的助益。

前陣子在開發施工日誌的時候，如果採用施工計畫書上的每15日累積進度做內差取值會比較容易失真，後來想想，其實這個累積進度的來源也是按照甘特圖的比例所得出的結果?但總歸如何，還是花了一些時間熟悉一下matplotlib的做圖套件，並且搭配streamlit前端介面做一個雲端服務，目標是希望能夠產出工程甘特圖及每日進度的CSV檔案，未來可以匯入其他的日報VBA工具。

操作介面

進入系統之後左側為任務編輯區塊，右側為甘特圖
任務編輯區塊可以進行新增、刪除、編輯
每次的更動都會重新生成甘特圖，下載CSV也會即時更新

如有看不懂的地方可以點選影片操作教學

網頁連結

🔗 工程進度V0.1.0 網頁連結

完整做法

Github上面的是已經精挑細選過的程式碼，製作期間有陸陸續續砍掉一些功能，可以參照下面的註解處。

import streamlit as st
import pandas as pd
import matplotlib.pyplot as plt
import matplotlib.dates as mdates
import numpy as np
from matplotlib.font_manager import FontProperties
import matplotlib.ticker as ticker
from io import BytesIO
from datetime import date

### Init ###

def main_zh():

    SYSTEM_VERSION="V1.0.0"

    # st.set_page_config(layout='wide')

    font_prop = FontProperties(fname='./NotoSansCJK-Regular.ttc')

    # 初始化數據，如果 st.session_state 中沒有存儲數據

    # btn_sample = st.button("載入測試案例")

    if 'data' not in st.session_state:
        # df = pd.DataFrame(columns=['項目名稱', '花費金額', '起始日期', '持續天數', '結束日期'])
    #     st.session_state['data']=[
    #         {'項目名稱': '點我修改A', '花費金額': 1000, '起始日期': '2024-07-01', '持續天數': 5, '結束日期': ''},
    #         {'項目名稱': '點我修改B', '花費金額': 1000, '起始日期': '2024-07-01', '持續天數': 5, '結束日期': ''},
    #         {'項目名稱': '點我修改C', '花費金額': 1000, '起始日期': '2024-07-01', '持續天數': 5, '結束日期': ''}
    #         ]

    # # st.json(st.session_state)

    # if btn_sample:
        # data = {
        #     '項目名稱': ['基礎構造', '結構加固', '地基工程', '屋頂修復', '室內裝修', '電力系統升級', '水利設施建設', '道路擴建', '綠化工程', '消防安全系統'],
        #     '花費金額': [50000, 120000, 80000, 100000, 60000, 70000, 90000, 110000, 80000, 90000],
        #     '起始日期': ['2024-07-01', '2024-07-15', '2024-08-01', '2024-07-01', '2024-07-05', '2024-07-20', '2024-07-25', '2024-08-05', '2024-08-10', '2024-08-15'],
        #     '持續天數': [5, 12, 8, 10, 6, 7, 9, 11, 8, 9],
        #     '結束日期': [''] * 10
        # }

        # st.session_state['data']=[]

        sample_data = [
        {'項目名稱': '基礎構造', '花費金額': 50000, '起始日期': '2024-07-01', '持續天數': 5, '結束日期': ''},
        {'項目名稱': '結構加固', '花費金額': 120000, '起始日期': '2024-07-15', '持續天數': 12, '結束日期': ''},
        {'項目名稱': '地基工程', '花費金額': 80000, '起始日期': '2024-08-01', '持續天數': 8, '結束日期': ''},
        {'項目名稱': '屋頂修復', '花費金額': 100000, '起始日期': '2024-07-01', '持續天數': 10, '結束日期': ''},
        {'項目名稱': '室內裝修', '花費金額': 60000, '起始日期': '2024-07-05', '持續天數': 6, '結束日期': ''},
        {'項目名稱': '電力系統升級', '花費金額': 70000, '起始日期': '2024-07-20', '持續天數': 7, '結束日期': ''},
        {'項目名稱': '水利設施建設', '花費金額': 90000, '起始日期': '2024-07-25', '持續天數': 9, '結束日期': ''},
        {'項目名稱': '道路擴建', '花費金額': 110000, '起始日期': '2024-08-05', '持續天數': 11, '結束日期': ''},
        {'項目名稱': '綠化工程', '花費金額': 80000, '起始日期': '2024-08-10', '持續天數': 8, '結束日期': ''},
        {'項目名稱': '消防安全系統', '花費金額': 90000, '起始日期': '2024-08-15', '持續天數': 9, '結束日期': ''},
        ]

        
        # df = pd.DataFrame(data)
        # df['起始日期'] = pd.to_datetime(df['起始日期'])
        # df['結束日期'] = df['起始日期'] + pd.to_timedelta(df['持續天數'], unit='D')
        # st.session_state.data = df

        st.session_state['data']=sample_data

    # for item in st.session_state['data']:
    #     st.write(item)

    # 從 st.session_state 中獲取 DataFrame
    # df = st.session_state.data.dropna(subset=['持續天數'])


    col1, col2 = st.columns([1, 2])

    with col1:


        st.markdown("### :spiral_calendar_pad: 工程進度 "+SYSTEM_VERSION)
        st.info("作者:**HankLin @202407**")
        st.markdown("---")

        # 新增方式，回饋到 st.session_state

        # with st.form("C", True):
        #     myitem = st.text_input("施作項目:")
        #     mycost = st.number_input("花費金額:")
        #     mystart_date = st.date_input("開始日期:")
        #     mydays = st.number_input("持續天數")
        #     # st.json(st.session_state['data'])

        #     if st.form_submit_button("新增"):
        #         new_item = {
        #             # '項目編號': max(df['項目編號'], default=0) + 1,  # 自動分配新的項目編號
        #             '項目名稱': myitem,
        #             '花費金額': mycost,
        #             '起始日期': pd.to_datetime(mystart_date),
        #             '持續天數': mydays,
        #             '結束日期': ""#pd.to_datetime(mystart_date) + pd.to_timedelta(mydays, unit='D')
        #         }
        #         # df = pd.concat([df, pd.DataFrame([new_item])], ignore_index=True)
        #         # new_items=st.session_state['data'].append(new_item)
        #         # st.json(st.session_state['data'])
        #         # st.session_state.data = df
        #         st.session_state['data'].append(new_item)

        #         st.success("成功新增施工項目！")


        # 總表（編輯方式），回饋到 st.session_state
        st.markdown("##### 		👇 施工項目填寫")

        # st.json(st.session_state)

        df=pd.DataFrame(st.session_state['data'])

        # st.write(len(df))
        
        df['起始日期'] = pd.to_datetime(df['起始日期'])

        edited_df = st.data_editor(df, use_container_width=True,num_rows='dynamic',
                                column_config={
                                    "起始日期": st.column_config.DateColumn(
                                        "起始日期",
                                        min_value=date(2024, 1, 1),
                                        max_value=date(2030, 1, 1),
                                        format="YYYY-MM-DD",
                                        step=1,
                                    )
                                },
                                hide_index=True, column_order=("項目名稱", "花費金額", "起始日期", "持續天數"))

        edited_df['結束日期'] = edited_df['起始日期'] + pd.to_timedelta(edited_df['持續天數'], unit='D')

        is_show_text=st.toggle("圖塊文字")


    ### 計算流程以下都沒問題，可以先引入session_state後開始

    # final_df=st.session_state.data

    final_df=edited_df
    # final_df = edited_df.dropna(subset=['持續天數'])

    if len(final_df)==0:
        exit()
    else:
        # 計算每日耗費成本
        total_cost = final_df['花費金額'].sum()
        start_date = final_df['起始日期'].min()
        end_date = final_df['結束日期'].max()
        date_range = pd.date_range(start=start_date, end=end_date, freq='D')  # 每日頻率
        daily_cost = np.zeros(len(date_range))

        for i, row in final_df.iterrows():
            cost_per_day = row['花費金額'] / row['持續天數']
            daily_cost[(date_range > row['起始日期']) & (date_range <= row['結束日期'])] += cost_per_day

        # 計算累積花費金額和每日進度百分比
        cumulative_cost = np.cumsum(daily_cost)

        daily_progress = (daily_cost / total_cost) * 100
        cumulative_progress = (cumulative_cost / total_cost) * 100

        csv_data = pd.DataFrame({
            '日期': date_range,
            '當日費用': daily_cost,
            '累積費用': cumulative_cost,
            '當日進度': daily_progress,
            '累積進度': cumulative_progress
        })

        # st.dataframe(csv_data)

    with col2:

        # plt.xticks(rotation=45)

        fig, ax1 = plt.subplots(figsize=(14, 10))
        # ax1=plt.xticks(rotation=45)

        # 畫甘特圖，調整顏色和透明度，加入格線
        colors = plt.cm.Set3.colors  # 使用單一色系
        # st.json(final_df.to_json())
        cnt=0
        for i, row in final_df.iterrows():
            if not pd.isna(row["持續天數"]):
                color = colors[i % len(colors)]
                ax1.barh(row['項目名稱'], row['持續天數'], left=row['起始日期'], height=0.3, color=color)
                if is_show_text==True:
                    ax1.text(row['起始日期'], cnt, f"{row['項目名稱']}: {int(row['持續天數'])}天", color='black', verticalalignment='center', fontsize=10, fontproperties=font_prop)
                cnt=cnt+1

        # 設置標籤和標題
        ax1.set_xlabel('日期', fontproperties=font_prop)
        ax1.set_title('施工進度甘特圖', fontproperties=font_prop)

        for label in ax1.get_yticklabels():
            label.set_fontproperties(font_prop)

        # 在同一張圖上繪製每日累積進度圖並標示節點百分比
        ax2 = ax1.twinx()
        ax2.plot(date_range, cumulative_progress, marker='o', linestyle='-', color='orange')
        for i, txt in enumerate(cumulative_progress):
            if i % 5== 0 or txt==100:  # 每10%標示一次
                ax2.annotate(f'{int(txt)}%', (date_range[i], cumulative_progress[i]), textcoords="offset points", xytext=(0,10), ha='center', fontproperties=font_prop)

        ax2.set_ylabel('累積進度百分比 (%)', fontproperties=font_prop)
        ax2.yaxis.set_major_locator(ticker.MultipleLocator(base=10))
        # 調整 x 軸日期顯示為每半個月
        ax1.xaxis.set_major_locator(mdates.DayLocator(interval=10))  # 每10顯示一次日期
        ax1.xaxis.set_minor_locator(mdates.DayLocator(interval=1))  # 每天都顯示日期
        ax1.xaxis.set_major_formatter(mdates.DateFormatter('%Y-%m-%d'))


        # 添加網格線
        ax2.grid(True, which='both', linestyle=':', linewidth=0.5)

        # 添加圖例，將位置調整到右下角
        # ax1.legend(['工程項目'], loc='upper left', prop=font_prop)
        ax2.legend(['累積進度'], loc='lower right', prop=font_prop)

        # 調整圖形排版
        fig.tight_layout()

        ax1.set_xlim(start_date - pd.Timedelta(days=3), end_date + pd.Timedelta(days=3))

        # 顯示圖形
        st.pyplot(fig)

    # 下載 CSV 按鈕
    csv_data = pd.DataFrame({
        'date': date_range,
        'progress(%)': daily_progress/100,
        'sum_progress(%)': cumulative_progress/100
    })
    csv_data['date'] = csv_data['date'].dt.strftime('%Y-%m-%d')  # 將日期轉換為字串格式
    csv_string = csv_data.to_csv(index=False, encoding='utf-8-sig')

    # 提供下載按鈕

    with col1:

        st.download_button(
            label="下載 CSV 檔案",
            data=csv_string,
            file_name='progress_data.csv',
            mime='text/csv'
        )

# def main_eng():
#     ### Initialization ###

#     SYSTEM_VERSION = "V1.0.0"

#     font_prop = FontProperties(fname='./NotoSansCJK-Regular.ttc')

#     # Initialize data if not stored in st.session_state

#     if 'data' not in st.session_state:
#         sample_data = [
#             {'project_name': 'Foundation Construction', 'cost': 50000, 'start_date': '2024-07-01', 'duration_days': 5, 'end_date': ''},
#             {'project_name': 'Structural Reinforcement', 'cost': 120000, 'start_date': '2024-07-15', 'duration_days': 12, 'end_date': ''},
#             {'project_name': 'Foundation Engineering', 'cost': 80000, 'start_date': '2024-08-01', 'duration_days': 8, 'end_date': ''},
#             {'project_name': 'Roof Repair', 'cost': 100000, 'start_date': '2024-07-01', 'duration_days': 10, 'end_date': ''},
#             {'project_name': 'Interior Decoration', 'cost': 60000, 'start_date': '2024-07-05', 'duration_days': 6, 'end_date': ''},
#             {'project_name': 'Power System Upgrade', 'cost': 70000, 'start_date': '2024-07-20', 'duration_days': 7, 'end_date': ''},
#             {'project_name': 'Water Facilities Construction', 'cost': 90000, 'start_date': '2024-07-25', 'duration_days': 9, 'end_date': ''},
#             {'project_name': 'Road Expansion', 'cost': 110000, 'start_date': '2024-08-05', 'duration_days': 11, 'end_date': ''},
#             {'project_name': 'Greening Project', 'cost': 80000, 'start_date': '2024-08-10', 'duration_days': 8, 'end_date': ''},
#             {'project_name': 'Fire Safety System', 'cost': 90000, 'start_date': '2024-08-15', 'duration_days': 9, 'end_date': ''},
#         ]
        
#         st.session_state['data'] = sample_data

#     # Display UI

#     col1, col2 = st.columns([1, 2])

#     with col1:
#         st.markdown("### :spiral_calendar_pad: Project Progress " + SYSTEM_VERSION)
#         st.info("Author: **HankLin @202407**")
#         st.markdown("---")

#         st.markdown("##### 👇 Edit Construction Projects")

#         df = pd.DataFrame(st.session_state['data'])

#         edited_df = st.data_editor(df, use_container_width=True, num_rows='dynamic',
#                                 column_config={
#                                     "start_date": st.column_config.DateColumn(
#                                         "Start Date",
#                                         min_value=date(2024, 1, 1),
#                                         max_value=date(2030, 1, 1),
#                                         format="YYYY-MM-DD",
#                                         step=1,
#                                     )
#                                 },
#                                 hide_index=True, column_order=("project_name", "cost", "start_date", "duration_days"))

#         edited_df['end_date'] = edited_df['start_date'] + pd.to_timedelta(edited_df['duration_days'], unit='D')

#         is_show_text = st.toggle("Show Block Text")

#     with col2:
#         fig, ax1 = plt.subplots(figsize=(14, 10))

#         colors = plt.cm.Set3.colors
#         cnt = 0
#         for i, row in edited_df.iterrows():
#             if not pd.isna(row["duration_days"]):
#                 color = colors[i % len(colors)]
#                 ax1.barh(row['project_name'], row['duration_days'], left=row['start_date'], height=0.3, color=color)
#                 if is_show_text:
#                     ax1.text(row['start_date'], cnt, f"{row['project_name']}: {int(row['duration_days'])} days", color='black', verticalalignment='center', fontsize=10, fontproperties=font_prop)
#                 cnt += 1

#         ax1.set_xlabel('Date', fontproperties=font_prop)
#         ax1.set_title('Construction Progress Gantt Chart', fontproperties=font_prop)

#         for label in ax1.get_yticklabels():
#             label.set_fontproperties(font_prop)

#         ax2 = ax1.twinx()
#         ax2.plot(date_range, cumulative_progress, marker='o', linestyle='-', color='orange')
#         for i, txt in enumerate(cumulative_progress):
#             if i % 5 == 0 or txt == 100:
#                 ax2.annotate(f'{int(txt)}%', (date_range[i], cumulative_progress[i]), textcoords="offset points", xytext=(0, 10), ha='center', fontproperties=font_prop)

#         ax2.set_ylabel('Cumulative Progress (%)', fontproperties=font_prop)
#         ax2.yaxis.set_major_locator(ticker.MultipleLocator(base=10))

#         ax1.xaxis.set_major_locator(mdates.DayLocator(interval=10))
#         ax1.xaxis.set_minor_locator(mdates.DayLocator(interval=1))
#         ax1.xaxis.set_major_formatter(mdates.DateFormatter('%Y-%m-%d'))

#         ax2.grid(True, which='both', linestyle=':', linewidth=0.5)
#         ax2.legend(['Cumulative Progress'], loc='lower right', prop=font_prop)

#         fig.tight_layout()
#         ax1.set_xlim(start_date - pd.Timedelta(days=3), end_date + pd.Timedelta(days=3))

#         st.pyplot(fig)

#     # Download CSV button
#     csv_data = pd.DataFrame({
#         'date': date_range,
#         'progress(%)': daily_progress/100,
#         'sum_progress(%)': cumulative_progress/100
#     })
#     csv_data['date'] = csv_data['date'].dt.strftime('%Y-%m-%d')
#     csv_string = csv_data.to_csv(index=False, encoding='utf-8-sig')

#     with col1:
#         st.download_button(
#             label="Download CSV File",
#             data=csv_string,
#             file_name='progress_data.csv',
#             mime='text/csv'
#         )

if __name__ == "__main__":
    
    st.set_page_config(layout='wide')
    # language_check=st.checkbox("English")
    # if language_check==True:
        # main_eng()
    # else:
    main_zh()

開發過程紀錄

在dataframe中處理日期要把字串類型的日期透過'pd.to_datetime'轉型才能用
中文顯示會有問題的地方要先下載好字型檔讓'fontproperties'引用
甘特圖與累積進度圖要交疊在同一張圖要透過'ax2=ax1.twinx()'才能連一起
調整X軸座標顯示時，可以用'ax1.set_xlim(start_date - pd.Timedelta(days=3), end_date + pd.Timedelta(days=3))'來將前後各往外擴一些