|
|
|
|
@ -10,8 +10,8 @@ |
|
|
|
|
</template> |
|
|
|
|
<div class="tit-r"> |
|
|
|
|
<span style="color: #fff;">选择月份：</span> |
|
|
|
|
<el-date-picker size="mini" v-model="value2" type="month" placeholder="选择月" |
|
|
|
|
style="width: 1.2rem;margin-right: 0.26rem;"> |
|
|
|
|
<el-date-picker size="mini" v-model="selectMonth" type="month" placeholder="选择月" @change="changeMonth" |
|
|
|
|
style="width: 1.2rem;margin-right: 0.26rem;" format="yyyy-MM" value-format="yyyy-MM"> |
|
|
|
|
</el-date-picker> |
|
|
|
|
单位：kw·h |
|
|
|
|
</div> |
|
|
|
|
@ -21,7 +21,7 @@ |
|
|
|
|
<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 num" :key="index"> |
|
|
|
|
<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;"> |
|
|
|
|
@ -35,7 +35,7 @@ |
|
|
|
|
<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 num" :key="index"> |
|
|
|
|
<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;"> |
|
|
|
|
@ -49,7 +49,7 @@ |
|
|
|
|
<div class="card"> |
|
|
|
|
<div class="card-tit">昨日</div> |
|
|
|
|
<div class="card-num"> |
|
|
|
|
<div class="card-num-item" v-for="(item, index) in num" :key="index"> |
|
|
|
|
<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;"> |
|
|
|
|
@ -63,7 +63,7 @@ |
|
|
|
|
<div class="card"> |
|
|
|
|
<div class="card-tit">今日</div> |
|
|
|
|
<div class="card-num"> |
|
|
|
|
<div class="card-num-item" v-for="(item, index) in num" :key="index"> |
|
|
|
|
<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;"> |
|
|
|
|
@ -83,28 +83,70 @@ |
|
|
|
|
|
|
|
|
|
<script> |
|
|
|
|
import tit from "./tit.vue"; |
|
|
|
|
import { mapGetters } from "vuex"; |
|
|
|
|
import {getTotalElectricity,getMonthElectricity} from "@/api/energySources/energySources" |
|
|
|
|
export default { |
|
|
|
|
data() { |
|
|
|
|
return { |
|
|
|
|
num: 0 |
|
|
|
|
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] |
|
|
|
|
}; |
|
|
|
|
}, |
|
|
|
|
components: { |
|
|
|
|
tit |
|
|
|
|
}, |
|
|
|
|
created() { |
|
|
|
|
this.selectMonth = this.$moment().format('YYYY-MM') |
|
|
|
|
this.$nextTick(() => { |
|
|
|
|
this.echartsInit() |
|
|
|
|
this.getTotal() |
|
|
|
|
this.getTrend() |
|
|
|
|
}) |
|
|
|
|
let nums = 1223.45; |
|
|
|
|
this.num = nums.toString().split('') |
|
|
|
|
// let nums = 1223.45; |
|
|
|
|
// this.num = nums.toString().split('') |
|
|
|
|
}, |
|
|
|
|
computed:{ |
|
|
|
|
...mapGetters(["userInfo", "permission"]), |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
methods: { |
|
|
|
|
getTotal(){ |
|
|
|
|
getTotalElectricity({manufacturerBrand:this.userInfo.dept_name}).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.userInfo.dept_name,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().daysInMonth() |
|
|
|
|
const currentMonthDays = this.$moment(this.selectMonth).daysInMonth() |
|
|
|
|
const xdata = Array(currentMonthDays).fill().map((_, i) => i + 1) |
|
|
|
|
const option = { |
|
|
|
|
// title: { |
|
|
|
|
@ -116,16 +158,16 @@ export default { |
|
|
|
|
bottom: "0", |
|
|
|
|
containLabel: true, |
|
|
|
|
}, |
|
|
|
|
// legend: { |
|
|
|
|
// data: ['委托', '监督', '仲裁', '门诊'], |
|
|
|
|
// right: 0, |
|
|
|
|
// top: 12, |
|
|
|
|
// textStyle: { |
|
|
|
|
// color: "#fff" |
|
|
|
|
// }, |
|
|
|
|
// itemWidth: 10, |
|
|
|
|
// itemHeight: 4, |
|
|
|
|
// }, |
|
|
|
|
legend: { |
|
|
|
|
data: ['本月', '上月'], |
|
|
|
|
// right: 0, |
|
|
|
|
top: 12, |
|
|
|
|
textStyle: { |
|
|
|
|
color: "#fff" |
|
|
|
|
}, |
|
|
|
|
itemWidth: 10, |
|
|
|
|
itemHeight: 4, |
|
|
|
|
}, |
|
|
|
|
xAxis: { |
|
|
|
|
type: "category", |
|
|
|
|
data: xdata, |
|
|
|
|
@ -178,10 +220,11 @@ export default { |
|
|
|
|
}, |
|
|
|
|
series: [ |
|
|
|
|
{ |
|
|
|
|
name: "委托", |
|
|
|
|
name: "本月", |
|
|
|
|
type: "bar", |
|
|
|
|
barWidth: "10", |
|
|
|
|
data: [120, 200, 150, 80, 70, 110, 130], |
|
|
|
|
data: this.currentMonthData, |
|
|
|
|
// data: [120, 200, 150, 80, 70, 110, 130], |
|
|
|
|
itemStyle: { |
|
|
|
|
normal: { |
|
|
|
|
color: "#0084FF", |
|
|
|
|
@ -197,6 +240,27 @@ export default { |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
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); |
|
|
|
|
|
jn517618
2 years ago