6 changed files with 2899 additions and 9 deletions
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,775 @@
|
||||
<template> |
||||
<div class="main-body"> |
||||
<div class="irregular-border"> |
||||
<div class="main-content"> |
||||
<div class="condition"> |
||||
<div class="condition-left"> |
||||
<div class="time-label">时间类型:</div> |
||||
<el-radio-group |
||||
v-model="dateType" |
||||
style="margin-right: 0.24rem" |
||||
@change="updateDateType" |
||||
> |
||||
<el-radio label="hour">小时</el-radio> |
||||
<el-radio label="day">日</el-radio> |
||||
<el-radio label="month">月</el-radio> |
||||
<el-radio label="year">年</el-radio> |
||||
</el-radio-group> |
||||
<el-date-picker |
||||
v-if="dateType == 'hour'" |
||||
v-model="timeDate" |
||||
@change="handleConfirm" |
||||
type="datetimerange" |
||||
:default-time="['00:00:00', '23:59:59']" |
||||
range-separator="至" |
||||
placeholder="选择日期" |
||||
start-placeholder="开始日期" |
||||
end-placeholder="结束日期" |
||||
> |
||||
</el-date-picker> |
||||
<el-date-picker |
||||
v-model="dayDate" |
||||
type="daterange" |
||||
v-if="dateType == 'day'" |
||||
:key="this.dateType" |
||||
range-separator="至" |
||||
value-format="yyyy-MM-dd" |
||||
start-placeholder="开始日期" |
||||
end-placeholder="结束日期" |
||||
@change="dateChange" |
||||
> |
||||
</el-date-picker> |
||||
<el-date-picker |
||||
v-model="monthDate" |
||||
type="monthrange" |
||||
v-if="dateType == 'month'" |
||||
:key="this.dateType" |
||||
range-separator="至" |
||||
start-placeholder="开始月份" |
||||
end-placeholder="结束月份" |
||||
value-format="yyyy-MM" |
||||
@change="dateChange" |
||||
> |
||||
</el-date-picker> |
||||
<div |
||||
class="years-div" |
||||
v-if="dateType == 'year'" |
||||
:key="this.dateType" |
||||
> |
||||
<el-date-picker |
||||
v-model="startYear" |
||||
type="year" |
||||
placeholder="选择开始年份" |
||||
value-format="yyyy" |
||||
> |
||||
</el-date-picker> |
||||
<div class="years-word">至</div> |
||||
<el-date-picker |
||||
v-model="endYear" |
||||
type="year" |
||||
placeholder="选择结束年份" |
||||
value-format="yyyy" |
||||
> |
||||
</el-date-picker> |
||||
</div> |
||||
<el-select |
||||
style="margin: 0 10px" |
||||
clearable |
||||
class="elSelectDiv" |
||||
v-model="electType" |
||||
placeholder="请选择查询类型" |
||||
@change="handleSelectChange" |
||||
> |
||||
<el-option |
||||
v-for="item in electTypes" |
||||
:key="item.id" |
||||
:label="item.label" |
||||
:value="item.id" |
||||
></el-option> |
||||
</el-select> |
||||
|
||||
<div class="success-btn"> |
||||
<el-button |
||||
type="success" |
||||
style="margin-left: 0.12rem" |
||||
@click="findData" |
||||
>查询</el-button |
||||
> |
||||
</div> |
||||
</div> |
||||
<!-- <div class="condition-right"> |
||||
<el-button type="warning">导出</el-button> |
||||
</div> --> |
||||
</div> |
||||
<div class="charts-table" v-loading="listLoading"> |
||||
<div class="charts-title"> |
||||
{{ this.titleDate }} {{ this.deviceTitle }} |
||||
</div> |
||||
<div class="charts_refs" ref="charts_refs"></div> |
||||
<div class="analysis-table"> |
||||
<table> |
||||
<thead> |
||||
<tr> |
||||
<th v-if="dateList.length > 0">数据类型</th> |
||||
<th v-for="(item, index) in dateList" :key="index"> |
||||
{{ item }} |
||||
</th> |
||||
</tr> |
||||
</thead> |
||||
<tbody> |
||||
<tr> |
||||
<td v-if="electData.length > 0">热量(kwh)</td> |
||||
<td v-for="(item, index) in electData" :key="index"> |
||||
{{ item }} |
||||
</td> |
||||
</tr> |
||||
</tbody> |
||||
</table> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import { format2 } from "@/utils/datetime"; |
||||
import { deviceEnergy } from "@/api/centerairC/energyManage"; |
||||
import * as echarts from "echarts"; |
||||
import { listData } from "@/api/system/dict/data"; |
||||
import { devicesList } from "@/api/device/gather"; |
||||
export default { |
||||
data() { |
||||
return { |
||||
listLoading: false, |
||||
dateType: "hour", //默认选择小时 |
||||
timeDate: [], //小时值 |
||||
electType: [], |
||||
electTypes: [], |
||||
deviceTitle: "", |
||||
dayDate: [], //日值 |
||||
monthDate: [], //月值 |
||||
startYear: "", //开始年份 |
||||
endYear: "", //结束年份 |
||||
startTime: "", //开始日期 |
||||
endTime: "", //结束日期 |
||||
// 表格数据 |
||||
dateList: [], |
||||
electData: [], |
||||
// 折线图数据 |
||||
dateList2: [], |
||||
electData2: [], |
||||
chartInstance2: null, |
||||
option2: {}, |
||||
titleDate: "", |
||||
systemType: "", //系统类型 |
||||
systemTypes: [], |
||||
}; |
||||
}, |
||||
mounted() { |
||||
this.initializeTimeDate(); |
||||
this.initChart2(); |
||||
this.screenAdapter(); |
||||
window.addEventListener("resize", this.screenAdapter); |
||||
this.initData(); |
||||
}, |
||||
destroyed() { |
||||
//与mounted中的监听对应，在组件销毁的时候，需要将监听器取消掉 |
||||
window.removeEventListener("resize", this.screenAdapter); |
||||
}, |
||||
methods: { |
||||
/** 查询系统类型-字典数据列表 */ |
||||
getDictList() { |
||||
return new Promise((resolve, reject) => { |
||||
let data = { |
||||
pageNum: 1, |
||||
pageSize: 100, |
||||
dictType: "sys_type", |
||||
}; |
||||
listData(data) |
||||
.then((response) => { |
||||
this.systemTypes = response.rows; |
||||
if (this.systemTypes.length > 0) { |
||||
this.systemType = this.systemTypes[0].dictValue; |
||||
} |
||||
resolve(); |
||||
}) |
||||
.catch((error) => { |
||||
reject(error); |
||||
}); |
||||
}); |
||||
}, |
||||
/** 查询设备类型 */ |
||||
getList() { |
||||
return new Promise((resolve, reject) => { |
||||
let data = { |
||||
systemType: 7, |
||||
}; |
||||
devicesList(data) |
||||
.then((res) => { |
||||
// 获取第四层级的children |
||||
this.electTypes = this.getChildrenAtLevel(res.data, 5); |
||||
this.electType = this.electTypes[0].id; |
||||
// 标题 |
||||
let obj = {}; |
||||
obj = this.electTypes.find((item) => { |
||||
return item.id === this.electType; |
||||
}); |
||||
this.deviceTitle = obj.label; |
||||
console.log(obj.label); |
||||
console.log("this.electTypes", this.electTypes); |
||||
console.log("this.electType", this.electType); |
||||
this.handleSelectChange(); |
||||
resolve(); |
||||
}) |
||||
.catch((error) => { |
||||
reject(error); |
||||
}); |
||||
}); |
||||
}, |
||||
// 选择el-select |
||||
handleSelectChange() { |
||||
console.log("----和默认选中值比较", this.electType); |
||||
// this.selectElect = this.electType.map((v) => { |
||||
// const selectedItem = this.electTypes.find((item) => item.mtNum === v); |
||||
// return { |
||||
// name: selectedItem ? selectedItem.otherName : "", |
||||
// // 如果 selectedItem 存在，则使用其 id 属性作为 value，否则设为 null |
||||
// value: selectedItem ? selectedItem.id : null, |
||||
// }; |
||||
// }); |
||||
// console.log("this.selectElect", this.selectElect); |
||||
}, |
||||
getChildrenAtLevel(data, targetLevel, currentLevel = 1) { |
||||
if (!Array.isArray(data) || data.length === 0) { |
||||
return []; |
||||
} |
||||
|
||||
if (currentLevel === targetLevel - 1) { |
||||
// 到达目标层级的前一层，收集其children |
||||
const result = []; |
||||
for (let item of data) { |
||||
if (item.children && Array.isArray(item.children)) { |
||||
result.push(...item.children); |
||||
} |
||||
} |
||||
return result; |
||||
} |
||||
|
||||
// 继续递归遍历 |
||||
const result = []; |
||||
for (let item of data) { |
||||
if (item.children && Array.isArray(item.children)) { |
||||
const children = this.getChildrenAtLevel( |
||||
item.children, |
||||
targetLevel, |
||||
currentLevel + 1 |
||||
); |
||||
result.push(...children); |
||||
} |
||||
} |
||||
|
||||
return result; |
||||
}, |
||||
/** 初始化数据 */ |
||||
initData() { |
||||
Promise.all([ |
||||
// this.getDictList(), |
||||
this.getList(), |
||||
]) |
||||
.then(() => { |
||||
this.getTableData(); |
||||
}) |
||||
.catch((error) => { |
||||
console.error("数据获取失败:", error); |
||||
}); |
||||
}, |
||||
handleConfirm() { |
||||
console.log("打印选择的时间", this.timeDate); |
||||
// const start = new Date(this.timeDate[0]); |
||||
// start.setHours(0, 0, 0, 0); |
||||
// const end = new Date(this.timeDate[1]); |
||||
// end.setHours(23, 59, 59, 999); |
||||
// this.timeDate = [start, end]; |
||||
}, |
||||
// 初始化时间 |
||||
initializeTimeDate() { |
||||
const start = new Date(new Date().setHours(0, 0, 0, 0)); |
||||
const end = new Date(new Date().setHours(23, 59, 59, 59)); |
||||
this.timeDate = [format2(start), format2(end)]; // 更新 |
||||
this.titleDate = format2(start) + "至" + format2(end); |
||||
}, |
||||
// 选择时间类型 |
||||
updateDateType() { |
||||
// this.dateType = this.radio; |
||||
console.log(this.dateType); |
||||
(this.timeDate = []), //小时值 |
||||
(this.dayDate = []), //日值 |
||||
(this.monthDate = []), //月值 |
||||
(this.startYear = ""), //开始年份 |
||||
(this.endYear = ""); //结束年份 |
||||
}, |
||||
// 选中日期事件 |
||||
dateChange() { |
||||
// console.log("打印时间", this.timeform.time1); |
||||
if (!this.dayDate) { |
||||
this.$nextTick(() => { |
||||
this.dayDate = []; |
||||
}); |
||||
} |
||||
if (!this.monthDate) { |
||||
this.$nextTick(() => { |
||||
this.monthDate = []; |
||||
}); |
||||
} |
||||
}, |
||||
// 查询 |
||||
findData() { |
||||
console.log(this.dateType); |
||||
switch (this.dateType) { |
||||
case "hour": |
||||
if (!this.timeDate) { |
||||
this.showMessage("请选择时间！", "warning"); |
||||
} else { |
||||
this.titleDate = |
||||
format2(this.timeDate[0]) + "至" + format2(this.timeDate[1]); |
||||
this.getTableData(); |
||||
} |
||||
break; |
||||
case "day": |
||||
if (this.dayDate.length === 0) { |
||||
this.showMessage("请选择时间！", "warning"); |
||||
} else { |
||||
const newLength = |
||||
new Date(this.dayDate[1]).getTime() - |
||||
new Date(this.dayDate[0]).getTime(); |
||||
const dayDiff = Math.floor(newLength / (1000 * 60 * 60 * 24)); |
||||
if (dayDiff > 31) { |
||||
this.showMessage( |
||||
"最多只能选择30天区间，请重新选择再查询！", |
||||
"warning" |
||||
); |
||||
} else { |
||||
this.titleDate = this.dayDate[0] + "至" + this.dayDate[1]; |
||||
this.getTableData(); |
||||
} |
||||
} |
||||
break; |
||||
case "month": |
||||
if (this.monthDate.length === 0) { |
||||
this.showMessage("请选择时间！", "warning"); |
||||
} else { |
||||
const [start, end] = this.monthDate; |
||||
const startDate = new Date(start); |
||||
const endDate = new Date(end); |
||||
const startYear = startDate.getFullYear(); |
||||
const startMonth = startDate.getMonth(); |
||||
const endYear = endDate.getFullYear(); |
||||
const endMonth = endDate.getMonth(); |
||||
const monthDiff = |
||||
(endYear - startYear) * 12 + (endMonth - startMonth); |
||||
if (monthDiff > 12) { |
||||
this.showMessage( |
||||
"最多只能选择12个月区间，请重新选择再查询！", |
||||
"warning" |
||||
); |
||||
} else { |
||||
this.titleDate = this.monthDate[0] + "至" + this.monthDate[1]; |
||||
this.getTableData(); |
||||
} |
||||
} |
||||
break; |
||||
case "year": |
||||
if (!this.startYear || !this.endYear) { |
||||
this.showMessage("请选择全年份区间！", "warning"); |
||||
} else if (this.startYear > this.endYear) { |
||||
this.showMessage("结束年份要大于开始年份！", "warning"); |
||||
} else { |
||||
this.titleDate = this.startYear + "至" + this.endYear; |
||||
this.getTableData(); |
||||
} |
||||
break; |
||||
default: |
||||
break; |
||||
} |
||||
|
||||
// 找到el-select的label的值 |
||||
let value = this.electType; |
||||
let obj = {}; |
||||
obj = this.electTypes.find((item) => { |
||||
return item.id === value; |
||||
}); |
||||
this.deviceTitle = obj.label; |
||||
console.log(obj.label); |
||||
}, |
||||
// 显示消息的函数 |
||||
showMessage(message, type) { |
||||
this.$message({ |
||||
message: message, |
||||
type: type, |
||||
}); |
||||
}, |
||||
//请求数据 |
||||
getTableData() { |
||||
if (this.dateType == "hour") { |
||||
this.startTime = format2(this.timeDate[0]); |
||||
this.endTime = format2(this.timeDate[1]); |
||||
} else if (this.dateType == "day") { |
||||
this.startTime = this.dayDate.length > 0 ? this.dayDate[0] : ""; |
||||
this.endTime = this.dayDate.length > 0 ? this.dayDate[1] : ""; |
||||
} else if (this.dateType == "month") { |
||||
this.startTime = this.monthDate.length > 0 ? this.monthDate[0] : ""; |
||||
this.endTime = this.monthDate.length > 0 ? this.monthDate[1] : ""; |
||||
} else if (this.dateType == "year") { |
||||
(this.startTime = this.startYear), (this.endTime = this.endYear); |
||||
} |
||||
let data = { |
||||
timeType: this.dateType, |
||||
startTime: this.startTime, |
||||
endTime: this.endTime, |
||||
houseId: this.electType, |
||||
systemType: 7, |
||||
}; |
||||
console.log("查询数据参数", data); |
||||
// this.option2.series[0].data = ["1"]; |
||||
// this.option2.xAxis.data = ["1"]; |
||||
// this.screenAdapter(); |
||||
// this.chartInstance2.setOption(this.option2); |
||||
this.listLoading = true; |
||||
deviceEnergy(data).then((res) => { |
||||
console.log("查询返回", res); |
||||
if (res.code == 200 && res.data.lineTimes) { |
||||
if (res.data.times && res.data.times.length > 0) { |
||||
// 表格数据 .map(time => `${time}:00`) |
||||
this.dateList = res.data.times; |
||||
this.electData = res.data.data[0].meter; |
||||
console.log("表头", this.dateList); |
||||
console.log("表格内容", this.electData); |
||||
} else { |
||||
this.dateList = []; |
||||
this.electData = []; |
||||
} |
||||
|
||||
// 图例数据 |
||||
this.dateList2 = res.data.lineTimes.map((item) => { |
||||
// 使用slice()方法截取需要的部分 |
||||
return item.slice(0, 16); |
||||
}); |
||||
this.electData2 = res.data.data[1].lineMeter; |
||||
|
||||
this.option2.series[0].data = this.electData2; |
||||
this.option2.xAxis.data = this.dateList2; |
||||
this.option2.yAxis.name = "kwh"; |
||||
this.option2.yAxis.nameTextStyle = { |
||||
color: "rgba(255, 255, 255, 1)", |
||||
fontSize: 12, |
||||
}; |
||||
console.log("x轴", this.dateList2); |
||||
console.log("折线图数据", this.electData2); |
||||
this.screenAdapter(); |
||||
this.chartInstance2.setOption(this.option2); |
||||
} else { |
||||
this.dateList = []; |
||||
this.electData = []; |
||||
this.option2.series[0].data = []; |
||||
this.option2.xAxis.data = []; |
||||
this.screenAdapter(); |
||||
this.chartInstance2.setOption(this.option2); |
||||
} |
||||
}); |
||||
// Just to simulate the time of the request |
||||
setTimeout(() => { |
||||
this.listLoading = false; |
||||
}, 1.0 * 1000); |
||||
}, |
||||
//初始化chartInstance2对象 折线图 |
||||
initChart2() { |
||||
this.chartInstance2 = echarts.init(this.$refs.charts_refs); |
||||
this.option2 = { |
||||
tooltip: { |
||||
trigger: "axis", |
||||
// 使用 formatter 设定 tooltip 内容格式 |
||||
formatter: function (params) { |
||||
let seriesHTML = ""; |
||||
params.forEach(function (item) { |
||||
seriesHTML += |
||||
"<div>" + |
||||
item.seriesName + |
||||
': <span style="color: #000000; font-weight: bold;">' + |
||||
item.value + |
||||
"</span></div>"; |
||||
}); |
||||
return "<div>" + params[0].name + "</div>" + seriesHTML; |
||||
}, |
||||
// 自定义 tooltip 内容 |
||||
formatter: function (params) { |
||||
var res = params[0].name + "<br/>"; |
||||
for (var i = 0, l = params.length; i < l; i++) { |
||||
var seriesName = params[i].seriesName; |
||||
var value = params[i].value; |
||||
var marker = |
||||
'<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + |
||||
params[i].color + |
||||
'"></span>'; |
||||
// 根据不同德seriesName 返回不同的单位 |
||||
if (seriesName === "热量") { |
||||
res += |
||||
marker + |
||||
seriesName + |
||||
":" + |
||||
'<span style="color: #000000; font-weight: bold;margin-left:5px">' + |
||||
value + |
||||
" " + |
||||
"kwh" + |
||||
"</span><br>"; |
||||
} else { |
||||
res += |
||||
marker + |
||||
seriesName + |
||||
":" + |
||||
'<span style="color: #000000; font-weight: bold;margin-left:5px">' + |
||||
value + |
||||
"</span><br>"; |
||||
} |
||||
} |
||||
return res; |
||||
}, |
||||
}, |
||||
legend: { |
||||
show: false, // 不显示图例 |
||||
}, |
||||
grid: { |
||||
top: "15%", |
||||
left: "5%", |
||||
right: "4.4%", |
||||
bottom: "20%", |
||||
containLabel: true, |
||||
}, |
||||
xAxis: { |
||||
type: "category", |
||||
data: this.dateList2, |
||||
//设置为true代表离零刻度间隔一段距离 |
||||
boundaryGap: true, |
||||
// 修饰刻度标签的颜色即x坐标数据 |
||||
axisLabel: { |
||||
// interval: 0, //强制显示所有x轴数据 |
||||
// rotate: 30, //x轴坐标字体倾斜30度 |
||||
color: "rgba(255, 255, 255, 1)", |
||||
}, |
||||
axisTick: { |
||||
show: false, // 不显示坐标轴刻度线 |
||||
}, |
||||
// x坐标轴的颜色 |
||||
axisLine: { |
||||
show: true, |
||||
lineStyle: { |
||||
color: "#365576", |
||||
}, |
||||
}, |
||||
splitLine: { |
||||
lineStyle: { |
||||
color: "#e2e6f0", |
||||
}, |
||||
}, //x轴分割线 |
||||
}, |
||||
yAxis: { |
||||
min: 0, |
||||
miniInterval: 5, |
||||
type: "value", |
||||
// 修饰刻度标签的颜色即y坐标数据 |
||||
axisLabel: { |
||||
color: "rgba(255, 255, 255, 1)", |
||||
}, |
||||
// 显示y坐标轴 |
||||
axisLine: { |
||||
show: true, |
||||
lineStyle: { |
||||
color: "#365576", // 设置 y 轴线的颜色 |
||||
}, |
||||
}, |
||||
splitLine: { |
||||
lineStyle: { |
||||
color: "#1a3d62", // 设置分割线的颜色 |
||||
type: "dashed", // 设置分割线为虚线 |
||||
}, |
||||
}, |
||||
}, |
||||
series: [ |
||||
{ |
||||
name: "热量", |
||||
type: "line", |
||||
smooth: true, |
||||
symbol: "circle", |
||||
// 拐点大小 |
||||
symbolSize: 8, |
||||
data: this.electData2, |
||||
sampling: "lttb", //降采样策略 |
||||
// 设置拐点颜色以及边框 |
||||
// itemStyle: { |
||||
// color: "#0184d5", |
||||
// borderColor: "rgba(221, 220, 107, .1)", |
||||
// borderWidth: 12 |
||||
// }, |
||||
// 开始不显示拐点， 鼠标经过显示 |
||||
showSymbol: false, |
||||
//折线颜色 |
||||
itemStyle: { |
||||
color: "#01c29b", //折线点的颜色 |
||||
lineStyle: { |
||||
color: "#01c29b", //折线的颜色 |
||||
}, |
||||
}, |
||||
areaStyle: { |
||||
color: { |
||||
//线性渐变 |
||||
type: "linear", |
||||
x: 0, |
||||
y: 0, |
||||
x2: 0, |
||||
y2: 1, |
||||
colorStops: [ |
||||
{ |
||||
offset: 0, |
||||
color: "rgba(1, 194, 155, 1)", // 0% 处的颜色 |
||||
}, |
||||
{ |
||||
offset: 0.8, |
||||
color: "rgba(1, 194, 155,0.2)", // 100% 处的颜色 |
||||
}, |
||||
], |
||||
// global: false, // 缺省为 false |
||||
}, |
||||
}, |
||||
}, |
||||
], |
||||
}; |
||||
//把配置项给实例对象 |
||||
this.chartInstance2.setOption(this.option2, true); |
||||
}, |
||||
// 元素大小 |
||||
screenAdapter() { |
||||
//自己定义的比较合适的适配大小,2.6 mes_ref是图表盒子 |
||||
const titleFontSize = this.$refs.charts_refs.offsetWidth / 130; |
||||
//因为option可以多次配置的，所以这里的option只需要写 需要配置大小的相关数据 |
||||
const adapterOption = { |
||||
// x轴坐标字体大小 |
||||
xAxis: { |
||||
axisLabel: { |
||||
fontSize: titleFontSize * 1.4, |
||||
}, |
||||
}, |
||||
yAxis: { |
||||
axisLabel: { |
||||
fontSize: titleFontSize * 1.4, |
||||
}, |
||||
}, |
||||
// 拖拽X轴 |
||||
dataZoom: [ |
||||
{ |
||||
type: "slider", //inside鼠标缩放 |
||||
show: this.showZoom, |
||||
height: titleFontSize, // 设置控制区域的高度为 20 像素 |
||||
// fillerColor: 'rgba(255, 0, 0, 0.5)', // 设置选中区域的颜色为半透明的红色 |
||||
// backgroundColor: 'rgba(0, 0, 0, 0.1)', // 设置背景颜色为透明度为 0.1 的黑色 |
||||
start: 0, |
||||
end: 100, |
||||
xAxisIndex: [0], |
||||
handleSize: "120%", // 设置滑块大小为默认大小的 120% |
||||
}, |
||||
], |
||||
}; |
||||
//记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关 |
||||
this.chartInstance2.setOption(adapterOption); |
||||
//手动的调用图标对象的resize才能产生效果 |
||||
this.chartInstance2.resize(); |
||||
}, |
||||
}, |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.condition { |
||||
display: flex; |
||||
flex-direction: row; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
width: 100%; |
||||
margin-bottom: 0.24rem; |
||||
|
||||
.condition-left { |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: center; |
||||
flex-wrap: wrap; |
||||
|
||||
.years-div { |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: center; |
||||
|
||||
.years-word { |
||||
font-size: 14px; |
||||
margin: 0 5px; |
||||
color: #388ff3; |
||||
} |
||||
} |
||||
|
||||
.time-label { |
||||
font-size: 16px; |
||||
line-height: 7px; |
||||
margin-right: 12px; |
||||
white-space: nowrap; |
||||
} |
||||
} |
||||
} |
||||
.charts-title { |
||||
font-size: 0.24rem; |
||||
line-height: 0.07rem; |
||||
letter-spacing: 0.02rem; |
||||
color: #1f70e9; |
||||
margin: 0.3rem 0 0rem 0; |
||||
width: 100%; |
||||
text-align: center; |
||||
} |
||||
.analysis-table table thead th { |
||||
min-width: 1.6rem; |
||||
} |
||||
|
||||
.analysis-table { |
||||
margin: 0.3rem 0; |
||||
} |
||||
|
||||
.main-content { |
||||
min-height: 6.9rem; |
||||
} |
||||
.charts-table { |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
justify-content: center; |
||||
} |
||||
.charts_refs { |
||||
width: 17rem; |
||||
height: 4.55rem; |
||||
margin-left: -0.35rem; |
||||
} |
||||
// 媒体查询，适配大于2000px分辨率的大屏样式 |
||||
@media (min-width: 2000px) { |
||||
.condition { |
||||
.condition-left { |
||||
.years-div { |
||||
.years-word { |
||||
font-size: 0.14rem !important; |
||||
margin: 0 0.05rem !important; |
||||
} |
||||
} |
||||
|
||||
.time-label { |
||||
font-size: 0.16rem !important; |
||||
line-height: 0.07rem !important; |
||||
margin-right: 0.12rem !important; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,872 @@
|
||||
<template> |
||||
<div class="main-body"> |
||||
<div class="irregular-border"> |
||||
<div class="main-content"> |
||||
<div class="condition"> |
||||
<div class="condition-left"> |
||||
<div class="time-label">时间类型:</div> |
||||
<el-radio-group |
||||
v-model="dateType" |
||||
style="margin-right: 0.24rem" |
||||
@change="updateDateType" |
||||
> |
||||
<el-radio label="hour">小时</el-radio> |
||||
<el-radio label="day">日</el-radio> |
||||
<el-radio label="month">月</el-radio> |
||||
<el-radio label="year">年</el-radio> |
||||
</el-radio-group> |
||||
<el-date-picker |
||||
v-model="timeDate" |
||||
:default-time="['00:00:00', '23:59:59']" |
||||
type="datetimerange" |
||||
range-separator="至" |
||||
v-if="dateType == 'hour'" |
||||
placeholder="选择日期" |
||||
start-placeholder="开始日期" |
||||
end-placeholder="结束日期" |
||||
> |
||||
</el-date-picker> |
||||
<el-date-picker |
||||
v-model="dayDate" |
||||
type="daterange" |
||||
v-if="dateType == 'day'" |
||||
:key="this.dateType" |
||||
range-separator="至" |
||||
value-format="yyyy-MM-dd" |
||||
start-placeholder="开始日期" |
||||
end-placeholder="结束日期" |
||||
@change="dateChange" |
||||
> |
||||
</el-date-picker> |
||||
<el-date-picker |
||||
v-model="monthDate" |
||||
type="monthrange" |
||||
v-if="dateType == 'month'" |
||||
:key="this.dateType" |
||||
range-separator="至" |
||||
start-placeholder="开始月份" |
||||
end-placeholder="结束月份" |
||||
value-format="yyyy-MM" |
||||
@change="dateChange" |
||||
> |
||||
</el-date-picker> |
||||
<div |
||||
class="years-div" |
||||
v-if="dateType == 'year'" |
||||
:key="this.dateType" |
||||
> |
||||
<el-date-picker |
||||
v-model="startYear" |
||||
type="year" |
||||
placeholder="选择开始年份" |
||||
value-format="yyyy" |
||||
> |
||||
</el-date-picker> |
||||
<div class="years-word">至</div> |
||||
<el-date-picker |
||||
v-model="endYear" |
||||
type="year" |
||||
placeholder="选择结束年份" |
||||
value-format="yyyy" |
||||
> |
||||
</el-date-picker> |
||||
</div> |
||||
<el-select |
||||
style="margin: 0 10px" |
||||
multiple |
||||
collapse-tags |
||||
class="elSelectDiv" |
||||
v-model="electType" |
||||
placeholder="请选择查询类型" |
||||
@change="handleSelectChange" |
||||
> |
||||
<el-option |
||||
v-for="item in electTypes" |
||||
:key="item.mtNum" |
||||
:label="item.otherName" |
||||
:value="item.mtNum" |
||||
></el-option> |
||||
</el-select> |
||||
<!-- <el-select |
||||
style="margin: 0 10px" |
||||
v-model="systemType" |
||||
placeholder="请选择系统类型" |
||||
clearable |
||||
> |
||||
<el-option |
||||
v-for="dict in systemTypes" |
||||
:key="dict.dictValue" |
||||
:label="dict.dictLabel" |
||||
:value="dict.dictValue" |
||||
/> |
||||
</el-select> --> |
||||
<div class="success-btn"> |
||||
<el-button type="success" @click="findData">查询</el-button> |
||||
</div> |
||||
<div class="primary-btn"> |
||||
<el-button type="primary" @click="leadingPrint">打印</el-button> |
||||
</div> |
||||
<div class="warning-btn"> |
||||
<el-button type="warning" @click="exportData">导出</el-button> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="charts-table" v-loading="listLoading"> |
||||
<div class="details_ref" ref="details_ref"></div> |
||||
<div class="table-content" style="width: 100%"> |
||||
<el-table |
||||
stripe |
||||
:data="tableData" |
||||
style="width: 100%" |
||||
v-if="tableData && tableData.length > 0" |
||||
> |
||||
<el-table-column |
||||
v-for="header in headers" |
||||
:key="header.key" |
||||
:prop="header.key" |
||||
:label="header.label" |
||||
> |
||||
</el-table-column> |
||||
</el-table> |
||||
<div class="page" v-if="tableData && tableData.length > 0"> |
||||
<el-pagination |
||||
background |
||||
style="width: 100%; height: 20%" |
||||
@size-change="handleSizeChange" |
||||
@current-change="handleCurrentChange" |
||||
:current-page="this.pageParm.page" |
||||
:page-size="10" |
||||
layout="->,total, sizes, prev, pager, next, jumper" |
||||
:page-sizes="[10, 20, 30, 50, 100, 200, 9999]" |
||||
:total="this.pageParm.total" |
||||
> |
||||
</el-pagination> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<el-dialog |
||||
:visible.sync="dialogPrintVisible" |
||||
title="打印预览" |
||||
width="900px" |
||||
> |
||||
<div id="report" ref="report" class="report"> |
||||
<table |
||||
border="1" |
||||
style=" |
||||
table-layout: fixed; |
||||
width: 100%; |
||||
border: 1px solid #e2e6f0; |
||||
margin-bottom: 35px; |
||||
" |
||||
> |
||||
<thead> |
||||
<tr> |
||||
<th rowspan="1" :colspan="headers.length">设备能耗报表</th> |
||||
</tr> |
||||
<tr> |
||||
<th |
||||
align="center" |
||||
v-for="(item, index) in headers" |
||||
:key="index + 2" |
||||
> |
||||
{{ item.label }} |
||||
</th> |
||||
</tr> |
||||
</thead> |
||||
<tr v-for="(item, index) in tableData" :key="index"> |
||||
<td align="center" v-for="(value, key) in item" :key="key"> |
||||
{{ value }} |
||||
</td> |
||||
</tr> |
||||
</table> |
||||
<div |
||||
class="detail" |
||||
style=" |
||||
display: flex; |
||||
flex-direction: row; |
||||
font-size: 14px; |
||||
justify-content: space-between; |
||||
flex-wrap: nowrap; |
||||
width: 40%; |
||||
color: #ffffff; |
||||
" |
||||
> |
||||
<div>操作员: {{ this.userName }}</div> |
||||
<div class="print-date">日期： {{ this.operationDate }}</div> |
||||
</div> |
||||
</div> |
||||
<el-row type="flex" justify="end" style="margin-top: 0.2rem"> |
||||
<el-col :span="2"> |
||||
<div class="info-btn"> |
||||
<el-button type="info" @click="dialogPrintVisible = false" |
||||
>取消</el-button |
||||
> |
||||
</div> |
||||
</el-col> |
||||
<el-col :span="2" style="margin-left: 60px"> |
||||
<div class="success-btn"> |
||||
<el-button type="success" @click="surePrint">确认</el-button> |
||||
</div> |
||||
</el-col> |
||||
</el-row> |
||||
</el-dialog> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import { getDay, format2 } from "@/utils/datetime"; |
||||
import * as echarts from "echarts"; |
||||
import { |
||||
deviceAnalyze, |
||||
deviceAnalyzeExport, |
||||
} from "@/api/centerairC/energyManage"; |
||||
import { cpmList } from "@/api/device/gather"; |
||||
import { listData } from "@/api/system/dict/data"; |
||||
export default { |
||||
data() { |
||||
return { |
||||
listLoading: false, |
||||
dateType: "hour", //默认选择小时 |
||||
timeDate: [], //小时值 |
||||
dayDate: [], //日值 |
||||
monthDate: [], //月值 |
||||
startYear: "", //开始年份 |
||||
endYear: "", //结束年份 |
||||
startTime: "", //开始日期 |
||||
endTime: "", //结束日期 |
||||
// 图例数据 |
||||
timeData: [], |
||||
dataArr: [], |
||||
//表格数据 |
||||
curValue2: [], |
||||
lastValue2: [], |
||||
mom2: [], |
||||
unitValue: "", //单位 |
||||
electType: [], |
||||
electTypes: [], |
||||
selectElect: [], |
||||
// 动态表头 |
||||
headers: [ |
||||
// { key: 'name', label: 'Name' }, |
||||
// { key: 'age', label: 'Age' }, |
||||
// { key: 'gender', label: 'Gender' } |
||||
], |
||||
tableData: [ |
||||
// { name: 'Alice', age: 26, gender: 'Female' }, |
||||
// { name: 'Bob', age: 30, gender: 'Male' }, |
||||
// { name: 'Charlie', age: 25, gender: 'Male' } |
||||
], |
||||
pageParm: { |
||||
page: 1, //开始页面页数，初始页 |
||||
pageSize: 10, //每页的数据条数 |
||||
total: null, //页数总数 |
||||
}, |
||||
dialogPrintVisible: false, |
||||
userName: "", //操作员 |
||||
operationDate: getDay(0), //操作日期 |
||||
systemType: "", //系统类型 |
||||
systemTypes: [], |
||||
electType: "", |
||||
electTypes: [], |
||||
}; |
||||
}, |
||||
mounted() { |
||||
this.initData(); |
||||
this.initializeTimeDate(); |
||||
this.initChart1(); |
||||
window.addEventListener("resize", this.screenAdapter); |
||||
this.screenAdapter(); |
||||
this.userName = sessionStorage.getItem("userName"); |
||||
}, |
||||
destroyed() { |
||||
//与mounted中的监听对应，在组件销毁的时候，需要将监听器取消掉 |
||||
window.removeEventListener("resize", this.screenAdapter); |
||||
}, |
||||
methods: { |
||||
/** 查询系统类型-字典数据列表 */ |
||||
getDictList() { |
||||
return new Promise((resolve, reject) => { |
||||
let data = { |
||||
pageNum: 1, |
||||
pageSize: 100, |
||||
dictType: "sys_type", |
||||
}; |
||||
listData(data) |
||||
.then((response) => { |
||||
this.systemTypes = response.rows; |
||||
if (this.systemTypes.length > 0) { |
||||
this.systemType = this.systemTypes[0].dictValue; |
||||
} |
||||
resolve(); |
||||
}) |
||||
.catch((error) => { |
||||
reject(error); |
||||
}); |
||||
}); |
||||
}, |
||||
/** 查询设备类型列表 */ |
||||
getList() { |
||||
return new Promise((resolve, reject) => { |
||||
let data = { |
||||
pageNum: 1, |
||||
pageSize: 100, |
||||
mtType: "2", // 热量表 |
||||
isUse: "0", |
||||
}; |
||||
cpmList(data) |
||||
.then((response) => { |
||||
// 过滤数据，只保留 system_type = 0 且 grade = 40 的对象 |
||||
this.electTypes = response.rows.filter( |
||||
(item) => item.systemType === "7" && item.grade === 40 |
||||
); |
||||
this.electType = []; |
||||
if (this.electTypes.length > 3) { |
||||
this.electType = [ |
||||
this.electTypes[0].mtNum, |
||||
this.electTypes[1].mtNum, |
||||
this.electTypes[2].mtNum, |
||||
]; |
||||
} else if (this.electTypes.length > 0) { |
||||
this.electType = [this.electTypes[0].mtNum]; |
||||
} |
||||
console.log("this.electTypes", this.electTypes); |
||||
console.log("this.electType", this.electType); |
||||
this.handleSelectChange(); |
||||
resolve(); |
||||
}) |
||||
.catch((error) => { |
||||
reject(error); |
||||
}); |
||||
}); |
||||
}, |
||||
/** 初始化数据 */ |
||||
initData() { |
||||
Promise.all([ |
||||
// this.getDictList(), |
||||
this.getList(), |
||||
]) |
||||
.then(() => { |
||||
this.getTableData(); |
||||
this.getChartsData(); |
||||
}) |
||||
.catch((error) => { |
||||
console.error("数据获取失败:", error); |
||||
}); |
||||
}, |
||||
|
||||
//分页组件切换每页数量 |
||||
handleSizeChange(val) { |
||||
this.pageParm.pageSize = val; |
||||
this.pageParm.page = 1; |
||||
// 更新表格 |
||||
this.getTableData(); |
||||
}, |
||||
//分页组件转页 |
||||
handleCurrentChange(val) { |
||||
this.pageParm.page = val; |
||||
// 更新表格 |
||||
this.getTableData(); |
||||
}, |
||||
// 选择el-select |
||||
handleSelectChange() { |
||||
console.log("----和默认选中值比较", this.electType); |
||||
this.selectElect = this.electType.map((v) => { |
||||
const selectedItem = this.electTypes.find((item) => item.mtNum === v); |
||||
return { |
||||
name: selectedItem ? selectedItem.otherName : "", |
||||
// 如果 selectedItem 存在，则使用其 id 属性作为 value，否则设为 null |
||||
value: selectedItem ? selectedItem.id : null, |
||||
}; |
||||
}); |
||||
console.log("this.selectElect", this.selectElect); |
||||
}, |
||||
// 初始化时间 |
||||
initializeTimeDate() { |
||||
const start = new Date(new Date().setHours(0, 0, 0, 0)); |
||||
const end = new Date(new Date().setHours(23, 59, 59, 59)); |
||||
this.timeDate = [format2(start), format2(end)]; // 更新 |
||||
}, |
||||
// 选择时间类型 |
||||
updateDateType() { |
||||
// this.dateType = this.radio; |
||||
console.log(this.dateType); |
||||
(this.timeDate = []), //小时值 |
||||
(this.dayDate = []), //日值 |
||||
(this.monthDate = []), //月值 |
||||
(this.startYear = ""), //开始年份 |
||||
(this.endYear = ""); //结束年份 |
||||
}, |
||||
// 选中日期事件 |
||||
dateChange() { |
||||
// console.log("打印时间", this.timeform.time1); |
||||
if (!this.dayDate) { |
||||
this.$nextTick(() => { |
||||
this.dayDate = []; |
||||
}); |
||||
} |
||||
if (!this.monthDate) { |
||||
this.$nextTick(() => { |
||||
this.monthDate = []; |
||||
}); |
||||
} |
||||
}, |
||||
// 查询 |
||||
findData() { |
||||
this.pageParm.page = 1; |
||||
console.log("this.dateType", this.dateType); |
||||
console.log("this.timeDate", this.timeDate); |
||||
switch (this.dateType) { |
||||
case "hour": |
||||
if (!this.timeDate) { |
||||
this.showMessage("请选择时间！", "warning"); |
||||
} else { |
||||
this.getTableData(); |
||||
this.getChartsData(); |
||||
} |
||||
break; |
||||
case "day": |
||||
if (this.dayDate.length === 0) { |
||||
this.showMessage("请选择时间！", "warning"); |
||||
} else { |
||||
this.getTableData(); |
||||
this.getChartsData(); |
||||
} |
||||
break; |
||||
case "month": |
||||
if (this.monthDate.length === 0) { |
||||
this.showMessage("请选择时间！", "warning"); |
||||
} else { |
||||
this.getTableData(); |
||||
this.getChartsData(); |
||||
} |
||||
break; |
||||
case "year": |
||||
if (!this.startYear || !this.endYear) { |
||||
this.showMessage("请选择全年份区间！", "warning"); |
||||
} else if (this.startYear > this.endYear) { |
||||
this.showMessage("结束年份要大于开始年份！", "warning"); |
||||
} else { |
||||
this.getTableData(); |
||||
this.getChartsData(); |
||||
} |
||||
break; |
||||
default: |
||||
break; |
||||
} |
||||
}, |
||||
// 显示消息的函数 |
||||
showMessage(message, type) { |
||||
this.$message({ |
||||
message: message, |
||||
type: type, |
||||
}); |
||||
}, |
||||
//请求表格数据 |
||||
getTableData() { |
||||
if (this.dateType == "hour") { |
||||
this.startTime = format2(this.timeDate[0]); |
||||
this.endTime = format2(this.timeDate[1]); |
||||
} else if (this.dateType == "day") { |
||||
this.startTime = this.dayDate.length > 0 ? this.dayDate[0] : ""; |
||||
this.endTime = this.dayDate.length > 0 ? this.dayDate[1] : ""; |
||||
} else if (this.dateType == "month") { |
||||
this.startTime = this.monthDate.length > 0 ? this.monthDate[0] : ""; |
||||
this.endTime = this.monthDate.length > 0 ? this.monthDate[1] : ""; |
||||
} else if (this.dateType == "year") { |
||||
(this.startTime = this.startYear), (this.endTime = this.endYear); |
||||
} |
||||
let data = { |
||||
timeType: this.dateType, |
||||
startTime: this.startTime, |
||||
endTime: this.endTime, |
||||
pageNum: this.pageParm.page, |
||||
pageSize: this.pageParm.pageSize, |
||||
searchParams: this.selectElect, |
||||
systemType: "7", |
||||
}; |
||||
console.log("查询数据参数", data); |
||||
this.listLoading = true; |
||||
deviceAnalyze(data).then((res) => { |
||||
console.log("查询返回", res); |
||||
if (res.code == 200 && res.data.length > 0) { |
||||
// 格式化 data 填充 this.tableData |
||||
this.tableData = res.data[1].timeStr.map((date, index) => { |
||||
const rowData = { date }; |
||||
res.data[2].dataList.forEach((data, dataIndex) => { |
||||
rowData[`data${dataIndex + 1}`] = data.value[index]; |
||||
}); |
||||
return rowData; |
||||
}); |
||||
console.log("tableData", this.tableData); |
||||
console.log("res.data[2].dataList", res.data[2].dataList); |
||||
console.log("this.electTypes", this.electTypes); |
||||
// 格式化 data 填充 header |
||||
this.headers = [ |
||||
{ key: "date", label: "时间" }, |
||||
...res.data[2].dataList.map((data, index) => { |
||||
const matched = this.electTypes.find( |
||||
(item) => item.mtNum === data.name |
||||
); |
||||
const label = matched ? matched.otherName : ""; |
||||
return { |
||||
key: `data${index + 1}`, |
||||
label: label, |
||||
}; |
||||
}), |
||||
]; |
||||
this.pageParm.total = res.data.totalPages; |
||||
console.log("header", this.headers); |
||||
} else { |
||||
this.tableData = []; |
||||
this.headers = []; |
||||
} |
||||
}); |
||||
// Just to simulate the time of the request |
||||
setTimeout(() => { |
||||
this.listLoading = false; |
||||
}, 1.0 * 1000); |
||||
}, |
||||
//请求图表数据 |
||||
getChartsData() { |
||||
console.log("???????????????"); |
||||
debugger; |
||||
this.timeData = []; |
||||
this.dataArr = []; |
||||
if (this.dateType == "hour") { |
||||
this.startTime = format2(this.timeDate[0]); |
||||
this.endTime = format2(this.timeDate[1]); |
||||
} else if (this.dateType == "day") { |
||||
this.startTime = this.dayDate.length > 0 ? this.dayDate[0] : ""; |
||||
this.endTime = this.dayDate.length > 0 ? this.dayDate[1] : ""; |
||||
} else if (this.dateType == "month") { |
||||
this.startTime = this.monthDate.length > 0 ? this.monthDate[0] : ""; |
||||
this.endTime = this.monthDate.length > 0 ? this.monthDate[1] : ""; |
||||
} else if (this.dateType == "year") { |
||||
(this.startTime = this.startYear), (this.endTime = this.endYear); |
||||
} |
||||
let data = { |
||||
timeType: this.dateType, |
||||
startTime: this.startTime, |
||||
endTime: this.endTime, |
||||
pageNum: 0, |
||||
pageSize: 10, |
||||
searchParams: this.selectElect, |
||||
systemType: "7", |
||||
}; |
||||
console.log("查询数据参数", data); |
||||
deviceAnalyze(data).then((res) => { |
||||
console.log("查询返回", res); |
||||
if (res.code == 200 && res.data.length > 0) { |
||||
this.timeData = res.data[1].timeStr; |
||||
// 具体看看怎么拿到x组数据 得到一个数组，对象{name：需要匹配select数据源,data} |
||||
console.log("res.data[2].dataList", res.data[2].dataList); |
||||
this.dataArr = []; |
||||
this.dataArr = res.data[2].dataList; |
||||
this.dataArr.forEach((obj) => { |
||||
const match = this.electTypes.find((s) => s.mtNum === obj.name); |
||||
if (match) { |
||||
obj.name = match.otherName; |
||||
} |
||||
obj.type = "line"; |
||||
obj.smooth = true; |
||||
(obj.sampling = "lttb"), |
||||
(obj.showSymbol = false), |
||||
(obj.data = obj.value); |
||||
delete obj.value; |
||||
}); |
||||
console.log("图表数据", this.dataArr); |
||||
this.option1.series = this.dataArr; |
||||
this.option1.xAxis.data = this.timeData; |
||||
this.option1.yAxis.name = "kwh"; |
||||
this.option1.yAxis.nameTextStyle = { |
||||
color: "rgba(255, 255, 255, 1)", |
||||
fontSize: 12, |
||||
}; |
||||
// 清空图表 |
||||
this.chartInstance1.clear(); |
||||
this.screenAdapter(); |
||||
this.chartInstance1.setOption(this.option1); |
||||
} else { |
||||
this.timeData = []; |
||||
this.curValue2 = []; |
||||
this.lastValue2 = []; |
||||
this.mom2 = []; |
||||
this.option1.series = []; |
||||
this.option1.xAxis.data = []; |
||||
// 清空图表 |
||||
this.chartInstance1.clear(); |
||||
this.screenAdapter(); |
||||
this.chartInstance1.setOption(this.option1); |
||||
} |
||||
}); |
||||
}, |
||||
initChart1() { |
||||
this.chartInstance1 = echarts.init(this.$refs.details_ref); |
||||
this.option1 = { |
||||
tooltip: { |
||||
trigger: "axis", |
||||
// 以下为鼠标hover时的背景颜色 |
||||
showDelay: 0, // 显示延迟，添加显示延迟可以避免频繁切换，单位ms |
||||
axisPointer: { |
||||
type: "shadow", |
||||
shadowStyle: { |
||||
color: "rgba(30, 69, 113, 0.15)", |
||||
width: "", |
||||
}, |
||||
}, |
||||
valueFormatter: function (value) { |
||||
return value + " " + "kwh"; |
||||
}, |
||||
}, |
||||
legend: { |
||||
show: true, |
||||
top: "0%", |
||||
textStyle: { |
||||
fontSize: 14, // 设置图例文字的大小为 14 像素 |
||||
color: "#ffffff", |
||||
}, |
||||
}, |
||||
|
||||
grid: { |
||||
top: "15%", |
||||
left: "3%", |
||||
right: "2%", |
||||
bottom: "25%", |
||||
containLabel: true, |
||||
}, |
||||
xAxis: { |
||||
type: "category", |
||||
//设置为true代表离零刻度间隔一段距离 |
||||
boundaryGap: true, |
||||
// 修饰刻度标签的颜色即x坐标数据 |
||||
axisLabel: { |
||||
// interval: 0, //强制显示所有x轴数据 |
||||
// rotate: 30, //x轴坐标字体倾斜30度 |
||||
color: "rgba(255, 255, 255, 1)", |
||||
}, |
||||
axisTick: { |
||||
show: false, // 不显示坐标轴刻度线 |
||||
}, |
||||
// x坐标轴的颜色 |
||||
axisLine: { |
||||
show: true, |
||||
lineStyle: { |
||||
color: "#365576", |
||||
}, |
||||
}, |
||||
splitLine: { |
||||
lineStyle: { |
||||
color: "#e2e6f0", |
||||
}, |
||||
}, |
||||
}, |
||||
yAxis: { |
||||
min: 0, |
||||
miniInterval: 5, |
||||
type: "value", |
||||
// 修饰刻度标签的颜色即y坐标数据 |
||||
axisLabel: { |
||||
color: "rgba(255, 255, 255, 1)", |
||||
}, |
||||
// 显示y坐标轴 |
||||
axisLine: { |
||||
show: true, |
||||
lineStyle: { |
||||
color: "#365576", // 设置 y 轴线的颜色 |
||||
}, |
||||
}, |
||||
splitLine: { |
||||
lineStyle: { |
||||
color: "#1a3d62", // 设置分割线的颜色 |
||||
type: "dashed", // 设置分割线为虚线 |
||||
}, |
||||
}, |
||||
}, |
||||
// 拖拽X轴 |
||||
dataZoom: [ |
||||
{ |
||||
type: "slider", //inside鼠标缩放 |
||||
show: true, |
||||
height: 15, // 设置控制区域的高度为 20 像素 |
||||
// fillerColor: 'rgba(255, 0, 0, 0.5)', // 设置选中区域的颜色为半透明的红色 |
||||
// backgroundColor: 'rgba(0, 0, 0, 0.1)', // 设置背景颜色为透明度为 0.1 的黑色 |
||||
start: 0, |
||||
end: 100, |
||||
xAxisIndex: [0], |
||||
handleSize: "120%", // 设置滑块大小为默认大小的 120% |
||||
textStyle: { |
||||
fontSize: 12, // 设置字体大小为 12px |
||||
}, |
||||
}, |
||||
], |
||||
series: [], |
||||
}; |
||||
//把配置项给实例对象 |
||||
this.chartInstance1.setOption(this.option1, true); |
||||
}, |
||||
// 折线图自适应 |
||||
screenAdapter() { |
||||
//自己定义的比较合适的适配大小,2.6 mes_ref是图表盒子 |
||||
const titleFontSize = (this.$refs.details_ref.offsetWidth / 100) * 1.8; |
||||
//因为option可以多次配置的，所以这里的option只需要写 需要配置大小的相关数据 |
||||
const adapterOption = { |
||||
//比如fontSize |
||||
textStyle: { |
||||
fontSize: titleFontSize, |
||||
}, |
||||
}; |
||||
//记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关 |
||||
this.chartInstance1.setOption(adapterOption); |
||||
//手动的调用图标对象的resize才能产生效果 |
||||
this.chartInstance1.resize(); |
||||
}, |
||||
// 导出 |
||||
exportData() { |
||||
if (this.dateType == "hour") { |
||||
this.startTime = format2(this.timeDate[0]); |
||||
this.endTime = format2(this.timeDate[1]); |
||||
} else if (this.dateType == "day") { |
||||
this.startTime = this.dayDate.length > 0 ? this.dayDate[0] : ""; |
||||
this.endTime = this.dayDate.length > 0 ? this.dayDate[1] : ""; |
||||
} else if (this.dateType == "month") { |
||||
this.startTime = this.monthDate.length > 0 ? this.monthDate[0] : ""; |
||||
this.endTime = this.monthDate.length > 0 ? this.monthDate[1] : ""; |
||||
} else if (this.dateType == "year") { |
||||
(this.startTime = this.startYear), (this.endTime = this.endYear); |
||||
} |
||||
let data = { |
||||
timeType: this.dateType, |
||||
startTime: this.startTime, |
||||
endTime: this.endTime, |
||||
pageNum: 0, |
||||
pageSize: 10, |
||||
searchParams: this.selectElect, |
||||
systemType: "7", |
||||
}; |
||||
console.log("导出数据参数", data); |
||||
deviceAnalyzeExport(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("导出失败!"); |
||||
} |
||||
}); |
||||
// .catch((err) => { |
||||
// this.$message.error('导出失败!'); |
||||
// }) |
||||
}, |
||||
// 打印 |
||||
leadingPrint() { |
||||
this.dialogPrintVisible = true; |
||||
console.log("头部数据", this.headers); |
||||
console.log("表格数据", this.tableData); |
||||
}, |
||||
// 打印 |
||||
surePrint() { |
||||
const printHTML = document.querySelector("#report").innerHTML; |
||||
// 将打印的区域赋值，进行打印 |
||||
window.document.body.innerHTML = printHTML; |
||||
window.print(); // 调用window打印方法 |
||||
window.location.reload(); // 打印完成后重新加载页面 |
||||
}, |
||||
}, |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.condition { |
||||
display: flex; |
||||
flex-direction: row; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
width: 100%; |
||||
margin-bottom: 0.24rem; |
||||
|
||||
.condition-left { |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: center; |
||||
flex-wrap: wrap; |
||||
|
||||
.years-div { |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: center; |
||||
|
||||
.years-word { |
||||
font-size: 14px; |
||||
margin: 0 5px; |
||||
color: #388ff3; |
||||
} |
||||
} |
||||
|
||||
.time-label { |
||||
font-size: 16px; |
||||
line-height: 7px; |
||||
margin-right: 12px; |
||||
white-space: nowrap; |
||||
} |
||||
} |
||||
} |
||||
.main-content { |
||||
min-height: 6.6rem; |
||||
} |
||||
.charts-table { |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
justify-content: center; |
||||
} |
||||
.elSelectDiv { |
||||
margin-left: 15px; |
||||
width: 250px; |
||||
} |
||||
.details_ref { |
||||
width: 16.5rem; |
||||
height: 3.55rem; |
||||
margin-bottom: 0.39rem; |
||||
margin-left: -0.3rem; |
||||
} |
||||
// 媒体查询，适配大于2000px分辨率的大屏样式 |
||||
@media (min-width: 2000px) { |
||||
.condition { |
||||
.condition-left { |
||||
.years-div { |
||||
.years-word { |
||||
font-size: 0.14rem !important; |
||||
margin: 0 0.05rem !important; |
||||
} |
||||
} |
||||
|
||||
.time-label { |
||||
font-size: 0.16rem !important; |
||||
line-height: 0.07rem !important; |
||||
margin-right: 0.12rem !important; |
||||
} |
||||
} |
||||
} |
||||
.elSelectDiv { |
||||
margin-left: 0.15rem !important; |
||||
width: 2.5rem !important; |
||||
} |
||||
} |
||||
</style> |
||||
@ -1,3 +1,79 @@
|
||||
<template> |
||||
<div>222</div> |
||||
<div class="paramsDetails"> |
||||
<div class="details-content"> |
||||
<div class="details-header"> |
||||
<el-tabs v-model="activeName" @tab-click="handleClick"> |
||||
<el-tab-pane label="设备热量" name="second"> |
||||
<equipment v-if="activeName === 'second'"></equipment> |
||||
</el-tab-pane> |
||||
<el-tab-pane label="设备组热量" name="three"> |
||||
<device-energy v-if="activeName === 'three'"></device-energy> |
||||
</el-tab-pane> |
||||
</el-tabs> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import equipment from "./components/equipment.vue"; |
||||
import DeviceEnergy from "./components/deviceEnergy.vue"; |
||||
export default { |
||||
components: { equipment, DeviceEnergy }, |
||||
data() { |
||||
return { |
||||
activeName: "second", //设备热量 |
||||
}; |
||||
}, |
||||
methods: { |
||||
handleClick(tab, event) { |
||||
console.log(tab, event); |
||||
}, |
||||
}, |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.paramsDetails { |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: stretch; |
||||
justify-content: space-between; |
||||
|
||||
.details-content { |
||||
width: 100%; |
||||
// height: 0.42rem; |
||||
position: relative; |
||||
} |
||||
} |
||||
</style> |
||||
<style scoped> |
||||
.none-div { |
||||
padding-top: 0.31rem; |
||||
} |
||||
|
||||
.none-div >>> .el-tree { |
||||
background: transparent; |
||||
color: #789d9f; |
||||
} |
||||
|
||||
.none-div >>> .el-tree-node:focus > .el-tree-node__content { |
||||
background-color: #00be97; |
||||
color: #fff; |
||||
} |
||||
|
||||
.none-div >>> .el-tree-node__content:hover, |
||||
.none-div >>> .el-upload-list__item:hover { |
||||
background-color: #00be97; |
||||
color: #fff; |
||||
} |
||||
|
||||
.none-div >>> .el-tree-node__content { |
||||
height: 0.48rem; |
||||
justify-content: center; |
||||
} |
||||
|
||||
.none-div >>> .el-tree-node__expand-icon.is-leaf { |
||||
display: none !important; |
||||
} |
||||
</style> |
||||
|
||||
Loading…
Reference in new issue