首页接口

src/pages/components/chart.vue

@@ -7,9 +7,9 @@ div(:id="id", :style="{ width: '100%', height: '90%' }")
 export default {
   props: ['id', 'data', 'title', 'color'],
   watch: {
-      data() {
-        this.initChart()
-      }
+    data() {
+      this.initChart()
+    }
   },
   mounted() {
     this.initChart()
@@ -46,7 +46,7 @@ export default {
         ],
         series: [
           {
-            name: '订单数量',
+            name: '',
             type: 'line',
             stack: '总量',
             smooth: true,
@@ -83,7 +83,7 @@ export default {
           }
         ]
       }
-      myCharts.setOption(option)
+      myCharts.setOption(option, true)
     }
   }
 }

src/pages/home/page.vue

@@ -8,10 +8,11 @@
             <div class="card-desc">
               <span>系统运行时间</span>
             </div>
-            <div class="card-text">
-              <span>18</span
+            <div class="card-text"  v-if='dataList.systemRunningTime'>
+              <span>{{ dataList.systemRunningTime[0] }}</span
               ><span class="date-color" style="font-size: 16px">天</span
-              ><span>15</span><span class="date-color">时 </span>
+              ><span>{{ dataList.systemRunningTime[1] }}</span
+              ><span class="date-color">时 </span>
 
               <!-- {{dataList.systemRunningTime}} -->
             </div>
@@ -22,7 +23,8 @@
               <span>报警总数</span>
             </div>
             <div class="card-text">
-              <span>{{dataList.faultAlarm}}</span><span class="date-color">次 </span>
+              <span>{{ dataList.faultAlarm }}</span
+              ><span class="date-color">次 </span>
             </div>
           </div>
           <div class="f-item pull-left">
@@ -31,7 +33,7 @@
               <span>办公区域供暖模式</span>
             </div>
             <div class="card-text">
-              <p v-if='dataList.sun == 1' style="color: #4ecb74">开启</p>
+              <p v-if="dataList.sun == 1" style="color: #4ecb74">开启</p>
               <p v-else style="color: #f2637b">关闭</p>
             </div>
           </div>
@@ -41,9 +43,8 @@
               <span>办公区域机械通风模式</span>
             </div>
             <div class="card-text">
-              <p v-if='dataList.fan == 1' style="color: #4ecb74">开启</p>
+              <p v-if="dataList.fan == 1" style="color: #4ecb74">开启</p>
               <p v-else style="color: #f2637b">关闭</p>
-
             </div>
           </div>
           <div class="f-item pull-left">
@@ -52,7 +53,7 @@
               <span>办公区域自然通风模式</span>
             </div>
             <div class="card-text">
-              <p v-if='dataList.nan == 1' style="color: #4ecb74">开启</p>
+              <p v-if="dataList.nan == 1" style="color: #4ecb74">开启</p>
               <p v-else style="color: #f2637b">关闭</p>
             </div>
           </div>
@@ -75,7 +76,7 @@
             </div>
 
             <div slot="content" class="content-wrap">
-              <el-row :gutter="12" type="flex" justify="center">
+              <el-row :gutter="12" type="flex" justify="center" v-if="dataList.energy">
                 <el-col :span="6">
                   <div class="energy-save-mode-wrap" style="">
                     <div class="font-style font_14">
@@ -84,12 +85,15 @@
                     <div class="flex-save-warp">
                       <div>
                         <div>
-                          <p class="font_30">30</p>
+                          <p class="font_30" v-if="activeIndex==0">{{dataList.energy.jnSystemRunningTimeDay}}</p>
+                          <p class="font_30" v-else>{{dataList.energy.jnSystemRunningTimeMonth}}</p>
                           <p class="font-style font_14">运行时间（h）</p>
                         </div>
                       </div>
                       <div>
-                        <p class="font_30">30</p>
+                        <p class="font_30"  v-if="activeIndex==0">{{dataList.energy.jnEnergyDay}}</p>
+                          <p class="font_30" v-else>{{dataList.energy.jnEnergyMonth}}</p>
+
                         <p class="font-style font_14">总能耗（kwh）</p>
                       </div>
                     </div>
@@ -103,12 +107,15 @@
                     <div class="flex-save-warp">
                       <div>
                         <div>
-                          <p class="font_30">30</p>
+                          <p class="font_30" v-if="activeIndex==0">{{dataList.energy.sdSystemRunningTimeDay}}</p>
+                          <p class="font_30" v-else>{{dataList.energy.sdSystemRunningTimeMonth}}</p>
                           <p class="font-style font_14">运行时间（h）</p>
                         </div>
                       </div>
                       <div>
-                        <p class="font_30">30</p>
+                        <p class="font_30" v-if="activeIndex==0">{{dataList.energy.sdEnergyDay}}</p>
+                          <p class="font_30" v-else>{{dataList.energy.sdEnergyMonth}}</p>
+
                         <p class="font-style font_14">总能耗（kwh）</p>
                       </div>
                     </div>
@@ -121,7 +128,9 @@
                     </div>
                     <div>
                       <div>
-                        <p class="font_30">30</p>
+                        <p class="font_30" v-if="activeIndex==0">{{dataList.energy.totalEnergyDay}}</p>
+                        <p class="font_30" v-else>{{dataList.energy.totalEnergyMonth}}</p>
+
                         <p class="font-style font_14">（kwh）</p>
                       </div>
                     </div>
@@ -131,10 +140,11 @@
               <div style="height: calc(100% - 130px)">
                 <!-- <energy-total-charts></energy-total-charts> -->
                 <chart
-                  id="11"
+                  id="home"
                   :data="data"
-                  title="温度"
+                  title="能耗统计"
                   color="#21ACFC"
+                  ref="chart"
                 ></chart>
               </div>
             </div>
@@ -177,29 +187,21 @@ export default {
       dataList: [],
       dateList: [
         {
-          value: '0',
+          value: 0,
           label: '今日'
         },
         {
-          value: '1',
-          label: '本周'
-        },
-        {
-          value: '2',
+          value: 1,
           label: '本月'
-        },
-        {
-          value: '3',
-          label: '全年'
         }
       ],
       data: [
-        ['2019-8-14 8:00:00', 70],
-        ['2019-8-14 8:00:01', 60],
-        ['2019-8-14 8:00:02', 30],
-        ['2019-8-14 8:00:03', 79],
-        ['2019-8-14 8:00:06', 10],
-        ['2019-8-14 8:00:20', 31]
+        // ['2019-8-14 8:00:00', 70],
+        // ['2019-8-14 8:00:01', 60],
+        // ['2019-8-14 8:00:02', 30],
+        // ['2019-8-14 8:00:03', 79],
+        // ['2019-8-14 8:00:06', 10],
+        // ['2019-8-14 8:00:20', 31]
       ]
     }
   },
@@ -211,17 +213,19 @@ export default {
         method: 'get'
       }).then((data) => {
         if (data && data.code === 0) {
-          console.log('data', data)
+          console.log('首页：', data)
           this.dataList = data.bean
+          this.data = this.dataList.energyList
         }
       })
     },
     activehandle(item, index) {
       this.activeIndex = index
-      console.log(item)
-      // 月
-      if (item.value === '2') {
+      // 本月
+      if (index === 1) {
         this.data = this.dataList.energyListMonth
+      } else {
+        this.data = this.dataList.energyList
       }
     }
   }