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.
587 lines
16 KiB
587 lines
16 KiB
<template> |
|
<div class="build-electric"> |
|
<p class="yq-title">楼宇耗电分析</p> |
|
<div class="change-tab" style="position: absolute; top: 1rem; right: 1.25rem"> |
|
<div @click="selectBuildType('')" :style="{ |
|
backgroundColor: chooseBuildType == '' ? 'rgb(8,166,255)' : '', |
|
}"> |
|
全部 |
|
</div> |
|
<div @click="selectBuildType('1')" :style="{ |
|
backgroundColor: chooseBuildType == '1' ? 'rgb(8,166,255)' : '', |
|
}"> |
|
照明 |
|
</div> |
|
<div @click="selectBuildType('2')" :style="{ |
|
backgroundColor: chooseBuildType == '2' ? 'rgb(8,166,255)' : '', |
|
}"> |
|
空调 |
|
</div> |
|
</div> |
|
<div class="search-box"> |
|
<div class="choose-time" style="float: left"> |
|
<span>选择楼宇</span> |
|
<el-select placeholder="请选择楼宇" size="mini" style="margin-left: 10px; width: 7.5rem" v-model="choseBuild" |
|
@change="searchBuild"> |
|
<el-option v-for="(item, index) in buildings" :label="item.name" :value="item.id" :key="index"> |
|
</el-option> |
|
</el-select> |
|
<span> 选择楼层</span> |
|
<el-select :disabled=" |
|
this.choseBuild == '' || choseBuild == '08' || choseBuild == '09' |
|
? true |
|
: false |
|
" placeholder="请选择楼层" size="mini" style="margin-left: 10px; width: 7.5rem" v-model="choseFloor" |
|
@change="changeFloor"> |
|
<el-option v-for="(item, index) in floors" :label="item.name" :value="item.id" :key="index" v-if=" |
|
(choseBuild == '03' || choseBuild == '05') && item.id == '03' |
|
? false |
|
: (choseBuild == '08' || choseBuild == '09') && item.id != '' |
|
? false |
|
: true |
|
"></el-option> |
|
</el-select> |
|
</div> |
|
<div style="float: right"> |
|
<el-date-picker size="mini" ref="buildDate" style=" |
|
width: 9.375rem; |
|
margin-right: 10px; |
|
border-radius: 5px; |
|
background-color: rgb(152, 160, 173); |
|
border: 0; |
|
" v-model="chooseDateValue" :type=" |
|
choseDate == 1 |
|
? 'year' |
|
: choseDate == 2 |
|
? 'month' |
|
: choseDate == 3 |
|
? 'date' |
|
: 'date' |
|
" :value-format=" |
|
choseDate == 1 |
|
? 'yyyy' |
|
: choseDate == 2 |
|
? 'yyyy-MM' |
|
: choseDate == 3 |
|
? 'yyyy-MM-dd' |
|
: 'yyyy-MM-dd' |
|
" :placeholder=" |
|
choseDate == 1 |
|
? '选择年份' |
|
: choseDate == 2 |
|
? '选择月份' |
|
: choseDate == 3 |
|
? '选择日期' |
|
: '选择日期' |
|
" clearable="false" @change="searchBuild"> |
|
</el-date-picker> |
|
<div class="change-tab"> |
|
<div @click="selectDate(1)" :style="{ backgroundColor: choseDate == 1 ? 'rgb(8,166,255)' : '' }"> |
|
年 |
|
</div> |
|
<div @click="selectDate(2)" :style="{ backgroundColor: choseDate == 2 ? 'rgb(8,166,255)' : '' }"> |
|
月 |
|
</div> |
|
<div @click="selectDate(3)" :style="{ backgroundColor: choseDate == 3 ? 'rgb(8,166,255)' : '' }"> |
|
日 |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="electric-chart"> |
|
<div class="leida"> |
|
<p style="margin-left: 1.25rem">耗电分析图</p> |
|
<div id="pie" style="width: 15.625rem; height: 14.375rem"></div> |
|
<!-- <radarChart id="leida" ref="radar"></radarChart> --> |
|
</div> |
|
<lineCharts id="line-chart" ref="line" width="33rem" height="18.375rem"></lineCharts> |
|
</div> |
|
</div> |
|
</template> |
|
|
|
<script> |
|
import radarChart from "./radarChart"; |
|
import lineCharts from "./lineCharts"; |
|
import { getBuildElectLine, getBuildElectPie, getFourPie } from "@/api/source/total"; |
|
import { dateFormat } from "@/util/date"; |
|
export default { |
|
props: { |
|
area: { |
|
type: Number, |
|
default: 1, |
|
}, |
|
}, |
|
components: { |
|
radarChart, |
|
lineCharts, |
|
}, |
|
data() { |
|
return { |
|
choseDate: "3", //日期选择模式 |
|
chooseDateValue: dateFormat(new Date(), "yyyy-MM-dd"), //日期选中值 |
|
chooseBuildType: "", //查询类型 全部 照明 空调 |
|
build: ["#1", "#2", "#3", "#4", "#5", "#6", "塔楼", "塔台辅楼"], |
|
buildColor: [ |
|
"rgb(56,169,255)", |
|
"rgb(44,246,172)", |
|
"rgb(255,243,91)", |
|
"rgb(236,105,67)", |
|
"rgb(126,207,142)", |
|
"rgb(242,155,119)", |
|
"#c400fc", |
|
"#a3ff20", |
|
], |
|
buildValue: "", |
|
choseBuild: "", |
|
buildings: [ |
|
{ |
|
id: "", |
|
name: "全部", |
|
}, |
|
{ |
|
id: "01", |
|
name: "1号楼", |
|
}, |
|
{ |
|
id: "02", |
|
name: "2号楼", |
|
}, |
|
{ |
|
id: "03", |
|
name: "3号楼", |
|
}, |
|
{ |
|
id: "04", |
|
name: "4号楼", |
|
}, |
|
{ |
|
id: "05", |
|
name: "5号楼", |
|
}, |
|
{ |
|
id: "06", |
|
name: "6号楼", |
|
}, |
|
{ |
|
id: "08", |
|
name: "塔楼", |
|
}, |
|
{ |
|
id: "09", |
|
name: "塔台辅楼", |
|
}, |
|
], |
|
choseFloor: "", //选择楼层 - 业务区，3号楼只有两层 |
|
floors: [ |
|
{ |
|
id: "", |
|
name: "全部", |
|
}, |
|
{ |
|
id: "01", |
|
name: "1层", |
|
}, |
|
{ |
|
id: "02", |
|
name: "2层", |
|
}, |
|
{ |
|
id: "03", |
|
name: "3层", |
|
}, |
|
], //楼层 - 只针对耗电分析饼图 |
|
intervalTime33: null, |
|
}; |
|
}, |
|
beforeDestroy() { |
|
if (this.intervalTime33) { |
|
console.log('clearInterval33') |
|
clearInterval(this.intervalTime33); |
|
this.intervalTime33 = null; |
|
} |
|
}, |
|
mounted() { |
|
this.getData(); |
|
this.intervalTime33 = setInterval(() => { |
|
this.getData(); |
|
},30*60*1000) |
|
}, |
|
methods: { |
|
//日期类型 |
|
selectDate(index) { |
|
this.choseDate = index; |
|
if (this.chooseDateValue) { |
|
if (index == 1) { |
|
this.chooseDateValue = |
|
this.chooseDateValue.length > 4 |
|
? this.chooseDateValue.substring(0, 4) |
|
: this.chooseDateValue; |
|
} else if (index == 2) { |
|
this.chooseDateValue = |
|
this.chooseDateValue.length < 5 |
|
? dateFormat(new Date(), "yyyy-MM") |
|
: this.chooseDateValue.length > 7 |
|
? this.chooseDateValue.substring(0, 7) |
|
: this.chooseDateValue; |
|
} else if (index == 3) { |
|
this.chooseDateValue = |
|
this.chooseDateValue.length < 5 |
|
? dateFormat(new Date(), "yyyy-MM-dd") |
|
: this.chooseDateValue.length < 10 |
|
? dateFormat(new Date(), "yyyy-MM-dd") |
|
: this.chooseDateValue; |
|
} |
|
} |
|
this.$nextTick(() => { |
|
this.getData(); |
|
}); |
|
}, |
|
// 耗电类型 |
|
selectBuildType(index) { |
|
this.chooseBuildType = index; |
|
this.getData(); |
|
}, |
|
getData() { |
|
//折线图 |
|
getBuildElectLine( |
|
"", |
|
this.buildValue, |
|
this.choseDate, |
|
this.chooseDateValue ? this.chooseDateValue : "", |
|
this.chooseBuildType |
|
).then((res) => { |
|
let leidaData = []; |
|
let lineData = []; |
|
let floorData = []; |
|
const data = res.data.data; |
|
for (let i = 0; i < data.dataList.length; i++) { |
|
// leidaData.push(data.dataList[i].consume); |
|
lineData.push(data.dataList[i].consumeList); |
|
let floor = |
|
parseInt(data.dataList[i].locationNumber) === 0 |
|
? "-1" |
|
: parseInt(data.dataList[i].locationNumber); |
|
floorData.push(this.buildValue == '08' ? '塔楼' : this.buildValue == '09' ? '塔台辅楼' : floor + "F"); |
|
} |
|
if (this.buildValue == "") { |
|
// this.getLeida(leidaData); |
|
this.getLineChart(lineData, data.dateList); |
|
} else { |
|
// this.floorLeida(leidaData, floorData); |
|
this.floorLineChart(lineData, floorData, data.dateList); |
|
} |
|
}); |
|
if(this.buildValue != '04'){ |
|
this.getPieData(); |
|
}else{ |
|
this.getFourPieData() |
|
} |
|
}, |
|
getFourPieData(){ |
|
getFourPie({ |
|
dateType:this.choseDate, |
|
queryDate:this.chooseDateValue ? this.chooseDateValue : "", |
|
floorNumber:this.choseFloor ? this.choseFloor : "" |
|
}).then(res =>{ |
|
const data = res.data.data |
|
this.getPie(data) |
|
|
|
}) |
|
}, |
|
getPieData() { |
|
//饼状图 |
|
getBuildElectPie( |
|
"", |
|
this.buildValue, |
|
this.choseDate, |
|
this.chooseDateValue ? this.chooseDateValue : "", |
|
this.choseFloor ? this.choseFloor : "" |
|
).then((res) => { |
|
const data = res.data.data; |
|
this.getPie(data); |
|
}); |
|
}, |
|
//耗电类型分析-饼状图 |
|
getPie(data) { |
|
let chart_data = []; |
|
var myChart = this.$echarts.init(document.getElementById("pie")); |
|
data.map((item, index) => { |
|
if (item.percent != "0.00") { |
|
chart_data.push(item); |
|
} |
|
}); |
|
let option = { |
|
// color: ["#07a6ff", "#f2b448", "#01feae", "#ff8b2e"], //["#f2b448", "#07a6ff"],// |
|
tooltip: { |
|
show: "item", |
|
}, |
|
series: [ |
|
{ |
|
name: "耗电分析", |
|
type: "pie", |
|
radius: "45%", |
|
center: ["50%", "40%"], |
|
data: chart_data, |
|
label: { |
|
formatter: "{b}\n{d}%", |
|
color: "rgba(255,255,255,0.5)", |
|
textBorderWidth: 0, |
|
}, |
|
labelLine: { |
|
length: 10, |
|
length2: 6, |
|
lineStyle: { |
|
color: "rgba(255,255,255,0.5)", |
|
showAbove: true, |
|
}, |
|
}, |
|
emphasis: { |
|
disabled: false, |
|
scale: false, |
|
}, |
|
}, |
|
{ |
|
name: "耗电分析", |
|
type: "pie", |
|
radius: "45%", |
|
center: ["50%", "40%"], |
|
data: chart_data, |
|
label: { |
|
position: "inner", |
|
formatter: "{c}", |
|
}, |
|
z: 4, |
|
}, |
|
], |
|
}; |
|
myChart.setOption(option); |
|
}, |
|
getLeida(value) { |
|
const data = [ |
|
{ |
|
value: value, |
|
name: "楼宇耗电", |
|
}, |
|
]; |
|
const title = [ |
|
{ name: "#1" }, |
|
{ name: "#2" }, |
|
{ name: "#3" }, |
|
{ name: "#4" }, |
|
{ name: "#5" }, |
|
{ name: "#6" }, |
|
]; |
|
this.$refs.radar.getLeidaChart( |
|
"耗电", |
|
"rgb(45,247,173)", |
|
"rgba(45,247,173,.8)", |
|
data, |
|
title |
|
); |
|
}, |
|
floorLeida(value, floorData) { |
|
let _bgArr = [...value].sort((n1, n2) => { |
|
return n2 - n1; |
|
}); |
|
let bigMax = _bgArr[0] + 100; |
|
let data = [ |
|
{ |
|
value: [0, 0, 0, 0, 0, 0], |
|
name: "楼宇耗电", |
|
}, |
|
]; |
|
let title = [ |
|
{ name: "1F", max: 0 }, |
|
{ name: "", max: 0 }, |
|
{ name: "2F", max: 0 }, |
|
{ name: "", max: 0 }, |
|
{ name: "3F", max: 0 }, |
|
{ name: "", max: 0 }, |
|
]; |
|
for (let i = 0; i < title.length; i++) { |
|
let isFindIndex = floorData.findIndex((item) => item == title[i].name); |
|
if (isFindIndex == -1) { |
|
title[i] = { name: "", max: bigMax }; |
|
} else { |
|
data[0].value[i] = value[isFindIndex]; |
|
title[i] = { name: title[i].name, max: bigMax }; |
|
} |
|
} |
|
// alert(data[0].value); |
|
this.$refs.radar.getLeidaChart( |
|
"耗电", |
|
"rgb(45,247,173)", |
|
"rgba(45,247,173,.8)", |
|
data, |
|
title |
|
); |
|
}, |
|
getLineChart(value, dateList) { |
|
const data = []; |
|
for (let i = 0; i < this.build.length; i++) { |
|
data.push({ |
|
name: this.build[i], |
|
type: "line", |
|
data: value[i], |
|
symbol: "rect", |
|
symbolSize: 4, |
|
itemStyle: { |
|
color: this.buildColor[i], |
|
}, |
|
lineStyle: { |
|
color: this.buildColor[i], |
|
width: 1, |
|
}, |
|
}); |
|
} |
|
this.$refs.line.getLineCharts("耗电量(kw·h)", data, dateList); |
|
}, |
|
floorLineChart(value, floorData, dateList) { |
|
let data = []; |
|
for (let i = 0; i < floorData.length; i++) { |
|
data.push({ |
|
name: floorData[i], |
|
type: "line", |
|
data: value[i], |
|
symbol: "rect", |
|
symbolSize: 4, |
|
itemStyle: { |
|
color: this.buildColor[i], |
|
}, |
|
lineStyle: { |
|
color: this.buildColor[i], |
|
width: 1, |
|
}, |
|
}); |
|
} |
|
// console.log("折现楼层", data); |
|
this.$refs.line.getLineCharts("耗电量(kw·h)", data, dateList); |
|
}, |
|
searchBuild() { |
|
this.buildValue = this.choseBuild; |
|
this.choseFloor = ""; |
|
this.getData(); |
|
|
|
// this.floorLeida(); |
|
// this.floorLineChart() |
|
}, |
|
changeFloor(){ |
|
console.log('choseFloor==========>',this.choseFloor) |
|
if(this.buildValue == '04'){ |
|
this.getFourPieData() |
|
}else{ |
|
this.getPieData() |
|
} |
|
}, |
|
}, |
|
}; |
|
</script> |
|
|
|
<style scoped lang="scss"> |
|
.build-electric { |
|
width: 50.062rem; |
|
// height: 22.562rem; |
|
height: 25rem; |
|
// background-image: url(../../../../public/img/analysis/build-electric.png); |
|
background-image: url(../../../../public/img/analysis/condition-analy.png); |
|
background-size: 100% 100%; |
|
margin-left: 1.562rem; |
|
position: relative; |
|
|
|
overflow: hidden; |
|
.yq-title { |
|
// margin: 0.7rem 0 0 2.5rem; |
|
margin: 0.7rem 0 0 1.5rem; |
|
color: white; |
|
font-weight: bold; |
|
} |
|
|
|
.change-tab { |
|
display: inline-flex; |
|
border: 1px solid #08a6ff; |
|
width: 7.5rem; |
|
justify-content: flex-start; |
|
border-radius: 0.312rem; |
|
cursor: pointer; |
|
font-size: 14px; |
|
z-index: 100; |
|
|
|
div { |
|
color: white; |
|
width: 50%; |
|
text-align: center; |
|
border-right: 1px solid rgb(8, 166, 255); |
|
} |
|
} |
|
|
|
.search-box { |
|
position: absolute; |
|
left: 1.25rem; |
|
top: 3.875rem; |
|
right: 1.25rem; |
|
overflow: hidden; |
|
|
|
/deep/ .el-date-editor .el-input__inner { |
|
background-color: rgb(152, 160, 173); |
|
color: rgba(255, 255, 255, 0.7); |
|
border-color: rgb(152, 160, 173); |
|
} |
|
|
|
/deep/ .el-date-editor .el-input__inner::-webkit-input-placeholder { |
|
color: white; |
|
} |
|
} |
|
|
|
.electric-chart { |
|
margin-top: 3rem; |
|
// margin-left: 1.25rem; |
|
display: flex; |
|
|
|
.leida { |
|
p { |
|
color: rgb(7, 230, 236); |
|
} |
|
|
|
#leida { |
|
width: 15.625rem; |
|
height: 14.375rem; |
|
} |
|
} |
|
|
|
#line-chart { |
|
width: 33rem; |
|
height: 18.875rem; |
|
} |
|
} |
|
|
|
.choose-time { |
|
// position: absolute; |
|
// top: 0.5rem; |
|
// right: 2.5rem; |
|
|
|
span { |
|
color: rgb(8, 231, 235); |
|
font-size: 14px; |
|
} |
|
|
|
.search-btn { |
|
background-color: rgb(1, 238, 235); |
|
color: #0f93e1; |
|
border: 0; |
|
width: 4.687rem; |
|
margin-left: 0.937rem; |
|
font-size: 15px; |
|
} |
|
|
|
/deep/ .el-select .el-input__inner { |
|
background-color: rgb(152, 160, 173); |
|
color: rgba(255, 255, 255, 0.7); |
|
border-color: rgb(152, 160, 173); |
|
} |
|
|
|
/deep/ .el-select .el-input__inner::-webkit-input-placeholder { |
|
color: white; |
|
} |
|
} |
|
} |
|
</style>
|
|
|