---
# System prepended metadata

title: EMS手冊
tags: [Project, EMS]

---

{%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. 數據時區轉換
:::




