lijianfu
/
eemcs_ui
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

1.生活热水-首页修改热泵总数 

2.能源分析-能耗报表去掉楼栋人数、人均用量值
3.用能查询水电表读数添加计算量
4.对接数据分析页面数据
meizhou
selia-zx 5 days ago
parent
7e78020d6e
commit
46fe8ea70c
10 changed files with 733 additions and 678 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 18
      src/api/hotWater/dataAnalysis.js
  2. 495
      src/views/hotWater/dataAnalysis/components/analyzeMonth.vue
  3. 451
      src/views/hotWater/dataAnalysis/components/analyzeYear.vue
  4. 241
      src/views/hotWater/dataAnalysis/index.vue
  5. 10
      src/views/hotWater/energyAnalysis/components/energyReport.vue
  6. 4
      src/views/hotWater/energyAnalysis/components/temReport.vue
  7. 4
      src/views/hotWater/energyAnalysis/components/waterReport.vue
  8. 90
      src/views/hotWater/energyQuery/components/electReading.vue
  9. 94
      src/views/hotWater/energyQuery/components/waterReading.vue
  10. 4
      src/views/hotWater/overview/index.vue

18
src/api/hotWater/dataAnalysis.js
Unescape View File

@ -0,0 +1,18 @@
import request from "@/utils/request";
// 数据分析-月
export function queryMonthDatas(query) {
return request({
url: "/hot_energy/analysis/queryMonth",
method: "get",
params: query,
});
}
// 数据分析-年
export function queryYearDatas(query) {
return request({
url: "/hot_energy/analysis/queryYear",
method: "get",
params: query,
});
}

495
src/views/hotWater/dataAnalysis/components/analyzeMonth.vue
Unescape View File

