Skip to content

E
energyai_vue
Commit 3009afe0 authored by co_dengxiongwen's avatar co_dengxiongwen
Browse files
Options

tj

parent 11c2677f
Hide whitespace changes
Inline Side-by-side
Showing with 160 additions and 160 deletions
src/pages/home/page.vue
View file @ 3009afe0
<template >
<template>
<div class="home-page">
<div class="home-page-top">
<div class="col-sm-12">
......@@ -21,147 +21,150 @@
</div>
</div>
</div>
<div class="home-page-content" >
<el-row :gutter="12" >
<el-col :span="16" >
<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
>
<!-- <el-date-picker
<div class="home-page-content">
<el-row :gutter="12">
<el-col :span="16">
<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
>
<!-- <el-date-picker
type="daterange"
range-separator="～"
start-placeholder="开始日期"
end-placeholder="结束日期"
>
</el-date-picker> -->
</div>
</div>
<div slot="content" class="content-wrap">
<!-- 卡片 -->
<el-row :gutter="12" class="margin_top_25" type="flex" justify="center">
<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">30</p>
<p class="font-style font_14">运行时间（h）</p>
<div slot="content" class="content-wrap">
<!-- 卡片 -->
<el-row
:gutter="12"
class="margin_top_25"
type="flex"
justify="center"
>
<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">30</p>
<p class="font-style font_14">运行时间（h）</p>
</div>
</div>
<div>
<p class="font_30">30</p>
<p class="font-style font_14">总能耗（kwh）</p>
</div>
</div>
</div>
</div>
<div>
<p class="font_30">30</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">30</p>
<p class="font-style font_14">运行时间（h）</p>
</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">30</p>
<p class="font-style font_14">运行时间（h）</p>
</div>
</div>
<div>
<p class="font_30">30</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">30</p>
<p class="font-style font_14">（kwh）</p>
</div>
</div>
</div>
</div>
<div>
<p class="font_30">30</p>
<p class="font-style font_14">总能耗（kwh）</p>
</div>
</el-col>
</el-row>
<!-- echarts -->
<div style="height: 100%">
<energy-total-charts></energy-total-charts>
</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">30</p>
<p class="font-style font_14">（kwh）</p>
</div>
</div>
</card-list>
</el-col>
<el-col :span="8" style="padding-left: 0">
<card-list :cardListTitle="cardListRightTitle">
<div slot="content">
<my-pies></my-pies>
</div>
</el-col>
</el-row>
<!-- echarts -->
<div style="height:100%">
<energy-total-charts></energy-total-charts>
</div>
</div>
</card-list>
</el-col>
<el-col :span="8" style="padding-left:0">
<card-list :cardListTitle="cardListRightTitle" >
<div slot="content">
<my-pies></my-pies>
</div>
</card-list>
</el-col>
</el-row>
</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 '../components/cardList'
import energyTotalCharts from '../components/energyTotalCharts'
import myPies from '../components/myPies'
// import CardList from './compontents/cardList.vue';
export default {
name: "home",
name: 'home',
components: {
cardList,
energyTotalCharts,
myPies,
myPies
},
data() {
return {
cardListLeftTitle: "能耗统计",
cardListRightTitle: "旅客满意度调查",
cardListLeftTitle: '能耗统计',
cardListRightTitle: '旅客满意度调查',
activeIndex: 2,
cardList: [
{
iconUrl: require("./image/clock_icon.png"),
cardDesc: "系统运行时间",
cardText: `<span>38</span><span class="date-color" style="font-size:16px">天</span><span>38</span><span class="date-color">时</span><span>38</span><span class="date-color">分</span>`,
iconUrl: require('./image/clock_icon.png'),
cardDesc: '系统运行时间',
cardText: `<span>38</span><span class="date-color" style="font-size:16px">天</span><span>38</span><span class="date-color">时`
},
{
iconUrl: require("./image/alarm_icon.png"),
cardDesc: "报警总数",
cardText: `<span>38</span><span class="date-color">次</span`,
iconUrl: require('./image/alarm_icon.png'),
cardDesc: '报警总数',
cardText: `<span>12</span><span class="date-color">次</span`
},
{
iconUrl: require("./image/sun_icon.png"),
cardDesc: "采暖模式",
cardText: "已开启",
iconUrl: require('./image/sun_icon.png'),
cardDesc: '供暖模式',
cardText: '办公区域供暖模式已开启'
},
{
iconUrl: require("./image/fan_icon.png"),
cardDesc: "机械通风模式",
cardText: "已开启",
iconUrl: require('./image/fan_icon.png'),
cardDesc: '机械通风模式',
cardText: '办公区域机械通风模式已开启'
},
{
iconUrl: require("./image/nan_fan_icon.png"),
cardDesc: "自然通风模式",
cardText: "已开启",
},
iconUrl: require('./image/nan_fan_icon.png'),
cardDesc: '自然通风模式',
cardText: '办公区域自然通风模式已开启'
}
],
dateList: [
// {
......@@ -169,88 +172,85 @@ export default {
// label: "时段",
// },
{
value: "02",
label: "今日",
value: '02',
label: '今日'
},
// {
// value: "03",
// label: "本周",
// },
{
value: "04",
label: "本月",
},
value: '04',
label: '本月'
}
// {
// value: "05",
// label: "全年",
// },
],
};
]
}
},
methods: {
activehandle(item, index) {
this.activeIndex = index;
},
},
};
this.activeIndex = index
}
}
}
</script>
<style lang="scss" scoped>
@import "~@/assets/style/public.scss";
@import '~@/assets/style/public.scss';
.home-page {
height: 100%;
width: 100%;
padding:0px 0px 40px 0px;
padding: 0px 0px 40px 0px;
// overflow: auto;
&-top {
margin: 20px;
margin: 20px;
margin-bottom: 24px;
.f-group {
width: 100%;
display: flex;
.f-item {
box-sizing: border-box;
width: calc(20% - 18px);
.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);
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: 19px;
}
.card-desc {
font-size: 16px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #333333;
// padding-bottom: 16px;
img {
width: 50px;
height: 50px;
padding-bottom: 19px;
}
.card-desc {
font-size: 16px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #333333;
// padding-bottom: 16px;
}
.card-text {
font-size: 30px;
font-family: PingFang SC;
font-weight: 600;
color: #333333;
padding-bottom: 45px;
}
}
.card-text {
font-size: 30px;
font-family: PingFang SC;
font-weight: 600;
color: #333333;
padding-bottom: 45px;
.f-item:last-child {
margin-right: 0;
}
}
.f-item:last-child {
margin-right: 0;
}
}
}
.home-page-content {
margin: 20px;
.date-text {
padding-right: 20px;
font-size: 14px;
font-size: 12px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #1d1d1d;
......@@ -266,7 +266,7 @@ export default {
// width: ;
box-sizing: border-box;
// padding: 24px 30px 25px 30px;
padding-top: 24px;;
padding-top: 24px;
height: 138px;
text-align: center;
background: #21acfc;
......@@ -278,9 +278,9 @@ export default {
}
.handle-mode-wrap {
background: #36cbcb;
box-sizing: border-box;
box-sizing: border-box;
padding: 24px 30px 25px 30px;
height: 138px;
height: 138px;
text-align: center;
border-radius: 6px;
.flex-save-warp {
......@@ -289,8 +289,8 @@ export default {
}
}
.sys-save-mode-wrap {
box-sizing: border-box;
height: 138px;
box-sizing: border-box;
height: 138px;
background: #4ecb74;
padding: 24px 30px 25px 30px;
text-align: center;
......
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