完善

src/views/statisticView/DayStatistics.vue

@@ -9,13 +9,12 @@
             <a-date-picker
               v-model="time"
               :format="BaseTool.Date.PICKER_NORM_DATE_PATTERN"
-              @change="onDateChange"
-              @ok="onOk">
+              @change="onDateChange">
               <span class="date">
                 <a-icon type="calendar" theme="filled" />
               </span>
             </a-date-picker>
-            {{ BaseTool.Date.formatter(time,dateVisual?BaseTool.Date.PICKER_NORM_DATE_PATTERN:BaseTool.Date.PICKER_NORM_YEAR_MONTH) }}
+            {{ BaseTool.Date.formatter(time,BaseTool.Date.PICKER_NORM_DATE_PATTERN) }}
           </div>
           <div class="dateStatistics" style="float:left">
             <a-button type="primary" @click="doExport()">导出</a-button>
@@ -26,7 +25,7 @@
             <thead>
               <tr >
                 <th rowspan="2" class="list-header" style="color:#fff">时间</th>
-                <th colspan="2" class="list-header" style="color:#fff" v-for="i in 6" :key="i"> 1G0{{ i }}时代思康{{ i }}回</th>
+                <th colspan="2" class="list-header" style="color:#fff" v-for="(item,i) in dataInfo[0].lines" :key="i"> {{ item.name }}</th>
               </tr>
               <tr>
                 <template v-for="i in 6 ">
@@ -36,17 +35,17 @@
               </tr>
             </thead>
             <tbody>
-              <tr v-for="i in 24" :key="i">
-                <td class="list-header" style="box-shadow:none; background: rgba(2, 205, 255, 0.1);font-size: 16px;font-weight: 400;">{{ (i-1) + ':00' }}</td>
-                <template v-for="i in 6 ">
-                  <td class="list-header" style="box-shadow:none; background: rgba(2, 205, 255, 0.1);font-size: 16px;font-weight: 400;">{{ 443520.00 }}</td>
-                  <td class="list-header" style="box-shadow:none; background: rgba(2, 205, 255, 0.1);font-size: 16px;font-weight: 400;">{{ 219040.00 }}</td>
+              <tr v-for="(item,i) in dataInfo" :key="i">
+                <td class="list-header" style="box-shadow:none; background: rgba(2, 205, 255, 0.1);font-size: 16px;font-weight: 400;">{{ item.time }}</td>
+                <template v-for="line in item.lines ">
+                  <td class="list-header" style="box-shadow:none; background: rgba(2, 205, 255, 0.1);font-size: 16px;font-weight: 400;">{{ line.positive }}</td>
+                  <td class="list-header" style="box-shadow:none; background: rgba(2, 205, 255, 0.1);font-size: 16px;font-weight: 400;">{{ line.negative }}</td>
                 </template>
               </tr>
               <tr>
                 <td class="list-header" style="box-shadow:none; background: rgba(2, 205, 255, 0.1);font-size: 16px;font-weight: 400;">日用电总</td>
-                <template v-for="i in 6 ">
-                  <td class="list-header" style="box-shadow:none; background: rgba(2, 205, 255, 0.1);font-size: 16px;font-weight: 400;">{{ 219040.00*24 }}</td>
+                <template v-for="item in total">
+                  <td class="list-header" style="box-shadow:none; background: rgba(2, 205, 255, 0.1);font-size: 16px;font-weight: 400;">{{ item.positive }}</td>
                   <td class="list-header" style="box-shadow:none; background: rgba(2, 205, 255, 0.1);font-size: 16px;font-weight: 400;"></td>
                 </template>
               </tr>
