You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
406 lines
11 KiB
406 lines
11 KiB
<template> |
|
<div class="box all"> |
|
|
|
<tit :title="'总量分析'" style="width:8.1rem"> |
|
<div class="tit-r">截至{{ $moment().format('YYYY/M/D, HH:mm') }}</div> |
|
</tit> |
|
<tit style="width: 50%" class="tit2"> |
|
<template v-slot:title> |
|
<span style="font-size: 0.14rem">连续两个月用量对比</span> |
|
</template> |
|
<div class="tit-r"> |
|
<span style="color: #fff;">选择时间：</span> |
|
<el-date-picker size="mini" v-model="selectMonth" type="month" placeholder="选择月" @change="changeMonth" |
|
:clearable="false" style="width: 1.2rem;margin-right: 0.26rem;" format="yyyy-MM" value-format="yyyy-MM"> |
|
</el-date-picker> |
|
单位：kw·h |
|
</div> |
|
</tit> |
|
<div> |
|
<div class="card-box"> |
|
<div class="card"> |
|
<div class="card-tit">{{ $moment().format('YYYY') }}年</div> |
|
<div class="card-num"> |
|
<div class="card-num-item" v-for="(item, index) in yearNum" :key="index"> |
|
<div :style="item === '.' ? 'background: transparent' : ''"></div> |
|
<div :style="item === '.' ? 'background: transparent' : ''"></div> |
|
<div style="color: #CADEFF;"> |
|
{{ item }} |
|
</div> |
|
</div> |
|
<span>万</span> |
|
</div> |
|
<div class="card-unit">kw · h</div> |
|
</div> |
|
<div class="card"> |
|
<div class="card-tit">{{ $moment().format('M') }}月</div> |
|
<div class="card-num"> |
|
<div class="card-num-item" v-for="(item, index) in monthNum" :key="index"> |
|
<div :style="item === '.' ? 'background: transparent' : ''"></div> |
|
<div :style="item === '.' ? 'background: transparent' : ''"></div> |
|
<div style="color: #00FFC6;"> |
|
{{ item }} |
|
</div> |
|
</div> |
|
<span>万</span> |
|
</div> |
|
<div class="card-unit">kw · h</div> |
|
</div> |
|
<div class="card"> |
|
<div class="card-tit">昨日</div> |
|
<div class="card-num"> |
|
<div class="card-num-item" v-for="(item, index) in yesterdayNum" :key="index"> |
|
<div :style="item === '.' ? 'background: transparent' : ''"></div> |
|
<div :style="item === '.' ? 'background: transparent' : ''"></div> |
|
<div style="color: #E0B42F;"> |
|
{{ item }} |
|
</div> |
|
</div> |
|
<!-- <span>万</span> --> |
|
</div> |
|
<div class="card-unit">kw · h</div> |
|
</div> |
|
<div class="card"> |
|
<div class="card-tit">今日</div> |
|
<div class="card-num"> |
|
<div class="card-num-item" v-for="(item, index) in todayNum" :key="index"> |
|
<div :style="item === '.' ? 'background: transparent' : ''"></div> |
|
<div :style="item === '.' ? 'background: transparent' : ''"></div> |
|
<div style="color: #00FFFC;"> |
|
{{ item }} |
|
</div> |
|
</div> |
|
<!-- <span>万</span> --> |
|
</div> |
|
<div class="card-unit">kw · h</div> |
|
</div> |
|
</div> |
|
<div id="mainAll"></div> |
|
</div> |
|
|
|
</div> |
|
</template> |
|
|
|
<script> |
|
import tit from "./tit.vue"; |
|
import { mapGetters } from "vuex"; |
|
import { getTotalElectricity, getMonthElectricity } from "@/api/energySources/energySources" |
|
export default { |
|
props: { |
|
deptName: { |
|
type: String, |
|
default: "", |
|
}, |
|
}, |
|
data() { |
|
return { |
|
num: 0, |
|
yearNum: 0, |
|
monthNum: 0, |
|
yesterdayNum: 0, |
|
todayNum: 0, |
|
selectMonth: '', |
|
currentMonthData: [120, 200, 150, 80, 70, 110, 130], |
|
lastMonthData: [150, 120, 180, 60, 40, 130, 150], |
|
timeFun: null |
|
}; |
|
}, |
|
components: { |
|
tit |
|
}, |
|
created() { |
|
this.selectMonth = this.$moment().format('YYYY-MM') |
|
if (this.deptName) { |
|
this.getTotal() |
|
this.$nextTick(() => { |
|
this.getTrend() |
|
}) |
|
this.timeFun = setInterval(() => { |
|
this.getTotal() |
|
}, 300000) |
|
} |
|
}, |
|
beforeDestroy() { |
|
clearInterval(this.timeFun) |
|
}, |
|
computed: { |
|
...mapGetters(["userInfo", "permission"]), |
|
}, |
|
methods: { |
|
getTotal() { |
|
getTotalElectricity({ manufacturerBrand: this.deptName }).then(res => { |
|
let data = res.data.data |
|
this.yearNum = data.currentYear.toString().split('') |
|
this.monthNum = data.currentMonth.toString().split('') |
|
this.yesterdayNum = data.yesterday.toString().split('') |
|
this.todayNum = data.today.toString().split('') |
|
}) |
|
}, |
|
getTrend() { |
|
this.currentMonthData = []; |
|
this.lastMonthData = [] |
|
getMonthElectricity({ manufacturerBrand: this.deptName, currentMonth: this.selectMonth }).then(res => { |
|
let currData = res.data.data.currentMonth |
|
let lastData = res.data.data.lastMonth |
|
Object.keys(currData).forEach((key) => { |
|
this.currentMonthData.push(currData[key]) |
|
}); |
|
Object.keys(lastData).forEach((key) => { |
|
this.lastMonthData.push(lastData[key]) |
|
}); |
|
this.$nextTick(() => { |
|
this.echartsInit() |
|
}) |
|
}) |
|
}, |
|
changeMonth() { |
|
this.getTrend() |
|
}, |
|
echartsInit() { |
|
const chartDom = document.getElementById('mainAll'); |
|
const myChart = this.$echarts.init(chartDom); |
|
const currentMonthDays = this.$moment(this.selectMonth).daysInMonth() |
|
const xdata = Array(currentMonthDays).fill().map((_, i) => i + 1) |
|
const option = { |
|
// title: { |
|
// show: false, |
|
// }, |
|
grid: { |
|
left: "0", |
|
right: "0", |
|
bottom: "0", |
|
containLabel: true, |
|
}, |
|
legend: { |
|
data: ['本月', '上月'], |
|
// right: 0, |
|
top: 12, |
|
textStyle: { |
|
color: "#fff" |
|
}, |
|
itemWidth: 10, |
|
itemHeight: 4, |
|
}, |
|
xAxis: { |
|
type: "category", |
|
data: xdata, |
|
axisLine: { |
|
lineStyle: { |
|
color: "#9fa9b5", |
|
}, |
|
}, |
|
axisTick: { |
|
show: true, |
|
inside: true, |
|
}, |
|
axisLabel: { |
|
textStyle: { |
|
fontFamily: "Microsoft YaHei", |
|
}, |
|
}, |
|
}, |
|
yAxis: { |
|
type: "value", |
|
show: true, //是否显示y轴 |
|
axisLabel: { |
|
//y轴文字的配置 |
|
textStyle: { |
|
color: "#9fa9b5", |
|
}, |
|
}, |
|
axisTick: { |
|
show: true, |
|
inside: true, |
|
lineStyle: { |
|
color: "#9fabc1", |
|
}, |
|
}, |
|
// 刻度线 |
|
axisLine: { |
|
show: true, |
|
lineStyle: { |
|
color: "#9fabc1", |
|
}, |
|
}, |
|
// 线 |
|
splitLine: { |
|
show: true, |
|
lineStyle: { |
|
color: "#263764", |
|
type: "soild", |
|
}, |
|
}, |
|
}, |
|
series: [ |
|
{ |
|
name: "本月", |
|
type: "bar", |
|
barWidth: "10", |
|
data: this.currentMonthData, |
|
// data: [120, 200, 150, 80, 70, 110, 130], |
|
itemStyle: { |
|
normal: { |
|
color: "#0084FF", |
|
// label: { |
|
// show: true, |
|
// position: "top", |
|
// textStyle: { |
|
// //数值样式 |
|
// color: "#0084FF", |
|
// fontSize: 14, |
|
// }, |
|
// }, |
|
}, |
|
}, |
|
}, |
|
{ |
|
name: "上月", |
|
type: "bar", |
|
barWidth: "10", |
|
data: this.lastMonthData, |
|
// data: [120, 200, 150, 80, 70, 110, 130], |
|
itemStyle: { |
|
normal: { |
|
color: "#10efbd", |
|
// label: { |
|
// show: true, |
|
// position: "top", |
|
// textStyle: { |
|
// //数值样式 |
|
// color: "#0084FF", |
|
// fontSize: 14, |
|
// }, |
|
// }, |
|
}, |
|
}, |
|
}, |
|
], |
|
} |
|
myChart.setOption(option); |
|
} |
|
} |
|
}; |
|
</script> |
|
<style lang="scss" scoped> |
|
.all /deep/ .el-input__inner { |
|
background: transparent !important; |
|
color: #fff !important; |
|
border-radius: 0; |
|
border-color: rgba($color: #fff, $alpha: 0.2) !important; |
|
height: 0.24rem !important; |
|
} |
|
|
|
.all /deep/ .el-input__icon { |
|
line-height: 0.24rem !important; |
|
} |
|
|
|
.box { |
|
width: calc(100vw - 0.52rem); |
|
height: 2.08rem; |
|
box-sizing: border-box; |
|
background: url("../../../../public/img/energySources/all.png"); |
|
background-size: 100% 100%; |
|
position: relative; |
|
padding: 0.54rem 0.22rem 0 0.22rem; |
|
|
|
.tit2 { |
|
left: 9.04rem; |
|
} |
|
|
|
.tit-r { |
|
font-size: 0.14rem; |
|
color: rgba($color: #fff, $alpha: 0.4); |
|
margin-top: 0.04rem; |
|
} |
|
|
|
|
|
#mainAll { |
|
float: left; |
|
width: 50%; |
|
height: 1.8rem; |
|
margin: -0.42rem 0 0 0.1rem; |
|
} |
|
|
|
.card-box { |
|
display: flex; |
|
margin-top: 0.16rem; |
|
float: left; |
|
width: 48%; |
|
|
|
.card { |
|
width: 2.06rem; |
|
height: 1.14rem; |
|
background: rgba($color: #0DE5FF, $alpha: 0.1); |
|
margin-right: 0.08rem; |
|
padding: 0.14rem 0 0 0.14rem; |
|
box-sizing: border-box; |
|
|
|
&:nth-child(4) { |
|
margin: 0 !important; |
|
} |
|
|
|
.card-tit { |
|
font-weight: bold; |
|
color: #FFFFFF; |
|
font-size: 0.16rem; |
|
margin-bottom: 0.08rem; |
|
} |
|
|
|
.card-num { |
|
display: flex; |
|
|
|
span { |
|
line-height: 0.36rem; |
|
font-size: 0.18rem; |
|
font-family: Acumin Variable Concept; |
|
font-weight: bold; |
|
color: #CADEFF; |
|
} |
|
|
|
.card-num-item { |
|
width: 0.22rem; |
|
height: 0.36rem; |
|
position: relative; |
|
margin-right: 0.02rem; |
|
|
|
&>div { |
|
width: 100%; |
|
background: rgba($color: #0090FF, $alpha: 0.5); |
|
} |
|
|
|
&>div:nth-child(1) { |
|
height: 0.17rem; |
|
margin-bottom: 0.01rem; |
|
} |
|
|
|
&>div:nth-child(2) { |
|
height: 0.17rem; |
|
margin-top: 0.01rem; |
|
} |
|
|
|
&>div:nth-child(3) { |
|
height: 0.4rem; |
|
line-height: 0.4rem; |
|
position: absolute; |
|
top: 0; |
|
left: 0; |
|
background: transparent; |
|
text-align: center; |
|
font-size: 0.26rem; |
|
font-family: Acumin-Pro-Condensed-Black-2; |
|
font-weight: bold; |
|
} |
|
} |
|
} |
|
|
|
.card-unit { |
|
font-size: 0.16rem; |
|
margin-top: 0.06rem; |
|
font-family: Acumin-Pro-Condensed-Black-2; |
|
font-weight: bold; |
|
color: rgba($color: #fff, $alpha: 0.6); |
|
} |
|
} |
|
} |
|
} |
|
</style>
|
|
|