首页接口

src/pages/home/page.vue

@@ -3,21 +3,57 @@
     <div class="home-page-top">
       <div class="col-sm-12">
         <div class="f-group">
-          <div
-            class="f-item pull-left"
-            v-for="(item, index) in cardList"
-            :key="index"
-          >
-            <img :src="item.iconUrl" alt="" />
+          <div class="f-item pull-left">
+            <img src="./image/clock_icon.png" alt="" />
             <div class="card-desc">
-              <span>{{ item.cardDesc }}</span>
+              <span>系统运行时间</span>
             </div>
             <div class="card-text">
-              <span v-if="index == 0" v-html="item.cardText"></span>
-              <span v-else-if="index == 1" v-html="item.cardText"></span>
-              <span v-else>{{ item.cardText }}</span>
-              <p v-if="item.state == 1" style="color: #4ecb74">开启</p>
-              <p v-if="item.state == 2" style="color: #f2637b">关闭</p>
+              <span>18</span
+              ><span class="date-color" style="font-size: 16px">天</span
+              ><span>15</span><span class="date-color">时 </span>
+
+              <!-- {{dataList.systemRunningTime}} -->
+            </div>
+          </div>
+          <div class="f-item pull-left">
+            <img src="./image/alarm_icon.png" alt="" />
+            <div class="card-desc">
+              <span>报警总数</span>
+            </div>
+            <div class="card-text">
+              <span>{{dataList.faultAlarm}}</span><span class="date-color">次 </span>
+            </div>
+          </div>
+          <div class="f-item pull-left">
+            <img src="./image/sun_icon.png" alt="" />
+            <div class="card-desc">
+              <span>办公区域供暖模式</span>
+            </div>
+            <div class="card-text">
+              <p v-if='dataList.sun == 1' style="color: #4ecb74">开启</p>
+              <p v-else style="color: #f2637b">关闭</p>
+            </div>
+          </div>
+          <div class="f-item pull-left">
+            <img src="./image/fan_icon.png" alt="" />
+            <div class="card-desc">
+              <span>办公区域机械通风模式</span>
+            </div>
+            <div class="card-text">
+              <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">
+            <img src="./image/nan_fan_icon.png" alt="" />
+            <div class="card-desc">
+              <span>办公区域自然通风模式</span>
+            </div>
+            <div class="card-text">
+              <p v-if='dataList.nan == 1' style="color: #4ecb74">开启</p>
+              <p v-else style="color: #f2637b">关闭</p>
             </div>
           </div>
         </div>
@@ -94,7 +130,12 @@
               </el-row>
               <div style="height: calc(100% - 130px)">
                 <!-- <energy-total-charts></energy-total-charts> -->
-                <chart id="11" :data="data" title="温度" color="#21ACFC"></chart>
+                <chart
+                  id="11"
+                  :data="data"
+                  title="温度"
+                  color="#21ACFC"
+                ></chart>
               </div>
             </div>
           </card-list>
@@ -125,64 +166,34 @@ export default {
     myPies,
     chart
   },
+  mounted() {
+    this.getDataList()
+  },
   data() {
     return {
       cardListLeftTitle: '能耗统计',
       cardListRightTitle: '旅客满意度调查',
-      activeIndex: 2,
-      cardList: [
-        {
-          iconUrl: require('./image/clock_icon.png'),
-          cardDesc: '系统运行时间',
-          cardText: `<span>18</span><span class="date-color" style="font-size:16px">天</span><span>15</span><span class="date-color">时`
-        },
-        {
-          iconUrl: require('./image/alarm_icon.png'),
-          cardDesc: '报警总数',
-          cardText: `<span>12</span><span class="date-color">次</span`
-        },
+      activeIndex: 0,
+      dataList: [],
+      dateList: [
         {
-          iconUrl: require('./image/sun_icon.png'),
-          cardDesc: '办公区域供暖模式',
-          cardText: '',
-          state: 1
+          value: '0',
+          label: '今日'
         },
         {
-          iconUrl: require('./image/fan_icon.png'),
-          cardDesc: '办公区域机械通风模式',
-          cardText: '',
-          state: 2
+          value: '1',
+          label: '本周'
         },
         {
-          iconUrl: require('./image/nan_fan_icon.png'),
-          cardDesc: '办公区域自然通风模式',
-          cardText: '',
-          state: 1
-        }
-      ],
-      dateList: [
-        // {
-        //   value: "01",
-        //   label: "时段",
-        // },
-        {
-          value: '02',
-          label: '今日'
+          value: '2',
+          label: '本月'
         },
-        // {
-        //   value: "03",
-        //   label: "本周",
-        // },
         {
-          value: '04',
-          label: '本月'
+          value: '3',
+          label: '全年'
         }
-        // {
-        //   value: "05",
-        //   label: "全年",
-        // },
       ],
-            data: [
+      data: [
         ['2019-8-14 8:00:00', 70],
         ['2019-8-14 8:00:01', 60],
         ['2019-8-14 8:00:02', 30],
@@ -193,14 +204,31 @@ export default {
     }
   },
   methods: {
+    getDataList() {
+      this.dataListLoading = true
+      this.$http({
+        url: this.$http.adornUrl('/analysis/getSyParam'),
+        method: 'get'
+      }).then((data) => {
+        if (data && data.code === 0) {
+          console.log('data', data)
+          this.dataList = data.bean
+        }
+      })
+    },
     activehandle(item, index) {
       this.activeIndex = index
+      console.log(item)
+      // 月
+      if (item.value === '2') {
+        this.data = this.dataList.energyListMonth
+      }
     }
   }
 }
 </script>
 <style lang="scss" scoped>
-@import '~@/assets/style/public.scss';
+@import "~@/assets/style/public.scss";
 .home-page {
   height: calc(100vh - 155px);
   width: 100%;