@@ -65,11 +64,8 @@ export default {
   data () {
     return {
       time: '',
-      dateVisual: true,
-      details: [{ 'title': '状态', 'value': '开机' }, { 'title': '总电压', 'value': '220V' },
-        { 'title': '电流', 'value': '30A' }, { 'title': '总能耗', 'value': '3256kwh' },
-        { 'title': '日能耗', 'value': '300kwh' }, { 'title': '月能耗', 'value': '300kwh' },
-        { 'title': '温度', 'value': '56度' }, { 'title': '预警次数', 'value': '10次' }]
+      dataInfo: [],
+      total: []
     }
   },
   created () {
@@ -77,19 +73,30 @@ export default {
     const year = now.getFullYear()
     const month = now.getMonth() + 1
     const day = now.getDate()
-    this.getDatas(year, month, day)
+    this.time = year + '-' + month + '-' + day
+    this.getDatas(this.time)
   },
   methods: {
-    getDatas (year, month, day) {
+    getDatas (time) {
+      console.log(time)
+      const [year, month, day] = time.split('-')
       getDegreeByDayOrMonth({ isDay: 1, year: year, month: month, day: day }).then(res => {
         console.log(res.data)
+        this.dataInfo = res.data
+        this.total = res.data.reduce((pre, list, index) => {
+          pre = list.lines.map((item, i) => {
+            const newItem = {
+              positive: item.positive + (index === 0 ? 0 : pre[i].positive)
+            }
+            return newItem
+          })
+          return pre
+        }, [])
+        console.log(this.total)
       })
     },
     onDateChange (value, dateString) {
-      this.dateVisual = true
-    },
-    onMonthChange (value, dateString) {
-      this.dateVisual = false
+      this.getDatas(dateString)
     },
     onOk (value) {
       console.log('onOk: ', value)

src/views/statisticView/MonthStatistics.vue

@@ -11,7 +11,7 @@
                 <a-icon type="calendar" theme="filled" />
               </span>
             </a-month-picker>
-            {{ BaseTool.Date.formatter(time,dateVisual?BaseTool.Date.PICKER_NORM_DATE_PATTERN:BaseTool.Date.PICKER_NORM_YEAR_MONTH) }}
+            {{ BaseTool.Date.formatter(time,BaseTool.Date.PICKER_NORM_YEAR_MONTH) }}
           </div>
           <div class="dateStatistics" style="float:left">
             <a-button type="primary" @click="doExport()">导出</a-button>
@@ -22,7 +22,7 @@
             <thead>
               <tr >
                 <th rowspan="2" class="list-header" style="color:#fff">时间</th>
-                <th colspan="2" class="list-header" style="color:#fff" v-for="i in 6" :key="i"> 1G0{{ i }}时代思康{{ i }}回</th>
+                <th colspan="2" class="list-header" style="color:#fff" v-for="(item,i) in dataInfo[0].lines" :key="i"> {{ item.name }}</th>
               </tr>
               <tr>
                 <template v-for="i in 6 ">
@@ -32,17 +32,17 @@
               </tr>
             </thead>
             <tbody>
-              <tr v-for="i in 30" :key="i">
-                <td class="list-header" style="box-shadow:none; background: rgba(2, 205, 255, 0.1);font-size: 16px;font-weight: 400;">{{ (i-1) + '日' }}</td>
-                <template v-for="i in 6 ">
-                  <td class="list-header" style="box-shadow:none; background: rgba(2, 205, 255, 0.1);font-size: 16px;font-weight: 400;">{{ 443520.00 }}</td>
-                  <td class="list-header" style="box-shadow:none; background: rgba(2, 205, 255, 0.1);font-size: 16px;font-weight: 400;">{{ 219040.00 }}</td>
+              <tr v-for="(item,i) in dataInfo" :key="i">
+                <td class="list-header" style="box-shadow:none; background: rgba(2, 205, 255, 0.1);font-size: 16px;font-weight: 400;">{{ item.time + '日' }}</td>
+                <template v-for="line in item.lines">
+                  <td class="list-header" style="box-shadow:none; background: rgba(2, 205, 255, 0.1);font-size: 16px;font-weight: 400;">{{ line.positive }}</td>
+                  <td class="list-header" style="box-shadow:none; background: rgba(2, 205, 255, 0.1);font-size: 16px;font-weight: 400;">{{ line.negative }}</td>
                 </template>
               </tr>
               <tr>
                 <td class="list-header" style="box-shadow:none; background: rgba(2, 205, 255, 0.1);font-size: 16px;font-weight: 400;">月用电总</td>
-                <template v-for="i in 6 ">
-                  <td class="list-header" style="box-shadow:none; background: rgba(2, 205, 255, 0.1);font-size: 16px;font-weight: 400;">{{ 219040.00*24 }}</td>
+                <template v-for="item in total">
+                  <td class="list-header" style="box-shadow:none; background: rgba(2, 205, 255, 0.1);font-size: 16px;font-weight: 400;">{{ item.positive }}</td>
                   <td class="list-header" style="box-shadow:none; background: rgba(2, 205, 255, 0.1);font-size: 16px;font-weight: 400;"></td>
                 </template>
               </tr>
@@ -61,31 +61,36 @@ export default {
   data () {
     return {
       time: '',
-      dateVisual: true,
-      details: [{ 'title': '状态', 'value': '开机' }, { 'title': '总电压', 'value': '220V' },
-        { 'title': '电流', 'value': '30A' }, { 'title': '总能耗', 'value': '3256kwh' },
-        { 'title': '日能耗', 'value': '300kwh' }, { 'title': '月能耗', 'value': '300kwh' },
-        { 'title': '温度', 'value': '56度' }, { 'title': '预警次数', 'value': '10次' }]
+      dataInfo: [],
+      total: []
     }
   },
   created () {
     const now = new Date()
     const year = now.getFullYear()
     const month = now.getMonth() + 1
-    const day = now.getDate()
-    this.getDatas(year, month)
+    this.time = year + '-' + month
+    this.getDatas(this.time)
   },
   methods: {
-    getDatas (year, month) {
+    getDatas (time) {
+      const [year, month] = time.split('-')
       getDegreeByDayOrMonth({ isDay: 0, year: year, month: month }).then(res => {
         console.log(res.data)
+        this.dataInfo = res.data
+        this.total = res.data.reduce((pre, list, index) => {
+          pre = list.lines.map((item, i) => {
+            const newItem = {
+              positive: item.positive + (index === 0 ? 0 : pre[i].positive)
+            }
+            return newItem
+          })
+          return pre
+        }, [])
       })
     },
-    onDateChange (value, dateString) {
-      this.dateVisual = true
-    },
     onMonthChange (value, dateString) {
-      this.dateVisual = false
+      this.getDatas(dateString)
     },
     onOk (value) {
       console.log('onOk: ', value)