Skip to content

E
energyai_vue
Commit f54d2ad1 authored by xiexingan's avatar xiexingan
Browse files
Options

首页接口

parent 4b982186
Hide whitespace changes
Inline Side-by-side
Showing with 87 additions and 59 deletions
src/pages/home/page.vue
View file @ f54d2ad1
...@@ -3,21 +3,57 @@ ...@@ -3,21 +3,57 @@
<div class="home-page-top"> <div class="home-page-top">
<div class="col-sm-12"> <div class="col-sm-12">
<div class="f-group"> <div class="f-group">
<div <div class="f-item pull-left">
class="f-item pull-left" <img src="./image/clock_icon.png" alt="" />
v-for="(item, index) in cardList"
:key="index"
>
<img :src="item.iconUrl" alt="" />
<div class="card-desc"> <div class="card-desc">
<span>{{ item.cardDesc }}</span> <span>系统运行时间</span>
</div> </div>
<div class="card-text"> <div class="card-text">
<span v-if="index == 0" v-html="item.cardText"></span> <span>18</span
<span v-else-if="index == 1" v-html="item.cardText"></span> ><span class="date-color" style="font-size: 16px">天</span
<span v-else>{{ item.cardText }}</span> ><span>15</span><span class="date-color">时 </span>
<p v-if="item.state == 1" style="color: #4ecb74">开启</p>
<p v-if="item.state == 2" style="color: #f2637b">关闭</p> <!-- {{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> </div>
</div> </div>
...@@ -94,7 +130,12 @@ ...@@ -94,7 +130,12 @@
</el-row> </el-row>
<div style="height: calc(100% - 130px)"> <div style="height: calc(100% - 130px)">
<!-- <energy-total-charts></energy-total-charts> --> <!-- <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>
</div> </div>
</card-list> </card-list>
...@@ -125,64 +166,34 @@ export default { ...@@ -125,64 +166,34 @@ export default {
myPies, myPies,
chart chart
}, },
mounted() {
this.getDataList()
},
data() { data() {
return { return {
cardListLeftTitle: '能耗统计', cardListLeftTitle: '能耗统计',
cardListRightTitle: '旅客满意度调查', cardListRightTitle: '旅客满意度调查',
activeIndex: 2, activeIndex: 0,
cardList: [ dataList: [],
{ dateList: [
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`
},
{ {
iconUrl: require('./image/sun_icon.png'), value: '0',
cardDesc: '办公区域供暖模式', label: '今日'
cardText: '',
state: 1
}, },
{ {
iconUrl: require('./image/fan_icon.png'), value: '1',
cardDesc: '办公区域机械通风模式', label: '本周'
cardText: '',
state: 2
}, },
{ {
iconUrl: require('./image/nan_fan_icon.png'), value: '2',
cardDesc: '办公区域自然通风模式', label: '本月'
cardText: '',
state: 1
}
],
dateList: [
// {
// value: "01",
// label: "时段",
// },
{
value: '02',
label: '今日'
}, },
// {
// value: "03",
// label: "本周",
// },
{ {
value: '04', value: '3',
label: '本月' label: '全年'
} }
// {
// value: "05",
// label: "全年",
// },
], ],
data: [ data: [
['2019-8-14 8:00:00', 70], ['2019-8-14 8:00:00', 70],
['2019-8-14 8:00:01', 60], ['2019-8-14 8:00:01', 60],
['2019-8-14 8:00:02', 30], ['2019-8-14 8:00:02', 30],
...@@ -193,14 +204,31 @@ export default { ...@@ -193,14 +204,31 @@ export default {
} }
}, },
methods: { 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) { activehandle(item, index) {
this.activeIndex = index this.activeIndex = index
console.log(item)
// 月
if (item.value === '2') {
this.data = this.dataList.energyListMonth
}
} }
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import '~@/assets/style/public.scss'; @import "~@/assets/style/public.scss";
.home-page { .home-page {
height: calc(100vh - 155px); height: calc(100vh - 155px);
width: 100%; width: 100%;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment