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.
638 lines
20 KiB
638 lines
20 KiB
<!-- 报表查询-用能查询-年数据 --> |
|
<template> |
|
<div> |
|
<div class="findwatercharts" ref="findwater_ref"></div> |
|
<!-- 表格 --> |
|
<el-table |
|
class="maintable" |
|
header-align="center" |
|
:data="tableData" |
|
style="margin-right: 0.13rem" |
|
:cell-style="tableRowStyle" |
|
> |
|
<el-table-column |
|
align="center" |
|
prop="itemType" |
|
label="类别" |
|
width="160" |
|
fixed="left" |
|
> |
|
</el-table-column> |
|
<el-table-column align="center" prop="month01" label="1月"> |
|
</el-table-column> |
|
<el-table-column align="center" prop="month02" label="2月"> |
|
</el-table-column> |
|
<el-table-column align="center" prop="month03" label="3月"> |
|
</el-table-column> |
|
<el-table-column align="center" prop="month04" label="4月"> |
|
</el-table-column> |
|
<el-table-column align="center" prop="month05" label="5月"> |
|
</el-table-column> |
|
<el-table-column align="center" prop="month06" label="6月"> |
|
</el-table-column> |
|
<el-table-column align="center" prop="month07" label="7月"> |
|
</el-table-column> |
|
<el-table-column align="center" prop="month08" label="8月"> |
|
</el-table-column> |
|
<el-table-column align="center" prop="month09" label="9月"> |
|
</el-table-column> |
|
<el-table-column align="center" prop="month10" label="10月"> |
|
</el-table-column> |
|
<el-table-column align="center" prop="month11" label="11月"> |
|
</el-table-column> |
|
<el-table-column align="center" prop="month12" label="12月"> |
|
</el-table-column> |
|
<el-table-column |
|
align="center" |
|
prop="totalValue" |
|
label="合计" |
|
fixed="right" |
|
width="100" |
|
> |
|
</el-table-column> |
|
</el-table> |
|
</div> |
|
</template> |
|
|
|
<script> |
|
import { getYear } from "@/utils/datetime"; |
|
import * as echarts from "echarts"; |
|
export default { |
|
props: { |
|
chType: { |
|
type: Number, |
|
}, |
|
chTime: { |
|
type: String, |
|
}, |
|
jtData: { |
|
type: String, |
|
}, |
|
}, |
|
data() { |
|
return { |
|
chartInstance1: null, |
|
option1: { |
|
series: [], |
|
}, |
|
// 给后端日期 |
|
endTime: "", |
|
//表格数据 |
|
tableData: [], |
|
// 四条折线图 |
|
data1: [], |
|
data2: [], |
|
data3: [], |
|
data4: [], |
|
data5: [], |
|
// 图例 |
|
data6: [], |
|
// x轴数据 |
|
data8: [], |
|
}; |
|
}, |
|
watch: { |
|
chType: { |
|
immediate: true, |
|
deep: true, |
|
handler(newVal, val) { |
|
// console.log("子组件改变的值", newVal); |
|
this.$nextTick(function () { |
|
this.getYearData(); |
|
}); |
|
}, |
|
}, |
|
// 对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.initChart1(); |
|
window.addEventListener("resize", this.screenAdapter); |
|
this.screenAdapter(); |
|
}, |
|
destroyed() { |
|
//与mounted中的监听对应，在组件销毁的时候，需要将监听器取消掉 |
|
window.removeEventListener("resize", this.screenAdapter); |
|
}, |
|
methods: { |
|
tableRowStyle({ row, column, rowIndex, columnIndex }) { |
|
// 如果第1列，修改颜色 |
|
if (columnIndex === 0) { |
|
return "background-color: #31354e !important;"; |
|
} |
|
}, |
|
// 查询表格数据 |
|
getYearData() { |
|
// 本月 本年参数 |
|
// 选择时间的参数 父传子 |
|
// 楼栋id 兄弟组件传值 |
|
// select选择的值 父传子 |
|
if (this.chTime) { |
|
this.endTime = this.chTime; |
|
} else { |
|
this.endTime = getYear(0); |
|
} |
|
let params = { |
|
curDate: this.endTime, |
|
buildingId: this.endId, |
|
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(); |
|
// } |
|
// }); |
|
}, |
|
// 导出数据 |
|
outTable() { |
|
// console.log("年数据啦"); |
|
import("@/assets/excel/Export2Excel").then((excel) => { |
|
const tHeader = [ |
|
"类别", |
|
"1月", |
|
"2月", |
|
"3月", |
|
"4月", |
|
"5月", |
|
"6月", |
|
"7月", |
|
"8月", |
|
"9月", |
|
"10月", |
|
"11月", |
|
"12月", |
|
"合计", |
|
]; // 导出的excel表头名信息 |
|
const filterVal = [ |
|
"itemType", |
|
"month01", |
|
"month02", |
|
"month03", |
|
"month04", |
|
"month05", |
|
"month06", |
|
"month07", |
|
"month08", |
|
"month09", |
|
"month10", |
|
"month11", |
|
"month12", |
|
"totalValue", |
|
]; // 导出的excel表头字段名，需要导出表格字段名 |
|
// const list = this.tableData; |
|
// console.log(list) |
|
if (this.chTime) { |
|
this.endTime = this.chTime; |
|
} else { |
|
this.endTime = getYear(0); |
|
} |
|
let params = { |
|
curDate: this.endTime, |
|
buildingId: this.endId, |
|
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, //宽度自适应 |
|
// }); |
|
// } |
|
// }); |
|
}); |
|
}, |
|
//格式转换,不需要改动 |
|
formatJson(filterVal, jsonData) { |
|
return jsonData.map((v) => |
|
filterVal.map((j) => { |
|
if (j === "installDate") { |
|
return format(v[j]); |
|
} else { |
|
return v[j]; |
|
} |
|
}) |
|
); |
|
}, |
|
//初始化chartInstance1对象 |
|
// 如果父组件点击了月 x轴数据 1号 2号 3号。。。 |
|
// 如果父组件点击了年 x轴数据 1月 2月 3月。。。 |
|
initChart1() { |
|
this.$emit("initChart1"); |
|
this.chartInstance1 = echarts.init(this.$refs.findwater_ref); |
|
this.option1 = { |
|
tooltip: { |
|
trigger: "axis", |
|
// 以下为鼠标hover时的背景颜色 |
|
showDelay: 0, // 显示延迟，添加显示延迟可以避免频繁切换，单位ms |
|
axisPointer: { |
|
type: "shadow", |
|
shadowStyle: { |
|
color: "rgba(30, 69, 113, 0.15)", |
|
width: "1", |
|
}, |
|
}, |
|
}, |
|
legend: { |
|
// 折柱混合的图表，不显示icon，图例就可以根据不同的类型不同 |
|
// icon: "cricle", |
|
//图例文字颜色 |
|
textStyle: { |
|
color: "#ffff", |
|
fontSize: 12, //这里改字体大小 |
|
}, |
|
left: "56%", |
|
top: "5%", |
|
//图例距离饼图的距离 |
|
itemGap: 5, |
|
itemWidth: 10, |
|
itemHeight: 5, |
|
}, |
|
grid: { |
|
left: "3%", |
|
right: "4%", |
|
bottom: "3%", |
|
containLabel: true, |
|
}, |
|
xAxis: { |
|
type: "category", |
|
//设置为true代表离零刻度间隔一段距离 |
|
boundaryGap: true, |
|
// 修饰刻度标签的颜色即x坐标数据 |
|
axisLabel: { |
|
// interval: 0, |
|
// rotate: 30, //x轴坐标字体倾斜30度 |
|
color: "rgba(255,255,255,.7)", |
|
}, |
|
axisTick: { |
|
show: false, // 不显示坐标轴刻度线 |
|
}, |
|
// 去除x坐标轴的颜色 |
|
axisLine: { |
|
show: true, |
|
lineStyle: { |
|
// X 轴颜色配置 |
|
color: "#707070", |
|
}, |
|
}, |
|
//splitLine: { show: true } //x轴分割线 |
|
}, |
|
yAxis: [ |
|
//两个y轴 |
|
{ |
|
type: "value", |
|
// 修饰刻度标签的颜色即y坐标数据 |
|
axisLabel: { |
|
color: "rgba(255,255,255,.7)", |
|
}, |
|
// 显示y坐标轴的颜色 |
|
axisLine: { |
|
show: true, |
|
lineStyle: { |
|
// X 轴颜色配置 |
|
color: "#707070", |
|
}, |
|
}, |
|
//y轴分割线段数 |
|
splitNumber: 10, |
|
// 修改y轴分割线的颜色 |
|
splitLine: { |
|
lineStyle: { |
|
// color: "#252843", |
|
color: "#707070", |
|
}, |
|
}, |
|
}, |
|
{ |
|
type: "value", |
|
// 修饰刻度标签的颜色即y坐标数据 |
|
axisLabel: { |
|
color: "rgba(255,255,255,.7)", |
|
formatter: "{value} %", |
|
}, |
|
// 显示y坐标轴的颜色 |
|
axisLine: { |
|
show: true, |
|
lineStyle: { |
|
// X 轴颜色配置 |
|
color: "#707070", |
|
}, |
|
}, |
|
//y轴分割线段数 |
|
splitNumber: 5, |
|
// 修改y轴分割线的颜色 |
|
splitLine: { |
|
lineStyle: { |
|
// color: "#252843", |
|
color: "#707070", |
|
}, |
|
}, |
|
}, |
|
], |
|
|
|
series: [ |
|
{ |
|
type: "bar", |
|
barWidth: 10, // 柱子宽度 |
|
//折线颜色 |
|
itemStyle: { |
|
color: "#db9215", |
|
lineStyle: { |
|
color: "#db9215", //折线的颜色 |
|
}, |
|
}, |
|
}, |
|
{ |
|
type: "bar", |
|
// tooltip: { |
|
// valueFormatter: function (value) { |
|
// return value + "吨"; |
|
// }, |
|
// }, |
|
tooltip: { |
|
trigger: "axis", |
|
formatter: function (params) { |
|
//数据单位格式化 |
|
var relVal = params[0].name; //x轴名称 |
|
if (params[0].seriesName == "2022年用水量") { |
|
relVal = |
|
params[0].name + |
|
"<br/>" + |
|
params[0].seriesName + |
|
" : " + |
|
params[0].value + |
|
" 吨"; |
|
} else if (params[0].seriesName == "用电量") { |
|
relVal = |
|
params[0].name + |
|
"<br/>" + |
|
params[0].seriesName + |
|
" : " + |
|
params[0].value + |
|
" 度"; |
|
} else if (params[0].seriesName == "耗能") { |
|
relVal = |
|
params[0].name + |
|
"<br/>" + |
|
params[0].seriesName + |
|
" : " + |
|
params[0].value + |
|
" 度/吨"; |
|
} else { |
|
relVal = |
|
params[0].name + |
|
"<br/>" + |
|
params[0].seriesName + |
|
" : " + |
|
params[0].value + |
|
" 次"; |
|
} |
|
return relVal; |
|
}, |
|
}, |
|
barWidth: 10, // 柱子宽度 |
|
//折线颜色 |
|
itemStyle: { |
|
color: "#1ab395", |
|
lineStyle: { |
|
color: "#1ab395", //折线的颜色 |
|
}, |
|
}, |
|
}, |
|
{ |
|
type: "line", |
|
tooltip: { |
|
valueFormatter: function (value) { |
|
return value + "%"; |
|
}, |
|
}, |
|
// stack: 'Total', |
|
symbol: "circle", |
|
// 拐点大小 |
|
symbolSize: 6, |
|
yAxisIndex: 1, |
|
// 开始不显示拐点， 鼠标经过显示 |
|
showSymbol: false, |
|
// data: this.data3, |
|
//折线颜色 |
|
itemStyle: { |
|
color: "#e23131", |
|
lineStyle: { |
|
color: "#e23131", //折线的颜色 |
|
}, |
|
}, |
|
}, |
|
{ |
|
type: "line", |
|
tooltip: { |
|
valueFormatter: function (value) { |
|
return value + "%"; |
|
}, |
|
}, |
|
// stack: 'Total', |
|
symbol: "circle", |
|
// 拐点大小 |
|
symbolSize: 6, |
|
//第二个y轴 |
|
yAxisIndex: 1, |
|
// 开始不显示拐点， 鼠标经过显示 |
|
showSymbol: false, |
|
// data: this.data4, |
|
//折线颜色 |
|
itemStyle: { |
|
color: "#4a98ff", |
|
lineStyle: { |
|
color: "#4a98ff", //折线的颜色 |
|
}, |
|
}, |
|
}, |
|
], |
|
}; |
|
//把配置项给实例对象 |
|
this.chartInstance1.setOption(this.option1, true); |
|
}, |
|
// 折线图自适应 |
|
screenAdapter() { |
|
//自己定义的比较合适的适配大小,2.6 mes_ref是图表盒子 |
|
const titleFontSize = (this.$refs.findwater_ref.offsetWidth / 100) * 1.8; |
|
//因为option可以多次配置的，所以这里的option只需要写 需要配置大小的相关数据 |
|
const adapterOption = { |
|
//比如fontSize |
|
textStyle: { |
|
fontSize: titleFontSize, |
|
}, |
|
}; |
|
//记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关 |
|
this.chartInstance1.setOption(adapterOption); |
|
//手动的调用图标对象的resize才能产生效果 |
|
this.chartInstance1.resize(); |
|
}, |
|
}, |
|
}; |
|
</script> |
|
<style scoped> |
|
.findwatercharts { |
|
margin-bottom: 0.35rem; |
|
width: 100%; |
|
height: 4.5rem; |
|
/* background-color: pink; */ |
|
} |
|
</style>
|
|
|