前端继续bugfix

src/api/ChartReport.js

@@ -10,18 +10,18 @@ export default {
   },
   'xAxis': {
     'categories': [
-      '7/8',
-      '7/9',
-      '7/10',
-      '7/11',
-      '7/12',
-      '7/13',
-      '7/14',
-      '7/15',
-      '7/16',
-      '7/17',
-      '7/18',
-      '7/19'
+      // '7/8',
+      // '7/9',
+      // '7/10',
+      // '7/11',
+      // '7/12',
+      // '7/13',
+      // '7/14',
+      // '7/15',
+      // '7/16',
+      // '7/17',
+      // '7/18',
+      // '7/19'
     ],
     'crosshair': true
   },
@@ -39,20 +39,20 @@ export default {
   },
   'series': [
     {
-      'name': 'Shenzhen Office',
+      'name': 'Shenzhen DIY Hackerspace',
       'data': [
-        49.9,
-        71.5,
-        106.4,
-        129.2,
-        144,
-        176,
-        135.6,
-        148.5,
-        76.4,
-        194.1,
-        95.6,
-        54.4
+        // 49.9,
+        // 71.5,
+        // 106.4,
+        // 129.2,
+        // 144,
+        // 176,
+        // 135.6,
+        // 148.5,
+        // 76.4,
+        // 194.1,
+        // 95.6,
+        // 54.4
       ]
     }
   ]

src/api/LastReports.js

@@ -1,64 +1,66 @@
-export default [{
-  id: 5146,
-  time: 1500650440,
-  arriveAt: 1500650445,
-  data: 3156.00
-}, {
-  id: 5146,
-  time: 1500650440,
-  arriveAt: 1500650445,
-  data: 3156.00
-}, {
-  id: 5146,
-  time: 1500650440,
-  arriveAt: 1500650445,
-  data: 3156.00
-}, {
-  id: 5146,
-  time: 1500650440,
-  arriveAt: 1500650445,
-  data: 3156.00
-}, {
-  id: 5146,
-  time: 1500650440,
-  arriveAt: 1500650445,
-  data: 3156.00
-}, {
-  id: 5146,
-  time: 1500650440,
-  arriveAt: 1500650445,
-  data: 3156.00
-}, {
-  id: 5146,
-  time: 1500650440,
-  arriveAt: 1500650445,
-  data: 3156.00
-}, {
-  id: 5146,
-  time: 1500650440,
-  arriveAt: 1500650445,
-  data: 3156.00
-}, {
-  id: 5146,
-  time: 1500650440,
-  arriveAt: 1500650445,
-  data: 3156.00
-}, {
-  id: 5146,
-  time: 1500650440,
-  arriveAt: 1500650445,
-  data: 3156.00
-}, {
-  id: 5146,
-  time: 1500650440,
-  arriveAt: 1500650445,
-  data: 3156.00
-}, {
-  id: 5146,
-  time: 1500650440,
-  arriveAt: 1500650445,
-  data: 3156.00
-}]
+// export default [{
+//   id: 5146,
+//   time: 1500650440,
+//   arriveAt: 1500650445,
+//   data: 3156.00
+// }, {
+//   id: 5146,
+//   time: 1500650440,
+//   arriveAt: 1500650445,
+//   data: 3156.00
+// }, {
+//   id: 5146,
+//   time: 1500650440,
+//   arriveAt: 1500650445,
+//   data: 3156.00
+// }, {
+//   id: 5146,
+//   time: 1500650440,
+//   arriveAt: 1500650445,
+//   data: 3156.00
+// }, {
+//   id: 5146,
+//   time: 1500650440,
+//   arriveAt: 1500650445,
+//   data: 3156.00
+// }, {
+//   id: 5146,
+//   time: 1500650440,
+//   arriveAt: 1500650445,
+//   data: 3156.00
+// }, {
+//   id: 5146,
+//   time: 1500650440,
+//   arriveAt: 1500650445,
+//   data: 3156.00
+// }, {
+//   id: 5146,
+//   time: 1500650440,
+//   arriveAt: 1500650445,
+//   data: 3156.00
+// }, {
+//   id: 5146,
+//   time: 1500650440,
+//   arriveAt: 1500650445,
+//   data: 3156.00
+// }, {
+//   id: 5146,
+//   time: 1500650440,
+//   arriveAt: 1500650445,
+//   data: 3156.00
+// }, {
+//   id: 5146,
+//   time: 1500650440,
+//   arriveAt: 1500650445,
+//   data: 3156.00
+// }, {
+//   id: 5146,
+//   time: 1500650440,
+//   arriveAt: 1500650445,
+//   data: 3156.00
+// }]
+
+export default [] // # default empty data
 
 import moment from 'moment'
 import { secondsToMillis } from '../utils/datetime'
@@ -88,11 +90,11 @@ export function parseLastReports (powerDetailList) {
   }
 
   const records = powerDetailList.reduce((daySum, dayRecord) => {
-    return daySum.concat(dayRecord ? dayRecord.detail.map(entryRecordToOption) : [])
+    return daySum.concat(dayRecord ? dayRecord.detail : [])
   }, [])
 
   // force sort once, by time descending
   records.sort((x1, x2) => (x2.time - x1.time))
 
