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.
392 lines
10 KiB
392 lines
10 KiB
<template> |
|
<div class="box dosage"> |
|
<tit :title="'用量分析'"> |
|
<div class="tit-r"> |
|
<span style="color: #0096FF;" @click="visible=true">监测明细</span> |
|
|
|
<span style="color: #fff;">选择时间：</span> |
|
<el-date-picker size="mini" v-model="selectDay" type="date" placeholder="选择月" @change="changeDate" |
|
style="width: 1.3rem;margin-right: 0.26rem;" value-format="yyyy-MM-dd" format="yyyy-MM-dd"> |
|
</el-date-picker> |
|
单位：kw·h |
|
</div> |
|
</tit> |
|
<div class="content"> |
|
|
|
|
|
<el-table :data="tableData" style="width: 62%;" height="92%" :stripe="true" :size="mini" |
|
:row-class-name="tableRowClassName"> |
|
<el-table-column prop="name" label="部门/车间" show-overflow-tooltip> |
|
<template slot-scope="scope"> |
|
<span style="color: #fff;font-size: 0.14rem;">{{ scope.row.name }}</span> |
|
<span class="rank" v-if="scope.$index <= 2" :style="rankStyle(scope.$index)">TOP.{{ scope.$index + 1 }}</span> |
|
</template> |
|
</el-table-column> |
|
<el-table-column prop="sum" label="总用电量"> |
|
<template slot-scope="scope"> |
|
<!-- <span :style="{ color: scope.row.address > 0 ? '#11F150' : 'rgba($color: #fff, $alpha: 0.2)' }">{{ |
|
scope.row.address }}%</span> --> |
|
<span style="color: #11F150">{{ scope.row.sum ? scope.row.sum : 0 }}</span> |
|
</template> |
|
</el-table-column> |
|
<el-table-column prop="jian" label="尖时段"> |
|
<template slot-scope="scope"> |
|
<!-- <span :style="{ color: scope.row.address > 0 ? '#FB5E2D' : 'rgba($color: #fff, $alpha: 0.2)' }">{{ |
|
scope.row.address }}%</span> --> |
|
<span style="color: #FB5E2D">{{ scope.row.jian ? scope.row.jian : 0 }}</span> |
|
</template> |
|
</el-table-column> |
|
<el-table-column prop="feng" label="峰时段"> |
|
<template slot-scope="scope"> |
|
<!-- <span :style="{ color: scope.row.address > 0 ? '#FBB02D' : 'rgba($color: #fff, $alpha: 0.2)' }">{{ |
|
scope.row.address |
|
}}%</span> --> |
|
<span style="color: #FBB02D">{{ scope.row.feng ? scope.row.feng : 0 }}</span> |
|
</template> |
|
</el-table-column> |
|
<el-table-column prop="ping" label="平时段"> |
|
<template slot-scope="scope"> |
|
<!-- <span :style="{ color: scope.row.address > 0 ? '#00A2FF' : 'rgba($color: #fff, $alpha: 0.2)' }">{{ |
|
scope.row.address }}%</span> --> |
|
<span style="color: #00A2FF">{{ scope.row.ping ? scope.row.ping : 0 }}</span> |
|
</template> |
|
</el-table-column> |
|
<el-table-column prop="gu" label="谷时段"> |
|
<template slot-scope="scope"> |
|
<!-- <span :style="{ color: scope.row.address > 0 ? '#10EFBD' : 'rgba($color: #fff, $alpha: 0.2)' }">{{ |
|
scope.row.address }}%</span> --> |
|
<span style="color: #10EFBD">{{ scope.row.gu ? scope.row.gu : 0 }}</span> |
|
</template> |
|
</el-table-column> |
|
</el-table> |
|
<!-- <div class="content-tit">部门用量分布</div> |
|
<div class="legends"> |
|
<div class="legends-item"> |
|
<div class="legends-item-k" style="background-color: #7E5BFF;"></div> |
|
部门1 |
|
</div> |
|
<div class="legends-item"> |
|
<div class="legends-item-k" style="background-color: #A45BFF;"></div> |
|
部门2 |
|
</div> |
|
<div class="legends-item"> |
|
<div class="legends-item-k" style="background-color: #FFD052;"></div> |
|
部门3 |
|
</div> |
|
<div class="legends-item"> |
|
<div class="legends-item-k" style="background-color: #16F2A7;"></div> |
|
部门4 |
|
</div> |
|
</div> --> |
|
<!-- <div id="mainDosage"></div> --> |
|
</div> |
|
|
|
<dmodal :visible.sync="visible" @onvisible="v => visible = v" :selectDay="selectDay"/> |
|
</div> |
|
</template> |
|
|
|
<script> |
|
import tit from "./tit.vue"; |
|
import dmodal from "./dmodal.vue"; |
|
import { mapGetters } from "vuex"; |
|
import { getPeriodElectricity } from "@/api/energySources/energySources" |
|
export default { |
|
data() { |
|
return { |
|
selectDay: '', |
|
tableData: [], |
|
visible: false, |
|
timeFun: null |
|
}; |
|
}, |
|
components: { |
|
tit, |
|
dmodal |
|
}, |
|
created() { |
|
this.selectDay = this.$moment().format('YYYY-MM-DD') |
|
this.getPeriodData() |
|
// this.$nextTick(() => { |
|
|
|
// this.echartsInit() |
|
// }) |
|
this.timeFun = setInterval(() => { |
|
this.getPeriodData() |
|
}, 300000) |
|
}, |
|
beforeDestroyed() { |
|
clearInterval(this.timeFun) |
|
}, |
|
computed: { |
|
...mapGetters(["userInfo", "permission"]), |
|
}, |
|
methods: { |
|
rankStyle(i) { |
|
if (i === 0) { |
|
return "background: #E73F3F" |
|
} else if (i === 1) { |
|
return "background: #F68E29" |
|
} else { |
|
return "background: #1AD0A3" |
|
} |
|
}, |
|
tableRowClassName({ row, rowIndex }) { |
|
if (rowIndex % 2 === 0) { |
|
if (row.loadRate > 0) { |
|
return 'trEven'; |
|
} else { |
|
return 'trEven'; |
|
} |
|
|
|
} else { |
|
if (row.loadRate > 0) { |
|
return 'trOdd'; |
|
} else { |
|
return 'trOdd'; |
|
} |
|
} |
|
}, |
|
getPeriodData() { |
|
getPeriodElectricity({ manufacturerBrand: this.userInfo.dept_name, today: this.selectDay }).then(res => { |
|
console.log('period =====>', res) |
|
this.tableData = res.data.data |
|
}) |
|
}, |
|
changeDate() { |
|
this.getPeriodData() |
|
}, |
|
echartsInit() { |
|
const chartDom = document.getElementById('mainDosage'); |
|
const myChart = this.$echarts.init(chartDom); |
|
const option = { |
|
// grid: { |
|
// left: '0', |
|
// right: '0', |
|
// bottom: '20px', |
|
// containLabel: true |
|
// }, |
|
grid: { |
|
left: "0", |
|
right: 0, |
|
containLabel: true, |
|
}, |
|
tooltip: { |
|
trigger: 'item', |
|
triggerOn: 'mousemove' |
|
}, |
|
animation: false, |
|
series: [ |
|
{ |
|
type: 'sankey', |
|
// bottom: '10%', |
|
// width: '4%', |
|
emphasis: { |
|
focus: 'adjacency' |
|
}, |
|
focusNodeAdjacency: true, |
|
legend: { // 图例配置 |
|
orient: 'vertical', |
|
left: 'right', |
|
top: 'middle', |
|
textStyle: { |
|
fontSize: 12 |
|
} |
|
}, |
|
data: [ |
|
{ |
|
name: 'a', |
|
itemStyle: { |
|
color: "#0084FF" |
|
} |
|
}, |
|
{ |
|
name: 'b', |
|
itemStyle: { |
|
color: "#7E5BFF" |
|
} |
|
}, |
|
{ |
|
name: 'c', |
|
itemStyle: { |
|
color: "#A45BFF" |
|
} |
|
}, |
|
{ |
|
name: 'd', |
|
itemStyle: { |
|
color: "#FFD052" |
|
} |
|
}, |
|
{ |
|
name: 'e', |
|
itemStyle: { |
|
color: "#16F2A7" |
|
} |
|
}, |
|
], |
|
links: [ |
|
{ |
|
source: 'a', |
|
target: 'b', |
|
value: 15, |
|
lineStyle: { |
|
color: '#7E5BFF', |
|
curveness: 0.5 |
|
}, |
|
}, |
|
{ |
|
source: 'a', |
|
target: 'c', |
|
value: 3, |
|
lineStyle: { |
|
color: '#A45BFF', |
|
curveness: 0.5 |
|
}, |
|
}, |
|
{ |
|
source: 'a', |
|
target: 'd', |
|
value: 3, |
|
lineStyle: { |
|
color: '#FFD052', |
|
curveness: 0.5 |
|
}, |
|
}, |
|
{ |
|
source: 'a', |
|
target: 'e', |
|
value: 1, |
|
lineStyle: { |
|
color: '#16F2A7', |
|
curveness: 0.5 |
|
}, |
|
}, |
|
], |
|
|
|
} |
|
] |
|
} |
|
myChart.setOption(option); |
|
} |
|
} |
|
}; |
|
</script> |
|
<style lang="scss" scoped> |
|
.dosage /deep/ .el-table, |
|
.dosage /deep/ .el-table__expanded-cell { |
|
background-color: transparent; |
|
border: 0 !important; |
|
} |
|
|
|
.dosage /deep/ .el-table th, |
|
.dosage /deep/ .el-table tr, |
|
.dosage /deep/ .el-table td { |
|
background-color: transparent !important; |
|
border: 0 !important; |
|
} |
|
.dosage /deep/ .trEven td { |
|
background: rgba($color: #0de5ff, $alpha: 0.1) !important; |
|
} |
|
|
|
|
|
.dosage /deep/ .el-table td span { |
|
font-size: 0.18rem; |
|
font-family: Acumin-Pro-Condensed-Regular-2; |
|
} |
|
|
|
.dosage /deep/ .el-table::before { |
|
height: 0 !important; |
|
} |
|
|
|
.dosage /deep/ .trEven td { |
|
background: rgba($color: #0de5ff, $alpha: 0.1) !important; |
|
} |
|
|
|
.dosage /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; |
|
} |
|
|
|
.dosage /deep/ .el-input__icon { |
|
line-height: 0.24rem !important; |
|
} |
|
|
|
.box { |
|
width: 11.18rem; |
|
height: 3.36rem; |
|
box-sizing: border-box; |
|
background: url("../../../../public/img/energySources/dosage.png"); |
|
background-size: 100% 100%; |
|
padding: 0 0.22rem; |
|
position: relative; |
|
padding: 0.54rem 0.22rem 0 0.22rem; |
|
|
|
.tit-r { |
|
font-size: 0.14rem; |
|
color: rgba($color: #fff, $alpha: 0.4); |
|
margin-top: 0.04rem; |
|
} |
|
|
|
.content { |
|
display: flex; |
|
height: 100%; |
|
position: relative; |
|
|
|
.content-tit { |
|
position: absolute; |
|
top: -0.34rem; |
|
right: 2.98rem; |
|
color: #fff; |
|
font-size: 0.14rem; |
|
font-family: Microsoft YaHei; |
|
font-weight: bold; |
|
} |
|
|
|
.legends { |
|
position: absolute; |
|
top: -0.34rem; |
|
right: 0; |
|
color: rgba($color: #fff, $alpha: 0.5); |
|
font-size: 0.12rem; |
|
font-family: Microsoft YaHei; |
|
font-weight: 400; |
|
width: 2.3rem; |
|
display: flex; |
|
justify-content: space-between; |
|
|
|
.legends-item { |
|
position: relative; |
|
|
|
.legends-item-k { |
|
position: absolute; |
|
top: 0.06rem; |
|
left: -0.14rem; |
|
width: 0.08rem; |
|
height: 0.08rem; |
|
} |
|
} |
|
} |
|
} |
|
|
|
#mainDosage { |
|
width: 4rem; |
|
height: 2.8rem; |
|
top: -0.24rem; |
|
} |
|
|
|
.rank { |
|
display: inline-block; |
|
width: 0.32rem; |
|
height: 0.18rem; |
|
line-height: 0.22rem; |
|
text-align: center; |
|
font-size: 0.14rem !important; |
|
font-weight: normal; |
|
color: #FFFFFF; |
|
border-radius: 0.08rem; |
|
margin-left: 0.1rem; |
|
} |
|
}</style>
|
|
|