---
# System prepended metadata

title: HW1 網頁專案 20190725
tags: [Map, LAMP]

---


HW1 網頁專案 20190725
===
###### tags: `LAMP` `Map`
###### made by:<`his name`><`Singyu`><`blake11235`>

---

# Survey
- 網站主架構
    - ==LAMP：Linux、Apache、MySQL、PHP==
    - MEAN：MongoDB、ExpressJS、AngularJS、Node.js
:::info
- 對(舊)瀏覽器的支援度?
- 執行效率?
:::

- 地圖嵌入
    - ==Open Layers==
        - 網路範例多，官方建議在nodejs環境中執行
        - 免費版無限制請求數
    - iMap API
        - 台灣公司，提供全中文介面及地圖台灣部分較為完善。
        - 免費版限制一天250請求
:::info
- 收費?免費版是否能達成HW要求?
- 台灣部分地圖完整度?
- 是否可以嵌入icon及馬達相關資料?
:::

- 美觀相關工具
    - Bootstrap
        - 前端開源工具包
        - 具備眾多設計好的物件

# Learn

- 架設LAMP平台
    - 團隊中有相關經驗，可以較快速架設
- 嵌入Open Layers
    - 因為免費且無請求限制
- 美觀部分用Bootstrap現成物件
    - 開源、參考資料多、容易美化

# Design

![](https://i.imgur.com/qY7L3Fn.png)



``` mermaid
    gantt
    title 簡易時間規劃

    section 主軸
    蒐集       :a, 2019-07-04, 7d
    測試       :b, after a  , 7d
    分工撰寫    :c, after b  , 10d
    系統整合    :after c  , 5d

```
# Implement
- **open street map** 實際操作
![](https://i.imgur.com/iP8MtDo.jpg)
    - 可透過 js 設置來呈現所需要的經緯度。
    ```javascript=
    <script>
    map = L.map('map').setView([-25.36356, 131.05444], 5);

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    	attribution: '<a href="https://www.openstreetmap.org/">OSM</a>',
    	maxZoom: 18,
    }).addTo(map);
    </script>
    ```
    -使用 **marker** 來完成 pump 位置之標記
    ```javascript=
     <script>
    map = new OpenLayers.Map("mapdiv");
    map.addLayer(new OpenLayers.Layer.OSM());

    var lonLat = new OpenLayers.LonLat( -0.1279688 ,51.5077286 )
          .transform(
            new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
            map.getProjectionObject() // to Spherical Mercator Projection
          );
          
    var zoom=16;

    var markers = new OpenLayers.Layer.Markers( "Markers" );
    map.addLayer(markers);
    
    markers.addMarker(new OpenLayers.Marker(lonLat));
    
    map.setCenter (lonLat, zoom);
  </script>
    ```

- **SQL SERVER**
    目前sql server 以成功開啟，並設置在 localhost 。
    已有自訂好資料結構，提供網站所需之資料。
```
1> select * from Pump_info
2> select * from Pump_data
3> go
name       class                                              management                                         location                                           GPS_latitude   GPS_longitude 
---------- -------------------------------------------------- -------------------------------------------------- -------------------------------------------------- -------------- --------------
g125       gas                                                district office                                    West Central Dist., Tainan City                          22.98756      120.18774
y1112      diesel                                             district office                                    West Central Dist., Tainan City                         22.993555       120.1919

(2 rows affected)
name       datetime                               status      hp          head        flow           rpm         e_temperature e_rpm       e_voltage     
---------- -------------------------------------- ----------- ----------- ----------- -------------- ----------- ------------- ----------- ------------
```

- **php on Apache2**
已架設完畢，準備要與 sql server 連接。


---

# NOTE

# info.php
＃單機資訊 (由保管單位與機組名稱來選擇所要顯示的機組)
1.保管單位 (下拉選單)(全選/安平區公所/大禹公司/成功大學/SMD)
2.機組名稱 (下拉選單)(.....)
3.機組種類 柴油式
4.機組座標 台南市/安平區/23.xxxxx;120.xxxxx
5.異常通知 引擎溫度異常
6.歷史紀錄 (以時間軸與表格顯示過去其單機資訊)
7.機組狀態
工作中 (待命/關機/維修中/異常中止)
當前馬力 15HP
當前揚程 20M
當前出水量 0.5m3/m
當前轉速 3500rpm
引擎溫度 50
引擎轉速 8000rmp
電瓶電壓 5.2V
   
# 
＃機組清單 (以表格呈現)  (依照機組分類列出清單，可點選分類做resort)
(點選機組會跳到單機資訊)
名稱 // 保管單位 // 種類 // 位置 // 狀態 // 備註  
y1112/  安平區公所  /柴油式       /安平區  /正常  /
y4563/  安平區公所  /柴油式       /安平區  /正常  /
y4689/  大禹公司      /柴油式       /中西區  /正常  /
g125/    安平區公所  /汽油式       /安平區  /異常  /
g798/    大禹公司      /汽油式       /安平區  /正常  /須更換機油
g456/    成功大學      /汽油式      /東區       /正常  /
d468/    成功大學     /老達利式  /東區       /正常  /
d778/    SMD             /老達利式  /北區       /異常  /請添購備用零件

＃維護清單
？？

＃宣達資訊 (條列式呈現要宣答的事項)
1. 2019/7/20 13:01 請各單位注意，由於颱風將近，請注意各機組的運作正常，隨時可啟用。
2. 2019/6/20 10:15 請注意，型號YAG之引擎冷卻異常，操作時請特別注意。
3. 2019/6/19 13:20 台南市安平區將有官員訪查之活動，請當地常駐技術人員協辦。

『此區域須主管階層才會出現』
＃機組設定 (更改單機資訊)
(顯示與單機資訊一樣格式，但可以修改)

＃發報設定 (編輯宣達資訊)
1. .......... 刪除
2. .......... 刪除
3. .......... 刪除
新增 (時間，內容)

＃權限設定 (人員帳號權限設定)
帳號，姓名，單位，權限，登入時間，強制刪除
ppgg/曾小平/技術組/user/1.xx/xx xx:xx 2.xx/xx xx:xx
cinfong/老闆/企劃組/root/1.oo/oo oo:oo 2.oo/oo oo:oo
新增使用者：
帳號，姓名，單位，權限


##機組運轉狀態(畫圖表)
工作中 (待命/關機/維修中/異常中止)
當前馬力 15HP
當前揚程 20M
當前出水量 0.5m3/m
當前轉速 3500rpm

引擎溫度 50
引擎轉速 8000rmp
電瓶電壓 5.2V

##地圖顯示(依種類不同有不同圖標)
機組名稱 y1112
機組種類 diesel
運作指示 工作中 (待命/關機/維修中/異常中止)
出水量 0.47