@ -1,6 +1,6 @@
<!-- 报表查询-用能查询-年数据 -->
<template>
<div>
<div class="analy-table">
<div class="findwatercharts" ref="findwater_ref"></div>
<!-- 表格 -->
<el-table
@ -88,6 +88,7 @@
<script>
import { getDay, getMonth, getYear } from "@/utils/datetime";
import { queryMonthDatas } from "@/api/hotWater/dataAnalysis";
import * as echarts from "echarts";
export default {
props: {
@ -97,9 +98,12 @@ export default {
chTime: {
type: String,
},
jtData: {
chBuild: {
type: String,
},
currentIndex: {
type: Number,
},
},
data() {
return {
@ -124,30 +128,21 @@ export default {
};
},
watch: {
chType: {
currentIndex: {
immediate: true,
deep: true,
handler(newVal, val) {
// console.log("子组件改变的值", newVal);
this.$nextTick(function () {
console.log("子组件接受的type类型", this.chType);
console.log("子组件这时候有building吗", this.chBuild);
this.getMothData();
});
},
},
// 对vuex里的点击的楼栋id进行监听
jtData: {
handler(newVal, oldVal) {
// console.log("监听vuex的id", newVal, oldVal);
this.$nextTick(function () {
this.getMothData();
});
},
deep: true,
immediate: true,
},
},
mounted() {
this.getMothData();
// this.getMothData();
this.initChart1();
window.addEventListener("resize", this.screenAdapter);
this.screenAdapter();
@ -160,7 +155,7 @@ export default {
tableRowStyle({ row, column, rowIndex, columnIndex }) {
// 如果第1列，修改颜色
if (columnIndex === 0) {
return "background-color: #31354e !important;";
return "background-color:rgb(11 ,100, 201) !important;";
}
},
// 查询表格数据
@ -172,180 +167,228 @@ export default {
if (this.chTime) {
this.endTime = this.chTime;
} else {
this.endTime = getMonth(0)
this.endTime = getMonth(0);
}
let params = {
curDate: this.endTime,
buildingId: this.endId,
buildingId: this.chBuild,
type: this.chType,
};
console.log("月参数", params);
// this.$api.statementfind.energyMonth(params).then((res) => {
// // console.log("月表格返回", res);
// if (res.code == 200) {
// var line1 = [];
// var line2 = [];
// var line3 = [];
// var line4 = [];
// this.tableData = res.data;
// // Object.values 把数组对象 转化为 数组
// line1 = Object.values(this.tableData[0]).slice(3, 35);
// line2 = Object.values(this.tableData[1]).slice(3, 35);
// line3 = Object.values(this.tableData[2]).slice(3, 35);
// line4 = Object.values(this.tableData[3]).slice(3, 35);
// // 四条折线图 filter里过滤掉空值
// this.data1 = line1.filter(function (s) {
// return s && s.trim();
// });
// this.data2 = line2.filter(function (s) {
// return s && s.trim();
// });
// // 含百分比的数组数据还需要处理
// var line5 = line3.filter(function (s) {
// return s && s.trim();
// });
// this.data3 = [];
// this.data4 = [];
// // 遍历去除掉%，拼接后返回新数组
// line5.forEach((item) => {
// this.data3.push(item.split("%").join(""));
// });
// var line6 = line4.filter(function (s) {
// return s && s.trim();
// });
// line6.forEach((item) => {
// this.data4.push(item.split("%").join(""));
// });
// // 折线图x轴 数据
// // 先拿到数组的一个对象 tableData[0] [1] [2] [3]都行,并且先过滤掉对象的空值
// //定义一个新数组
// let newObj = {};
// for (let key in this.tableData[0]) {
// if (this.tableData[0][key]) {
// newObj[key] = this.tableData[0][key];
// }
// }
// // console.log("不含空的数组对象", newObj);
// // 在返回的新的对象中，取出对象的所有key值返回新数组
// // Object.setPrototypeOf(this.newObj);
// let data7 = Object.keys(newObj);
// // console.log("不含空的x轴数据", data7);
// // 先返回月的数组
// let allArr = [
// "day01",
// "day02",
// "day03",
// "day04",
// "day05",
// "day06",
// "day07",
// "day08",
// "day09",
// "day10",
// "day11",
// "day12",
// "day13",
// "day14",
// "day15",
// "day16",
// "day17",
// "day18",
// "day19",
// "day20",
// "day21",
// "day22",
// "day23",
// "day24",
// "day25",
// "day26",
// "day27",
// "day28",
// "day29",
// "day30",
// "day31",
// ];
// // 非空数组和所有月的数组进行筛选出重复的元素
// function compare(data7, allArr) {
// return data7.filter((v) => {
// return allArr.includes(v);
// });
// }
// // console.log("x轴未分割日份", compare(data7, allArr));
// // 分割data7，返回月份 xx月
// this.data8 = [];
// compare(data7, allArr).forEach((item) => {
// if (item) {
// this.data8.push(item.split("day").join("") + "日");
// }
// });
// // console.log("x轴数据", this.data8);
// // 图例
// this.data6 = [];
// this.data5 = this.tableData.forEach((item) => {
// return this.data6.push(item.itemType);
// });
// // console.log("data1数据", this.data1);
// // console.log("data2数据", this.data2);
// // console.log("data3数据", this.data3);
// // console.log("data4数据", this.data4);
// // console.log("图例文字", this.data6);
// // 月数据
// var Min1 = Math.floor(Math.min(...this.data1, ...this.data2)),
// Min2 = Math.floor(Math.min(...this.data3, ...this.data4) - 4),
// Max1 = Math.ceil(Math.max(...this.data1, ...this.data2) + 4),
// Max2 = Math.ceil(Math.max(...this.data3, ...this.data4) + 4);
// // console.log("Min1", Min1);
// // console.log("Min2", Min2);
// // console.log("Max1", Max1);
// // console.log("Max2", Max2);
// this.chartInstance1 = echarts.init(this.$refs.findwater_ref);
// const adapterOption = {
// legend: {
// data: this.data6,
// },
// xAxis: {
// data: this.data8,
// },
// yAxis: [
// //两个y轴
// {
// min: Min1,
// max: Max1,
// splitNumber: 10,
// interval: (Max1 - Min1) / 10,
// },
// {
// min: Min2,
// max: Max2,
// splitNumber: 10,
// interval: (Max2 - Min2) / 10,
// },
// ],
// series: [
// {
// name: this.data6[0],
// data: this.data1,
// },
// {
// name: this.data6[1],
// data: this.data2,
// },
// {
// name: this.data6[2],
// data: this.data3,
// },
// {
// name: this.data6[3],
// data: this.data4,
// },
// ],
// };
// //记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关
// this.chartInstance1.setOption(adapterOption);
// //手动的调用图标对象的resize才能产生效果
// this.chartInstance1.resize();
// }
// });
queryMonthDatas(params).then((res) => {
// console.log("月表格返回", res);
if (res.code == 200 && res.rows.length > 0) {
var line1 = [];
var line2 = [];
var line3 = [];
var line4 = [];
this.tableData = res.rows;
// Object.values 把数组对象 转化为 数组
line1 = Object.values(this.tableData[0]).slice(3, 35);
line2 = Object.values(this.tableData[1]).slice(3, 35);
line3 = Object.values(this.tableData[2]).slice(3, 35);
line4 = Object.values(this.tableData[3]).slice(3, 35);
// 四条折线图 filter里过滤掉空值
this.data1 = line1.filter(function (s) {
return s && s.trim();
});
this.data2 = line2.filter(function (s) {
return s && s.trim();
});
// 含百分比的数组数据还需要处理
var line5 = line3.filter(function (s) {
return s && s.trim();
});
this.data3 = [];
this.data4 = [];
// 遍历去除掉%，拼接后返回新数组
line5.forEach((item) => {
this.data3.push(item.split("%").join(""));
});
var line6 = line4.filter(function (s) {
return s && s.trim();
});
line6.forEach((item) => {
this.data4.push(item.split("%").join(""));
});
// 折线图x轴 数据
// 先拿到数组的一个对象 tableData[0] [1] [2] [3]都行,并且先过滤掉对象的空值
//定义一个新数组
let newObj = {};
for (let key in this.tableData[0]) {
if (this.tableData[0][key]) {
newObj[key] = this.tableData[0][key];
}
}
// console.log("不含空的数组对象", newObj);
// 在返回的新的对象中，取出对象的所有key值返回新数组
// Object.setPrototypeOf(this.newObj);
let data7 = Object.keys(newObj);
// console.log("不含空的x轴数据", data7);
// 先返回月的数组
let allArr = [
"day01",
"day02",
"day03",
"day04",
"day05",
"day06",
"day07",
"day08",
"day09",
"day10",
"day11",
"day12",
"day13",
"day14",
"day15",
"day16",
"day17",
"day18",
"day19",
"day20",
"day21",
"day22",
"day23",
"day24",
"day25",
"day26",
"day27",
"day28",
"day29",
"day30",
"day31",
];
// 非空数组和所有月的数组进行筛选出重复的元素
function compare(data7, allArr) {
return data7.filter((v) => {
return allArr.includes(v);
});
}
// console.log("x轴未分割日份", compare(data7, allArr));
// 分割data7，返回月份 xx月
this.data8 = [];
compare(data7, allArr).forEach((item) => {
if (item) {
this.data8.push(item.split("day").join("") + "日");
}
});
// console.log("x轴数据", this.data8);
// 图例
this.data6 = [];
this.data5 = this.tableData.forEach((item) => {
return this.data6.push(item.itemType);
});
// console.log("data1数据", this.data1);
// console.log("data2数据", this.data2);
// console.log("data3数据", this.data3);
// console.log("data4数据", this.data4);
// console.log("图例文字", this.data6);
// 月数据
var Min1 = Math.floor(Math.min(...this.data1, ...this.data2)),
Min2 = Math.floor(Math.min(...this.data3, ...this.data4) - 4),
Max1 = Math.ceil(Math.max(...this.data1, ...this.data2) + 4),
Max2 = Math.ceil(Math.max(...this.data3, ...this.data4) + 4);
// console.log("Min1", Min1);
// console.log("Min2", Min2);
// console.log("Max1", Max1);
// console.log("Max2", Max2);
this.chartInstance1 = echarts.init(this.$refs.findwater_ref);
const adapterOption = {
legend: {
data: this.data6,
},
xAxis: {
data: this.data8,
},
yAxis: [
//两个y轴
{
min: Min1,
max: Max1,
splitNumber: 10,
interval: (Max1 - Min1) / 10,
},
{
min: Min2,
max: Max2,
splitNumber: 10,
interval: (Max2 - Min2) / 10,
},
],
series: [
{
name: this.data6[0],
data: this.data1,
},
{
name: this.data6[1],
data: this.data2,
},
{
name: this.data6[2],
data: this.data3,
},
{
name: this.data6[3],
data: this.data4,
},
],
};
//记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关
this.chartInstance1.setOption(adapterOption);
//手动的调用图标对象的resize才能产生效果
this.chartInstance1.resize();
} else {
this.tableData = [];
this.chartInstance1 = echarts.init(this.$refs.findwater_ref);
const adapterOption = {
legend: {
data: [],
},
xAxis: {
data: [],
},
yAxis: [
//两个y轴
{
min: 0,
max: 0,
splitNumber: 10,
interval: 0,
},
{
min: 0,
max: 0,
splitNumber: 10,
interval: 0,
},
],
series: [
{
name: "",
data: [],
},
{
name: "",
data: [],
},
{
name: "",
data: [],
},
{
name: "",
data: [],
},
],
};
//记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关
this.chartInstance1.setOption(adapterOption);
//手动的调用图标对象的resize才能产生效果
this.chartInstance1.resize();
}
});
},
// 导出数据
outTable() {
@ -426,27 +469,27 @@ export default {
if (this.chTime) {
this.endTime = this.chTime;
} else {
this.endTime = getMonth(0)
this.endTime = getMonth(0);
}
let params = {
curDate: this.endTime,
buildingId: this.endId,
buildingId: this.chBuild,
type: this.chType,
};
console.log("月参数", params);
// this.$api.statementfind.energyMonth(params).then((res) => {
// if (res.code == 200) {
// // console.log(res);
// const data = this.formatJson(filterVal, res.data);
// const autoWidth = true;
// excel.export_json_to_excel({
// header: tHeader, //表头
// data, //数据
// filename: "月数据报表", //名称
// autoWidth: true, //宽度自适应
// });
// }
// });
queryMonthDatas(params).then((res) => {
if (res.code == 200 && res.rows.length > 0) {
// console.log(res);
const data = this.formatJson(filterVal, res.rows);
const autoWidth = true;
excel.export_json_to_excel({
header: tHeader, //表头
data, //数据
filename: "月数据报表", //名称
autoWidth: true, //宽度自适应
});
}
});
});
},
//格式转换,不需要改动
@ -507,22 +550,26 @@ export default {
boundaryGap: true,
// 修饰刻度标签的颜色即x坐标数据
axisLabel: {
// interval: 0,
// interval: 0, //强制显示所有x轴数据
// rotate: 30, //x轴坐标字体倾斜30度
color: "rgba(255,255,255,.7)",
color: "rgba(255, 255, 255, 1)",
fontSize: 14, // 设置字体大小，可根据需要调整
},
axisTick: {
show: false, // 不显示坐标轴刻度线
},
// 去除x坐标轴的颜色
// x坐标轴的颜色
axisLine: {
show: true,
lineStyle: {
// X 轴颜色配置
color: "#707070",
color: "#365576",
},
},
//splitLine: { show: true } //x轴分割线
splitLine: {
lineStyle: {
color: "#e2e6f0",
},
}, //x轴分割线
},
yAxis: [
//两个y轴
@ -530,50 +577,53 @@ export default {
type: "value",
// 修饰刻度标签的颜色即y坐标数据
axisLabel: {
color: "rgba(255,255,255,.7)",
color: "rgba(255, 255, 255, 1)",
},
// 显示y坐标轴的颜色
// 显示y坐标轴
axisLine: {
show: true,
lineStyle: {
// X 轴颜色配置
color: "#707070",
color: "#365576", // 设置 y 轴线的颜色
},
fontSize: 14, // 设置字体大小，可根据需要调整
},
//y轴分割线段数
splitNumber: 10,
// splitNumber: 10,
// 修改y轴分割线的颜色
splitLine: {
lineStyle: {
// color: "#252843",
color: "#707070",
color: "#1a3d62", // 设置分割线的颜色
type: "dashed", // 设置分割线为虚线
},
},
//y轴分割线段数
splitNumber: 10,
},
{
type: "value",
// 修饰刻度标签的颜色即y坐标数据
axisLabel: {
color: "rgba(255,255,255,.7)",
formatter: "{value} %",
color: "rgba(255, 255, 255, 1)",
},
// 显示y坐标轴的颜色
// 显示y坐标轴
axisLine: {
show: true,
lineStyle: {
// X 轴颜色配置
color: "#707070",
color: "#365576", // 设置 y 轴线的颜色
},
fontSize: 14, // 设置字体大小，可根据需要调整
},
//y轴分割线段数
splitNumber: 5,
// splitNumber: 10,
// 修改y轴分割线的颜色
splitLine: {
lineStyle: {
// color: "#252843",
color: "#707070",
color: "#1a3d62", // 设置分割线的颜色
type: "dashed", // 设置分割线为虚线
},
},
//y轴分割线段数
splitNumber: 10,
},
],
@ -688,4 +738,9 @@ export default {
height: 4.5rem;
/* background-color: pink; */
}
.analy-table >>> .el-table th.el-table__cell.is-leaf,
.analy-table >>> .el-table td.el-table__cell {
border-bottom: 1px solid #093769 !important;
border-right: 1px solid #093769 !important;
}
</style>

451
src/views/hotWater/dataAnalysis/components/analyzeYear.vue
Unescape View File

@ -1,6 +1,6 @@
<!-- 报表查询-用能查询-年数据 -->
<template>
<div>
<div class="analy-table">
<div class="findwatercharts" ref="findwater_ref"></div>
<!-- 表格 -->
<el-table
@ -56,6 +56,7 @@
<script>
import { getYear } from "@/utils/datetime";
import { queryYearDatas } from "@/api/hotWater/dataAnalysis";
import * as echarts from "echarts";
export default {
props: {
@ -65,9 +66,12 @@ export default {
chTime: {
type: String,
},
jtData: {
chBuild: {
type: String,
},
currentIndex: {
type: Number,
},
},
data() {
return {
@ -92,7 +96,7 @@ export default {
};
},
watch: {
chType: {
currentIndex: {
immediate: true,
deep: true,
handler(newVal, val) {
@ -102,20 +106,9 @@ export default {
});
},
},
// 对vuex里的点击的楼栋id进行监听
jtData: {
handler(newVal, oldVal) {
// console.log("监听vuex的id", newVal, oldVal);
this.$nextTick(function () {
this.getYearData();
});
},
deep: true,
immediate: true,
},
},
mounted() {
this.getYearData();
// this.getYearData();
this.initChart1();
window.addEventListener("resize", this.screenAdapter);
this.screenAdapter();
@ -128,7 +121,7 @@ export default {
tableRowStyle({ row, column, rowIndex, columnIndex }) {
// 如果第1列，修改颜色
if (columnIndex === 0) {
return "background-color: #31354e !important;";
return "background-color:rgb(11 ,100, 201) !important;";
}
},
// 查询表格数据
@ -144,157 +137,205 @@ export default {
}
let params = {
curDate: this.endTime,
buildingId: this.endId,
buildingId: this.chBuild,
type: this.chType,
};
console.log("年表格参数", params);
// this.$api.statementfind.energyYear(params).then((res) => {
// // console.log("年表格返回", res);
// if (res.code == 200) {
// var line1 = [];
// var line2 = [];
// var line3 = [];
// var line4 = [];
// this.tableData = res.data;
// // Object.values 把数组对象 转化为 数组
// line1 = Object.values(this.tableData[0]).slice(3, 15);
// line2 = Object.values(this.tableData[1]).slice(3, 15);
// line3 = Object.values(this.tableData[2]).slice(3, 15);
// line4 = Object.values(this.tableData[3]).slice(3, 15);
// // 四条折线图 filter里过滤掉空值
// this.data1 = line1.filter(function (s) {
// return s && s.trim();
// });
// this.data2 = line2.filter(function (s) {
// return s && s.trim();
// });
// // 含百分比的数组数据还需要处理
// var line5 = line3.filter(function (s) {
// return s && s.trim();
// });
// this.data3 = [];
// this.data4 = [];
// // 遍历去除掉%，拼接后返回新数组
// line5.forEach((item) => {
// this.data3.push(item.split("%").join(""));
// });
// var line6 = line4.filter(function (s) {
// return s && s.trim();
// });
// line6.forEach((item) => {
// this.data4.push(item.split("%").join(""));
// });
// // 折线图x轴 数据
// // 先拿到数组的一个对象 tableData[0] [1] [2] [3]都行,并且先过滤掉对象的空值
// //定义一个新数组
// let newObj = {};
// for (let key in this.tableData[0]) {
// if (this.tableData[0][key]) {
// newObj[key] = this.tableData[0][key];
// }
// }
// // console.log("不含空的数组对象", newObj);
// // 在返回的新的对象中，取出对象的所有key值返回新数组
// // Object.setPrototypeOf(this.newObj);
// let data7 = Object.keys(newObj);
// // console.log("不含空的x轴数据", data7);
// // 先返回月的数组
// let allArr = [
// "month01",
// "month02",
// "month03",
// "month04",
// "month05",
// "month06",
// "month07",
// "month08",
// "month09",
// "month10",
// "month11",
// "month12",
// ];
// // 非空数组和所有月的数组进行筛选出重复的元素
// function compare(data7, allArr) {
// return data7.filter((v) => {
// return allArr.includes(v);
// });
// }
// // console.log("x轴未分割月份", compare(data7, allArr));
// // 分割data7，返回月份 xx月
// this.data8 = [];
// compare(data7, allArr).forEach((item) => {
// if (item) {
// this.data8.push(item.split("month").join("") + "月");
// }
// });
// // console.log("x轴数据", this.data8);
// // 图例
// this.data6 = [];
// this.data5 = this.tableData.forEach((item) => {
// return this.data6.push(item.itemType);
// });
// // console.log("data1数据", this.data1);
// // console.log("data2数据", this.data2);
// // console.log("data3数据", this.data3);
// // console.log("data4数据", this.data4);
// // console.log("图例文字", this.data6);
// // 月数据
// var Min1 = Math.floor(Math.min(...this.data1, ...this.data2)),
// Min2 = Math.floor(Math.min(...this.data3, ...this.data4) - 4),
// Max1 = Math.ceil(Math.max(...this.data1, ...this.data2) + 4),
// Max2 = Math.ceil(Math.max(...this.data3, ...this.data4) + 4);
// // console.log("Min1", Min1);
// // console.log("Min2", Min2);
// // console.log("Max1", Max1);
// // console.log("Max2", Max2);
// this.chartInstance1 = echarts.init(this.$refs.findwater_ref);
// const adapterOption = {
// legend: {
// data: this.data6,
// },
// xAxis: {
// data: this.data8,
// },
// yAxis: [
// //两个y轴
// {
// min: Min1,
// max: Max1,
// splitNumber: 10,
// interval: (Max1 - Min1) / 10,
// },
// {
// min: Min2,
// max: Max2,
// splitNumber: 10,
// interval: (Max2 - Min2) / 10,
// },
// ],
// series: [
// {
// name: this.data6[0],
// data: this.data1,
// },
// {
// name: this.data6[1],
// data: this.data2,
// },
// {
// name: this.data6[2],
// data: this.data3,
// },
// {
// name: this.data6[3],
// data: this.data4,
// },
// ],
// };
// //记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关
// this.chartInstance1.setOption(adapterOption);
// //手动的调用图标对象的resize才能产生效果
// this.chartInstance1.resize();
// }
// });
queryYearDatas(params).then((res) => {
// console.log("年表格返回", res);
if (res.code == 200 && res.rows.length > 0) {
var line1 = [];
var line2 = [];
var line3 = [];
var line4 = [];
this.tableData = res.rows;
// Object.values 把数组对象 转化为 数组
line1 = Object.values(this.tableData[0]).slice(3, 15);
line2 = Object.values(this.tableData[1]).slice(3, 15);
line3 = Object.values(this.tableData[2]).slice(3, 15);
line4 = Object.values(this.tableData[3]).slice(3, 15);
// 四条折线图 filter里过滤掉空值
this.data1 = line1.filter(function (s) {
return s && s.trim();
});
this.data2 = line2.filter(function (s) {
return s && s.trim();
});
// 含百分比的数组数据还需要处理
var line5 = line3.filter(function (s) {
return s && s.trim();
});
this.data3 = [];
this.data4 = [];
// 遍历去除掉%，拼接后返回新数组
line5.forEach((item) => {
this.data3.push(item.split("%").join(""));
});
var line6 = line4.filter(function (s) {
return s && s.trim();
});
line6.forEach((item) => {
this.data4.push(item.split("%").join(""));
});
// 折线图x轴 数据
// 先拿到数组的一个对象 tableData[0] [1] [2] [3]都行,并且先过滤掉对象的空值
//定义一个新数组
let newObj = {};
for (let key in this.tableData[0]) {
if (this.tableData[0][key]) {
newObj[key] = this.tableData[0][key];
}
}
// console.log("不含空的数组对象", newObj);
// 在返回的新的对象中，取出对象的所有key值返回新数组
// Object.setPrototypeOf(this.newObj);
let data7 = Object.keys(newObj);
// console.log("不含空的x轴数据", data7);
// 先返回月的数组
let allArr = [
"month01",
"month02",
"month03",
"month04",
"month05",
"month06",
"month07",
"month08",
"month09",
"month10",
"month11",
"month12",
];
// 非空数组和所有月的数组进行筛选出重复的元素
function compare(data7, allArr) {
return data7.filter((v) => {
return allArr.includes(v);
});
}
// console.log("x轴未分割月份", compare(data7, allArr));
// 分割data7，返回月份 xx月
this.data8 = [];
compare(data7, allArr).forEach((item) => {
if (item) {
this.data8.push(item.split("month").join("") + "月");
}
});
// console.log("x轴数据", this.data8);
// 图例
this.data6 = [];
this.data5 = this.tableData.forEach((item) => {
return this.data6.push(item.itemType);
});
// console.log("data1数据", this.data1);
// console.log("data2数据", this.data2);
// console.log("data3数据", this.data3);
// console.log("data4数据", this.data4);
// console.log("图例文字", this.data6);
// 月数据
var Min1 = Math.floor(Math.min(...this.data1, ...this.data2)),
Min2 = Math.floor(Math.min(...this.data3, ...this.data4) - 4),
Max1 = Math.ceil(Math.max(...this.data1, ...this.data2) + 4),
Max2 = Math.ceil(Math.max(...this.data3, ...this.data4) + 4);
// console.log("Min1", Min1);
// console.log("Min2", Min2);
// console.log("Max1", Max1);
// console.log("Max2", Max2);
this.chartInstance1 = echarts.init(this.$refs.findwater_ref);
const adapterOption = {
legend: {
data: this.data6,
},
xAxis: {
data: this.data8,
},
yAxis: [
//两个y轴
{
min: Min1,
max: Max1,
splitNumber: 10,
interval: (Max1 - Min1) / 10,
},
{
min: Min2,
max: Max2,
splitNumber: 10,
interval: (Max2 - Min2) / 10,
},
],
series: [
{
name: this.data6[0],
data: this.data1,
},
{
name: this.data6[1],
data: this.data2,
},
{
name: this.data6[2],
data: this.data3,
},
{
name: this.data6[3],
data: this.data4,
},
],
};
//记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关
this.chartInstance1.setOption(adapterOption);
//手动的调用图标对象的resize才能产生效果
this.chartInstance1.resize();
} else {
this.tableData = [];
this.chartInstance1 = echarts.init(this.$refs.findwater_ref);
const adapterOption = {
legend: {
data: [],
},
xAxis: {
data: [],
},
yAxis: [
//两个y轴
{
min: 0,
max: 0,
splitNumber: 10,
interval: 0,
},
{
min: 0,
max: 0,
splitNumber: 10,
interval: 0,
},
],
series: [
{
name: "",
data: [],
},
{
name: "",
data: [],
},
{
name: "",
data: [],
},
{
name: "",
data: [],
},
],
};
//记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关
this.chartInstance1.setOption(adapterOption);
//手动的调用图标对象的resize才能产生效果
this.chartInstance1.resize();
}
});
},
// 导出数据
outTable() {
@ -341,23 +382,23 @@ export default {
}
let params = {
curDate: this.endTime,
buildingId: this.endId,
buildingId: this.chBuild,
type: this.chType,
};
console.log("年表格参数", params);
// this.$api.statementfind.energyYear(params).then((res) => {
// if (res.code == 200) {
// // console.log(res);
// const data = this.formatJson(filterVal, res.data);
// const autoWidth = true;
// excel.export_json_to_excel({
// header: tHeader, //表头
// data, //数据
// filename: "年数据报表", //名称
// autoWidth: true, //宽度自适应
// });
// }
// });
queryYearDatas(params).then((res) => {
if (res.code == 200 && res.rows.length > 0) {
// console.log(res);
const data = this.formatJson(filterVal, res.rows);
const autoWidth = true;
excel.export_json_to_excel({
header: tHeader, //表头
data, //数据
filename: "年数据报表", //名称
autoWidth: true, //宽度自适应
});
}
});
});
},
//格式转换,不需要改动
@ -418,22 +459,26 @@ export default {
boundaryGap: true,
// 修饰刻度标签的颜色即x坐标数据
axisLabel: {
// interval: 0,
// interval: 0, //强制显示所有x轴数据
// rotate: 30, //x轴坐标字体倾斜30度
color: "rgba(255,255,255,.7)",
color: "rgba(255, 255, 255, 1)",
fontSize: 14, // 设置字体大小，可根据需要调整
},
axisTick: {
show: false, // 不显示坐标轴刻度线
},
// 去除x坐标轴的颜色
// x坐标轴的颜色
axisLine: {
show: true,
lineStyle: {
// X 轴颜色配置
color: "#707070",
color: "#365576",
},
},
//splitLine: { show: true } //x轴分割线
splitLine: {
lineStyle: {
color: "#e2e6f0",
},
}, //x轴分割线
},
yAxis: [
//两个y轴
@ -441,50 +486,53 @@ export default {
type: "value",
// 修饰刻度标签的颜色即y坐标数据
axisLabel: {
color: "rgba(255,255,255,.7)",
color: "rgba(255, 255, 255, 1)",
},
// 显示y坐标轴的颜色
// 显示y坐标轴
axisLine: {
show: true,
lineStyle: {
// X 轴颜色配置
color: "#707070",
color: "#365576", // 设置 y 轴线的颜色
},
fontSize: 14, // 设置字体大小，可根据需要调整
},
//y轴分割线段数
splitNumber: 10,
// splitNumber: 10,
// 修改y轴分割线的颜色
splitLine: {
lineStyle: {
// color: "#252843",
color: "#707070",
color: "#1a3d62", // 设置分割线的颜色
type: "dashed", // 设置分割线为虚线
},
},
//y轴分割线段数
splitNumber: 10,
},
{
type: "value",
// 修饰刻度标签的颜色即y坐标数据
axisLabel: {
color: "rgba(255,255,255,.7)",
formatter: "{value} %",
color: "rgba(255, 255, 255, 1)",
},
// 显示y坐标轴的颜色
// 显示y坐标轴
axisLine: {
show: true,
lineStyle: {
// X 轴颜色配置
color: "#707070",
color: "#365576", // 设置 y 轴线的颜色
},
fontSize: 14, // 设置字体大小，可根据需要调整
},
//y轴分割线段数
splitNumber: 5,
// splitNumber: 10,
// 修改y轴分割线的颜色
splitLine: {
lineStyle: {
// color: "#252843",
color: "#707070",
color: "#1a3d62", // 设置分割线的颜色
type: "dashed", // 设置分割线为虚线
},
},
//y轴分割线段数
splitNumber: 10,
},
],
@ -635,4 +683,9 @@ export default {
height: 4.5rem;
/* background-color: pink; */
}
.analy-table >>> .el-table th.el-table__cell.is-leaf,
.analy-table >>> .el-table td.el-table__cell {
border-bottom: 1px solid #093769 !important;
border-right: 1px solid #093769 !important;
}
</style>

241
src/views/hotWater/dataAnalysis/index.vue
Unescape View File

@ -1,33 +1,5 @@
<template>
<div class="app-container">
<div class="left-tree">
<!-- 为 el-tree 设置一个固定的高度和滚动条 -->
<div style="height: 7rem; overflow-y: auto">
<el-tree
ref="tree"
:data="treeData"
node-key="id"
:default-expand-all="false"
:default-expanded-keys="expandedKeys"
:auto-expand-parent="true"
icon-class="none"
@node-expand="handleNodeExpand"
@node-collapse="handleNodeCollapse"
:highlight-current="true"
@node-click="handleNodeClick"
>
<template #default="{ node }">
<span class="custom-tree-node">
<!-- 根据节点状态动态设置图标类名 -->
<div class="tree-left">
<i :class="getIconClass(node)" class="custom-tree-icon"></i>
<span class="tree-label">{{ node.label }}</span>
</div>
</span>
</template>
</el-tree>
</div>
</div>
<div class="right-monitor">
<div class="buildingDiv">
<div class="buildingDiv-left">
@ -42,6 +14,20 @@
<!-- 条件 -->
<div class="condition">
<div class="condition-left">
<el-select
style="margin-right: 0.1rem"
v-model="building"
placeholder="请选择楼栋"
clearable
@change="handleBuildingChange"
>
<el-option
v-for="(item, index) in builds"
:key="index"
:label="item.building_name"
:value="item.id"
/>
</el-select>
<el-select
style="margin-right: 0.1rem"
v-model="analysisType"
@ -94,24 +80,25 @@
<analyze-month
v-if="currentIndex === 0"
ref="monthRef"
:currentIndex="currentIndex"
:chType="analysisType"
:chTime="monthDate"
:chBuild="building"
></analyze-month>
<analyze-year
v-if="currentIndex === 1"
:currentIndex="currentIndex"
ref="yearRef"
:chType="analysisType"
:chTime="yearDate"
:chBuild="building"
></analyze-year>
</div>
</div>
</template>
<script>
import { spaceTree } from "@/api/region";
import { format } from "@/utils/datetime";
import { temList, temHistory } from "@/api/temSys/temMonitor";
import * as echarts from "echarts";
import { hotBuildList } from "@/api/hotWater/energyAnalysis";
import analyzeMonth from "./components/analyzeMonth.vue";
import analyzeYear from "./components/analyzeYear.vue";
export default {
@ -119,7 +106,9 @@ export default {
data() {
return {
loading: false,
treeData: [],
currentName: "",
building: "", //选中的楼栋
builds: [], //楼栋列表
analysisType: 1,
analysisTypes: [
{
@ -134,177 +123,61 @@ export default {
label: "耗能",
value: 3,
},
{
label: "维保量",
value: 4,
},
{
label: "使用时间",
value: 5,
},
],
monthDate: "",
yearDate: "",
timeData2: [{ title: "月" }, { title: "年" }],
currentIndex: 0, //月
defaultProps: {
children: "children",
label: "label",
},
deviceList: [],
expandedKeys: [],
currentId: "", //当前选中高亮的id
currentName: "", //当前选中的名称
currentLevel: "", //当前节点的层级
currentParentId: "", //当前节点的上级的id
tableData: [], //系统状态表格数据
chartInstance: null,
option: {},
chartData1: [],
chartData2: [],
bottomData: [],
currentIndex: null, //月
};
},
mounted() {
this.getSysBuild();
this.getBuildList();
},
methods: {
handleEnter(index) {
this.currentIndex = index;
// this.renderingBroken();
console.log("切换日月");
},
handleBuildingChange(selectedId) {
// 找到选中项的对象
const selectedItem = this.builds.find((item) => item.id === selectedId);
if (selectedItem) {
this.currentName = selectedItem.building_name;
console.log("选中的楼栋 ID:", selectedId);
console.log("选中的楼栋名称:", this.currentName);
// 这里可以添加你需要执行的其他操作
}
},
getSysBuild() {
spaceTree().then((res) => {
/** 查询楼栋 */
getBuildList() {
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);
}
console.log("筛选后的新结果", newRes);
this.treeData = newRes.data;
this.$nextTick(() => {
// 默认展开节点
this.getExpandedKeys(this.treeData, 1);
if (this.treeData.length > 0) {
// 找到最后一层的第一个子节点
const lastLevelFirstChild = this.findLastLevelFirstChild(
this.treeData[0]
);
// this.$refs.tree.setCurrentKey(
// this.treeData[0].children[0].children[0].children[0].id
// );
// 设置当前选中的节点,默认高亮
this.$refs.tree.setCurrentKey(lastLevelFirstChild.id);
// 更新当前节点的信息
this.currentId = lastLevelFirstChild.id;
this.currentLevel = lastLevelFirstChild.level;
this.currentName = lastLevelFirstChild.label;
console.log("当前选中节点ID", this.currentId);
console.log("当前选中节点层级", this.currentLevel);
console.log("当前选中节点名称", this.currentName);
// this.getTemList();
// 过滤掉 building_name 是 "所有" 的第一个对象
const filteredRows = res.rows.filter((row, index) => {
if (index === 0 && row.building_name === "所有") {
return false;
}
return true;
});
this.builds = filteredRows;
// console.log("筛选后的新结果", this.builds);
if (this.builds.length > 0) {
this.building = this.builds[0].id;
this.currentName = this.builds[0].building_name;
console.log("选中的第一个楼栋id-传给子组件", this.building);
this.handleEnter(0); //默认月
}
}
});
},
// 递归函数，用于去除指定层级往后的 children 数据
removeChildrenAfterLevel(obj, currentLevel, targetLevel) {
if (currentLevel >= targetLevel) {
// 当达到指定层级时，将 children 属性置为空数组
obj.children = [];
return;
}
if (obj.children && obj.children.length > 0) {
// 若存在 children 数组，则递归处理每个子项
for (let i = 0; i < obj.children.length; i++) {
this.removeChildrenAfterLevel(
obj.children[i],
currentLevel + 1,
targetLevel
);
}
}
},
// 递归函数，找到最后一层的第一个子节点
findLastLevelFirstChild(node, level = 1) {
if (!node.children || node.children.length === 0) {
return {
id: node.id,
level,
label: node.label,
};
}
return this.findLastLevelFirstChild(node.children[0], level + 1);
},
// 默认只展示一二级菜单
getExpandedKeys(nodes, level) {
nodes.forEach((node) => {
if (level <= this.currentId + 4) {
this.expandedKeys.push(node.id);
}
if (node.children) {
this.getExpandedKeys(node.children, level + 1);
}
});
},
// 更换图标
getIconClass(node) {
// console.log("当前图标的节点内容", node);
if (node.level === 4) {
// 4级菜单时的图标
if (node.expanded) {
return "el-icon-document"; // 4级菜单展开时的图标类名
}
return "el-icon-document"; // 4级菜单收缩时的图标类名
}
if (node.expanded) {
return "el-icon-folder-opened"; // 4三级菜单展开时的图标类名
}
return "el-icon-folder-add"; // 4三级菜单收缩时的图标类名
},
handleNodeExpand(node) {
// 节点展开时触发
},
handleNodeCollapse(node) {
// 节点收缩时触发
},
// 点击当前节点，保存节点内容
handleNodeClick(node, data) {
console.log("点击的当前节点", node, data);
if (data.level !== 4) {
console.log("不是第4层000");
// 设置当前选中的节点,默认高亮
this.$refs.tree.setCurrentKey(this.currentId);
console.log("当前选中节点ID", this.currentId);
console.log("当前选中节点层级", this.currentLevel);
console.log("当前选中节点名称", this.currentName);
} else {
console.log("第5层111");
this.currentId = node.id;
this.currentLevel = data.level;
this.currentName = node.label;
// 设置当前选中的节点,默认高亮
this.$refs.tree.setCurrentKey(this.currentId);
console.log("当前选中节点ID", this.currentId);
console.log("当前选中节点层级", this.currentLevel);
console.log("当前选中节点名称", this.currentName);
// this.getTemList();
}
},
// 查询
findData() {
if (this.currentIndex == 0) {
@ -358,7 +231,7 @@ export default {
border: 1px solid #004b8c;
}
.right-monitor {
width: calc(100% - 280px);
width: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;

10
src/views/hotWater/energyAnalysis/components/energyReport.vue
Unescape View File

@ -176,8 +176,6 @@
<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
@ -627,16 +625,12 @@ export default {
"用水量(吨)",
"用电量(度)",
"单耗(度/吨)",
"楼栋人数",
"人均用水(人/升)",
]; // 导出的excel表头名信息 改参数
var filterVal = [
"curDate",
"useHotWater",
"electValue",
"electWater",
"checkInCount",
"perWater",
];
} else {
var tHeader = [
@ -645,8 +639,6 @@ export default {
"用水量(吨)",
"用电量(度)",
"单耗(度/吨)",
"楼栋人数",
"人均用水(人/升)",
]; // 导出的excel表头名信息 改参数
var filterVal = [
"curDate",
@ -654,8 +646,6 @@ export default {
"useHotWater",
"electValue",
"electWater",
"checkInCount",
"perWater",
];
}
const data = this.formatJson(filterVal, this.exportData);

4
src/views/hotWater/energyAnalysis/components/temReport.vue
Unescape View File

@ -165,12 +165,12 @@ export default {
this.listLoading = true;
// 请求数据
hotWaterTemp(data).then((res) => {
if (res.code == 200 && res.rows.length >0) {
if (res.code == 200 && res.rows.length > 0) {
this.tableData = res.rows;
// this.firstRow();
this.handlerow(this.tableData[0]);
} else {
this.rows = [];
this.tableData = [];
}
});
// Just to simulate the time of the request

4
src/views/hotWater/energyAnalysis/components/waterReport.vue
Unescape View File

@ -164,12 +164,12 @@ export default {
this.listLoading = true;
// 请求数据
hotWaterLevel(data).then((res) => {
if (res.code == 200 && res.rows.length >0) {
if (res.code == 200 && res.rows.length > 0) {
this.tableData = res.rows;
// this.firstRow();
this.handlerow(this.tableData[0]);
} else {
this.rows = [];
this.tableData = [];
}
});
// Just to simulate the time of the request

90
src/views/hotWater/energyQuery/components/electReading.vue
Unescape View File

@ -54,6 +54,7 @@
<el-table-column label="采集读数" align="center" prop="curValue" />
<el-table-column label="用量" align="center" prop="usedValue" />
<el-table-column label="倍率" align="center" prop="ratio" />
<el-table-column label="计算量" align="center" prop="calcValue" />
</el-table>
<pagination
@ -170,7 +171,7 @@ export default {
startDate: this.dayDate[0],
endDate: this.dayDate[1],
buildingId: this.building,
deviceType: "18",
deviceType: "16",
};
console.log("查询数据参数", data);
this.listLoading = true;
@ -192,43 +193,74 @@ export default {
},
// 导出
exportData() {
if (this.dayDate.length == 0) {
this.initializeTimeDate();
}
let data = {
timeType: this.dateType,
startTime: this.queryParams.startTime,
endTime: this.endTime,
building: this.building,
pageNum: this.queryParams.pageNum,
pageSize: this.total,
startDate: this.dayDate[0],
endDate: this.dayDate[1],
buildingId: this.building,
deviceType: "16",
};
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: "导出成功!",
console.log("查询数据参数", data);
queryDeviceDatas(data).then((res) => {
console.log("返回", res);
if (res.code == 200) {
import("@/assets/excel/Export2Excel").then((excel) => {
var tHeader = [
"所属楼栋",
"设备编号",
"设备名称",
"抄表时间",
"采集读数",
"用量",
"倍率",
"计算量",
]; // 导出的excel表头名信息 改参数
var filterVal = [
"buildingName",
"deviceNum",
"deviceName",
"curTime",
"curValue",
"usedValue",
"ratio",
"calcValue",
];
const data = this.formatJson(filterVal, res.rows);
const autoWidth = true;
excel.export_json_to_excel({
header: tHeader, //表头
data, //数据
filename: "电表读数报表", //名称
autoWidth: true, //宽度自适应
});
this.$message({
type: "success",
message: "导出成功!",
});
});
} else {
this.$message.error("导出失败!");
}
});
// .catch((err) => {
// this.$message.error('导出失败!');
// })
},
//格式转换,不需要改动
formatJson(filterVal, jsonData) {
return jsonData.map((v) =>
filterVal.map((j) => {
if (j === "installDate") {
return format(v[j]);
} else {
return v[j];
}
})
);
},
tableRowStyle({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 6) {
if (columnIndex === 6 || columnIndex === 8) {
return "color: #75d148;!important;text-align:center";
}
// return "text-align:center";

94
src/views/hotWater/energyQuery/components/waterReading.vue
Unescape View File

@ -54,6 +54,7 @@
<el-table-column label="采集读数" align="center" prop="curValue" />
<el-table-column label="用量" align="center" prop="usedValue" />
<el-table-column label="倍率" align="center" prop="ratio" />
<el-table-column label="计算量" align="center" prop="calcValue" />
</el-table>
<pagination
@ -155,7 +156,9 @@ export default {
},
// 序号
indexAdd(index) {
return index + 1 + (this.queryParams.pageNum - 1) * this.queryParams.pageSize;
return (
index + 1 + (this.queryParams.pageNum - 1) * this.queryParams.pageSize
);
},
//请求数据
getList() {
@ -168,7 +171,7 @@ export default {
startDate: this.dayDate[0],
endDate: this.dayDate[1],
buildingId: this.building,
deviceType: "16",
deviceType: "18",
};
console.log("查询数据参数", data);
this.listLoading = true;
@ -190,43 +193,74 @@ export default {
},
// 导出
exportData() {
if (this.dayDate.length == 0) {
this.initializeTimeDate();
}
let data = {
timeType: this.dateType,
startTime: this.queryParams.startTime,
endTime: this.endTime,
building: this.building,
pageNum: this.queryParams.pageNum,
pageSize: this.total,
startDate: this.dayDate[0],
endDate: this.dayDate[1],
buildingId: this.building,
deviceType: "18",
};
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: "导出成功!",
console.log("查询数据参数", data);
queryDeviceDatas(data).then((res) => {
console.log("返回", res);
if (res.code == 200) {
import("@/assets/excel/Export2Excel").then((excel) => {
var tHeader = [
"所属楼栋",
"设备编号",
"设备名称",
"抄表时间",
"采集读数",
"用量",
"倍率",
"计算量",
]; // 导出的excel表头名信息 改参数
var filterVal = [
"buildingName",
"deviceNum",
"deviceName",
"curTime",
"curValue",
"usedValue",
"ratio",
"calcValue",
];
const data = this.formatJson(filterVal, res.rows);
const autoWidth = true;
excel.export_json_to_excel({
header: tHeader, //表头
data, //数据
filename: "水表读数报表", //名称
autoWidth: true, //宽度自适应
});
this.$message({
type: "success",
message: "导出成功!",
});
});
} else {
this.$message.error("导出失败!");
}
});
// .catch((err) => {
// this.$message.error('导出失败!');
// })
},
//格式转换,不需要改动
formatJson(filterVal, jsonData) {
return jsonData.map((v) =>
filterVal.map((j) => {
if (j === "installDate") {
return format(v[j]);
} else {
return v[j];
}
})
);
},
tableRowStyle({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 6) {
if (columnIndex === 6 || columnIndex === 8) {
return "color: #75d148;!important;text-align:center";
}
// return "text-align:center";

4
src/views/hotWater/overview/index.vue
Unescape View File

@ -149,9 +149,9 @@ export default {
console.log("进行赋值", res.rows);
this.chartData1 = res.rows[0].pumpOnline;
this.chartData2 = parseInt(
res.rows[0].deviceNum - res.rows[0].pumpOnline
res.rows[0].pumpNum - res.rows[0].pumpOnline
);
this.allData = res.rows[0].deviceNum;
this.allData = res.rows[0].pumpNum;
const titleFontSize =
(this.$refs.pumpChart_ref.offsetWidth / 100) * 2;
const colorList = ["#ffe21e", "#08c8ff"]; // 提取颜色列表

Write Preview
Loading…
Cancel
Save