# 電錶查詢系統

---

## 目前後端提供給我的API有哪些?

1. [所有部門的名稱和ID](https://codepen.io/pei-chi-tsai/pen/RwQgmWO)

2. [全部的資料](https://codepen.io/pei-chi-tsai/pen/BaYZezN?editors=1010)

3. [撈單一部門的資料](https://codepen.io/pei-chi-tsai/pen/abqwrZG?editors=1010
)

只需要改?dept_id
=後面的參數

例如:
http://192.168.1.148:8000/api/Environment/EnergyOfDate?dept_id=01

後端跟我說 可以用 s_data 和 e_data篩選日期範圍

---

## [版面規劃](https://whimsical.com/GNKp1UTDkhxTpskkLvQUVJ):

### 1. 主要頁面: 所有部門當天電錶顯示資料

使用到的套件: (C3.js的[Gauge Chart](https://c3js.org/samples/chart_gauge.html))


功能:
(1)點擊整張卡片會連結到 **2.即時電表顯示頁面** 左上角的select區塊部門會帶上在主頁點選的部門名稱 下面的卡片區塊會跑出電錶資料 (2)點擊到單一個圖表會跳到**3. 單一電錶資料的頁面**

目前做的畫面:

---

## **!!!遇到的問題!!!**

**Q1.** 一直無法調整C3 gauge chart 的尺寸 在圖表和文字之前就是有一塊莫名的留白


<font color=red>
A1.可能要F12看一下是什麼問題，可以用css 去把空白弄掉

</font>

**Q2.** 每次跑這頁都會跑出D3報錯 不太確定是不是用錯什麼? 在public的index.js載了CDN又在components資料夾內的DeptList.vue檔案裡import c3 from 'c3'​ 可是不這樣寫又會說找不到c3


<font color=red>
A2.如果已經npm c3 了，應該不用在public 裡面加入cdn 部分

</font>

<font color=blue>
5/23
把cdn去掉之後 畫面會長不一樣

又報這個錯誤

</font>
**Q3.**如果點了某個部門的卡片 要跳轉到**2.即時電表顯示頁面** 又要把部門select區的內的option文字是顯示哪個部門
是不是要請後端多開api內的欄位 讓我可以寫在components資料夾內的DeptList.vue檔案的renderHTML函式內 去串資料?

<font color=red>
A3.感覺不用

</font>

**Q4.** 點擊到單一個圖表會跳到**3. 單一電錶資料的頁面**
是不是也要請後端再多開一個id欄位才可以帶動態路由到單一的頁面上跑資料 還是可以不用麻煩後端

---

### 2. 包含和其他部門比較的即時電錶顯示資訊頁面

功能:
(1)選擇左上區塊的部門選單 會觸發change事件帶出不同部門的電錶資料
(2)右上區塊顯示全部部門當月以使用電量的doughnut chart (3)左下區塊顯示左上選取部門的當月所有電錶資料的圓餅圖
(4)右下區塊顯示近十天左上選取部門的所有電表折線圖

---

## **!!!遇到的問題!!!**

**Q5.** 看很久還是不懂vue chart.js的文件
不知道從哪裡帶入api的資料
**Chart使用API的數據** 那一個連結
https://vue-chartjs.org/zh-cn/guide/#chart%E4%BD%BF%E7%94%A8api%E7%9A%84%E6%95%B0%E6%8D%AE

<font color=red>
A5.這我需要點時間研究一下，整體來看，好像就是這邊有點卡住?

</font>

智商低到連範例也是看不懂
https://codesandbox.io/s/github/apertureless/vue-chartjs/tree/main/sandboxes/doughnut?file=/src/components/doughnutChart.ts

**Q6.** 後端說要新增一個欄位讓我可以判別資料的月份 但我跟他說應該不用 如果給他在新增一個 判別月份 的欄位是不是比較好 目前右上區塊doughnut chart因為不會用chart.js 還是用c3做

判別當月資料我是在components的DonutChart.vue寫一個 getMonthDeptData ()函式來判斷

但發現如果要做後面單一電表資料還是要判別月份 可是都要求後端生欄位是不是有點不太Ok?

**Q7.** 在components的DonutChart.vue檔案內
想寫出一個函式
把取得的資料組成c3套件要的資料格式 (如果可以用chart.js資料格式好像又不一樣)
想法是
利用data內的monthlyData陣列和deptCategory陣列跑雙迴圈去跑出一個一個部門的資料帶到 donutChartSetting ()函式內的columns

組成的資料長這樣=>

 [
            [ 部門名稱, 當月累積的使用度數 ]​,
             [ 部門名稱, 當月累積的使用度數 ]​

          ],

在迴圈內組成想要的資料 一直還寫不出來

要把部門當日的last_kwh_deliver_tot欄位剪掉當月1日的
first_kwh_deliver_tot欄位 算出整個月目前累積多少kwh

---

### 3. 單一電錶資料的頁面

功能:
(1) 帶出單一電錶每月用電的長條圖 (x軸是1日-30/31日)
(2) 表格目前想說帶出api現有的資料
其實也不知道帶這幹麼 還沒想到可以改成什麼
(3) 和去年同期比較圖

---

## **!!!還沒做覺得想不到!!!**

**Q8.** 和去年同期比較 沒有去年資料不知道怎麼幻想 覺得好難啊~~~
http://192.168.1.148:8000/api/Environment/EnergyOfDate?s_date=2021-05-01&e_date=2021-05-31&host=192.168.7.11

<font color=red>
A8.整體來說可能需要使用假資料
1.可以請後端幫忙，生一些去年資料；
2.不然你就是要在前面調整作出假資料

</font>

---

5/24 套件問題

終端機一直報出錯誤




備註:

參考版型:
https://startbootstrap.com/theme/sb-admin-2

https://github.com/startbootstrap/startbootstrap-sb-admin-2

https://dribbble.com/shots/6464404/attachments/6464404-Dashboard-Design-Concept?mode=media

https://dribbble.com/shots/17171783-Project-Management-Dashboard-UI-Concept/attachments/12272346?mode=media

https://dribbble.com/shots/16928773/attachments/11998692?mode=media

https://advcloudfiles.advantech.com/cms/ce9ccdfb-97cb-4b9a-aa40-5411ad4eff3c/Content/content-image-1563345710096.png

//192.168.7.11 總電
//192.168.7.12 UPS不斷電系統
//192.168.7.13 冷氣

---
有時間再增加的功能:
loading 動畫:
https://ankurk91.github.io/vue-loading-overlay/

https://www.npmjs.com/package/vue-loading-overlay

感恩咖咖

https://codepen.io/gon790219/pen/bGLYBxN?editors=0010

https://blog.51cto.com/u_15127583/3441226

https://codepen.io/pei-chi-tsai/pen/YzeEdyq

https://blog.csdn.net/m0_49159526/article/details/117919606