Skip to content

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

Merge branch 'dev' of gitlab.suntrayoa.com:geqilin/energyai_vue into dev

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