{%hackmd @themes/orangeheart %} EMS手冊 === :::warning [toc] ::: ## <center>架構</center> :::success * **資料庫:** Postgresql 負責存放機台數據。 * **前端:** ChartJS / NextJS / Bootstrap CharJs即時顯示互動圖表,NextJS與Bootstrap分別負責網頁功能與美術 * **後端:** Django 負責維持伺服器運作 ::: ``` mermaid --- title: 資料流 --- flowchart LR; subgraph 資料過濾 direction LR Outer[外部數據收集] subgraph Server direction LR outer_db[第一層資料庫] primary_db[第二層資料庫] outer_db -->|過濾| primary_db end Outer -->|無線網路|Server end PLC1 --> Outer PLC2 --> Outer PLC3 --> Outer Server -->|Django內部處理| 網頁呈現 ``` **使用** 製作Docker容器存放系統,方便部屬在伺服器上。 ## <center>執行流程</center> ### 準備Docker 1. 前往[Docker網站](https://www.docker.com/) 2. 下載Docker Desktop ![未命名2](https://hackmd.io/_uploads/Hyxop-rkR.png =50%x)![未命名](https://hackmd.io/_uploads/Bks9aWS1R.png =50%x) :::warning :bulb: **注意** 依照作業系統選擇版本 ::: ### 安裝流程 1. 下載後執行安裝精靈 2. 選擇建議配置 3. 安裝完成畫面 ![image](https://hackmd.io/_uploads/SJLGCnF1C.png) ### 確認安裝成功(windows) :::info :bulb: **開起命令介面** 開始選單⮕搜尋欄打上``powershell``⮕滑鼠右鍵++系統管理員++開啟 ::: 1. 開啟命令列介面,輸入``docker --version``,輸出版本號 >docker version 25.0.3, build 4debf41 2. 開啟Docker Desktop,啟動服務 > 開始菜單 ⮕ 搜尋Docker Desktop ⮕ 不登入繼續 ⮕ 啟動服務 ![image](https://hackmd.io/_uploads/ryN4CbBk0.png =80%x) 3. (Optional)在命令介面打上指令``docker run hello-world``,確認能從網路拉取容器 ![image](https://hackmd.io/_uploads/ByQ3yMrkR.png=80%x) ### 下載並建置 1. 任選一空資料夾,在裡面創建``compose.yml``,內容如下 {%hackmd IcsHyHKRS3issn8IJBQB6g %} 2. 開啟指令介面,至``compose.yml``同資料夾下,輸入<br>``docker-compose up --build`` 等待系統建置 :::warning :warning: **DEBUG Mode** 未部屬時須設置DEBUG環境變數,否則無法正確顯示網頁。 修改``compose.yml`` ```dockerfile ems: image: robert1717/ems:v0 environment: ..... - DJANGO_DEBUG=True #添加此變數 ``` ::: *過程如圖所示* ![image](https://hackmd.io/_uploads/H1S9gk9JA.png) ### 執行 1. 若無錯誤,等待程式執行,執行中按``Ctrl``+``C``中止 2. 開啟瀏覽器,前往``http://127.0.0.1:8000/`` ## <center>常用伺服器端指令</center> 與``manage.py``同目錄之下,使用``python .\manage.py [管理指令]`` 可執行管理指令,常用管理指令有: ``runserver`` ~ 啟動伺服器 ``createsuperuser`` ~ 創造管理員帳號 ``makemigrations`` ~ 製作資料庫更新檔 ``migration`` ~ 應用資料庫更新檔案 ## <center>功能</center> ==數據列表== ![image](https://hackmd.io/_uploads/SyZvozr1A.png) :::success 1. 依照內容動態搜尋數據 2. 個別修改數據內容 3. 批量修改標籤 ::: --- ==顯示圖表== ![image](https://hackmd.io/_uploads/rJvRoGryR.png =50%x)![image](https://hackmd.io/_uploads/HkGz2zrkR.png =50%x) :::success 1. 數據即時呈現 2. 依照時間段/標籤選擇呈現數據範圍 ::: ==後臺管理== ![image](https://hackmd.io/_uploads/S1rPTzHJC.png) :::success 1. 僅供管理員使用 2. 支援數據修改,查詢,過濾 3. 管理一般使用者帳戶,包含更改密碼,新增與刪除。 ::: ==其他功能== :::success 1. 創建一般使用者帳戶創建 2. 數據時區轉換 :::