Skip to content

E
energyai_vue
Commit b4ffa785 authored by caojm's avatar caojm
Browse files
Options

首页

parent ce7b8490
Hide whitespace changes
Inline Side-by-side
Showing with 630 additions and 23 deletions
src/pages/home/compontents/cardList.vue 0 → 100644
View file @ b4ffa785
<template>
<div class="card-list">
<div class="card-list-line">
<span class="card-list-title">{{ cardListTitle }}</span>
<div>
<slot name="right" />
</div>
</div>
<slot name="content" />
</div>
</template>
<script>
export default {
name: "cardList",
props: {
cardListTitle: {
type: String,
default: "能耗统计",
},
},
data() {
return {};
},
};
</script>
<style lang="scss" scoped>
.card-list {
width: 100%;
height: 100%;
background: #fff;
&-line {
display: flex;
justify-content: space-between;
padding: 17px 15px 17px 17px;
border-bottom: 1px solid #d9d9d9;
.card-list-title {
display: flex;
justify-content: center;
align-items: center;
font-size: 16px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #000000;
}
.card-list-title::before {
content: "";
display: inline-block;
padding-right: 5px;
margin-right: 10px;
height: 16px;
background: #21acfc;
}
}
// &-line::before{
// content: '';
// display: inline-block;
// height: 16px;
// background: #1890ff;
// }
}
</style>
src/pages/home/compontents/energyTotalCharts.vue 0 → 100644
View file @ b4ffa785
<template>
<div class="energy-total-charts">
<div id="energyChart" style="height: 300px"></div>
</div>
</template>
<script>
export default {
name: "energyTotalCharts",
data() {
return {
energyChart: null,
};
},
mounted(){
this.initChart()
},
methods: {
initChart() {
let energyChart = document.getElementById("energyChart")
this.energyChart = this.$echarts.init(energyChart);
const option = {
tooltip: {
trigger: "axis",
axisPointer: {
type: "cross",
label: {
backgroundColor: "#6a7985",
},
},
},
legend: {
data: [],
},
// toolbox: {
// feature: {
// saveAsImage: {},
// },
// },
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true,
},
xAxis: [
{
type: "category",
boundaryGap: false,
data: ["02-01", "02-01", "02-01", "02-01", "02-01", "02-01", "02-01"],
},
],
yAxis: [
{
type: "value",
},
],
series: [
{
name: "邮件营销",
type: "line",
stack: "总量",
areaStyle: {},
data: [120, 132, 101, 134, 90, 230, 210],
},
],
};
this.energyChart.setOption(option);
window.addEventListener('resize',this.resizeHandle)
},
},
resizeHandle(){
this.energyChart.resize()
}
};
</script>
\ No newline at end of file
src/pages/home/compontents/myPies.vue 0 → 100644
View file @ b4ffa785
<template>
<div class="my-pies">
<div id="myPies" style="height: 500px"></div>
</div>
</template>
<script>
export default {
name: "myPies",
data() {
return {
myPies: null,
};
},
mounted() {
this.initPie();
},
methods: {
initPie() {
let myPie = document.getElementById("myPies");
this.myPies = this.$echarts.init(myPie);
const data = [
{ name: "冷", value: 150 },
{ name: "适中", value: 80 },
{ name: "热", value: 80 }
]
const option = {
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b}: {c} ({d}%)",
},
legend: {
show: true,
left: "center",
bottom: "0",
itemHeight: 13,
itemWidth: 13,
itemGap: 35,
icon: "circle",
data: data,
formatter: function(name) {
var total = 0;
var target;
var value;
for (let i = 0, l = data.length; i < l; i++) {
value = data[i].value;
total += data[i].value;
if (data[i].name == name) {
target = data[i].value;
}
}
var arr = ["{a|" + name + "}", "{b|" + target + "}"];
return arr.join("") ;
},
textStyle: {
rich: {
a: {
// color: "#B6B6B6",
verticalAlign: "top",
// align: "center",
// fontSize: 12,
// padding: [0, 0, 28, 0]
},
b: {
// align: "left",
// fontSize: 18,
// padding: [0, 10, 10, 0],
// // lineHeight: 25,
// color: "#181818"
}
}
}
},
series: [
{
name: "访问来源",
type: "pie",
radius: ["50%", "70%"],
avoidLabelOverlap: false,
label: {
// show: true,
position: "center",
normal:{
show:true,
position:'center',
formatter:function(){
return `调查总数\r\n \r\n20000`
},
textStyle:{
fontSize:30,
color:'#333'
}
}
},
emphasis: {
label: {
show: false,
fontSize: "30",
fontWeight: "bold",
},
},
labelLine: {
show: false,
},
data: [
{ value: 335, name: "冷" },
{ value: 310, name: "热" },
{ value: 234, name: "适中" },
],
},
],
};
this.myPies.setOption(option);
},
},
};
</script>
\ No newline at end of file
src/pages/home/index.js 0 → 100644
View file @ b4ffa785
import page from './page'
export default page
src/pages/home/page.vue 0 → 100644
View file @ b4ffa785
<template >
<div class="home-page">
<div class="home-page-top">
<ul class="flex-box">
<li v-for="(item, index) in cardList" :key="index">
<img :src="item.iconUrl" alt="" />
<div class="card-desc">
<span>{{ item.cardDesc }}</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>
</div>
</li>
</ul>
</div>
<div class="home-page-content">
<el-row :gutter="14">
<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 slot="content" class="content-wrap">
<!-- 卡片 -->
<el-row :gutter="12" class="margin_top_25">
<el-col :span="8">
<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>
</el-col>
<el-col :span="8">
<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="8">
<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>
</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">
<card-list :cardListTitle="cardListRightTitle" >
<div slot="content">
<my-pies></my-pies>
</div>
</card-list>
</el-col>
</el-row>
</div>
</div>
</template>
<script>
import cardList from "./compontents/cardList";
import energyTotalCharts from './compontents/energyTotalCharts'
import myPies from './compontents/myPies'
// import CardList from './compontents/cardList.vue';
export default {
name: "home",
components: {
cardList,
energyTotalCharts,
myPies,
},
data() {
return {
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/alarm_icon.png"),
cardDesc: "报警总数",
cardText: `<span>38</span><span class="date-color">次</span`,
},
{
iconUrl: require("./image/sun_icon.png"),
cardDesc: "采暖模式",
cardText: "已开启",
},
{
iconUrl: require("./image/fan_icon.png"),
cardDesc: "机械通风模式",
cardText: "已开启",
},
{
iconUrl: require("./image/nan_fan_icon.png"),
cardDesc: "自然通风模式",
cardText: "已开启",
},
],
dateList: [
{
value: "01",
label: "时段",
},
{
value: "02",
label: "今日",
},
{
value: "03",
label: "本周",
},
{
value: "04",
label: "本月",
},
{
value: "05",
label: "全年",
},
],
};
},
methods: {
activehandle(item, index) {
this.activeIndex = index;
},
},
};
</script>
<style lang="scss" scoped>
@import "~@/assets/style/public.scss";
.home-page {
&-top {
ul {
list-style: none;
display: flex;
justify-content: space-around;
padding-left: 0;
li {
width: 304px;
// height: 216px;
// padding: 20px 63px 44px 54px;
padding-top: 45px;
margin-right: 24px;
text-align: center;
background: #fff;
box-shadow: 4px 0px 4px 0px rgba(0, 0, 0, 0.05);
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;
}
}
}
}
.home-page-content {
.date-text {
padding-right: 20px;
font-size: 14px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #1d1d1d;
cursor: pointer;
}
.active-hight-linght {
color: #21acfc;
}
.content-wrap {
.energy-save-mode-wrap {
padding: 24px 30px 25px 30px;
text-align: center;
background: #21acfc;
border-radius: 6px;
.flex-save-warp {
display: flex;
justify-content: space-between;
}
}
.handle-mode-wrap {
background: #36cbcb;
padding: 24px 30px 25px 30px;
text-align: center;
border-radius: 6px;
.flex-save-warp {
display: flex;
justify-content: space-between;
}
}
.sys-save-mode-wrap {
background: #4ecb74;
padding: 24px 30px 25px 30px;
text-align: center;
border-radius: 6px;
.flex-save-warp {
display: flex;
justify-content: space-between;
}
}
}
}
}
</style>
<style >
.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>
src/pages/login/login-img/bglogin@2x.png 0 → 100644
View file @ b4ffa785
This diff is collapsed.
src/pages/login/login-img/newRight@2x.png 0 → 100644
View file @ b4ffa785
This diff is collapsed.
src/pages/login/page.vue
View file @ b4ffa785
......@@ -4,7 +4,7 @@
.form-group
<!-- logo部分 -->
.logo
img(src="./login-img/logo2x.png" alt="logo")
img(src="./login-img/newlogo@2x.png" alt="logo")
el-card(shadow="never")
div.login-title 用户登录
......@@ -20,16 +20,16 @@
el-form-item(prop="code" )
el-row
el-col(:span='12')
el-input(type="text" v-model.trim="formLogin.code" class='authCode-input' placeholder="验证码")
el-input(type="text" v-model.trim="formLogin.code" class='authCode-input' placeholder="请输入验证码")
span(slot="prepend" )
img.icon_img(src='./login-img/authCode-icon.png' )
el-col(:span='10' )
img.login-code(:src="captchaPath" @click="getCaptcha()" alt="")
el-row.checkbox
el-col(:span='24' )
el-checkbox(v-model="formLogin.remember" checked) 记住密码
el-checkbox(v-model="formLogin.remember" checked) 自动登陆
el-button(size="default" @click="submit" class='login-btn' :loading="loginLoad") 立即登录
div.lFooter() Copyright (C) 2009-2010. XXXXX信息工程有限公司 蜀ICP备1202XXXX号-1 电话：86-028-6893XXXX 传真：86-028-6893XXXX
div.lFooter() Copyright (C) 2009-2010. 四川旷谷信息工程有限公司 蜀ICP备12026813号-1 电话：86-028-68937037 传真：86-028-68937039
</template>
<script>
......
src/pages/login/style.scss
View file @ b4ffa785
......@@ -4,7 +4,9 @@ html{font-size:16px;}
// 底层背景
width: 100%;
height: 100%;
background-image: url(./login-img/bg2x.png) ;
// background-image: url(./login-img/bg2x.png) ;
background-image: url(./login-img/bglogin@2x.png) ;
background-size: 100% 100%;
position: fixed;
top: 0;
......@@ -15,22 +17,23 @@ html{font-size:16px;}
.logo {
img {
width: 18rem;
height: 2.5rem;
// height: 2.5rem;
position: absolute;
top: 2.2rem;
left: 2.5rem;
top: 1rem;
left: .5rem;
z-index: 999;
}
}
// 登录表单
.form-group {
width: 100rem;
// width: 100rem;
width: 50rem;
height: 50rem;
background-image: url(./login-img/formbg2x.png);
background-image: url(./login-img/newRight@2x.png);
background-size: 100% 100%;
position: absolute;
top: 50%;
left: 50%;
left: 35%;
transform: translate(-50%,-50%);
.el-input-group__prepend{
background-color: transparent !important;
......@@ -40,28 +43,38 @@ html{font-size:16px;}
// 表单整体
.el-card {
position: relative;
left: 65.5rem;
top: 6.5rem;
width: 32.8rem;
background: none;
left: 50rem;
top: 0rem;
width: 36.8rem;
height: 100%;
// background: none;
background: #fff;
border: none;
border-radius: 16px;
border-bottom-left-radius:0;
border-top-left-radius: 0;
.login-title {
text-align: center;
transform: translateX(-2.3rem);
font-size:2rem;
font-family:Microsoft YaHei;
font-weight:400;
color:rgba(53,175,247,1);
margin-bottom: 5rem;
color:#0097FF;
// margin-bottom: 5rem;
margin-top: 9.6rem;
margin-bottom: 2.75rem;
}
.el-card__body {
padding: 0;
padding-left: 4.26rem;
}
.el-form-item {
margin-bottom: 2.5rem;
// margin-bottom: 2.5rem;
// margin-bottom: .83rem;
margin-bottom: 1.5rem;
}
.el-input__inner {
height: 3rem;
height: 3.5rem;
text-indent: 2.7rem;
transform: translateX(-4.25rem);
background-color: rgba(255, 255, 255, 0.1) !important;
......@@ -85,11 +98,12 @@ html{font-size:16px;}
.login-btn {
width: 28rem;
height: 2.5rem;
// height: 2.5rem;
color: white;
background: #35AFF8;
border-radius: 20px;
margin-top: 3.8rem;
// margin-top: 3.8rem;
margin-top: 5.75rem;
font-family:Microsoft YaHei;
font-weight:400;
}
......@@ -97,15 +111,23 @@ html{font-size:16px;}
// 验证码框
.authCode-input {
width: 20rem ;
.el-input__inner {
height: 3.16rem;
width: 18.6rem ;
}
}
// 验证码图片
.login-code {
width: 11.5rem ;
width: 8.03rem ;
height: 3rem ;
float: right;
margin-right: 1.7rem;
}
}
.checkbox{
// padding-top: .91rem;
padding-top: .25rem;
}
// 记住密码
.el-checkbox__inner{
border-radius: 50%;
......@@ -117,7 +139,8 @@ html{font-size:16px;}
border-color: #35AFF8;
}
.el-checkbox__input.is-checked+.el-checkbox__label {
color: #606266;
// color: #606266;
color: #0097FF;
}
.el-checkbox__inner:hover {
border-color: #35AFF8;
......
src/router/routes.js
View file @ b4ffa785
......@@ -73,6 +73,11 @@ const frameOut = [
path: '/login',
name: 'login',
component: () => import('@/pages/login')
},
{
path: '/home',
name: 'home',
component: () => import('@/pages/home')
}
]
......
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