|
|
|
|
@ -5,13 +5,19 @@
|
|
|
|
|
<img class="use-icon" src="../../../../assets/images/use1.png" alt="" /> |
|
|
|
|
<div class="use-text"> |
|
|
|
|
<div>用水量(吨)</div> |
|
|
|
|
<div class="data-text">2</div> |
|
|
|
|
<div class="data-text">{{ useWater }}</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="use-text"> |
|
|
|
|
<div>与昨日相比</div> |
|
|
|
|
<div class="downText"> |
|
|
|
|
<div v-if="dateType === 'day'">与昨日相比</div> |
|
|
|
|
<div v-if="dateType === 'month'">与上月相比</div> |
|
|
|
|
<div v-if="dateType === 'year'">与上年相比</div> |
|
|
|
|
<div class="upText" v-if="useWaterRadio > 0"> |
|
|
|
|
<i class="el-icon-bottom"></i> |
|
|
|
|
<span>-10%</span> |
|
|
|
|
<span>+{{ useWaterRadio }}</span> |
|
|
|
|
</div> |
|
|
|
|
<div class="downText" v-else> |
|
|
|
|
<i class="el-icon-bottom"></i> |
|
|
|
|
<span>-{{ useWaterRadio }}</span> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<img |
|
|
|
|
@ -24,13 +30,19 @@
|
|
|
|
|
<img class="use-icon" src="../../../../assets/images/use2.png" alt="" /> |
|
|
|
|
<div class="use-text"> |
|
|
|
|
<div>用电量(度)</div> |
|
|
|
|
<div class="data-text">31.600</div> |
|
|
|
|
<div class="data-text">{{ useElect }}</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="use-text"> |
|
|
|
|
<div>与昨日相比</div> |
|
|
|
|
<div class="upText"> |
|
|
|
|
<i class="el-icon-top"></i> |
|
|
|
|
<span>64.41%</span> |
|
|
|
|
<div v-if="dateType === 'day'">与昨日相比</div> |
|
|
|
|
<div v-if="dateType === 'month'">与上月相比</div> |
|
|
|
|
<div v-if="dateType === 'year'">与上年相比</div> |
|
|
|
|
<div class="upText" v-if="useElectRadio > 0"> |
|
|
|
|
<i class="el-icon-bottom"></i> |
|
|
|
|
<span>+{{ useElectRadio }}</span> |
|
|
|
|
</div> |
|
|
|
|
<div class="downText" v-else> |
|
|
|
|
<i class="el-icon-bottom"></i> |
|
|
|
|
<span>-{{ useElectRadio }}</span> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<img |
|
|
|
|
@ -43,13 +55,19 @@
|
|
|
|
|
<img class="use-icon" src="../../../../assets/images/use3.png" alt="" /> |
|
|
|
|
<div class="use-text"> |
|
|
|
|
<div>单耗(度/吨)</div> |
|
|
|
|
<div class="data-text">2</div> |
|
|
|
|
<div class="data-text">{{ useUnit }}</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="use-text"> |
|
|
|
|
<div>与昨日相比</div> |
|
|
|
|
<div class="upText"> |
|
|
|
|
<i class="el-icon-top"></i> |
|
|
|
|
<span>64.41%</span> |
|
|
|
|
<div v-if="dateType === 'day'">与昨日相比</div> |
|
|
|
|
<div v-if="dateType === 'month'">与上月相比</div> |
|
|
|
|
<div v-if="dateType === 'year'">与上年相比</div> |
|
|
|
|
<div class="upText" v-if="useUnitRadio > 0"> |
|
|
|
|
<i class="el-icon-bottom"></i> |
|
|
|
|
<span>+{{ useUnitRadio }}</span> |
|
|
|
|
</div> |
|
|
|
|
<div class="downText" v-else> |
|
|
|
|
<i class="el-icon-bottom"></i> |
|
|
|
|
<span>-{{ useUnitRadio }}</span> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<img |
|
|
|
|
@ -70,7 +88,7 @@
|
|
|
|
|
<el-option |
|
|
|
|
v-for="(item, index) in builds" |
|
|
|
|
:key="index" |
|
|
|
|
:label="item.label" |
|
|
|
|
:label="item.building_name" |
|
|
|
|
:value="item.id" |
|
|
|
|
/> |
|
|
|
|
</el-select> |
|
|
|
|
@ -131,7 +149,7 @@
|
|
|
|
|
<el-button type="success" @click="findData">查询</el-button> |
|
|
|
|
</div> |
|
|
|
|
<div class="warning-btn"> |
|
|
|
|
<el-button type="warning" @click="exportData">导出</el-button> |
|
|
|
|
<el-button type="warning" @click="goExport">导出</el-button> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
@ -147,25 +165,19 @@
|
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="charts" ref="chart_ref"></div> |
|
|
|
|
<el-table |
|
|
|
|
v-loading="loading" |
|
|
|
|
:data="postList" |
|
|
|
|
stripe |
|
|
|
|
:cell-style="tableRowStyle" |
|
|
|
|
> |
|
|
|
|
<el-table-column label="日期" align="center" prop="dateAndWeek" /> |
|
|
|
|
<el-table-column label="所属楼栋" align="center" prop="maxTemp" /> |
|
|
|
|
<el-table-column label="用水量(吨)" align="center" prop="minTemp" /> |
|
|
|
|
<el-table :data="tableData" stripe> |
|
|
|
|
<el-table-column label="日期" align="center" prop="curDate" /> |
|
|
|
|
<el-table-column |
|
|
|
|
label="用电量(度)" |
|
|
|
|
label="所属楼栋" |
|
|
|
|
v-if="isBuildNone" |
|
|
|
|
align="center" |
|
|
|
|
prop="weatherConditions" |
|
|
|
|
/> |
|
|
|
|
<el-table-column |
|
|
|
|
label="单耗(度/吨)" |
|
|
|
|
align="center" |
|
|
|
|
prop="windDirection" |
|
|
|
|
prop="buildingName" |
|
|
|
|
/> |
|
|
|
|
<el-table-column label="用水量(吨)" align="center" prop="useHotWater" /> |
|
|
|
|
<el-table-column label="用电量(度)" align="center" prop="electValue" /> |
|
|
|
|
<el-table-column label="单耗(度/吨)" align="center" prop="electWater" /> |
|
|
|
|
<el-table-column label="楼栋人数" align="center" prop="checkInCount" /> |
|
|
|
|
<el-table-column label="人均用水(人/升)" align="center" prop="perWater" /> |
|
|
|
|
</el-table> |
|
|
|
|
|
|
|
|
|
<pagination |
|
|
|
|
@ -179,13 +191,14 @@
|
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
<script> |
|
|
|
|
import { formatDay } from "@/utils/datetime"; |
|
|
|
|
import { energyAnalyze, analyzeExport } from "@/api/centerairC/energyManage"; |
|
|
|
|
import { spaceTree } from "@/api/region"; |
|
|
|
|
import { formatDay, getDay, getMonth, getYear } from "@/utils/datetime"; |
|
|
|
|
import { hotBuildList, hotEnergySum } from "@/api/hotWater/energyAnalysis"; |
|
|
|
|
import { hotEnergyQuery } from "@/api/hotWater/overview"; |
|
|
|
|
import * as echarts from "echarts"; |
|
|
|
|
export default { |
|
|
|
|
data() { |
|
|
|
|
return { |
|
|
|
|
isBuildNone: true, |
|
|
|
|
listLoading: false, |
|
|
|
|
dateType: "day", //默认选择天 |
|
|
|
|
dayDate: [], //日值 |
|
|
|
|
@ -196,12 +209,11 @@ export default {
|
|
|
|
|
dialogVisible: false, |
|
|
|
|
building: "", //选中的楼栋 |
|
|
|
|
builds: [], //楼栋列表 |
|
|
|
|
// 遮罩层 |
|
|
|
|
loading: true, |
|
|
|
|
// 总条数 |
|
|
|
|
total: 0, |
|
|
|
|
// 表格数据 |
|
|
|
|
postList: [], |
|
|
|
|
tableData: [], |
|
|
|
|
exportData: [], |
|
|
|
|
// 查询参数 |
|
|
|
|
queryParams: { |
|
|
|
|
pageNum: 1, |
|
|
|
|
@ -217,6 +229,12 @@ export default {
|
|
|
|
|
brokenData2: [], |
|
|
|
|
brokenData3: [], |
|
|
|
|
brokenTime: [], |
|
|
|
|
useWater: 0, |
|
|
|
|
useWaterRadio: 0, |
|
|
|
|
useElect: 0, |
|
|
|
|
useElectRadio: 0, |
|
|
|
|
useUnit: 0, |
|
|
|
|
useUnitRadio: 0, |
|
|
|
|
}; |
|
|
|
|
}, |
|
|
|
|
created() { |
|
|
|
|
@ -225,11 +243,9 @@ export default {
|
|
|
|
|
mounted() { |
|
|
|
|
this.initializeTimeDate(); |
|
|
|
|
this.getBuildList(); |
|
|
|
|
this.getList(); |
|
|
|
|
this.initChart(); |
|
|
|
|
window.addEventListener("resize", this.screenAdapter); |
|
|
|
|
this.screenAdapter(); |
|
|
|
|
this.getChartData(); |
|
|
|
|
}, |
|
|
|
|
destroyed() { |
|
|
|
|
//取消监听器 |
|
|
|
|
@ -242,32 +258,23 @@ export default {
|
|
|
|
|
}, |
|
|
|
|
/** 查询楼栋 */ |
|
|
|
|
getBuildList() { |
|
|
|
|
spaceTree().then((res) => { |
|
|
|
|
let data = { |
|
|
|
|
systemType: "1", |
|
|
|
|
}; |
|
|
|
|
hotBuildList(data).then((res) => { |
|
|
|
|
if (res.code == 200) { |
|
|
|
|
// 只需要保留热水的系统 |
|
|
|
|
console.log("楼栋返回值", res); |
|
|
|
|
let newRes = { ...res }; |
|
|
|
|
|
|
|
|
|
if (newRes.data && newRes.data[0] && newRes.data[0].children) { |
|
|
|
|
newRes.data[0].children = newRes.data[0].children.filter((item) => { |
|
|
|
|
// 假设子项有一个 label属性，用于检查是否包含 "热水" |
|
|
|
|
return item.label && item.label.includes("热水"); |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
// 指定要保留的最大层级（从 1 开始计数），这里假设指定为第 4 级 |
|
|
|
|
const targetLevel = 4; |
|
|
|
|
// 从 data[0] 开始处理，当前层级为 1 |
|
|
|
|
if (newRes.data[0]) { |
|
|
|
|
this.removeChildrenAfterLevel(newRes.data[0], 1, targetLevel); |
|
|
|
|
} |
|
|
|
|
this.builds = newRes.data[0].children[0].children[0].children; |
|
|
|
|
this.builds = res.rows; |
|
|
|
|
// console.log("筛选后的新结果", this.builds); |
|
|
|
|
this.building = this.builds[0].id; |
|
|
|
|
this.building = res.rows[0].id; |
|
|
|
|
this.getList(); |
|
|
|
|
this.getRadioData(); |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
}, |
|
|
|
|
// 递归函数，用于去除指定层级往后的 children 数据 |
|
|
|
|
// 使用this.removeChildrenAfterLevel(newRes.data[0], 1, targetLevel); |
|
|
|
|
removeChildrenAfterLevel(obj, currentLevel, targetLevel) { |
|
|
|
|
if (currentLevel >= targetLevel) { |
|
|
|
|
// 当达到指定层级时，将 children 属性置为空数组 |
|
|
|
|
@ -287,21 +294,41 @@ export default {
|
|
|
|
|
}, |
|
|
|
|
// 初始化时间 |
|
|
|
|
initializeTimeDate() { |
|
|
|
|
const now = new Date(); |
|
|
|
|
// 获取当前月份的第一天 |
|
|
|
|
const start = new Date(now.getFullYear(), now.getMonth(), 1); |
|
|
|
|
// 获取当前日期（作为结束时间） |
|
|
|
|
const end = new Date(now.getFullYear(), now.getMonth(), now.getDate()); |
|
|
|
|
this.dayDate = [formatDay(start), formatDay(end)]; // 更新 |
|
|
|
|
let date = new Date(); //获取新的时间 |
|
|
|
|
//获取当前年份,并且转为字符串 |
|
|
|
|
let year = date.getFullYear().toString(); |
|
|
|
|
//获取当前月份，因为月份是要从0开始，此处要加1， |
|
|
|
|
//使用三元表达式，判断是否小于10，如果是的话，就在字符串前面拼接'0' |
|
|
|
|
let month = |
|
|
|
|
date.getMonth() + 1 < 10 |
|
|
|
|
? "0" + (date.getMonth() + 1).toString() |
|
|
|
|
: (date.getMonth() + 1).toString(); |
|
|
|
|
//获取天，判断是否小于10，如果是的话，就在在字符串前面拼接'0' |
|
|
|
|
let day = |
|
|
|
|
date.getDate() < 10 |
|
|
|
|
? "0" + date.getDate().toString() |
|
|
|
|
: date.getDate().toString(); |
|
|
|
|
//字符串拼接，将开始时间和结束时间进行拼接 |
|
|
|
|
let start1 = year + "-" + month + "-01"; //当月第一天 |
|
|
|
|
let end1 = year + "-" + month + "-" + day; //当天 |
|
|
|
|
let start2 = year + "-" + "01"; //当年第一月 |
|
|
|
|
let end2 = getMonth(0); //当月 |
|
|
|
|
let start3 = getYear(0) - 1; //去年 |
|
|
|
|
let end3 = getYear(0); //今年 |
|
|
|
|
this.dayDate = [start1, end1]; // 更新 |
|
|
|
|
this.monthDate = [start2, end2]; |
|
|
|
|
this.startYear = start3.toString(); |
|
|
|
|
this.endYear = end3.toString(); |
|
|
|
|
}, |
|
|
|
|
// 选择时间类型 |
|
|
|
|
updateDateType() { |
|
|
|
|
// this.dateType = this.radio; |
|
|
|
|
console.log(this.dateType); |
|
|
|
|
(this.dayDate = []), //日值 |
|
|
|
|
(this.monthDate = []), //月值 |
|
|
|
|
(this.startYear = ""), //开始年份 |
|
|
|
|
(this.endYear = ""); //结束年份 |
|
|
|
|
// (this.dayDate = []), //日值 |
|
|
|
|
// (this.monthDate = []), //月值 |
|
|
|
|
// (this.startYear = ""), //开始年份 |
|
|
|
|
// (this.endYear = ""); //结束年份 |
|
|
|
|
this.getList(); |
|
|
|
|
this.getRadioData(); |
|
|
|
|
}, |
|
|
|
|
// 选中日期事件 |
|
|
|
|
dateChange() { |
|
|
|
|
@ -374,6 +401,7 @@ export default {
|
|
|
|
|
default: |
|
|
|
|
break; |
|
|
|
|
} |
|
|
|
|
this.getRadioData(); |
|
|
|
|
}, |
|
|
|
|
// 显示消息的函数 |
|
|
|
|
showMessage(message, type) { |
|
|
|
|
@ -382,110 +410,115 @@ export default {
|
|
|
|
|
type: type, |
|
|
|
|
}); |
|
|
|
|
}, |
|
|
|
|
//请求数据 |
|
|
|
|
//请求表格数据 |
|
|
|
|
getList() { |
|
|
|
|
let timeType = null; |
|
|
|
|
if (this.dateType == "day") { |
|
|
|
|
timeType = 1; |
|
|
|
|
this.queryParams.startTime = |
|
|
|
|
this.dayDate.length > 0 ? this.dayDate[0] : ""; |
|
|
|
|
this.queryParams.endTime = |
|
|
|
|
this.dayDate.length > 0 ? this.dayDate[1] : ""; |
|
|
|
|
} else if (this.dateType == "month") { |
|
|
|
|
timeType = 2; |
|
|
|
|
this.queryParams.startTime = |
|
|
|
|
this.monthDate.length > 0 ? this.monthDate[0] : ""; |
|
|
|
|
this.queryParams.endTime = |
|
|
|
|
this.monthDate.length > 0 ? this.monthDate[1] : ""; |
|
|
|
|
} else if (this.dateType == "year") { |
|
|
|
|
(this.queryParams.startTime = this.startYear), |
|
|
|
|
(this.queryParams.endTime = this.endYear); |
|
|
|
|
timeType = 3; |
|
|
|
|
this.queryParams.startTime = this.startYear; |
|
|
|
|
this.queryParams.endTime = this.endYear; |
|
|
|
|
} |
|
|
|
|
let data = { |
|
|
|
|
timeType: this.dateType, |
|
|
|
|
startTime: this.queryParams.startTime, |
|
|
|
|
endTime: this.queryParams.endTime, |
|
|
|
|
building: this.building, |
|
|
|
|
type: timeType, |
|
|
|
|
page: this.queryParams.pageNum, |
|
|
|
|
limit: this.queryParams.pageSize, |
|
|
|
|
startDate: this.queryParams.startTime, |
|
|
|
|
endDate: this.queryParams.endTime, |
|
|
|
|
buildingId: this.building, |
|
|
|
|
}; |
|
|
|
|
console.log("查询数据参数", data); |
|
|
|
|
console.log("查询表格数据参数", data); |
|
|
|
|
this.listLoading = true; |
|
|
|
|
hotEnergyQuery(data).then((res) => { |
|
|
|
|
console.log("表格返回的数据", res); |
|
|
|
|
if (res.code == 200 && res.rows.length > 0) { |
|
|
|
|
this.tableData = res.rows; |
|
|
|
|
this.total = res.total; |
|
|
|
|
if (this.building == "所有") { |
|
|
|
|
this.isBuildNone = false; |
|
|
|
|
} else { |
|
|
|
|
this.isBuildNone = true; |
|
|
|
|
} |
|
|
|
|
} else { |
|
|
|
|
this.tableData = []; |
|
|
|
|
this.total = 0; |
|
|
|
|
} |
|
|
|
|
this.getChartData(); |
|
|
|
|
}); |
|
|
|
|
// 请求数据 |
|
|
|
|
// Just to simulate the time of the request |
|
|
|
|
setTimeout(() => { |
|
|
|
|
this.listLoading = false; |
|
|
|
|
}, 1.0 * 1000); |
|
|
|
|
}, |
|
|
|
|
// |
|
|
|
|
//请求折线图数据 |
|
|
|
|
getChartData() { |
|
|
|
|
this.queryParams.pageNum = 0; |
|
|
|
|
console.log("图表参数", this.queryParams); |
|
|
|
|
this.brokenData1 = [30, 40, 29]; |
|
|
|
|
this.brokenData2 = [10, 23, 12]; |
|
|
|
|
this.brokenData3 = [3, 4, 2]; |
|
|
|
|
this.brokenTime = ["3月", "4月", "5月"]; |
|
|
|
|
// weatherTempData(this.queryParams).then((response) => { |
|
|
|
|
// console.log("处理值然后渲染"); |
|
|
|
|
// if (response.rows.length > 0) { |
|
|
|
|
// let data = response.rows; |
|
|
|
|
// let timeValue = []; |
|
|
|
|
// let hightValue = []; |
|
|
|
|
// let lowValue = []; |
|
|
|
|
// data.forEach((element) => { |
|
|
|
|
// timeValue.push(element.weatherDate); |
|
|
|
|
// hightValue.push(element.maxTemp); |
|
|
|
|
// lowValue.push(element.minTemp); |
|
|
|
|
// }); |
|
|
|
|
// let adapterOption = {}; |
|
|
|
|
// adapterOption = { |
|
|
|
|
// xAxis: { |
|
|
|
|
// data: timeValue, |
|
|
|
|
// }, |
|
|
|
|
// series: [ |
|
|
|
|
// { |
|
|
|
|
// data: hightValue, |
|
|
|
|
// //折线颜色 |
|
|
|
|
// itemStyle: { |
|
|
|
|
// color: "rgb(18, 126, 226)", //折线的颜色 |
|
|
|
|
// }, |
|
|
|
|
// lineStyle: { |
|
|
|
|
// color: "rgb(18, 126, 226)", //折线点的颜色 |
|
|
|
|
// }, |
|
|
|
|
// }, |
|
|
|
|
// { |
|
|
|
|
// data: lowValue, |
|
|
|
|
// //折线颜色 |
|
|
|
|
// itemStyle: { |
|
|
|
|
// color: "rgb(250, 169, 19)", //折线的颜色 |
|
|
|
|
// }, |
|
|
|
|
// lineStyle: { |
|
|
|
|
// color: "rgb(250, 169, 19)", //折线点的颜色 |
|
|
|
|
// }, |
|
|
|
|
// }, |
|
|
|
|
// ], |
|
|
|
|
// }; |
|
|
|
|
// //记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关 |
|
|
|
|
// this.brokenInstanc.setOption(adapterOption); |
|
|
|
|
// //手动的调用图标对象的resize才能产生效果 |
|
|
|
|
// this.brokenInstanc.resize(); |
|
|
|
|
// } else { |
|
|
|
|
// let adapterOption = {}; |
|
|
|
|
// adapterOption = { |
|
|
|
|
// xAxis: { |
|
|
|
|
// data: [], |
|
|
|
|
// }, |
|
|
|
|
// series: [ |
|
|
|
|
// { |
|
|
|
|
// data: [], |
|
|
|
|
// }, |
|
|
|
|
// { |
|
|
|
|
// data: [], |
|
|
|
|
// }, |
|
|
|
|
// ], |
|
|
|
|
// }; |
|
|
|
|
// //记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关 |
|
|
|
|
// this.brokenInstanc.setOption(adapterOption); |
|
|
|
|
// //手动的调用图标对象的resize才能产生效果 |
|
|
|
|
// this.brokenInstanc.resize(); |
|
|
|
|
// } |
|
|
|
|
// }); |
|
|
|
|
this.renderingBroken(); |
|
|
|
|
let timeType = null; |
|
|
|
|
if (this.dateType == "day") { |
|
|
|
|
timeType = 1; |
|
|
|
|
this.queryParams.startTime = |
|
|
|
|
this.dayDate.length > 0 ? this.dayDate[0] : ""; |
|
|
|
|
this.queryParams.endTime = |
|
|
|
|
this.dayDate.length > 0 ? this.dayDate[1] : ""; |
|
|
|
|
} else if (this.dateType == "month") { |
|
|
|
|
timeType = 2; |
|
|
|
|
this.queryParams.startTime = |
|
|
|
|
this.monthDate.length > 0 ? this.monthDate[0] : ""; |
|
|
|
|
this.queryParams.endTime = |
|
|
|
|
this.monthDate.length > 0 ? this.monthDate[1] : ""; |
|
|
|
|
} else if (this.dateType == "year") { |
|
|
|
|
timeType = 3; |
|
|
|
|
this.queryParams.startTime = this.startYear; |
|
|
|
|
this.queryParams.endTime = this.endYear; |
|
|
|
|
} |
|
|
|
|
let data = { |
|
|
|
|
type: timeType, |
|
|
|
|
page: this.queryParams.pageNum, |
|
|
|
|
limit: this.total, |
|
|
|
|
startDate: this.queryParams.startTime, |
|
|
|
|
endDate: this.queryParams.endTime, |
|
|
|
|
buildingId: this.building, |
|
|
|
|
}; |
|
|
|
|
hotEnergyQuery(data).then((res) => { |
|
|
|
|
console.log("图表返回的数据", res); |
|
|
|
|
this.brokenData1 = []; |
|
|
|
|
this.brokenData2 = []; |
|
|
|
|
this.brokenData3 = []; |
|
|
|
|
this.brokenTime = []; |
|
|
|
|
if (res.code == 200 && res.rows.length > 0) { |
|
|
|
|
this.exportData = res.rows; |
|
|
|
|
res.rows.forEach((item) => { |
|
|
|
|
this.brokenData1.push(item.useHotWater); |
|
|
|
|
this.brokenData2.push(item.electValue); |
|
|
|
|
this.brokenData3.push(item.electWater); |
|
|
|
|
this.brokenTime.push(item.curDate); |
|
|
|
|
}); |
|
|
|
|
// 对数组进行反转操作 |
|
|
|
|
this.brokenData1.reverse(); |
|
|
|
|
this.brokenData2.reverse(); |
|
|
|
|
this.brokenData3.reverse(); |
|
|
|
|
this.brokenTime.reverse(); |
|
|
|
|
this.renderingBroken(); |
|
|
|
|
} else { |
|
|
|
|
this.brokenData1 = []; |
|
|
|
|
this.brokenData2 = []; |
|
|
|
|
this.brokenData3 = []; |
|
|
|
|
this.brokenTime = []; |
|
|
|
|
} |
|
|
|
|
this.renderingBroken(); |
|
|
|
|
}); |
|
|
|
|
}, |
|
|
|
|
renderingBroken() { |
|
|
|
|
if (this.currentIndex === 0) { |
|
|
|
|
@ -552,55 +585,107 @@ export default {
|
|
|
|
|
this.brokenOption.xAxis.data = this.brokenTime; |
|
|
|
|
this.brokenInstanc.setOption(this.brokenOption); |
|
|
|
|
}, |
|
|
|
|
// 导出 |
|
|
|
|
exportData() { |
|
|
|
|
// 请求环比数据 |
|
|
|
|
getRadioData() { |
|
|
|
|
let curType = ""; |
|
|
|
|
let curTime = ""; |
|
|
|
|
if (this.dateType == "day") { |
|
|
|
|
curType = 1; |
|
|
|
|
curTime = getDay(0); |
|
|
|
|
} else if (this.dateType == "month") { |
|
|
|
|
curType = 2; |
|
|
|
|
curTime = getMonth(0); |
|
|
|
|
} else if (this.dateType == "year") { |
|
|
|
|
curType = 3; |
|
|
|
|
curTime = getYear(0); |
|
|
|
|
} |
|
|
|
|
let data = { |
|
|
|
|
timeType: this.dateType, |
|
|
|
|
startTime: this.queryParams.startTime, |
|
|
|
|
endTime: this.endTime, |
|
|
|
|
building: this.building, |
|
|
|
|
curDate: curTime, |
|
|
|
|
type: curType, |
|
|
|
|
buildingId: this.building, |
|
|
|
|
}; |
|
|
|
|
console.log("导出数据参数", data); |
|
|
|
|
analyzeExport(data).then((res) => { |
|
|
|
|
console.log("导出返回", res); |
|
|
|
|
if (res) { |
|
|
|
|
// 请求的结果就是文件 |
|
|
|
|
// 创建一个blob URL，用于生成下载链接 |
|
|
|
|
const url = window.URL.createObjectURL(new Blob([res])); |
|
|
|
|
// 创建一个<a>元素，并设置其href和download属性 |
|
|
|
|
const link = document.createElement("a"); |
|
|
|
|
link.href = url; |
|
|
|
|
link.setAttribute("download", "机房能耗报表.xls"); // 设置下载的文件名 |
|
|
|
|
// 模拟点击下载链接 |
|
|
|
|
document.body.appendChild(link); |
|
|
|
|
link.click(); |
|
|
|
|
document.body.removeChild(link); |
|
|
|
|
// 释放blob URL资源 |
|
|
|
|
window.URL.revokeObjectURL(url); |
|
|
|
|
this.$message({ |
|
|
|
|
type: "success", |
|
|
|
|
message: "导出成功!", |
|
|
|
|
}); |
|
|
|
|
} else { |
|
|
|
|
this.$message.error("导出失败!"); |
|
|
|
|
hotEnergySum(data).then((res) => { |
|
|
|
|
console.log("上层数据返回", res); |
|
|
|
|
if (res.code == 200) { |
|
|
|
|
this.useWater = res.rows[0].waterValue; |
|
|
|
|
this.useWaterRadio = res.rows[0].waterP; |
|
|
|
|
this.useElect = res.rows[0].electValue; |
|
|
|
|
this.useElectRadio = res.rows[0].electP; |
|
|
|
|
this.useUnit = res.rows[0].electWater; |
|
|
|
|
this.useUnitRadio = res.rows[0].electWaterP; |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
// .catch((err) => { |
|
|
|
|
// this.$message.error('导出失败!'); |
|
|
|
|
// }) |
|
|
|
|
}, |
|
|
|
|
tableRowStyle({ row, column, rowIndex, columnIndex }) { |
|
|
|
|
// 修改颜色 |
|
|
|
|
if (columnIndex === 1) { |
|
|
|
|
return "color: #fd1e00;!important;text-align:center"; |
|
|
|
|
} |
|
|
|
|
if (columnIndex === 2) { |
|
|
|
|
return "color: #3390ff;!important;text-align:center"; |
|
|
|
|
} |
|
|
|
|
if (columnIndex === 4) { |
|
|
|
|
return "color: #75d148;!important;text-align:center"; |
|
|
|
|
// 导出 |
|
|
|
|
goExport() { |
|
|
|
|
if (this.exportData) { |
|
|
|
|
import("@/assets/excel/Export2Excel").then((excel) => { |
|
|
|
|
// 导出的excel表头字段名，需要导出表格字段名 |
|
|
|
|
if (this.building == "所有") { |
|
|
|
|
var tHeader = [ |
|
|
|
|
"日期", |
|
|
|
|
"用水量(吨)", |
|
|
|
|
"用电量(度)", |
|
|
|
|
"单耗(度/吨)", |
|
|
|
|
"楼栋人数", |
|
|
|
|
"人均用水(人/升)", |
|
|
|
|
]; // 导出的excel表头名信息 改参数 |
|
|
|
|
var filterVal = [ |
|
|
|
|
"curDate", |
|
|
|
|
"useHotWater", |
|
|
|
|
"electValue", |
|
|
|
|
"electWater", |
|
|
|
|
"checkInCount", |
|
|
|
|
"perWater", |
|
|
|
|
]; |
|
|
|
|
} else { |
|
|
|
|
var tHeader = [ |
|
|
|
|
"日期", |
|
|
|
|
"所属楼栋", |
|
|
|
|
"用水量(吨)", |
|
|
|
|
"用电量(度)", |
|
|
|
|
"单耗(度/吨)", |
|
|
|
|
"楼栋人数", |
|
|
|
|
"人均用水(人/升)", |
|
|
|
|
]; // 导出的excel表头名信息 改参数 |
|
|
|
|
var filterVal = [ |
|
|
|
|
"curDate", |
|
|
|
|
"buildingName", |
|
|
|
|
"useHotWater", |
|
|
|
|
"electValue", |
|
|
|
|
"electWater", |
|
|
|
|
"checkInCount", |
|
|
|
|
"perWater", |
|
|
|
|
]; |
|
|
|
|
} |
|
|
|
|
const data = this.formatJson(filterVal, this.exportData); |
|
|
|
|
const autoWidth = true; |
|
|
|
|
excel.export_json_to_excel({ |
|
|
|
|
header: tHeader, //表头 |
|
|
|
|
data, //数据 |
|
|
|
|
filename: "能耗报表", //名称 |
|
|
|
|
autoWidth: true, //宽度自适应 |
|
|
|
|
}); |
|
|
|
|
}); |
|
|
|
|
this.$message({ |
|
|
|
|
type: "success", |
|
|
|
|
message: "导出成功!", |
|
|
|
|
}); |
|
|
|
|
} else { |
|
|
|
|
this.$message.error("导出失败!"); |
|
|
|
|
} |
|
|
|
|
// return "text-align:center"; |
|
|
|
|
}, |
|
|
|
|
//格式转换,不需要改动 |
|
|
|
|
formatJson(filterVal, jsonData) { |
|
|
|
|
return jsonData.map((v) => |
|
|
|
|
filterVal.map((j) => { |
|
|
|
|
if (j === "perWater") { |
|
|
|
|
return (v[j] * 1000).toFixed(1); |
|
|
|
|
} else { |
|
|
|
|
return v[j]; |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
); |
|
|
|
|
}, |
|
|
|
|
// 折线图自适应+ 根据按钮切换图例仅限一条且不可点击+ 折线图数据 |
|
|
|
|
screenAdapter() { |
|
|
|
|
|
