<template> <div class="home-page"> <div class="home-page-top"> <div class="col-sm-12"> <div class="f-group"> <div class="f-item pull-left"> <img src="./image/clock_icon.png" alt="" /> <div class="card-desc"> <span>系统运行时间</span> </div> <div class="card-text" v-if="dataList.systemRunningTime"> <span style="color: #21acfc">{{ dataList.systemRunningTime[0] }}</span ><span class="date-color" style="font-size: 16px">天</span ><span style="color: #21acfc">{{ dataList.systemRunningTime[1] }}</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 style="color: #f2637b">{{ 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 class="home-page-content"> <el-row :gutter="50" style="height: 100%"> <el-col :span="16" style="height: 100%"> <card-list :cardListTitle="cardListLeftTitle"> <div slot="right"> <span :class="activeIndex === index ? 'active-hight-linght' : ''" class="date-text" @click="activehandle(item, index)" v-for="(item, index) in dateList" :key="item.value" >{{ item.label }}</span > </div> <div slot="content" class="content-wrap"> <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"> <span>节能模式</span> </div> <div class="flex-save-warp"> <div> <div> <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" 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> </div> </el-col> <el-col :span="6"> <div class="handle-mode-wrap"> <div class="font-style font_14"> <span>人工模式</span> </div> <div class="flex-save-warp"> <div> <div> <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" 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> </div> </el-col> <el-col :span="6"> <div class="sys-save-mode-wrap"> <div class="font-style font_14"> <span>系统节约总能耗</span> </div> <div> <div> <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> </div> </el-col> </el-row> <div style="height: calc(100% - 30px)"> <!-- <energy-total-charts></energy-total-charts> --> <chart id="home" :data="data" :title="activeIndex == 0 ? '今日能耗统计' : '本月能耗统计'" color="#21ACFC" ref="chart" ></chart> </div> </div> </card-list> </el-col> <el-col :span="8" style="padding-left: 0; height: 100%"> <card-list :cardListTitle="cardListRightTitle"> <div slot="content" style="height: 100%"> <my-pies></my-pies> </div> </card-list> </el-col> </el-row> </div> </div> </template> <script> import cardList from '../components/cardList' // import energyTotalCharts from '../components/energyTotalCharts' import myPies from '../components/myPies' // import CardList from './compontents/cardList.vue'; import chart from '@/pages/components/chart.vue' export default { name: 'home', components: { cardList, // energyTotalCharts, myPies, chart }, mounted() { this.getDataList() }, data() { return { cardListLeftTitle: '能耗统计', cardListRightTitle: '旅客满意度调查', activeIndex: 0, dataList: [] || this.$store.state.d2admin.paramsList.list.syBean, dateList: [ { value: 0, label: '今日' }, { value: 1, label: '本月' } ], data: [] } }, 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) this.dataList = data.bean this.data = data.bean.energyList //默认 } }) }, activehandle(item, index) { this.activeIndex = index // 本月 if (index === 1) { this.data = this.dataList.energyListMonth } else { this.data = this.dataList.energyList } } } } </script> <style lang="scss" scoped> @import '~@/assets/style/public.scss'; .home-page { height: calc(100vh - 155px); width: 100%; &-top { margin: 20px; margin-bottom: 24px; .f-group { width: 100%; display: flex; .f-item { box-sizing: border-box; width: calc(20% - 18px); height: 216px; margin-right: 24px; padding-top: 40px; background-color: #fff; text-align: center; // box-shadow: 4px 0px 4px 0px rgba(0, 0, 0, 0.05); box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1); img { width: 50px; height: 50px; padding-bottom: 13px; } .card-desc { font-size: 16px; font-family: Microsoft YaHei; font-weight: 400; color: #333333; // padding-bottom: 16px; } .card-text { font-size: 26px; font-family: PingFang SC; font-weight: 600; color: #333333; padding-bottom: 45px; } } .f-item:last-child { margin-right: 0; } } } .home-page-content { margin: 20px; height: calc(100vh - 450px); .date-text { padding-right: 20px; font-size: 12px; font-family: Microsoft YaHei; font-weight: 400; color: #1d1d1d; cursor: pointer; } .active-hight-linght { color: #21acfc; } .content-wrap { // margin: 20px; height: 100%; .energy-save-mode-wrap { // width: ; box-sizing: border-box; // padding: 24px 30px 25px 30px; padding-top: 24px; height: 138px; text-align: center; background: #21acfc; border-radius: 6px; .flex-save-warp { display: flex; justify-content: space-around; } } .handle-mode-wrap { background: #36cbcb; box-sizing: border-box; // padding: 24px 30px 25px 30px; padding-top: 24px; height: 138px; text-align: center; border-radius: 6px; .flex-save-warp { display: flex; justify-content: space-around; } } .sys-save-mode-wrap { box-sizing: border-box; height: 138px; background: #4ecb74; padding: 24px 30px 25px 30px; text-align: center; border-radius: 6px; .flex-save-warp { display: flex; justify-content: space-between; } } } } } </style> <style lang="scss"> .date-color { font-size: 16px; font-family: Microsoft YaHei; font-weight: 400; color: #666666; } .margin_top_25 { margin-top: 25px; } .font-style { font-family: Microsoft YaHei; font-weight: 400; color: #ffffff; } .font_14 { font-size: 16px; } .font_30 { font-size: 30px; font-family: PingFang SC; font-weight: 600; color: #ffffff; } p { margin: 0; padding: 0; } </style>