-  return records.slice(0, 50)
+  return records.slice(0, 50).map(entryRecordToOption)
 }

src/api/TodayUsage.js

@@ -1,29 +1,89 @@
-const PlaceHolder = require('../assets/1px.gif')
-export default [{
-  img: PlaceHolder,
+// 注： 这里的电量应该是用电量（delta）而非读数
+const DEFAULT_DATA = [{
   title: '今日电量',
-  sub: 'Updated: 16:35'
+  total: '0.00',
+  sub: 'Updated: 00:00',
+  usage: '0.00'
 }, {
-  img: PlaceHolder,
   title: '昨日电量',
-  sub: 'Updated: 16:35'
+  total: '0.00',
+  sub: 'Updated: 00:00',
+  usage: '0.00'
 }, {
-  img: PlaceHolder,
   title: '本月电量',
-  sub: 'Updated: 16:35'
+  total: '0.00',
+  sub: 'Updated: 00:00',
+  usage: '0.00'
 }, {
-  img: PlaceHolder,
   title: '上月电量',
-  sub: 'Updated: 16:35'
+  total: '0.00',
+  sub: 'Updated: 00:00',
+  usage: '0.00'
 }]
 
+export default DEFAULT_DATA
+
+import moment from 'moment'
+import { secondsToMillis, createPeriodChecker } from '../utils/datetime'
 /*
   Required API request:
-    ?preiod=2months
+    ?preiod=3months
+    repsonse = array of simple entries:
+        {
+          date: 'YYYY-MM-DD',
+          node_id: '001',
+          simple: {
+            total: 12345,
+            time: 1234567890
+          }
+        }
 
   Return a report of summary:
-  // ...
+    (template of DEFAULT_DATA)
  */
 export function parseOverviewReport (response) {
-  return []
+  // 创建一个默认数据的副本
+  const usageReport = DEFAULT_DATA.map((defaultUsage) => Object.assign({}, defaultUsage))
+
+  // 获取昨日和今日的电量读数
+  const today = moment().startOf('day')
+  const yesterday = moment().subtract(1, 'd').startOf('day')
+  const todayQuery = createDatePeriodBoundaryQuery(today, today)
+  const yesterdayQuery = createDatePeriodBoundaryQuery(yesterday, yesterday)
+
+  return usageReport
+}
+
+// 将response的simple entry转换成TodayUsage要用的显示内容
+function parsePeriodToUsageDisplay (period, withDate = false) {
+  let total = Number(0).toFixed(2)
+  let dateStr = 'N/A'
+
+  if (period.start && period.end) {
+    const entryDate = moment(secondsToMillis(period.end.simple.time))
+    dateStr = entryDate.format(withDate ? 'YYYY-MM-DD HH:mm' : 'HH:mm')
+
+    total = Number(period.end.simple.total - period.start.simple.total).toFixed(2)
+  }
+
+  return {
+    total,
+    sub: `Updated: ${dateStr}`
+  }
+}
+
+/*
+  根据开始日期和结束日期生成一个查询器，当给出一个日期的列表数据时，能找出用于算这个区间差值的开始和结束元素。
+
+  例如：
+    1. 算当天的电量： 返回{ start: 昨日记录，end: 今日记录 }
+    2. 算当月的电量： 返回{ start: 上月最后一日的记录, end: 今月最后一日的记录 }
+
+  如果边界记录不存在的话，会返回落在这个日期区间内最接近边界的记录
+ */
+function createDatePeriodBoundaryQuery (startDate, endDate) {
+  const lastBeforeStart = startDate.subtract(1, 'day')
+  return (entries) => {
+
+  }
 }

src/pages/Overview.vue

@@ -3,7 +3,8 @@
     <h1 class="page-header">Dashboard</h1>
   	<div class="row placeholders">
   	  <div class="col-xs-6 col-sm-3 placeholder" v-for="tu of TodayUsage">
-  	    <img :src="tu.img" width="200" height="200" class="img-responsive" :alt="tu.title">
+  	    <!-- <img :src="tu.img" width="200" height="200" class="img-responsive" :alt="tu.title"> -->
+        <h1>{{tu.total}}</h1>
   	    <h4>{{tu.title}}</h4>
   	    <span class="text-muted">{{tu.sub}}</span>
   	  </div>
@@ -59,6 +60,7 @@ export default {
     return Promise.all([get48Hours(), get30Days(), get90Days()])
       .then(([twoDaysResponse, monthResponse, threeMonthResponse]) => {
         // update report data here...
+        this.TodayUsage = parseOverviewReport(threeMonthResponse)
         this.LastReports = parseLastReports(twoDaysResponse)
 
         const chartSeries = parseChartReport(monthResponse)

src/utils/datetime.js

@@ -6,3 +6,12 @@ export const secondsToMillis = (seconds) => {
 export const milliesToSeconds = (millis) => {
   return millis / 1000
 }
+
+export const createPeriodChecker = (startMoment, endMoment) => {
+  const startMillis = startMoment.valueOf()
+  const endMillis = endMoment.valueOf()
+
+  return (millis) => {
+    return millis >= startMillis && millis <= endMillis
+  }
+}